/* /Pages/BrowserUi.razor.rz.scp.css */
#dojoBdWrap[b-gzk4kn0prz] {
    background: white;
    border-radius: MIN(0.5vw, 1vh);
    margin-top: min(0.7vh, 0.4vw);
    height:96%;
    padding-top:1%
}
#dojoCont[b-gzk4kn0prz] {
    width: 98%;
    height: 98%;
    max-height: 98%;
}
#dojowrap[b-gzk4kn0prz] {
    width: 100%;
    height: 98%;
    margin: 0 15px;
    position: relative;
    font-size: 14px;

}
/* /Pages/Customers/Rfid/Rfid.razor.rz.scp.css */
#rfid .surface[b-f8u27w34kg] 
{
    height: 96%;
}
/* /Pages/Events/ParkingLog/ParkingLog.razor.rz.scp.css */
[b-b3jc6jwssi] .datesField {
   display: flex;
   align-items: flex-end;
   justify-content: flex-start;
   gap: 8px;
   width: 100%;
   height: 100%;
}
.datesField >  div[b-b3jc6jwssi] {
   display: flex;
   flex-direction: column;
   gap: 8px;
   align-items: flex-end;
   justify-content: flex-start;
   height: 100%;
}
[b-b3jc6jwssi] .k-table-td[data-col-index="0"]  {
   align-content: center;
} 
[b-b3jc6jwssi] .k-filtercell-wrapper 
{
   display: flex;
   justify-content: center;
}
 [b-b3jc6jwssi] .title{
   display: flex;
   justify-content: space-between;
   align-items: center;
}

[b-b3jc6jwssi] .checkBox {
   display: flex;
   align-items: center;
   justify-content: center;
}
[b-b3jc6jwssi] .checked-button {
   background-color: #3E5394;
   color: white;
}
[b-b3jc6jwssi] .comment-center{
   display: flex;
   justify-content: center;
}
.k-dropdown .k-list-container[b-b3jc6jwssi] {
   position: relative;
   z-index: 1000;
}
[b-b3jc6jwssi] .surface{
   width: auto;
   overflow:hidden;
 }
.none[b-b3jc6jwssi]{
   display:none;
 }
#parkingLog[b-b3jc6jwssi]  .k-table-row.selected-row {
    background-color: #BDC3C7;
}
#parkingLog[b-b3jc6jwssi]  .k-table-row.k-expanded {
    background-color: #d7dadb;
}
.telerik-row:hover[b-b3jc6jwssi] {
    background-color: #f0f0f0; 
    cursor: pointer;
}
.telerik-row.selected[b-b3jc6jwssi] {
    background-color: #d0e7ff; 
    color: #333;
}
[b-b3jc6jwssi] .grid-reduce-row-height .k-grid-header .k-table-th,
.grid-reduce-row-height .k-grid-content .k-table-td[b-b3jc6jwssi] {
    padding: 2px 4px;
    font-size: 10px;
}

[b-b3jc6jwssi] .k-grid-toolbar {
    display: flex;
    justify-content: end;
}

[b-b3jc6jwssi] .k-grid .k-table-thead .k-table-row .select-field[data-col-index="1"] .k-link {
    display: none;
}
#toolbar-total[b-b3jc6jwssi] {
    padding-right: 0.3vw;
}
#toolbar-pagginator-switch[b-b3jc6jwssi] {
    padding-right: 0.3vw;
}
[b-b3jc6jwssi] .k-grid tr.no-children td.k-hierarchy-cell * {
    display: none;
}

[b-b3jc6jwssi] .k-grid tr.no-children td.k-hierarchy-cell {
    pointer-events: none;
}

[b-b3jc6jwssi] .child-table .k-grid-pager {
    display: none;
}
/* /Pages/Events/TrafficLog/TrafficLog.razor.rz.scp.css */
[b-32i8lv7rvk] .datesField {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;

    gap: 8px;
    width: 100%;
    height: 100%;
}
.datesField > div[b-32i8lv7rvk] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    height: 100%;

}
.wrapper[b-32i8lv7rvk] {
    display: flex;
    gap: 20px;
    flex-direction: column;
}
.main[b-32i8lv7rvk] {
    display:flex;
    gap: 20px;
}
[b-32i8lv7rvk] .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
[b-32i8lv7rvk] .buttons {
    display: flex;
    gap: 10px;
    margin: auto;
    justify-content: flex-end;
    padding-bottom: 0.5%;
}
[b-32i8lv7rvk] .k-table-td[data-col-index="0"] {
    overflow: hidden;
    align-content: center;
}

[b-32i8lv7rvk] .k-filtercell-wrapper {
    display: flex;
    justify-content: center;
}

[b-32i8lv7rvk] .checkBox {
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-32i8lv7rvk] .checked-button {
    background-color: #3E5394;
    color: white;
}
    .dashboard[b-32i8lv7rvk] {
    background-color: #465D9E;
    color: white;
    border-radius: MIN(0.5vw, 1vh);
    padding: 1.3vh;
    height: 9vh;
    display: flex;
}

.parkinglot-name[b-32i8lv7rvk] {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    width: 15%;
}

.name[b-32i8lv7rvk] {
    font-weight: 700;
    font-size: 3.1rem;
    letter-spacing: 0.05em;
    font-family: 'Arial', sans-serif;
    text-align: center;
}

.street[b-32i8lv7rvk] {
    text-align: center;
}

.custom-circular-gauge[b-32i8lv7rvk] {
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4vh;
}

.circular-gauge-item[b-32i8lv7rvk] {
    display: flex;
    width: 15%;
    align-items: center;
    gap: 0.7vh;
    justify-content: end;
}

.line[b-32i8lv7rvk] {
    width: 2px;
    height: 100%;
    background: linear-gradient( to bottom, transparent, white 50%, transparent );
}

.selected-row[b-32i8lv7rvk] {
    background-color: #0000ff77;
}

.telerik-row:hover[b-32i8lv7rvk] {
    background-color: #f0f0f0;
    cursor: pointer;
}

.telerik-row.selected[b-32i8lv7rvk] {
    background-color: #d0e7ff;
    color: #333;
}
.custom-badge[b-32i8lv7rvk] {
    margin: 5px;
}
.k-badge[b-32i8lv7rvk] {
    margin: 5px;
}
[b-32i8lv7rvk] .grid-reduce-row-height .k-grid-header .k-table-th,
.grid-reduce-row-height .k-grid-content .k-table-td[b-32i8lv7rvk] {
    padding: 2px 4px;
    font-size: 10px;
}
[b-32i8lv7rvk] .k-grid-toolbar {
    display: flex;
    justify-content: end;
}
[b-32i8lv7rvk] .k-badge-solid-success {
    border-color: #49915c;
    color: var(--kendo-color-on-success, #ffffff);
    background-color: #49915c;
}
.ass[b-32i8lv7rvk] {
    display: flex;
    justify-content: space-between
}
.badge-container[b-32i8lv7rvk] {
    display: flex;
    justify-content: space-between;
}
/* /Pages/Lists/Calendar/Calendar.razor.rz.scp.css */
#calendar .surface[b-o45zkbx2di] {
    min-height: 98vh;
}
#calendar[b-o45zkbx2di]  .k-scheduler-footer {
    display: none;
}
.k-form-field label[b-o45zkbx2di]
{
    display:block;
}
#calendar_crud_buttons[b-o45zkbx2di] {
    text-align: right;
    padding-top: 1vh;
    padding-bottom:2vh;
}
#calendar_crud_buttons[b-o45zkbx2di]  button {
    margin-left: 0.3vw;
}
#calendar_field[b-o45zkbx2di] {
    padding-bottom: 0;
    padding-top: 3vh;
}
.k-window-content label[b-o45zkbx2di] {
    display:block;
    padding-bottom: 1vh;
}
[b-o45zkbx2di] .k-window-content .k-textbox {
    padding-bottom: 1vh;
    color: red;
} 
/* /Pages/Lists/PriceRate/PriceRate.razor.rz.scp.css */
#priceRate[b-7c235lfe4s]  .surface-popout {
    overflow: auto;
}
[b-7c235lfe4s] .k-grid-toolbar {
    display: flex;
    justify-content: end;
}
#priceRate[b-7c235lfe4s]  .k-table-row.selected-row {
    background-color: #BDC3C7;
}
[b-7c235lfe4s] .checkBox {
    display: flex;
    align-items: center;
    justify-content: center;
}
[b-7c235lfe4s] .k-table-td[data-col-index="0"] {
    align-content: center;
}

[b-7c235lfe4s] .k-filtercell-wrapper {
    display: flex;
    justify-content: center;
}
[b-7c235lfe4s] .k-grid .k-table-thead .k-table-row .k-table-th[data-col-index="0"] .k-link {
    display: none;
}
[b-7c235lfe4s] .k-grid-toolbar {
    display: flex;
    justify-content: end;
}
/* /Pages/Lists/PriceRate/PriceRateForm.razor.rz.scp.css */
.title[b-4n0bmyp9bb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.group-lable[b-4n0bmyp9bb] {
    font-weight: bold;
    font-family: var(--kendo-font-family, inherit);
}
/* /Pages/Login/Login.razor.rz.scp.css */
#login[b-gelithhg5g] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

h1[b-gelithhg5g] {
    color: white;
    padding: 7vh 1vw;
    font-weight: 400;
    font-size: MIN(1.5vw, 2.8vh);
}
:focus-visible[b-gelithhg5g]
{
    outline:0;
}

#left[b-gelithhg5g]  svg {
    right: -40%;
    bottom: 10%;
    position: absolute;
    width: 130%;
}

#login-surface[b-gelithhg5g] {
    display: flex;
    box-shadow: 0 0.3vh 1vh 0vh #ccc;
    padding: 1vh;
    border-radius: min(1vw, 1vh);
    min-height: 430px;
    align-self: center;
    background-color: white;
    width: 35%;
    min-width: 400px;
}

#login[b-gelithhg5g]  span.k-input-solid,
#login[b-gelithhg5g]  span.k-input-solid:focus {
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    border-radius: 0;
    display: block;
    box-shadow: none;
}
#login[b-gelithhg5g]  span.k-form-error {
    position: absolute;
    top: -45%;
}

#left[b-gelithhg5g] {
    background: linear-gradient(202.34deg, #5672B3 0%, #3A4D8F 100%);
    border-radius: min(1vw, 1vh);
    width: 40%;
    position: relative;
    overflow: hidden;


}
@media only screen and (max-width: 1200px) {
    #left[b-gelithhg5g]
    {
        display: none;
    }
}
#form[b-gelithhg5g] {
    height: 46vh;
    padding: MIN(3vh,3vw) MIN(1vw,1vh) 2% 4%;
    display: grid;
    width: 50%;
    min-width:360px;
}

#form img[b-gelithhg5g] {
	justify-self: center;
	max-height: MIN(18vh,18vw);
	max-width: MIN(25vh,25vw);
	padding-bottom: min(1vh, 1vw);
}
	#form img.default-logo[b-gelithhg5g] {
		padding-top: min(4vh, 4vw);
		padding-bottom: min(4vh, 4vw);
	}

#login[b-gelithhg5g]  #btn-forgot {
	justify-self: left;
	height: 6vh;
	color: var(--kendo-color-primary);
	font-weight: bold;
}

#login[b-gelithhg5g]  .k-form-buttons {
    justify-content: right;
    padding-top: 2%;
}
#form[b-gelithhg5g]  .k-form-field {
    padding-bottom: 3vh;
    position: relative;
}
#left[b-gelithhg5g]  svg#cloud {
	top: 9vh;
	width: 31vh;
	right: MIN(-4vw, -16%);
}
#left[b-gelithhg5g]  svg#powered {
	bottom: 2vh;
	width: 9vw;
	left: 1vw;
}
/* /Pages/Login/LoginLayout.razor.rz.scp.css */
video[b-6pc7am74bf], img[b-6pc7am74bf] {
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	z-index: -1;
}
img[b-6pc7am74bf]
{
	width:100%;
}
/* /Pages/Statistics/CurrentActivityReports/ComparisonArrow.razor.rz.scp.css */
.comparison-arrow[b-1uaosb1nq2] {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.comparison-arrow svg[b-1uaosb1nq2] {
    width: 18px;
    height: 18px;
}

.comparison-arrow-good[b-1uaosb1nq2] {
    color: #2e7d32;
}

.comparison-arrow-bad[b-1uaosb1nq2] {
    color: #c62828;
}

.comparison-arrow-neutral[b-1uaosb1nq2] {
    color: #9e9e9e;
}
/* /Pages/Statistics/CurrentActivityReports/CurrentActivityReport.razor.rz.scp.css */
/* Root layout (.statistics-layout) lives in wwwroot/css/statistics.css so
   every Statistics dashboard shares the same outer gutters and viewport
   lock. This file only adds CurrentActivity-specific tweaks. */

.stat-cards[b-jtz0fd9ayk] {
    display: flex;
    gap: 8px;
    margin-bottom: 0;
}

.stat-card[b-jtz0fd9ayk] {
    flex: 1;
    background-color: white;
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stat-card-highlighted[b-jtz0fd9ayk] {
    border: 1.5px solid #3b5998;
}

.stat-card-header[b-jtz0fd9ayk] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.stat-card-label[b-jtz0fd9ayk] {
    font-size: 0.75rem;
    color: #6c757d;
    font-family: 'Segoe UI', sans-serif;
}

.stat-card-icon[b-jtz0fd9ayk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: #e9ecef;
    color: #1a2b5f;
    flex-shrink: 0;
}

.stat-card-icon-active[b-jtz0fd9ayk] {
    background-color: #dce3f5;
}

.stat-card-value[b-jtz0fd9ayk] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #212529;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.stat-card-placeholder[b-jtz0fd9ayk] {
    color: #adb5bd;
}

.stat-card-footer[b-jtz0fd9ayk] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
}

.stat-card-footer[b-jtz0fd9ayk]  .comparison-arrow + .stat-card-direction,
.stat-card-footer[b-jtz0fd9ayk]  .comparison-arrow {
    margin-right: 0;
}

.stat-card-footer .stat-card-direction[b-jtz0fd9ayk] {
    margin-left: -3px;
}

.stat-card-direction[b-jtz0fd9ayk] {
    font-size: 0.85rem;
    font-weight: 500;
    font-family: 'Segoe UI', sans-serif;
}

.stat-card-direction-good[b-jtz0fd9ayk] {
    color: #2e7d32;
}

.stat-card-direction-bad[b-jtz0fd9ayk] {
    color: #c62828;
}

.stat-card-direction-neutral[b-jtz0fd9ayk] {
    color: #9e9e9e;
}

.stat-card-description[b-jtz0fd9ayk] {
    font-size: 0.75rem;
    color: #6c757d;
    font-family: 'Segoe UI', sans-serif;
    font-weight: 400;
}

.current-activity-tab[b-jtz0fd9ayk] {
    flex: 1;
    /* No shared white backdrop — each child component paints its own cards. */
    min-height: 0;
    overflow: auto;
}

.tab-loader[b-jtz0fd9ayk] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.tab-placeholder[b-jtz0fd9ayk] {
    color: #6c757d;
    padding: 24px;
    text-align: center;
}

h3[b-jtz0fd9ayk] {
    color: #1a2b5f;
    font-weight: 700;
    font-size: 1.4rem;
    font-family: 'Segoe UI', sans-serif;
    margin-bottom: 12px;
}
/* /Pages/Statistics/CurrentActivityReports/CurrentDwellReport.razor.rz.scp.css */
/* Each block paints its own white card; gaps between rows let the page
   background show through. */

.dwell-report[b-vwfxuwxqnv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Fills the parent tab container; the parent (.current-activity-tab) is
       locked to viewport height and handles overflow internally. */
    height: 100%;
    background-color: transparent;
}

.dwell-row-1[b-vwfxuwxqnv] {
    display: flex;
    gap: 8px;
    flex: 0 0 360px;
}

.dwell-row-filter[b-vwfxuwxqnv] {
    flex: 0 0 auto;
}

/* .k-button-group base styles live in statistics.css. */

.dwell-row-2[b-vwfxuwxqnv] {
    display: flex;
    gap: 8px;
    /* Absorbs the remaining vertical space below row-1 + filter row.
       min-height: 0 lets it shrink so internal grids/charts scroll instead
       of forcing a page-level scroll. */
    flex: 1 1 360px;
    min-height: 0;
}

.dwell-cell[b-vwfxuwxqnv] {
    padding: 12px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.cell-35[b-vwfxuwxqnv] {
    flex: 0 0 calc(35% - 4px);
}

.cell-65[b-vwfxuwxqnv] {
    flex: 1 1 calc(65% - 4px);
}

.dwell-cell[b-vwfxuwxqnv]  .k-chart,
.dwell-cell[b-vwfxuwxqnv]  .k-grid {
    flex: 1;
    min-height: 0;
}

/* Group-mode search box mustn't push the grid past the card; the grid below
   it absorbs whatever height is left. */
.group-search[b-vwfxuwxqnv] {
    flex: 0 0 auto;
    margin-bottom: 8px;
}

.dwell-cell.cell-35[b-vwfxuwxqnv]  .k-chart {
    min-height: 220px;
}

/* Fixed-width pills so toggling labels doesn't reflow the chart header. */
.period-badge[b-vwfxuwxqnv] {
    width: 180px;
    height: 26px;
    overflow: hidden;
}

/* Right-hand side panel cards (DwellAvgBy*) reuse the shared .legend-card
   visuals for consistency with the donut legend, but stack vertically
   inside the narrow column. */
.kind-cards[b-vwfxuwxqnv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    flex: 1;
}

/* Anomaly variant of the shared legend card — soft red surface + red note.
   Targets only the kind-cards column so donut-side legend cards aren't
   accidentally affected. */
.kind-cards .legend-card-anomaly[b-vwfxuwxqnv] {
    background-color: #fdecec;
}

.legend-card-anomaly-note[b-vwfxuwxqnv] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #c62828;
    margin-top: 2px;
}

/* Over24Count cell (DwellGrid) — red when there are anomalies. */
.anomaly-cell[b-vwfxuwxqnv] {
    color: #c62828;
    font-weight: 600;
}

/* Donut chart fills the wrapper height (shared rules in statistics.css). */
.donut-wrapper[b-vwfxuwxqnv]  .k-chart {
    flex: 1;
}
/* /Pages/Statistics/CurrentActivityReports/CurrentOccupationReport.razor.rz.scp.css */
/* Each block paints its own white card; gaps between rows let the page
   background show through (grey). */

.occupation-report[b-8jfm338x1c] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Fills the parent tab container; the parent (.current-activity-tab)
       handles overflow if any tab outgrows the viewport. */
    height: 100%;
    background-color: transparent;
}

.occupation-row-1[b-8jfm338x1c] {
    display: flex;
    gap: 8px;
    /* Lock the height so the donut + lot bar don't reflow when the row-2
       filter switches between PlateType / Group / VehicleType (each tab has
       a slightly different intrinsic height). */
    flex: 0 0 360px;
}

.occupation-row-filter[b-8jfm338x1c] {
    flex: 0 0 auto;
}

/* Mirror OccupationReport's report-card-title + button group pill styling so
   the filter row visually matches the legacy Occupation report. */
/* .report-card-title and .k-button-group base styles live in statistics.css. */

.occupation-row-2[b-8jfm338x1c] {
    display: flex;
    gap: 8px;
    /* Absorbs the remaining vertical space below row-1 + filter row so the
       cards reach the bottom of the tab. min-height: 0 lets it shrink when
       the viewport is short so internal grids/charts scroll instead of
       pushing the page taller. */
    flex: 1 1 360px;
    min-height: 0;
}

.occupation-cell[b-8jfm338x1c] {
    padding: 12px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.cell-35[b-8jfm338x1c] {
    flex: 0 0 calc(35% - 4px);
}

.cell-65[b-8jfm338x1c] {
    flex: 1 1 calc(65% - 4px);
}

/* Row 2 reverses the balance — the group grid (right side) needs more room
   than the hour-flow line chart (left side). */
.occupation-row-2 .cell-35[b-8jfm338x1c] {
    flex: 0 0 calc(60% - 4px);
}

/* Card-title height + a bit so the right-side panel (grid or vehicle donut)
   starts at the same y as the neighbouring chart's plot area. */
.occupation-row-2 .cell-35[b-8jfm338x1c]  .k-grid {
    margin-top: 4px;
}

.occupation-row-2 .cell-65[b-8jfm338x1c] {
    flex: 1 1 calc(40% - 4px);
}

.occupation-cell[b-8jfm338x1c]  .k-chart,
.occupation-cell[b-8jfm338x1c]  .k-grid {
    flex: 1;
}

/* The lot donut needs a generous square area; legend cards sit below. */
.occupation-cell.cell-35[b-8jfm338x1c]  .k-chart {
    min-height: 220px;
}

/* The base .card / .card-title / .card-subtitle / .empty-state come from
   statistics.css — the override below adds an icon-friendly flex layout to
   .card-title that's specific to this report. */
.card-title[b-8jfm338x1c] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* OccupationReport-specific .period-badge tweaks:
   - right: 34px aligns the badge with the bar chart's plot-area right edge
     (Telerik pads ~28px for the value-axis last tick).
   - .period-badge-flush snaps to the card's right edge for cards that wrap
     a grid (no chart padding to compensate for).
   - .period-badge-line uses 16px because the line chart has a different
     right gutter than the bar chart. */
.period-badge[b-8jfm338x1c] {
    right: 34px;
    width: 180px;
    height: 26px;
    overflow: hidden;
}

.period-badge.period-badge-flush[b-8jfm338x1c] {
    right: 12px;
}

.period-badge.period-badge-line[b-8jfm338x1c] {
    right: 16px;
}

[b-8jfm338x1c] .group-search {
    margin-bottom: 8px;
    width: 100%;
}

/* Darken the grid header row to make it stand apart from the data rows. */
[b-8jfm338x1c] .k-grid-header,
[b-8jfm338x1c] .k-grid-header-wrap,
[b-8jfm338x1c] .k-grid .k-table-thead,
[b-8jfm338x1c] .k-grid .k-header {
    background-color: #e9ecef;
    color: #495057;
    font-weight: 500;
}

/* Average column: trend arrow + number, kept compact so the cell width is
   driven by the title, not the arrow. */
.avg-cell[b-8jfm338x1c] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
    width: 100%;
}

.avg-cell-arrow[b-8jfm338x1c]  .comparison-arrow svg {
    width: 12px;
    height: 12px;
}

/* Occupancy traffic-light — coloured pill in the group grid's "current" cell. */
.occ-badge[b-8jfm338x1c] {
    display: block;
    text-align: center;
}

.occ-cell-critical[b-8jfm338x1c] {
    background-color: rgba(220, 53, 69, 0.25);
    color: #842029;
    border-color: rgba(220, 53, 69, 0.45);
}

.occ-cell-warning[b-8jfm338x1c] {
    background-color: rgba(253, 126, 20, 0.25);
    color: #7d3800;
    border-color: rgba(253, 126, 20, 0.45);
}

.occ-cell-caution[b-8jfm338x1c] {
    background-color: rgba(255, 193, 7, 0.25);
    color: #664d03;
    border-color: rgba(255, 193, 7, 0.45);
}

.occ-cell-normal[b-8jfm338x1c] {
    background-color: rgba(25, 135, 84, 0.25);
    color: #0a3622;
    border-color: rgba(25, 135, 84, 0.45);
}

.kind-cards[b-8jfm338x1c] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    flex: 1;
    /* Telerik chart adds ~16px of internal top padding before the plot area;
       nudge the cards down by the same amount so the first card top lines up
       with the chart's top gridline (where Y=80 sits). */
    margin-top: 16px;
}

.kind-card[b-8jfm338x1c] {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    border-left: 4px solid #1a2b5f;
    background-color: #f8f9fa;
    border-radius: 4px;
}

.kind-card-label[b-8jfm338x1c] {
    font-size: 0.8rem;
    color: #6c757d;
}

.kind-card-value[b-8jfm338x1c] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a2b5f;
}

/* Donut chart fills the wrapper height (shared rules in statistics.css). */
.donut-wrapper[b-8jfm338x1c]  .k-chart {
    flex: 1;
}
/* /Pages/Statistics/CurrentActivityReports/CurrentRecognitionRatesReport.razor.rz.scp.css */
/* Each block gets its own white card; the gaps between them let the page
   background show through (grey), matching the dashboard look in the mockup. */

.recognition-report[b-wsxvh2b1m7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Fills the parent tab; can grow past it when row min-heights demand more
       space (parent .current-activity-tab handles the scroll). */
    min-height: 100%;
    background-color: transparent;
}

.recognition-row-1[b-wsxvh2b1m7] {
    display: flex;
    gap: 8px;
    flex: 0 0 25%;
    min-height: 180px;
}

.recognition-cell[b-wsxvh2b1m7] {
    padding: 12px;
    position: relative;
}

.cell-35[b-wsxvh2b1m7] {
    flex: 0 0 calc(35% - 4px); /* account for half the 8px gap */
}

.cell-65[b-wsxvh2b1m7] {
    flex: 1 1 calc(65% - 4px);
}

/* Donut chart sits inside .cell-35; the Telerik chart reserves room for a
   legend even when one is hidden, leaving a visible gap between the title and
   the ring. Pull the chart up a notch so the donut hugs the title. */
.cell-35[b-wsxvh2b1m7]  .k-chart {
    margin-top: -8px;
}

/* .donut-wrapper / .donut-center come from statistics.css; only the centre
   value font-size is overridden here (recognition uses a slightly larger
   number than the other reports). */
.donut-center-value[b-wsxvh2b1m7] {
    font-size: 1.5rem;
}

.recognition-row-2[b-wsxvh2b1m7] {
    flex: 1 1 50%;
    padding: 12px;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.recognition-row-2[b-wsxvh2b1m7]  .k-grid {
    flex: 1;
}

.recognition-row-3[b-wsxvh2b1m7] {
    flex: 0 0 25%;
    padding: 12px;
    min-height: 140px;
    position: relative;
}

/* Recognition's pill grows with content — terminal names can be long. */
.period-badge[b-wsxvh2b1m7] {
    max-width: 320px;
    height: 26px;
    overflow: hidden;
}

/* Sit the time-window badge to the left of the terminal-name badge so they
   don't overlap. Terminal badge max-width is 320px + 8px gap. */
.period-badge.period-badge-hours[b-wsxvh2b1m7] {
    right: 344px;
    width: auto;
    max-width: none;
    padding: 4px 10px;
}

[b-wsxvh2b1m7] .chart-tooltip-title {
    font-weight: 600;
    margin-bottom: 4px;
}

[b-wsxvh2b1m7] .chart-tooltip-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    line-height: 1.4;
}

[b-wsxvh2b1m7] .chart-tooltip-swatch {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

[b-wsxvh2b1m7] .chart-tooltip-name {
    flex: 1;
}

[b-wsxvh2b1m7] .chart-tooltip-value {
    font-weight: 600;
}

/* Darken the grid header row to make it stand apart from the data rows. */
[b-wsxvh2b1m7] .k-grid-header,
[b-wsxvh2b1m7] .k-grid-header-wrap,
[b-wsxvh2b1m7] .k-grid .k-table-thead,
[b-wsxvh2b1m7] .k-grid .k-header {
    background-color: #e9ecef;
    color: #495057;
    font-weight: 500;
}

/* Unrecognized % traffic-light — coloured pill (matches TlsCertificates expiry badge) */
.unrec-badge[b-wsxvh2b1m7] {
    display: block;
    text-align: center;
}

.unrec-cell-critical[b-wsxvh2b1m7] {
    background-color: rgba(220, 53, 69, 0.25);
    color: #842029;
    border-color: rgba(220, 53, 69, 0.45);
}

.unrec-cell-warning[b-wsxvh2b1m7] {
    background-color: rgba(253, 126, 20, 0.25);
    color: #7d3800;
    border-color: rgba(253, 126, 20, 0.45);
}

.unrec-cell-normal[b-wsxvh2b1m7] {
    background-color: rgba(25, 135, 84, 0.25);
    color: #0a3622;
    border-color: rgba(25, 135, 84, 0.45);
}

/* Plate-type dot colours used by the donut legend cards — set as CSS vars so
   the markup can apply them via .dot-unreadable / .dot-unknown / .dot-rest. */
.dot-unreadable[b-wsxvh2b1m7] {
    --dot-color: #F0A04B;
}

.dot-unknown[b-wsxvh2b1m7] {
    --dot-color: #D46A6A;
}

.dot-rest[b-wsxvh2b1m7] {
    --dot-color: #B0B8CC;
}
/* /Pages/Statistics/CurrentActivityReports/CurrentRevenueReport.razor.rz.scp.css */
/* Each block gets its own white card; the gaps between them let the page
   background show through (grey), matching the dashboard look. */

.revenue-report[b-n1och0n84t] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Fills the parent tab container; the parent (.current-activity-tab)
       handles overflow if any tab outgrows the viewport. */
    height: 100%;
    background-color: transparent;
}

.revenue-row-1[b-n1och0n84t] {
    display: flex;
    gap: 8px;
    /* Absorbs the leftover vertical space below row-2 without growing past
       the parent tab. Min-height keeps the donut readable on shorter
       viewports; legend cards inside scroll if they overflow. */
    flex: 1 1 360px;
    min-height: 0;
}

.revenue-row-2[b-n1och0n84t] {
    display: flex;
    gap: 8px;
    flex: 0 0 320px;
}

/* Legend cards inside row-1 take only the natural height of their content,
   so the row above (donut/bar chart) absorbs the leftover vertical space.
   max-height + scroll keeps overflow contained when there are many cards. */
.revenue-row-1[b-n1och0n84t]  .legend-cards {
    flex: 0 0 auto;
    overflow-y: auto;
    max-height: 50%;
    min-height: 0;
    align-content: flex-start;
}

/* Match POS cards' compact height — same vertical padding either side. */
.revenue-row-1[b-n1och0n84t]  .legend-card {
    align-items: center;
}

.revenue-cell[b-n1och0n84t] {
    padding: 12px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.cell-35[b-n1och0n84t] {
    flex: 0 0 calc(35% - 4px); /* account for half the 8px gap */
}

.cell-65[b-n1och0n84t] {
    flex: 1 1 calc(65% - 4px);
}

/* Wide-donut variant: kicks in when the donut has too many legend cards to
   fit the 35%-width column without overflowing. The donut card grows to 60%
   of the row and the lots-bar shrinks to 40%. */
.cell-donut-wide[b-n1och0n84t] {
    flex: 0 0 calc(60% - 4px);
}

.cell-lots-narrow[b-n1och0n84t] {
    flex: 1 1 calc(40% - 4px);
}

.revenue-cell[b-n1och0n84t]  .k-chart {
    flex: 1;
}

/* Donut chart fills the wrapper height (shared rules in statistics.css). */
.donut-wrapper[b-n1och0n84t]  .k-chart {
    flex: 1;
}

/* Revenue's badges are fixed-width so toggling between "N aikšt." and a long
   lot/terminal title doesn't reflow the chart header — long titles ellipsise
   instead. The dynamic width is set inline via LotBadgeWidthPx; this just
   locks the height + overflow so the pill keeps its shape. */
.period-badge[b-n1och0n84t] {
    height: 26px;
    overflow: hidden;
}
/* /Pages/Statistics/CurrentActivityReports/RecognitionRates.razor.rz.scp.css */
.topCharts[b-hbd4g5zf8t] {
    display: flex;
}

[b-hbd4g5zf8t] .k-chart {
    display: flex;
    flex-grow: 1;
    border: 0.5px solid LightGray;
    padding: 0px 4px 4px 0px;
}
#sucessScore[b-hbd4g5zf8t]
{
    position:absolute;
    left:45%;
}
@media (orientation: portrait) {
    .topCharts[b-hbd4g5zf8t] {
        flex-direction: column;
    }
}

.donut-center-text[b-hbd4g5zf8t] {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1a2b5f;
}

.level2[b-hbd4g5zf8t] {
    display: flex;
}
/* /Pages/Statistics/OccupationReports/OccupationPeakReport.razor.rz.scp.css */

/* .filtersLevel1 and .filtersLevel2 base styles live in statistics.css. */

.sc-page-layout[b-rr3c2npa5d] {
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex: 1;
    min-width: 0;
    align-items: flex-start;
}

.sc-filters h4[b-rr3c2npa5d] {
    color: #1a2b5f;
    font-weight: 700;
    font-size: 1rem;
    font-family: 'Segoe UI', sans-serif;
    margin-bottom: 8px;
    margin-top: 12px;
}

.sc-filters[b-rr3c2npa5d] {
    padding: 10px;
    background-color: white;
    min-width: 220px;
    width: max-content;
    flex-shrink: 0;
    margin-top: 0;
    box-sizing: border-box;
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.charts-row[b-rr3c2npa5d] {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-bottom: 8px;
}

.charts-row > .report-card:first-child[b-rr3c2npa5d] {
    flex: 0 0 35%;
    max-width: 35%;
    min-width: 0;
    padding-top: 36px;
}

.charts-row > .report-card:not(:first-child)[b-rr3c2npa5d] {
    flex: 1 1 0;
    min-width: 0;
    padding-top: 36px;
}

/* .month-nav and .month-nav-btn live in statistics.css. */

/* .report-card base styles live in statistics.css. */

.summary-loader[b-rr3c2npa5d] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 300px;
}

.no-groups-placeholder[b-rr3c2npa5d] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #adb5bd;
    font-size: 4rem;
}

/* .report-card-title comes from statistics.css. */
.filter-label[b-rr3c2npa5d] {
    font-size: 1.3vh;
    color: slategrey;
}

.group-section[b-rr3c2npa5d] {
    border: 0.7px solid LightGray;
    border-radius: 4px;
    padding: 6px;
    margin-bottom: 8px;
}

.group-section-header[b-rr3c2npa5d] {
    cursor: pointer;
    margin: 0;
}

[b-rr3c2npa5d] .k-splitter {
    background-color: transparent;
    border: none;
}

[b-rr3c2npa5d] .k-splitter-flex .k-splitbar {
    position: static;
    flex: 0 0 auto;
    background-color: transparent;
    border: none;
}

[b-rr3c2npa5d] .k-chart {
    padding: 0px 4px 4px 0px;
}

[b-rr3c2npa5d] .k-input-inner {
    font-size: x-small;
    color: slategrey;
}

/* .k-button-group base styles live in statistics.css. */

[b-rr3c2npa5d] .k-checkbox-wrap {
    margin-right: 8px;
    margin-bottom: 4px;
}


/* Legend cards in this report click to toggle a series on/off. */
.legend-card[b-rr3c2npa5d] {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

/* Plate-type dot colours used by the donut legend cards (set as CSS vars
   so the markup can apply them via .dot-online / .dot-short-term / etc.). */
.dot-online[b-rr3c2npa5d] {
    --dot-color: #48B8A0;
}

.dot-short-term[b-rr3c2npa5d] {
    --dot-color: #F0A04B;
}

.dot-subscriber[b-rr3c2npa5d] {
    --dot-color: #2E5FA1;
}

/* Override the shared .legend-card-line geometry — peak limits use a taller
   line marker (12px) so the dot sits centred on the dotted line. */
.legend-card-line[b-rr3c2npa5d] {
    height: 12px;
    margin-top: 4px;
}

/* Static legend card — shown when the chart line is suppressed (limit too
   far above peak) but we still want to display the limit value. No click
   handler, no hover effect, slightly muted look so the user understands
   the card is informational rather than a visibility toggle. */
.legend-card-static[b-rr3c2npa5d] {
    cursor: default;
    opacity: 0.85;
}

.legend-card-static:hover[b-rr3c2npa5d] {
    background: inherit;
}
/* /Pages/Statistics/OccupationReports/OccupationReport.razor.rz.scp.css */

.page-layout[b-5pmr7jdjti] {
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex: 1;
    min-height: 0;
}

.page-main[b-5pmr7jdjti] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    /* min-height: 0 propagates the height constraint down to .peaks-layout
       so its overflow: auto can actually contain the scroll. Without this,
       .page-main grows to fit content and pushes the whole page to scroll. */
    min-height: 0;
}

.stat-cards[b-5pmr7jdjti] {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.stat-card[b-5pmr7jdjti] {
    flex: 1;
    background-color: white;
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    /* Reserve a transparent 1.5px border on every card so the highlighted
       state can swap colour without changing the content-box size. Without
       this, switching the active tab shrinks the active card's content area
       by 3px and triggers a small reflow that nudges everything below the
       stat-cards row (e.g. the "Grupavimas pagal" button group). */
    border: 1.5px solid transparent;
    box-sizing: border-box;
}

.stat-card-highlighted[b-5pmr7jdjti] {
    border-color: #3b5998;
}

.stat-card-header[b-5pmr7jdjti] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.stat-card-label[b-5pmr7jdjti] {
    font-size: 0.75rem;
    color: #6c757d;
    font-family: 'Segoe UI', sans-serif;
}

.stat-card-icon[b-5pmr7jdjti] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: #e9ecef;
    color: #1a2b5f;
    flex-shrink: 0;
}

.stat-card-icon-active[b-5pmr7jdjti] {
    background-color: #dce3f5;
    color: #1a2b5f;
}

.stat-card-value[b-5pmr7jdjti] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #212529;
    font-family: 'Segoe UI', sans-serif;
}

.stat-card-description[b-5pmr7jdjti] {
    font-size: 1rem;
    font-weight: 600;
    color: #1a2b5f;
    font-family: 'Segoe UI', sans-serif;
    line-height: 1.2;
}

/* Root layout (.statistics-layout) lives in wwwroot/css/statistics.css so
   every Statistics dashboard shares the same outer gutters and viewport
   lock. The marker class below is kept for OccupationReport-specific
   selectors (e.g. .occupation-reports-layout h3 below). */
.occupation-reports-layout[b-5pmr7jdjti] {
}

.nav-cards[b-5pmr7jdjti] {
    display: flex;
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    margin-bottom: 8px;
    overflow: hidden;
}

.nav-card[b-5pmr7jdjti] {
    flex: 1;
    text-align: center;
    padding: 12px 8px;
    font-size: 0.82rem;
    font-weight: 500;
    font-family: 'Segoe UI', sans-serif;
    color: #6c757d;
    border-radius: 0;
}

.nav-card-active[b-5pmr7jdjti] {
    background-color: white;
    color: #1a2b5f;
    font-weight: 700;
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.nav-card-disabled[b-5pmr7jdjti] {
    color: #adb5bd;
    cursor: default;
}

.nav-card-inactive[b-5pmr7jdjti] {
    color: #6c757d;
    cursor: pointer;
}

.nav-card-inactive:hover[b-5pmr7jdjti] {
    color: #1a2b5f;
}

.stat-card-clickable[b-5pmr7jdjti] {
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}

.stat-card-clickable:hover[b-5pmr7jdjti] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.stat-card-visable[b-5pmr7jdjti] {
    display: none;
    visibility: hidden;
}

.filtersLevel1 h4[b-5pmr7jdjti] {
    color: #1a2b5f;
    font-weight: 700;
    font-size: 1rem;
    font-family: 'Segoe UI', sans-serif;
    margin-bottom: 12px;
    margin-top: 20px;
}

/* Outer wrapper owns the single scrollbar for the region below the button
   group. .peaks-layout lives inside and grows to fit its content (sidebar
   stretches to match the chart column, charts can keep their natural
   heights), and this wrapper scrolls the whole thing when it overflows. */
.peaks-scroll[b-5pmr7jdjti] {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.peaks-layout[b-5pmr7jdjti] {
    display: flex;
    flex-direction: row;
    gap: 8px;
    /* min-height: 100% keeps the row at least as tall as the visible scroll
       viewport so the sidebar's white card reaches the bottom of the side
       menu when the chart column is short. Taller content (e.g. the day
       chart added later) grows the row past that height, and the wrapper
       scrolls. */
    min-height: 100%;
}

.tab-loader[b-5pmr7jdjti] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 400px;
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.peaks-layout[b-5pmr7jdjti]  .sc-page-layout {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: flex-start;
}

.peaks-layout[b-5pmr7jdjti]  .sc-filters {
    flex-shrink: 0;
    align-self: flex-start;
}

/* .filtersLevel1 base styles live in statistics.css. Default flex
   alignment (align-items: stretch on .peaks-layout) lets the sidebar
   match the tallest sibling's height automatically — no overrides needed. */

/* h3 base styles (.statistics-layout h3, .filtersLevel2 h3) live in statistics.css. */

/* .filtersLevel2 base styles live in statistics.css. */

.charts-row[b-5pmr7jdjti] {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.charts-row > .report-card:first-child[b-5pmr7jdjti] {
    flex: 0 0 35%;
    min-width: 0;
    max-width: 35%;
    padding-top: 36px;
}

.charts-row > .report-card:nth-child(2)[b-5pmr7jdjti] {
    flex: 1 1 0;
    min-width: 0;
    padding-top: 36px;
}

/* .report-card and .report-card-title live in statistics.css. */

[b-5pmr7jdjti] .k-splitter {
    background-color: transparent;
    border: none;
}

[b-5pmr7jdjti] .k-splitter-flex .k-splitbar {
    position: static;
    flex: 0 0 auto;
    background-color: transparent;
    border: none;
}

[b-5pmr7jdjti] .k-chart {
    padding: 0px 4px 4px 0px;
}


[b-5pmr7jdjti] .k-input-inner {
    font-size: x-small;
    color: slategrey;
}

.filter-label[b-5pmr7jdjti] {
    font-size: 1.3vh;
    color: slategrey;
}

[b-5pmr7jdjti] .k-checkbox-wrap {
    margin-right: 8px;
    margin-bottom: 4px;
}

/* .k-button-group base styles live in statistics.css. */

.group-section[b-5pmr7jdjti] {
    border: 0.7px solid LightGray;
    border-radius: 4px;
    padding: 6px;
    margin-bottom: 8px;
}

.period-year-row[b-5pmr7jdjti] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #1a2b5f;
    padding-top: 8px;
    padding-bottom: 4px;
}

.period-year-toggle[b-5pmr7jdjti] {
    cursor: pointer;
    user-select: none;
    font-size: 0.7rem;
    width: 12px;
    color: #6c757d;
}

/* Align month checkboxes with the year label text start. */
.period-month-row[b-5pmr7jdjti] {
    padding-left: 42px;
    font-size: 0.85em;
}

.period-month-row[b-5pmr7jdjti]  .k-checkbox {
    width: 14px;
    height: 14px;
}

.group-section-header[b-5pmr7jdjti] {
    cursor: pointer;
    margin: 0;
}

.slot-limit-card[b-5pmr7jdjti] {
    position: absolute;
    right: 20px;
    top: 70%;
    z-index: 10;
    background-color: #f8f9fa;
    border-radius: 12px;
    padding: 12px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    min-width: 140px;
}

.slot-limit-title[b-5pmr7jdjti] {
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 500;
    margin-bottom: 2px;
}

.slot-limit-value[b-5pmr7jdjti] {
    font-size: 2rem;
    font-weight: 700;
    color: #212529;
    line-height: 1.2;
}

.chart-with-badge[b-5pmr7jdjti] {
    position: relative;
    overflow: visible;
}

/* .month-nav and .month-nav-btn live in statistics.css. */

/* OccupationReport's legend cards click to toggle a series on/off. */
.legend-card[b-5pmr7jdjti] {
    cursor: pointer;
    transition: opacity 0.2s ease;
}


/* Informational notice underneath the group section header. The 10-group
   cap is a constant feature of the chart, so we show it any time the user
   is filtering by groups (informational, not error). Light-blue pill so the
   notice reads a touch louder than surrounding text without being alarming. */
.group-limit-warning[b-5pmr7jdjti] {
    min-height: 18px;
    color: #1a2b5f;
    font-size: 0.8rem;
    margin: 4px 0 8px 0;
    line-height: 1.2;
    background: #eaf1fb;
    border: 1px solid #cfdcef;
    border-radius: 4px;
    padding: 4px 8px;
}

/* 8 px breathing room after each section title and after the combo box,
   so the filter sidebar reads as separate blocks instead of a wall. */
.group-section .group-section-header[b-5pmr7jdjti] {
    margin-bottom: 8px;
}

.group-section[b-5pmr7jdjti]  .k-combobox {
    margin-bottom: 8px;
}

/* Shift-click range-toggling on group rows would otherwise highlight the
   label text (because the browser interprets shift-click as "extend text
   selection"). Disable user text selection on group rows so the click
   reaches the checkbox cleanly instead of selecting the row's title. */
.group-section .mt-sm[b-5pmr7jdjti] {
    user-select: none;
    -webkit-user-select: none;
}

/* Greyed out "Deselect all" label after the user has just clicked it —
   the row stays visible but inert until at least one group is picked
   again, so the click doesn't visually bounce back to "Select all". */
.filter-label-disabled[b-5pmr7jdjti] {
    color: #adb5bd;
    cursor: not-allowed;
}

/* Group row whose underlying LtcGroup row has Deleted=true. Lighter text
   (still legible) so the user can tell at a glance which rows refer to
   historical/no-longer-existing groups, without hiding them — those rows
   still represent real parking logs from when the group existed. */
.filter-label-deleted[b-5pmr7jdjti] {
    color: #8a93a3;
    font-style: italic;
}

/* "Show all (N)" toggle that appears under the group list when the list
   has more than 20 entries — collapsed list shows only selected rows so
   the sidebar stays compact; this button expands to the full list. */
.group-show-all[b-5pmr7jdjti] {
    text-align: left;
}

.group-show-all-button[b-5pmr7jdjti] {
    background: none;
    border: none;
    padding: 0;
    color: #1a2b5f;
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
}

.group-show-all-button:hover[b-5pmr7jdjti] {
    color: #0d1a3f;
}

/* Threshold-based initial state shown in the chart area when the user is
   filtering by groups but >10 groups exist and none are picked yet — gives
   the user an explicit next step instead of an empty chart.
   flex: 1 + min-width: 0 makes it occupy the same horizontal slot as the
   real chart components do (via ::deep .sc-page-layout), so the filter
   sidebar does not collapse toward the center when the chart is replaced. */
.chart-empty-state[b-5pmr7jdjti] {
    flex: 1;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 24px;
    color: #1a2b5f;
    font-size: 1rem;
    text-align: center;
    background: #f6f8fb;
    border: 1px dashed #c5cee0;
    border-radius: 6px;
    overflow: hidden;
}

.chart-empty-state-message[b-5pmr7jdjti] {
    align-self: center;
    margin-bottom: 16px;
    padding: 8px 16px;
    font-weight: 500;
    background: #eaf1fb;
    border: 1px solid #cfdcef;
    border-radius: 4px;
}

/* Decorative blurred chart silhouette shown beneath the prompt. Pure visual
   filler — not a real chart, never interactive (aria-hidden on the wrapper).
   Heavy blur + low opacity so the user reads the message as the actionable
   bit and the silhouette is purely a "this is where charts would be" hint. */
.chart-empty-state-placeholder[b-5pmr7jdjti] {
    flex: 1;
    min-height: 240px;
    filter: blur(8px);
    opacity: 0.15;
    pointer-events: none;
    user-select: none;
}

.chart-empty-state-placeholder svg[b-5pmr7jdjti] {
    width: 100%;
    height: 100%;
    display: block;
}
/* /Pages/Statistics/OccupationReports/OccupationSummaryReport.razor.rz.scp.css */

/* .filtersLevel1 and .filtersLevel2 base styles live in statistics.css. */

.sc-page-layout[b-thlhhlau2b] {
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex: 1;
    min-width: 0;
    align-items: flex-start;
}

.sc-filters h4[b-thlhhlau2b] {
    color: #1a2b5f;
    font-weight: 700;
    font-size: 1rem;
    font-family: 'Segoe UI', sans-serif;
    margin-bottom: 8px;
    margin-top: 12px;
}

.sc-filters[b-thlhhlau2b] {
    padding: 10px;
    background-color: white;
    min-width: 220px;
    width: max-content;
    flex-shrink: 0;
    margin-top: 0;
    box-sizing: border-box;
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.charts-row[b-thlhhlau2b] {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-bottom: 8px;
}

.charts-row > .report-card:first-child[b-thlhhlau2b] {
    flex: 0 0 35%;
    max-width: 35%;
    min-width: 0;
    padding-top: 36px;
}

.charts-row > .report-card:not(:first-child)[b-thlhhlau2b] {
    flex: 1 1 0;
    min-width: 0;
    padding-top: 36px;
}

/* .month-nav and .month-nav-btn live in statistics.css. */

/* .report-card base styles live in statistics.css. */

.summary-loader[b-thlhhlau2b] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 300px;
}

.no-groups-placeholder[b-thlhhlau2b] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #adb5bd;
    font-size: 4rem;
}

/* .report-card-title comes from statistics.css. */
.filter-label[b-thlhhlau2b] {
    font-size: 1.3vh;
    color: slategrey;
}

.group-section[b-thlhhlau2b] {
    border: 0.7px solid LightGray;
    border-radius: 4px;
    padding: 6px;
    margin-bottom: 8px;
}

.group-section-header[b-thlhhlau2b] {
    cursor: pointer;
    margin: 0;
}

[b-thlhhlau2b] .k-splitter {
    background-color: transparent;
    border: none;
}

[b-thlhhlau2b] .k-splitter-flex .k-splitbar {
    position: static;
    flex: 0 0 auto;
    background-color: transparent;
    border: none;
}

[b-thlhhlau2b] .k-chart {
    padding: 0px 4px 4px 0px;
}

[b-thlhhlau2b] .k-input-inner {
    font-size: x-small;
    color: slategrey;
}

/* .k-button-group base styles live in statistics.css. */

[b-thlhhlau2b] .k-checkbox-wrap {
    margin-right: 8px;
    margin-bottom: 4px;
}


/* Legend cards in this report click to toggle a series on/off. */
.legend-card[b-thlhhlau2b] {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

/* Plate-type dot colours used by the donut legend cards. */
.dot-online[b-thlhhlau2b] {
    --dot-color: #48B8A0;
}

.dot-short-term[b-thlhhlau2b] {
    --dot-color: #F0A04B;
}

.dot-subscriber[b-thlhhlau2b] {
    --dot-color: #2E5FA1;
}
/* /Pages/Statistics/OccupationReports/ParkingDurationReport.razor.rz.scp.css */

/* .filtersLevel2 base styles live in statistics.css. */

.charts-row[b-gzava70gfb] {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-bottom: 8px;
}

.charts-row > .report-card:first-child[b-gzava70gfb] {
    flex: 0 0 35%;
    max-width: 35%;
    min-width: 0;
    padding-top: 36px;
    position: relative;
}

.charts-row > .report-card:not(:first-child)[b-gzava70gfb] {
    flex: 1 1 0;
    min-width: 0;
    padding-top: 36px;
}

/* .report-card base styles live in statistics.css. */

/* .report-card-title comes from statistics.css. */


.summary-loader[b-gzava70gfb] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 300px;
}

/* .month-nav and .month-nav-btn live in statistics.css. */

[b-gzava70gfb] .k-chart {
    padding: 0px 4px 4px 0px;
}

/* ParkingDurationReport's legend cards click to toggle a series on/off.
   Base styles (gap/padding/dot/labels) come from statistics.css. */
.legend-card[b-gzava70gfb] {
    cursor: pointer;
    transition: opacity 0.2s ease;
    min-width: 120px;
}

/* Override the shared .legend-card-line: this report's threshold legend
   uses a solid dashed line without a centred dot. */
.legend-card-line[b-gzava70gfb] {
    width: 20px;
    height: 0;
    border-top: 3px dashed #D46A6A;
    margin-top: 10px;
    flex-shrink: 0;
}
.legend-card-line[b-gzava70gfb]::before,
.legend-card-line[b-gzava70gfb]::after {
    content: none;
}

.donut-center-label[b-gzava70gfb] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

.donut-total[b-gzava70gfb] {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1a2b5f;
    font-family: 'Segoe UI', sans-serif;
}

/* Weekday averages grid */
.weekday-grid[b-gzava70gfb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
}

.weekday-card[b-gzava70gfb] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.weekday-name[b-gzava70gfb] {
    width: 40px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1a2b5f;
    text-transform: capitalize;
    flex-shrink: 0;
}

.weekday-bar-stack[b-gzava70gfb] {
    flex: 1;
    display: flex;
    height: 24px;
    border-radius: 6px;
    overflow: hidden;
    background-color: #f0f2f5;
}

.weekday-bar-segment[b-gzava70gfb] {
    height: 100%;
    transition: width 0.3s ease;
    min-width: 1px;
}

.weekday-avg[b-gzava70gfb] {
    width: 36px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #212529;
    text-align: right;
    flex-shrink: 0;
}
/* /Pages/SystemPages/Theme/ThemeBuilder.razor.rz.scp.css */
#logo-preview[b-0yanm30p9r],
#menu-logo-preview[b-0yanm30p9r] {
	width: 3vw;
	height:8vh;
	padding: 3vh;
	margin-top: 1vw;
	border-radius: min(2vh,2vw);
	background-image: repeating-linear-gradient(to bottom, transparent, transparent 5px, var(--kendo-color-primary) 5px, var(--kendo-color-primary) 10px), repeating-linear-gradient(to right, var(--kendo-color-base), var(--kendo-color-base) 5px, var(--kendo-color-primary) 5px, var(--kendo-color-primary) 10px);
}
.preview-image[b-0yanm30p9r] {
	height: 7vh;
	padding-bottom: 1vh;
	display: block;
}
div.preview-image[b-0yanm30p9r] {
	background-color: var(--kendo-color-surface);
}
#menu-logo-preview[b-0yanm30p9r]  svg {
	width: 100%;
	height: 100%;
}
.hint[b-0yanm30p9r] {
	padding-top: 0.5vh;
	display: block;
	color: var(--layout-color-primary)
}
.left[b-0yanm30p9r] {
	display: flex;
	gap: 1vw;
}
.right[b-0yanm30p9r] {
	margin-left: auto;
	display: flex;
	align-items: center;
}
.right label[b-0yanm30p9r]
{
	padding-left: 2vw;
	padding-right: 0.5vw;
}
/* /Pages/User/EditUser.razor.rz.scp.css */
[b-khpfa8pobt]  form
{
    padding: MIN(2vw, 2vh);
}
/* /Shared/MainLayout.razor.rz.scp.css */
#main-layout[b-vszgjxwyxk] 
{
    background-color: var(--layout-color-background);
}
#main-layout[b-vszgjxwyxk],
[b-vszgjxwyxk] .k-drawer-container,
[b-vszgjxwyxk] .k-drawer-content {
    height: 100vh;
}
[b-vszgjxwyxk] .k-drawer {
	background-color: var(--layout-color-primary);
	color: var(--kendo-color-on-primary);
	border-radius: MIN(0.5vw, 1vh);
	margin: MIN(0.7vh, 0.4vw) MIN(1.4vh, 0.8vw) MIN(0.7vh, 0.4vw) MIN(0.7vh, 0.4vw);
	padding: 0.5vh 0 0.5vh 0;
}
[b-vszgjxwyxk] #drawer-logo,
[b-vszgjxwyxk] #drawer-logo:active,
[b-vszgjxwyxk] #drawer-logo:hover,
[b-vszgjxwyxk] #drawer-logofocus {
    padding: 5vh 0 3vh 0;
    width: 100%;
    border: 0;
    outline: 0;
    transition: padding 0.3s;
}
[b-vszgjxwyxk] #drawer-logo span{
    width: auto;
    height: auto;
}
	[b-vszgjxwyxk] #drawer-logo svg {
		width: 4vh;
		height: 4vh;
		flex: 1;
		fill: var(--kendo-color-on-primary);
		transition: width 0.3s,height 0.3s;
	}
[b-vszgjxwyxk] .k-drawer-expanded #drawer-logo
{
    padding-top:2vh;
}
[b-vszgjxwyxk] .k-drawer-expanded #drawer-logo svg {
    width: 7vh;
    height: 7vh;
}
[b-vszgjxwyxk] .k-drawer-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: auto;
    scrollbar-width: none;
}
[b-vszgjxwyxk] .k-drawer-wrapper {
   
}

:: deep .k-drawer-mini .k-drawer-wrapper[b-vszgjxwyxk] {
   width: calc(var(--kendo-spacing-4, 1rem)* 2 + 25px);
}
#menubar[b-vszgjxwyxk] {
    flex: 1;
}
#drawer-bottom[b-vszgjxwyxk] {
    padding-bottom: 2vh;
    margin:0 auto;
}
#drawer-bottom[b-vszgjxwyxk]  button 
{
    display: block;
    background: transparent;
    border-color: var(--layout-color-third);
    color: var(--kendo-color-on-primary);
    width: 90%;
    margin: 1vh 1vh;
    text-align: left;
    padding: 1vh 2vh 0.5vh 2vh;
    border-radius: MIN(0.5vw, 1vh);
}
#drawer-bottom[b-vszgjxwyxk]  button:hover
{
    border-color:var(--kendo-color-on-primary);
}
#drawer-bottom .separator[b-vszgjxwyxk]
{
    border-left: 1px var(--layout-color-third) solid;
    padding-left: 1vh;
    margin-left: 1vh;
}
#drawer-bottom[b-vszgjxwyxk]  .k-button-text 
{
    width: 90%;
    text-overflow: ellipsis;
    display: inline-block;
    overflow: hidden;
}
#drawer-bottom[b-vszgjxwyxk]  .k-button-icon
{
    float:left;
}
[b-vszgjxwyxk] .k-drawer-mini #drawer-bottom .k-button-text {
    display:none;
}
[b-vszgjxwyxk] .k-drawer-mini #drawer-bottom button {
    margin: 1vh auto 1vh auto;
    padding: 1vh 1vh 1.3vh 1vh;
}
#menubar[b-vszgjxwyxk]  .k-level-0.k-drawer-item
{
    border-inline:0.3vw solid transparent;
}
#menubar[b-vszgjxwyxk]  .group-selected.k-drawer-item {
	border-left-color: var(--menu-selection-color);
}
[b-vszgjxwyxk] .k-drawer-mini #menubar .k-level-1
{
    display:none;
}