/* /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;
 }
.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;
}
.surface[b-b3jc6jwssi] {
    height: 98vh;
}
.k-splitter-flex .k-splitbar[b-b3jc6jwssi] {
    position: static;
    flex: 0 0 auto;
    background-color: var(--layout-color-background);
}

@media (orientation: portrait) {
    #parkingLog[b-b3jc6jwssi]  .invisible-button {
        justify-content: center;
    }
}
/* /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;
}
[b-32i8lv7rvk] .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
[b-32i8lv7rvk] .k-table-td[data-col-index="0"] {
    align-content: center;
}

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

[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;
}
.k-badge[b-32i8lv7rvk] {
    margin: 5px;
}
.surface[b-32i8lv7rvk] {
    height: 98vh;
}
.k-splitter-flex .k-splitbar[b-32i8lv7rvk] {
    position: static;
    flex: 0 0 auto;
    background-color: var(--layout-color-background);
}
/* /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;
}
[b-o45zkbx2di] .calendar-utc-label {
    font-size: 0.75em;
    opacity: 0.7;
}
/* /Pages/Lists/Debt/Debt.razor.rz.scp.css */
[b-g64ne4e6ci] .datesField {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    height: 100%;
}
.datesField > div[b-g64ne4e6ci] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    justify-content: flex-start;
    height: 100%;
}

[b-g64ne4e6ci] .surface {
    width: auto;
    overflow: hidden;
}
.surface[b-g64ne4e6ci] {
    height: 98vh;
}
[b-g64ne4e6ci] .k-grid-toolbar {
    display: flex;
    justify-content: end;
}
[b-g64ne4e6ci] .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Round grid corners */
[b-g64ne4e6ci] .k-grid {
    border-radius: 8px;
    overflow: hidden;
}

/* Remove column separator lines; keep row separators (border-bottom) */
[b-g64ne4e6ci] .k-grid .k-table-th {
    border-right-color: transparent;
    border-left-color: transparent;
}

[b-g64ne4e6ci] .k-grid .k-table-td {
    border-right-color: transparent;
    border-left-color: transparent;
}

[b-g64ne4e6ci] .k-grid .k-filter-row .k-table-td {
    border-right-color: transparent;
    border-left-color: transparent;
}
[b-g64ne4e6ci] .checkBox {
    display: flex;
    align-items: center;
    justify-content: center;
}
[b-g64ne4e6ci] .k-filtercell-wrapper {
    display: flex;
    justify-content: center;
}
[b-g64ne4e6ci] .k-grid .k-table-thead .k-table-row .select-field[data-col-index="0"] .k-link {
    display: none;
}
#overdue-payments[b-g64ne4e6ci]  .k-table-row.selected-row {
    background-color: #BDC3C7;
}
.telerik-row.selected[b-g64ne4e6ci] {
    background-color: #d0e7ff;
    color: #333;
}

[b-g64ne4e6ci] .bulk-edit-invalid {
    outline: 2px solid #c0392b;
    color: #c0392b;
    outline-offset: 1px;
}

.selection-count-text[b-g64ne4e6ci] {
    align-self: center;
    font-size: 0.85rem;
    font-weight: 500;
    color: #555;
    white-space: nowrap;
    margin-right: 4px;
}

/* Body cells */
[b-g64ne4e6ci] .k-grid .k-table-tbody .k-table-td {
    font-size: 0.82rem;
    color: #374151;
}


[b-g64ne4e6ci] .sub-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: default;
}

[b-g64ne4e6ci] .sub-icon-active {
    background-color: #dcfce7;
    color: #15803d;
}

[b-g64ne4e6ci] .sub-icon-former {
    background-color: #f3f4f6;
    color: #9ca3af;
}
/* /Pages/Lists/Debt/DebtBulkForm.razor.rz.scp.css */
#paymentManagement[b-q1jpy6zuht]  .k-form .k-form-fieldset {
    padding: MIN(2vw, 2vh) MIN(2vw, 2vh) MIN(2vw, 2vh) MIN(2vw, 2vh);
    border-radius: MIN(0.5vh, 0.5vw);
    outline: red;
    border-top-width: 0.1vh;
    border-left-width: 0.1vh;
    border-right-width: 0.1vh;
    border-bottom-width: 0.1vh;
    border-color: #e2e2e2;
    border-style: solid;
    overflow: auto;
    box-sizing: border-box;
    scroll-behavior: auto;
    background-color: #f5f7f8;
    box-shadow: 0 0 15px 0px #fafafa, 0px 0px 15px 0px rgba(0, 0, 0, 0.13);
}
#paymentManagement[b-q1jpy6zuht] .k-form .k-form-legend{
    border-color: transparent;
    width: auto;
    font-weight: bold;
}
.panel-header[b-q1jpy6zuht] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: #333;
}
[b-q1jpy6zuht] .k-panelbar .k-panelbar-item {
    border-radius: MIN(0.5vh, 0.5vw);
    margin-bottom:2rem;
    outline: red;
    border-top-width: 0.1vh;
    border-left-width: 0.1vh;
    border-right-width: 0.1vh;
    border-bottom-width: 0.1vh;
    border-color: #e2e2e2;
    border-style: solid;
    overflow: auto;
    box-sizing: border-box;
    scroll-behavior: auto;
    background-color: #f5f7f8;
    box-shadow: 0 0 15px 0px #fafafa, 0px 0px 15px 0px rgba(0, 0, 0, 0.13);
}
[b-q1jpy6zuht] .k-panelbar {
    border: transparent;
}
.content[b-q1jpy6zuht] {
    padding: 10px 20px;
}
.info-row[b-q1jpy6zuht] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

    .info-row:last-child[b-q1jpy6zuht] {
        border-bottom: none;
    }

    .info-row.comment-section[b-q1jpy6zuht] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
.comment-textarea[b-q1jpy6zuht] {
    width: 100%;
    resize: vertical;
}
[b-q1jpy6zuht] .k-actions-start {
    justify-content: center;
    gap: 20px;
}
/* /Pages/Lists/Debt/DebtBulkUpdateForm.razor.rz.scp.css */
#paymentManagement[b-yuvx0sqhg0]  .k-form .k-form-fieldset {
    padding: MIN(2vw, 2vh) MIN(2vw, 2vh) MIN(2vw, 2vh) MIN(2vw, 2vh);
    border-radius: MIN(0.5vh, 0.5vw);
    outline: red;
    border-top-width: 0.1vh;
    border-left-width: 0.1vh;
    border-right-width: 0.1vh;
    border-bottom-width: 0.1vh;
    border-color: #e2e2e2;
    border-style: solid;
    overflow: auto;
    box-sizing: border-box;
    scroll-behavior: auto;
    background-color: #f5f7f8;
    box-shadow: 0 0 15px 0px #fafafa, 0px 0px 15px 0px rgba(0, 0, 0, 0.13);
}
#paymentManagement[b-yuvx0sqhg0] .k-form .k-form-legend{
    border-color: transparent;
    width: auto;
    font-weight: bold;
}
.panel-header[b-yuvx0sqhg0] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: #333;
}
[b-yuvx0sqhg0] .k-panelbar .k-panelbar-item {
    border-radius: MIN(0.5vh, 0.5vw);
    margin-bottom:2rem;
    outline: red;
    border-top-width: 0.1vh;
    border-left-width: 0.1vh;
    border-right-width: 0.1vh;
    border-bottom-width: 0.1vh;
    border-color: #e2e2e2;
    border-style: solid;
    overflow: auto;
    box-sizing: border-box;
    scroll-behavior: auto;
    background-color: #f5f7f8;
    box-shadow: 0 0 15px 0px #fafafa, 0px 0px 15px 0px rgba(0, 0, 0, 0.13);
}
[b-yuvx0sqhg0] .k-panelbar {
    border: transparent;
}
.content[b-yuvx0sqhg0] {
    padding: 10px 20px;
}
.info-row[b-yuvx0sqhg0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

    .info-row:last-child[b-yuvx0sqhg0] {
        border-bottom: none;
    }

    .info-row.comment-section[b-yuvx0sqhg0] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
.comment-textarea[b-yuvx0sqhg0] {
    width: 100%;
    resize: vertical;
}
[b-yuvx0sqhg0] .k-actions-start {
    justify-content: center;
    gap: 20px;
}
[b-yuvx0sqhg0] .optional-date.k-invalid,
[b-yuvx0sqhg0] .optional-date.k-invalid:hover {
    border-color: var(--kendo-color-border, rgba(0, 0, 0, 0.08));
    box-shadow: none;
}
/* /Pages/Lists/Debt/DebtManagementForm.razor.rz.scp.css */
#paymentManagement[b-ibyc7i9tkq]  .k-form .k-form-fieldset {
    padding: MIN(2vw, 2vh) MIN(2vw, 2vh) MIN(2vw, 2vh) MIN(2vw, 2vh);
    border-radius: MIN(0.5vh, 0.5vw);
    outline: red;
    border-top-width: 0.1vh;
    border-left-width: 0.1vh;
    border-right-width: 0.1vh;
    border-bottom-width: 0.1vh;
    border-color: #e2e2e2;
    border-style: solid;
    overflow: auto;
    box-sizing: border-box;
    scroll-behavior: auto;
    background-color: #f5f7f8;
    box-shadow: 0 0 15px 0px #fafafa, 0px 0px 15px 0px rgba(0, 0, 0, 0.13);
}
#paymentManagement[b-ibyc7i9tkq] .k-form .k-form-legend{
    border-color: transparent;
    width: auto;
    font-weight: bold;
}
.panel-header[b-ibyc7i9tkq] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: #333;
}

.timeline-entry[b-ibyc7i9tkq] {
    display: flex;
    gap: 16px;
    position: relative;
}

.timeline-marker[b-ibyc7i9tkq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 4px;
}

.timeline-dot[b-ibyc7i9tkq] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: white;
    border: 2px solid #0066cc;
    flex-shrink: 0;
    z-index: 1;
}

.timeline-line[b-ibyc7i9tkq] {
    width: 2px;
    flex: 1;
    background: #e0e0e0;
    margin-top: 4px;
    min-height: 40px;
}

.timeline-content[b-ibyc7i9tkq] {
    flex: 1;
    padding-bottom: 20px;
}

.entry-header[b-ibyc7i9tkq] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.entry-icon[b-ibyc7i9tkq] {
    color: #666;
}

.entry-title[b-ibyc7i9tkq] {
    color: #0066cc;
    font-weight: 500;
    flex: 1;
}

.entry-amount[b-ibyc7i9tkq] {
    color: #333;
    font-weight: 600;
    font-size: 14px;
}

.entry-date[b-ibyc7i9tkq] {
    color: #999;
    font-size: 13px;
    margin-bottom: 8px;
    margin-left: 28px;
}

.entry-details[b-ibyc7i9tkq] {
    background: #f7f7f7;
    border-radius: 4px;
    padding: 10px 12px;
    margin-left: 28px;
    font-size: 13px;
    border-left: 3px solid #e0e0e0;
}

.operator-info[b-ibyc7i9tkq] {
    color: #666;
    margin-bottom: 4px;
}

.change-reason[b-ibyc7i9tkq] {
    color: #333;
}

[b-ibyc7i9tkq] .k-panelbar .k-panelbar-item {
    border-radius: MIN(0.5vh, 0.5vw);
    margin-bottom:2rem;
    outline: red;
    border-top-width: 0.1vh;
    border-left-width: 0.1vh;
    border-right-width: 0.1vh;
    border-bottom-width: 0.1vh;
    border-color: #e2e2e2;
    border-style: solid;
    overflow: auto;
    box-sizing: border-box;
    scroll-behavior: auto;
    background-color: #f5f7f8;
    box-shadow: 0 0 15px 0px #fafafa, 0px 0px 15px 0px rgba(0, 0, 0, 0.13);
}
[b-ibyc7i9tkq] .k-panelbar {
    border: transparent;
}
.content[b-ibyc7i9tkq] {
    padding: 10px 20px;
}
.info-row-column[b-ibyc7i9tkq] {
    display: flex;
    flex-direction:column;
   gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}
.info-row[b-ibyc7i9tkq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

    .info-row:last-child[b-ibyc7i9tkq] {
        border-bottom: none;
    }

    .info-row.comment-section[b-ibyc7i9tkq] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
.comment-textarea[b-ibyc7i9tkq] {
    width: 100%;
    resize: vertical;
}

/*neveikai sitas*/

#paymentManagement[b-ibyc7i9tkq]  .k-grid-header, .k-grid-header-wrap[b-ibyc7i9tkq], .k-grouping-header[b-ibyc7i9tkq], .k-grid .k-table-th[b-ibyc7i9tkq], .k-grid td[b-ibyc7i9tkq], .k-grid .k-table-td[b-ibyc7i9tkq], .k-grid-footer[b-ibyc7i9tkq], .k-grid-footer-wrap[b-ibyc7i9tkq], .k-grid-content-locked[b-ibyc7i9tkq], .k-grid-footer-locked[b-ibyc7i9tkq], .k-grid-header-locked[b-ibyc7i9tkq], .k-filter-row > .k-table-th[b-ibyc7i9tkq], .k-filter-row > td[b-ibyc7i9tkq], .k-filter-row > .k-table-td[b-ibyc7i9tkq] {
    border-color: transparent;
}
[b-ibyc7i9tkq] .k-actions-start {
    justify-content: center;
    gap: 20px;
}

[b-ibyc7i9tkq] .optional-date.k-invalid,
[b-ibyc7i9tkq] .optional-date.k-invalid:hover {
    border-color: var(--kendo-color-border, rgba(0, 0, 0, 0.08));
    box-shadow: none;
}

.subscriber-badge[b-ibyc7i9tkq] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 5px;
    border: 1px solid;
    white-space: nowrap;
    vertical-align: middle;
}

.subscriber-badge-active[b-ibyc7i9tkq] {
    color: #15803d;
    background-color: #dcfce7;
    border-color: #86efac;
}

.subscriber-badge-former[b-ibyc7i9tkq] {
    color: #4b5563;
    background-color: #f3f4f6;
    border-color: #d1d5db;
}
/* /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/Lot/Video/Video.razor.rz.scp.css */
.loader-container[b-2swmspgzzf] {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 98.6vh;
}
.draggable[b-2swmspgzzf] {
	cursor: grab;
	padding: 1vh;
}
#videoElements[b-2swmspgzzf]
{
	height:100%;
}
#videoElements[b-2swmspgzzf]  .k-tilelayout
{
	height: 100%;
}
#videoElements canvas[b-2swmspgzzf] {
	width: 100%;
}
#videoElements[b-2swmspgzzf]  .k-card-header {
	z-index: 2;
	position: absolute;
	width: 100%;
	border:0;
	background-color:var(--kendo-color-primary);
	color:var(--kendo-color-on-primary);
}
#videoElements[b-2swmspgzzf]  .k-tilelayout-item.video-fullscreen .k-card-header {
	background-color:transparent;
	cursor:default;
}
#videoElements .tile-footer[b-2swmspgzzf]
{
	background-color: var(--kendo-color-on-primary);
    width: 100%;
    position: absolute;
    bottom: 0;
    align-items: center;
    padding: 0.1vh 0;
    text-align: center;
    z-index: 2;
}
#videoElements .tile-footer[b-2swmspgzzf]   button
{
	margin: 0.4vh 0.5vw;
}
#videoElements .tile-console[b-2swmspgzzf] {
	position: absolute;
	width: 90%;
	bottom: 7vh;
	max-height: 15%;
	user-select: none;
	font-size: 0.85rem;
	line-break: anywhere;
	overflow: hidden;
	border-radius: 0.3vw;
	padding: 0.2vh 0.3vw;
	transition: background-color 0.2s;
}
#videoElements .tile-console:not(:empty):hover[b-2swmspgzzf] {
	background-color: rgba(0, 0, 0, 0.6);
}
#videoElements .tile-console p[b-2swmspgzzf] {
	margin: 0;
}
#videoElements .tile-console p.clickable[b-2swmspgzzf] {
	cursor: pointer;
}
#videoElements .tile-console p.clickable:hover[b-2swmspgzzf] {
	text-decoration: underline;
}
#videoElements[b-2swmspgzzf]  .k-card-body {
	padding: 0;
	justify-content: center;
	display: flex;
	align-items: center;
}
#videoElements[b-2swmspgzzf]  .k-tilelayout-item {
	background-color: black;
	border-color: var(--layout-color-primary);
}
#videoElements[b-2swmspgzzf]  .k-tilelayout-item.alert-red-thick {
	outline: 5px solid #FF3300;
	outline-offset: -5px;
}
#videoElements[b-2swmspgzzf]  .k-tilelayout-item.alert-red-thin {
	outline: 2px solid #FF3300;
	outline-offset: -2px;
}
#videoElements[b-2swmspgzzf]  .k-tilelayout-item.alert-green-thick {
	outline: 5px solid #33CC00;
	outline-offset: -5px;
}
#videoElements[b-2swmspgzzf]  .k-tilelayout-item.alert-green-thin {
	outline: 2px solid #33CC00;
	outline-offset: -2px;
}
#videoElements[b-2swmspgzzf]  .k-tilelayout-item.blank-tile {
	background-color: var(--layout-color-background);
}
#videoElements[b-2swmspgzzf]  .tile-content {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
#videoElements[b-2swmspgzzf]  .camera-id
{
	width: 100%;
	position: relative;
}
.video-element-mirror[b-2swmspgzzf] {
	display: none;
}
@media (pointer: coarse), (max-width: 1024px) {
	/* Mobile: keep canvas in the rendering tree (captureStream needs it visible
	   to produce frames in Chromium) but overlay the <video> on top of it. */
	#videoElements[b-2swmspgzzf]  .camera-id,
	.mobile-camera-canvas[b-2swmspgzzf] {
		position: relative;
	}
	#videoElements[b-2swmspgzzf]  .camera-id .video-element-mirror,
	.mobile-camera-canvas .video-element-mirror[b-2swmspgzzf] {
		display: block;
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: contain;
		background: #000;
		/* Above canvas (later in source) but below overlays (.video-overlay z:1,
		   stats overlays z:1+). pointer-events:none so clicks reach overlays. */
		z-index: 0;
		pointer-events: none;
	}
}

#video_settings[b-2swmspgzzf] {
	position: absolute;
}
#video[b-2swmspgzzf] {
	height: 98.6vh;
}
[b-2swmspgzzf] #tabstrip-buttons {
	order: 999;
	flex: 1;
}
[b-2swmspgzzf] #tabstrip-buttons .k-link
{
	display: flex;
	gap: 0.6vw;
	width: 100%;
	cursor: auto;
	padding: 0.5vh 1vw;
}
[b-2swmspgzzf] #tabstrip-buttons:focus,
[b-2swmspgzzf] #tabstrip-buttons:active 
{
	box-shadow: none;
	border:0;
	margin-bottom:0;
	border-bottom-color: var(--layout-color-background)!important;
	background-color: var(--layout-color-background);
}
[b-2swmspgzzf] .settings-btn,
[b-2swmspgzzf] .event-close-btn {
	margin-left: auto;
	width: MIN(5vw, 5vh);
	height: MIN(6vw, 4vh);
}
[b-2swmspgzzf] .settings-btn .k-button-icon,
[b-2swmspgzzf] .settings-btn.k-button-md.k-icon-button .k-button-icon.k-svg-icon > svg,
[b-2swmspgzzf] .settings-btn.k-button-md.k-icon-button .k-button-icon.k-icon-md > svg,
[b-2swmspgzzf] .event-close-btn .k-button-icon,
[b-2swmspgzzf] .event-close-btn.k-button-md.k-icon-button .k-button-icon.k-svg-icon > svg,
[b-2swmspgzzf] .event-close-btn.k-button-md.k-icon-button .k-button-icon.k-icon-md > svg
 {
	width: MIN(4vw, 4vh);
	height: MIN(5vw, 3vh);
}
[b-2swmspgzzf] .k-tabstrip-content:focus
{
	border: 0;
	outline: 0;
}
[b-2swmspgzzf] .tab-button {
	padding: 0;
	margin-left: 0.3vw;
}
[b-2swmspgzzf] .k-tabstrip-items input {
	field-sizing: content;
}
[b-2swmspgzzf] .k-tabstrip-items label {
	user-select: none;
}
.is-presented[b-2swmspgzzf]
{
	cursor: not-allowed;
}
.video-header .k-card-title label.renameable[b-2swmspgzzf] {
	cursor: cell;
}
.camera-rename-active[b-2swmspgzzf] {
	display: flex;
	align-items: center;
	padding: 0.2em 0;
}
[b-2swmspgzzf] .camera-rename-active .k-input {
	height: 1.6em;
}
.camera-rename-active .camera-suffix[b-2swmspgzzf] {
	white-space: nowrap;
}
.camera-change-drop-target[b-2swmspgzzf] {
	box-shadow: inset 0 0 0 0.1vw var(--kendo-color-primary);
}
#ctrl-tip[b-2swmspgzzf] {
	width: 100%;
	justify-content: center;
	align-items: center;
	display: inline-flex;
	flex-shrink: 0;
	background-color: var(--kendo-color-base);
}
#ctrl-tip span[b-2swmspgzzf] {
	padding: 1vh 1vw;
	text-align: center;
}
#ctrl-tip span[b-2swmspgzzf]  span
{
	padding-right:0.3vw;
}
[b-2swmspgzzf] .hidden
{
	display: none;
}

/* Blank tile placeholder */
.blank-tile-placeholder[b-2swmspgzzf] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1vh;
	width: 100%;
	height: 100%;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.2s;
}
.blank-tile-placeholder:hover[b-2swmspgzzf] {
	opacity: 0.8;
}
.blank-tile-placeholder span[b-2swmspgzzf] {
	font-size: 0.85rem;
}

/* Video overlay states (loader + signal lost) */
#videoElements[b-2swmspgzzf]  .camera-id .video-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1vh;
	background-color: rgba(0, 0, 0, 0.7);
	color: rgba(255, 255, 255, 0.8);
	z-index: 1;
	pointer-events: none;
}
#videoElements[b-2swmspgzzf]  .camera-id .video-overlay span {
	font-size: 0.85rem;
}
#videoElements[b-2swmspgzzf]  .camera-id .video-overlay.hidden {
	display: none;
}
#videoElements[b-2swmspgzzf]  .video-overlay-lost .k-svg-icon {
	color: rgba(255, 80, 80, 0.8);
}


[b-2swmspgzzf] .k-tilelayout-item.video-fullscreen {
	position: fixed !important;
	inset: 0 !important;
	z-index: 9999;
	width: 100vw !important;
	height: 100vh !important;
	border-radius: 0 !important;
	border:0;
}
#videoElements[b-2swmspgzzf]  .k-tilelayout-item.video-fullscreen .tile-footer {
	background-color: transparent;
	padding-bottom: 3vh;
}

@keyframes blink-b-2swmspgzzf
{
	50%
	{
		opacity: 0.0;
	}
}

.blink[b-2swmspgzzf] 
{
	animation: blink-b-2swmspgzzf 1s step-start 0s infinite;
}
#simulation[b-2swmspgzzf]
{
	user-select: none;
}
#simulation svg[b-2swmspgzzf]
{
	background: var(--menu-selection-color);
	border-radius: 12px;
}
#simulation #simulated-car[b-2swmspgzzf]
{
	cursor: grab;
}
#simulation #simulated-camera[b-2swmspgzzf]
{
	cursor: pointer;
}
.event-panel[b-2swmspgzzf],
.settings-panel[b-2swmspgzzf] {
	display: flex;
	flex-direction: column;
	gap: 0.8vh;
	padding: 1vh 0.5vw;
}
.event-panel[b-2swmspgzzf]
{
	padding-top: 5vh;
	overflow-y: auto;
	height: 100%;
	box-sizing: border-box;
}
.event-panel[b-2swmspgzzf]  .k-tabstrip .k-content {
	overflow-y: visible;
}
.event-panel[b-2swmspgzzf]  .title {
	display: none;
}
.event-panel[b-2swmspgzzf]  .event-info {
	height: auto;
	overflow-y: visible;
	scrollbar-width: auto;
}
.setting-group[b-2swmspgzzf] {
	display: flex;
	flex-direction: column;
	gap: 0.3vh;
}
.setting-group-button[b-2swmspgzzf] {
	padding-top: 1.2vh;
}
.setting-label[b-2swmspgzzf] {
	font-size: 0.85em;
	font-weight: 600;
	opacity: 0.85;
	padding-top:1vh;
}
.video-header[b-2swmspgzzf]
{
	display: flex;
	justify-content: space-between;
}
.video-header .k-card-title[b-2swmspgzzf] {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
}
.video-header .k-card-title label[b-2swmspgzzf] {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.video-header .video-stats[b-2swmspgzzf] {
	flex-shrink: 1;
	overflow: hidden;
	min-width: 0;
	padding-right: 1vw;
}
.video-header .terminal-status-icons[b-2swmspgzzf] {
	flex-shrink: 1;
	overflow: hidden;
	min-width: 0;
	filter: opacity(0.5);
}
.video-header .k-card-title[b-2swmspgzzf]  .k-input {
	height: 1.6vh;
	min-height: 0;
}
.video-header .k-card-title[b-2swmspgzzf]  input {
	field-sizing: content;
}
.camera-suffix[b-2swmspgzzf] {
	opacity: 0.6;
	font-size: 0.85em;
	white-space: nowrap;
}
.terminal-id-badge[b-2swmspgzzf] {
	margin-left: 0.4em;
	padding: 0 0.35em;
	border-radius: 3px;
	background: rgba(128, 128, 128, 0.25);
	opacity: 0.7;
	font-size: 0.8em;
	white-space: nowrap;
	cursor: default;
}
.video-stats[b-2swmspgzzf]
{
	display: flex;
	gap: 0.8vw;
	font-size: MIN(0.7vw, 1.2vh);
	opacity: 0.45;
	align-items: center;
}
.video-stats span:empty[b-2swmspgzzf]
{
	display: none;
}
.video-stat-loader[b-2swmspgzzf] {
	opacity: 1;
	font-size: initial;
}
.video-stat-loader[b-2swmspgzzf]  .k-loader-segment {
	color: var(--kendo-color-on-primary);
}
.video-stat-throttle[b-2swmspgzzf] {
	display: none;
	color: #FDB912;
}
.barrier-state[b-2swmspgzzf]
{
	padding: 0 1vw;
}
[b-2swmspgzzf] .k-splitbar
{
	display:none;
}

.settings-pane-wrapper[b-2swmspgzzf] {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}
.settings-pane-wrapper .settings-panel[b-2swmspgzzf] {
	flex-shrink: 0;
}
.settings-pane-wrapper[b-2swmspgzzf]  .k-treelist {
	flex: 1;
	min-height: 0;
	overflow: hidden;
}
.settings-panel .layout-setting-container[b-2swmspgzzf] {
	display:flex;
	justify-content:center;
}

/* === MOBILE LAYOUT === */
.mobile-video-container[b-2swmspgzzf] {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	overflow: hidden;
}
.mobile-tab-bar[b-2swmspgzzf] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1vh 2vw;
	background-color: var(--kendo-color-surface);
	border-bottom: 1px solid var(--kendo-color-border-alt);
	flex-shrink: 0;
	height: 6vh;
}
.mobile-carousel[b-2swmspgzzf] {
	flex: 1;
	overflow: hidden;
	position: relative;
	touch-action: pan-x;
}
.mobile-carousel-track[b-2swmspgzzf] {
	display: flex;
	height: 100%;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}
.mobile-slide[b-2swmspgzzf] {
	min-width: 100%;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
	background-color: black;
}
.mobile-camera-header[b-2swmspgzzf] {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1vh 3vw;
	background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent);
	color: white;
	height: 5vh;
}
.mobile-camera-name[b-2swmspgzzf] {
	font-size: 3.5vw;
	font-weight: 600;
	text-align: center;
	flex: 1;
}
.mobile-camera-stats[b-2swmspgzzf] {
	font-size: 2.5vw;
	opacity: 0.7;
}
.mobile-camera-canvas[b-2swmspgzzf] {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}
.mobile-camera-canvas canvas[b-2swmspgzzf] {
	width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.mobile-console[b-2swmspgzzf] {
	display: none;
}
.mobile-dots[b-2swmspgzzf] {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2vw;
	padding: 1vh 0;
	flex-shrink: 0;
	background-color: var(--kendo-color-surface);
}
.mobile-dot[b-2swmspgzzf] {
	width: 2.5vw;
	height: 2.5vw;
	min-width: 8px;
	min-height: 8px;
	border-radius: 50%;
	background-color: var(--kendo-color-border-alt);
	transition: background-color 0.2s, transform 0.2s;
	cursor: pointer;
}
.mobile-dot.active[b-2swmspgzzf] {
	background-color: var(--kendo-color-primary);
	transform: scale(1.3);
}
.mobile-footer[b-2swmspgzzf] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.5vh 4vw;
	background-color: var(--kendo-color-surface);
	border-top: 1px solid var(--kendo-color-border-alt);
	flex-shrink: 0;
}
.mobile-footer[b-2swmspgzzf]  button:first-child {
	flex: 1;
	margin-right: 3vw;
	min-height: 44px;
}
.mobile-overlay[b-2swmspgzzf] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 1000;
	animation: fadeIn-b-2swmspgzzf 0.2s ease;
}
.mobile-bottom-sheet[b-2swmspgzzf] {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: var(--kendo-color-surface);
	border-radius: 3vw 3vw 0 0;
	z-index: 1001;
	padding: 2vh 4vw 4vh;
	max-height: 70vh;
	overflow-y: auto;
	animation: slideUp-b-2swmspgzzf 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.bottom-sheet-handle[b-2swmspgzzf] {
	width: 10vw;
	height: 0.5vh;
	min-height: 4px;
	background-color: var(--kendo-color-border-alt);
	border-radius: 1vw;
	margin: 0 auto 2vh;
}
.bottom-sheet-actions[b-2swmspgzzf] {
	display: flex;
	flex-direction: column;
	gap: 1.5vh;
}
.bottom-sheet-actions[b-2swmspgzzf]  button {
	width: 100%;
	justify-content: flex-start;
	padding: 1.5vh 3vw;
	min-height: 44px;
}
.mobile-settings-sheet .settings-panel[b-2swmspgzzf] {
	padding: 0;
}
.mobile-settings-sheet .layout-setting-container[b-2swmspgzzf] {
	display: flex;
	justify-content: center;
}
@keyframes fadeIn-b-2swmspgzzf {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes slideUp-b-2swmspgzzf {
	from { transform: translateY(100%); }
	to { transform: translateY(0); }
}
/* Chrome-hidden (tap-to-fullscreen) */
.mobile-video-container.chrome-hidden[b-2swmspgzzf] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100dvh;
	z-index: 9999;
}
.mobile-video-container.chrome-hidden .mobile-tab-bar[b-2swmspgzzf],
.mobile-video-container.chrome-hidden .mobile-dots[b-2swmspgzzf],
.mobile-video-container.chrome-hidden .mobile-footer[b-2swmspgzzf],
.mobile-video-container.chrome-hidden .mobile-camera-header[b-2swmspgzzf] {
	display: none;
}
.mobile-video-container.chrome-hidden .mobile-carousel[b-2swmspgzzf] {
	flex: 1;
}
/* Camera list in mobile settings */
.mobile-camera-list[b-2swmspgzzf] {
	display: flex;
	flex-direction: column;
	gap: 0.5vh;
	max-height: 40vh;
	overflow-y: auto;
}
.mobile-camera-item[b-2swmspgzzf] {
	display: flex;
	align-items: center;
	gap: 2vw;
	padding: 1.5vh 2vw;
	border-radius: 1vw;
	cursor: pointer;
	min-height: 44px;
	background-color: var(--kendo-color-base);
}
.mobile-camera-item.added[b-2swmspgzzf] {
	opacity: 0.6;
}
.mobile-camera-item span[b-2swmspgzzf] {
	flex: 1;
}
.mobile-camera-item .mobile-camera-action[b-2swmspgzzf] {
	margin-left: auto;
}
/* Pinch-to-zoom support */
.mobile-camera-canvas.zoomed[b-2swmspgzzf] {
	overflow: hidden;
	touch-action: none;
}
.mobile-camera-canvas.zoomed canvas[b-2swmspgzzf] {
	transform-origin: 0 0;
}

/* PosFreq region editor (theme-driven colours via Kendo CSS vars) */
.posfreq-editor[b-2swmspgzzf] {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 4px 2px 2px;
}
.posfreq-toolbar[b-2swmspgzzf] {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.posfreq-toolbar .posfreq-spacer[b-2swmspgzzf] {
	flex: 1;
}
.posfreq-grid-controls[b-2swmspgzzf] {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--kendo-color-border-alt);
}
.posfreq-grid-controls label[b-2swmspgzzf] {
	color: var(--kendo-color-on-app-surface);
}
.posfreq-palette[b-2swmspgzzf] {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.posfreq-swatch-btn[b-2swmspgzzf] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	background: var(--kendo-color-surface);
	color: var(--kendo-color-on-app-surface);
	border: 2px solid transparent;
	transition: border-color 0.12s, background 0.12s;
}
.posfreq-swatch-btn:hover[b-2swmspgzzf] {
	background: var(--kendo-color-base-hover);
}
.posfreq-swatch-btn.active[b-2swmspgzzf] {
	border-color: var(--kendo-color-primary);
	background: var(--kendo-color-base);
}
.posfreq-swatch[b-2swmspgzzf] {
	width: 14px;
	height: 14px;
	border-radius: 3px;
	border: 1px solid var(--kendo-color-border-alt);
}
.posfreq-hint[b-2swmspgzzf] {
	font-size: 12px;
	color: var(--kendo-color-on-app-surface);
	opacity: 0.65;
}
.posfreq-canvas-wrap[b-2swmspgzzf] {
	position: relative;
	text-align: center;
	min-height: 140px;
}
.posfreq-canvas[b-2swmspgzzf] {
	max-width: 100%;
	max-height: 58vh;
	cursor: crosshair;
	touch-action: none;
	background: #000;
	border-radius: 6px;
	border: 1px solid var(--kendo-color-border-alt);
}
.posfreq-loader-overlay[b-2swmspgzzf] {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.35);
	border-radius: 6px;
}
/* /Pages/Lot/Video/VideoLayoutButton.razor.rz.scp.css */
.layout-grid[b-8lq9fpgivn] {
    display: grid;
    cursor: pointer;
    max-width: MIN(20vw,20vh);
    gap: MIN(0.2vw, 0.2vh);
    background-color: var(--layout-color-background);
}

.layout-option:hover[b-8lq9fpgivn] {
    border-color: var(--layout-color-primary);
}

.layout-option[b-8lq9fpgivn] {
    border: MIN(0.2vw, 0.2vh) solid var(--kendo-color-border-alt);
    display: none;
    justify-content: center;
    align-items: center;
    aspect-ratio: 16 / 9;
    background: var(--kendo-color-base-hover);
    width: MIN(5vw, 5vh);
    height: MIN(6vw, 4vh);
}
.layout-grid.is-selecting .layout-option.selected[b-8lq9fpgivn],
.layout-grid.is-selecting .layout-option[b-8lq9fpgivn] {
    display: flex;
}
.layout-grid.is-selecting[b-8lq9fpgivn] {
    grid-template-columns: repeat(3, 1fr);
    position:absolute;
    z-index:1;
    top:0;
    right:0;
}
.layout-grid.always-open .layout-option[b-8lq9fpgivn] {
    display: flex;
}
.layout-grid.always-open[b-8lq9fpgivn] {
    grid-template-columns: repeat(3, 1fr);
}

.layout-option.selected[b-8lq9fpgivn] {
    display: flex;
    border-color: var(--layout-color-primary);
    background-color: var(--menu-selection-color);
}
.layout-option.selected .layout-preview[b-8lq9fpgivn]
{
    background: transparent;
}

.layout-preview[b-8lq9fpgivn] {
    width: 80%;
    height: 80%;
    display: grid;
    gap: MIN(0.2vw, 0.2vh);
    background: var(--layout-color-background);
}

    .layout-preview div[b-8lq9fpgivn] {
        background: var(--kendo-color-primary);
    }

.layout-2-vertical .layout-preview[b-8lq9fpgivn] {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
}

    .layout-2-vertical .layout-preview div:nth-child(1)[b-8lq9fpgivn] {
        grid-area: 1 / 1 / 2 / 2;
    }

    .layout-2-vertical .layout-preview div:nth-child(2)[b-8lq9fpgivn] {
        grid-area: 1 / 2 / 2 / 3;
    }

.layout-2 .layout-preview[b-8lq9fpgivn] {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.layout-3 .layout-preview[b-8lq9fpgivn] {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

.layout-4 .layout-preview[b-8lq9fpgivn] {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

    .layout-4 .layout-preview div:nth-child(1)[b-8lq9fpgivn] {
        grid-area: 1 / 1 / 5 / 4;
    }

    .layout-4 .layout-preview div:nth-child(2)[b-8lq9fpgivn] {
        grid-area: 1 / 4 / 2 / 5;
    }

    .layout-4 .layout-preview div:nth-child(3)[b-8lq9fpgivn] {
        grid-area: 2 / 4 / 3 / 5;
    }

    .layout-4 .layout-preview div:nth-child(4)[b-8lq9fpgivn] {
        grid-area: 3 / 4 / 4 / 5;
    }

    .layout-4 .layout-preview div:nth-child(5)[b-8lq9fpgivn] {
        grid-area: 4 / 4 / 5 / 5;
    }

.layout-5 .layout-preview[b-8lq9fpgivn] {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

    .layout-5 .layout-preview div:nth-child(1)[b-8lq9fpgivn] {
        grid-area: 1 / 1 / 3 / 3;
    }

    .layout-5 .layout-preview div:nth-child(2)[b-8lq9fpgivn] {
        grid-area: 1 / 3 / 2 / 4;
    }

    .layout-5 .layout-preview div:nth-child(3)[b-8lq9fpgivn] {
        grid-area: 2 / 3 / 3 / 4;
    }

    .layout-5 .layout-preview div:nth-child(4)[b-8lq9fpgivn] {
        grid-area: 3 / 3 / 4 / 4;
    }

    .layout-5 .layout-preview div:nth-child(5)[b-8lq9fpgivn] {
        grid-area: 3 / 2 / 4 / 3;
    }

    .layout-5 .layout-preview div:nth-child(6)[b-8lq9fpgivn] {
        grid-area: 3 / 1 / 4 / 2;
    }

.layout-6 .layout-preview[b-8lq9fpgivn] {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

    .layout-6 .layout-preview div:nth-child(1)[b-8lq9fpgivn] {
        grid-area: 1 / 1 / 3 / 3;
    }

    .layout-6 .layout-preview div:nth-child(2)[b-8lq9fpgivn] {
        grid-area: 1 / 3 / 3 / 5;
    }

    .layout-6 .layout-preview div:nth-child(3)[b-8lq9fpgivn] {
        grid-area: 3 / 1 / 4 / 2;
    }

    .layout-6 .layout-preview div:nth-child(4)[b-8lq9fpgivn] {
        grid-area: 3 / 2 / 4 / 3;
    }

    .layout-6 .layout-preview div:nth-child(5)[b-8lq9fpgivn] {
        grid-area: 3 / 3 / 4 / 4;
    }

    .layout-6 .layout-preview div:nth-child(6)[b-8lq9fpgivn] {
        grid-area: 3 / 4 / 4 / 5;
    }


.layout-7 .layout-preview[b-8lq9fpgivn] {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

    .layout-7 .layout-preview div:nth-child(1)[b-8lq9fpgivn] {
        grid-area: 1 / 1 / 3 / 3;
    }

    .layout-7 .layout-preview div:nth-child(2)[b-8lq9fpgivn] {
        grid-area: 1 / 3 / 3 / 5;
    }

    .layout-7 .layout-preview div:nth-child(3)[b-8lq9fpgivn] {
        grid-area: 3 / 1 / 5 / 3;
    }

    .layout-7 .layout-preview div:nth-child(4)[b-8lq9fpgivn] {
        grid-area: 3 / 3 / 5 / 5;
    }

    .layout-7 .layout-preview div:nth-child(5)[b-8lq9fpgivn] {
        grid-area: 1 / 5 / 2 / 6;
    }

    .layout-7 .layout-preview div:nth-child(6)[b-8lq9fpgivn] {
        grid-area: 2 / 5 / 3 / 6;
    }

    .layout-7 .layout-preview div:nth-child(7)[b-8lq9fpgivn] {
        grid-area: 3 / 5 / 4 / 6;
    }

    .layout-7 .layout-preview div:nth-child(8)[b-8lq9fpgivn] {
        grid-area: 4 / 5 / 5 / 6;
    }

.layout-1 .layout-preview[b-8lq9fpgivn] {
    grid-template-areas: 'a';
}

.layout-9 .layout-preview[b-8lq9fpgivn] {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

.layout-9 .layout-preview div:nth-child(1)[b-8lq9fpgivn] {
    grid-area: 1 / 1 / 3 / 3;
    border: MIN(0.5vw,0.5vh) dashed var(--layout-color-primary);
    background-color: var(--layout-color-background)
}
/* /Pages/PGS/CameraConfig.razor.rz.scp.css */
[b-l0q8768dsd] .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

[b-l0q8768dsd] .module-title {
    color: var(--kendo-color-primary);
}
/* /Pages/PGS/CreateNewMap.razor.rz.scp.css */
[b-k9t5xjhy1g] .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* /Pages/PGS/DiagnosticsPanel.razor.rz.scp.css */
.pgs-diagnostics[b-oyv82usxoe] {
    padding: min(1vw, 1vh) min(2vw, 2vh) min(2vw, 2vh) min(2vw, 2vh);
    overflow: auto;
    box-sizing: border-box;
}

.pgs-diagnostics-header-actions[b-oyv82usxoe] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pgs-diagnostics-asof[b-oyv82usxoe] {
    font-size: 12px;
    color: #666;
    margin-bottom: 0.8vh;
}

.pgs-diagnostics-section[b-oyv82usxoe] {
    margin-bottom: 1.2vh;
}

.pgs-diagnostics-bad[b-oyv82usxoe] {
    color: #e80707;
    font-weight: bold;
}

.pgs-diagnostics-warning-pill[b-oyv82usxoe] {
    display: inline-block;
    background: #fbe3b3;
    color: #7a5b00;
    border-radius: 3px;
    padding: 1px 6px;
    margin: 1px 2px;
    font-size: 11px;
    white-space: nowrap;
}

.pgs-diagnostics-warnings[b-oyv82usxoe] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pgs-diagnostics-warning-block[b-oyv82usxoe] {
    background: #fdf1f1;
    border-left: 3px solid #e80707;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 12px;
}

.pgs-diagnostics-warning-block strong[b-oyv82usxoe] {
    display: block;
    margin-bottom: 2px;
}

.pgs-diagnostics-ids[b-oyv82usxoe] {
    font-family: Consolas, monospace;
    color: #333;
    word-break: break-word;
}

.pgs-diagnostics-ok[b-oyv82usxoe] {
    color: #2e7d32;
    font-size: 13px;
}
/* /Pages/PGS/PgsList.razor.rz.scp.css */
[b-3ucx4owd4q] .surface {
    background-color: var(--kendo-color-on-primary);
    padding: MIN(1vw, 1vh) MIN(2vw, 2vh) MIN(2vw, 2vh) MIN(2vw, 2vh);
    border-radius: MIN(0.5vh, 0.5vw);
    outline: red;
    border-top: 2vh;
    border-left-width: 0.2vh;
    border-right-width: 0.2vh;
    border-bottom-width: 0.2vh;
    border-color: var(--kendo-color-primary);
    border-style: solid;
    height: 98vh;
    overflow: hidden;
    box-sizing: border-box;
    /* Column flex so the title + zone-plan picker stay fixed and the grid below grows to
       fill the rest of the surface (down to the bottom, like the other list pages). */
    display: flex;
    flex-direction: column;
    min-height: 0;
}

[b-3ucx4owd4q] .k-grid {
    flex: 1 1 auto;
    min-height: 0;
}
 .side-surface[b-3ucx4owd4q] {
    background-color: var(--kendo-color-on-primary);
    padding: MIN(1vw, 1vh) MIN(2vw, 2vh) MIN(2vw, 2vh) MIN(2vw, 2vh);
    border-radius: MIN(0.5vh, 0.5vw);
    outline: red;
    border-top: 2vh;
    border-left-width: 0.2vh;
    border-right-width: 0.2vh;
    border-bottom-width: 0.2vh;
    border-color: var(--kendo-color-primary);
    border-style: solid;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
 .wrapper-pgs[b-3ucx4owd4q] {
    margin: MIN(0.7vh, 0.4vw) MIN(1.4vh, 0.8vw) MIN(0.7vh, 0.4vw) 0;
    position: relative;
    min-height: 98.6vh;
    display: flex;
    gap: 1vh;
}
.main-part[b-3ucx4owd4q]{
    width: 90%;
}
.side-part[b-3ucx4owd4q] {
    width: 10%;
    display: flex;
    flex-direction: column;
    gap: 1vh;
}
.title[b-3ucx4owd4q]{
    font-weight: bold;
}
.pgs-subtitle[b-3ucx4owd4q] {
    margin: 0.2rem 0 0.6rem 0;
    font-weight: normal;
    font-size: 0.85rem;
    color: var(--kendo-color-subtle);
}
[b-3ucx4owd4q] .box {
    display: flex;
    justify-content: space-between;
    width: 6rem;
    height: 2rem;
    border-radius: 0.5rem;
    border: 1px solid #e3e3e3;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    background-color: white;
    font-weight:bold;

}
    [b-3ucx4owd4q] .box:hover {
     
        background-color: #c5bebe;
    }

[b-3ucx4owd4q] .color-box {
    width: 1em;
    height: 1em;
    background-color: green;
    border-radius: 0.5rem;
}
[b-3ucx4owd4q] .slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
    gap: 0.5rem; 
    justify-content: center;
    align-items: center;
    padding: 1rem;
    overflow-y: auto; 
    height:100%;
    scrollbar-width: none;
}
/* /Pages/PGS/PgsPlan.razor.rz.scp.css */
[b-4c71jtp1z7] #tool_image {
    display: none;
}

[b-4c71jtp1z7] #tool_path {
    display: none;
}

[b-4c71jtp1z7] #tool_line {
    display: none;
}

[b-4c71jtp1z7] #tool_source {
    display: none;
}

[b-4c71jtp1z7] #MenuButton {
    display: none;
}

[b-4c71jtp1z7] #title_panel {
    display: none;
}

[b-4c71jtp1z7] #stroke_width {
    display: none;
}

[b-4c71jtp1z7] #stroke_style {
    display: none;
}

[b-4c71jtp1z7] #stroke_linejoin {
    display: none;
}

[b-4c71jtp1z7] #stroke_linecap {
    display: none;
}

[b-4c71jtp1z7] #blur {
    display: none;
}

[b-4c71jtp1z7] #opacity {
    display: none;
}

[b-4c71jtp1z7] #tool_wireframe {
    display: none;
}

[b-4c71jtp1z7] #sidepanels {
    display: none;
}

[b-4c71jtp1z7] #canvasBackground {
    display: none;
}

[b-4c71jtp1z7] .rect_panel {
    display: none;
}

[b-4c71jtp1z7] #selected_x {
    display: none;
}

[b-4c71jtp1z7] #selected_y {
    display: none;
}

[b-4c71jtp1z7] #rect_width {
    display: none;
}

[b-4c71jtp1z7] #tool_topath {
    display: none;
}

[b-4c71jtp1z7] #tool_make_link {
    display: none;
}

[b-4c71jtp1z7] #tool_reorient {
    display: none;
}

[b-4c71jtp1z7] #rect_height {
    display: none;
}

[b-4c71jtp1z7] #rect_rx {
    display: none;
}

[b-4c71jtp1z7] #tool_position {
    display: none;
}

[b-4c71jtp1z7] #palette {
    display: none;
}

[b-4c71jtp1z7] #tool_clone {
    display: none;
}

[b-4c71jtp1z7] #angle {
    display: none;
}

[b-4c71jtp1z7] #circle_cx {
    display: none;
}

[b-4c71jtp1z7] #circle_cy {
    display: none;
}

[b-4c71jtp1z7] #circle_r {
    display: none;
}

[b-4c71jtp1z7] #tool_text {
    display: none;
}

[b-4c71jtp1z7] #stroke_color {
    display: none;
}

[b-4c71jtp1z7] #fill_color {
    display: none;
}

[b-4c71jtp1z7] #se-tool_fhpath {
    display: none;
}

[b-4c71jtp1z7] #tools_rect {
    display: none;
}

[b-4c71jtp1z7] #tool_fhpath {
    display: none;
}

[b-4c71jtp1z7] #tools_ellipse {
    display: none;
}

[b-4c71jtp1z7] #tool_unlink_use {
    display: none;
}

[b-4c71jtp1z7] #selectorGrip_resize_n {
    display: none;
}

[b-4c71jtp1z7] #selectorGrip_resize_s {
    display: none;
}

[b-4c71jtp1z7] #se-cmenu_canvas {
    display: none;
}

[b-4c71jtp1z7] #main_button {
    display: none;
}

[b-4c71jtp1z7] #selectorGrip_resize_w {
    display: none;
}

[b-4c71jtp1z7] #selectorGrip_resize_e {
    display: none;
}

/* The rotate grip is intentionally NOT hidden here: plan objects are meant to be rotatable
   (their angle is saved). It is hidden only while Edit-background is active (the background
   itself must not rotate) via body.pgs-bg-edit in svgedit-softra.css. */
/* hides the ungroup-elements button */
[b-4c71jtp1z7] .g_panel {
    display:none;
}

[b-4c71jtp1z7] .svg_editor {
    --main-bg-color: var(--kendo-color-primary) !important;
    --text-color: #000000;
    --border-color: #808080;
    --canvas-bg-color: white !important;
    --link-color: #19c;
    --ruler-color: #B2B2B2;
    --icon-bg-color: var(--kendo-color-primary-active, #2d448c);
    --icon-bg-color-hover: var(--kendo-color-primary-hover, #33457A);
    --input-color: white !important;
    --orange-color: black;
    --global-se-spin-input-width: 82px;
    display: grid;
    grid-template-rows: auto 15px 1fr 40px;
    grid-template-columns: 40px 15px 50px 1fr 15px;
    grid-template-areas:
        "main top top top top"
        "left corner rulerX rulerX side"
        "left rulerY workarea workarea side"
        "left bottom bottom bottom bottom";
    font-size: 8pt;
    background: var(--main-bg-color);
    font-family: Verdana, Helvetica, Arial;
    color: var(--text-color);
    user-select: text;
    width: 100%;
    height: 100%;
}

[b-4c71jtp1z7] #workarea {
    background-color: var(--canvas-bg-color);
}

/* View mode (the default, class-free state — `.pgs-editing` is added by setViewActive only in
   the edit modes): hide the X/Y rulers, which are only useful while placing objects. Collapse
   their 15px grid tracks too so no empty strip of the primary-coloured editor background shows
   where the ruler was. The base `.svg_editor` grid (with rulers) applies again once .pgs-editing
   is present. */
[b-4c71jtp1z7] .svg_editor:not(.pgs-editing) {
    grid-template-rows: auto 0 1fr 40px;
    grid-template-columns: 40px 0 50px 1fr 15px;
}

[b-4c71jtp1z7] .svg_editor:not(.pgs-editing) #ruler_x,
[b-4c71jtp1z7] .svg_editor:not(.pgs-editing) #ruler_y,
[b-4c71jtp1z7] .svg_editor:not(.pgs-editing) #ruler_corner {
    display: none;
}

.main-logs-display[b-4c71jtp1z7] {
    display: flex;
    flex-direction: column;
    gap: 0.7vh;
    height: auto;
}

.logs-layout[b-4c71jtp1z7] {
    display: flex;
    gap: 0.7vh;
    height: auto;
}

/* Selected mode button (View / Edit layout / Edit background). The toolbar itself is
   --kendo-color-primary and the unpressed buttons are --kendo-color-primary-active, so the
   selected one is drawn as a light "lifted" chip from the theme base surface (with on-surface
   text) — clearly distinct from both, and theme-driven instead of an improvised black. */
[b-4c71jtp1z7] .pressed {
    background-color: var(--kendo-color-base, #f5f5f5) !important;
    color: var(--kendo-color-on-app-surface, #3d3d3d) !important;
}

[b-4c71jtp1z7] .tool_sep {
    display: none;
}
[b-4c71jtp1z7] #history_panel {
    display: none;
}
[b-4c71jtp1z7] #ruler_corner {
    background: white;
}

[b-4c71jtp1z7] #ruler_x {
    background: white;
}

[b-4c71jtp1z7] #ruler_y {
    background: white;
}

.availBoard[b-4c71jtp1z7] {
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
}

[b-4c71jtp1z7] .tool-button {
    height: auto;
    width: auto;
    margin: 4px 1px 4px;
    padding: 3px;
    background-color: var(--icon-bg-color);
    cursor: pointer;
    border-radius: 3px;
    color: white;
    border: none;
}

[b-4c71jtp1z7] #elem_id {
    pointer-events: none;
}

[b-4c71jtp1z7] #elem_class {
    pointer-events: none;
}

.k-tabstrip-content[b-4c71jtp1z7] {
    display: none;
}

[b-4c71jtp1z7] .k-tabstrip-content {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-sizing: border-box;
}



/* The rules below are main css, created for the parking logo. */

[b-4c71jtp1z7] .password-field {
    display: flex;
}
[b-4c71jtp1z7] .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.button-wrapper[b-4c71jtp1z7] {
    position: relative;
    display: inline-block;
    text-align: center;
}

.button-label[b-4c71jtp1z7] {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #555;
    background: rgba(255, 255, 255, 0.8);
    padding: 2px 5px;
    border-radius: 3px;
    font-weight: bold;
    white-space: nowrap;
}

[b-4c71jtp1z7] .sensor ::before {
    content: attr('data-id');
    display: inline-block;
    font-size: 32px;
    width: 85px;
    height: 80px;
    line-height: 2.5em;
    text-align: center;
    border-radius: 50%;
    background: #95A73B;
    vertical-align: middle;
    margin-right: 1em;
    color: white;
    margin-top: 20px;
}

#container.disabled[b-4c71jtp1z7] {
    pointer-events: none;
    opacity: 0.5;
}

[b-4c71jtp1z7] .k-tabstrip-items-wrapper .k-item.k-active {
    background-color: var(--layout-color-primary);
    color: var(--kendo-color-on-primary);
}

[b-4c71jtp1z7] .marginnew {
    margin: 6px;
}

/* Toolbar above the plan editor (background upload, write permission only). */
.pgs-plan-toolbar[b-4c71jtp1z7] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: min(1vw, 1vh);
    padding: 0.4vh 0.8vw;
    margin-bottom: 0.3vh;
    background-color: var(--kendo-color-primary);
    color: var(--kendo-color-on-primary);
    border-radius: min(0.5vh, 0.5vw);
    font-size: 12px;
}

.pgs-plan-toolbar-label[b-4c71jtp1z7] {
    font-weight: bold;
    white-space: nowrap;
}

.pgs-plan-toolbar[b-4c71jtp1z7]  input[type="file"] {
    color: var(--kendo-color-on-primary);
}

/* Full-height layout: the editor and the side panel must stretch to the bottom of the
   viewport (like the parking-log page) instead of collapsing to content height. This needs
   a definite height at the top — the Telerik splitter measures pane sizes against it — and a
   height:100% / flex chain all the way down to the SVG editor's runtime #container mount. */
.logs-layout.wrapper[b-4c71jtp1z7] {
    height: 98vh;
    min-height: 0;
    overflow: hidden;
}

[b-4c71jtp1z7] .k-splitter {
    height: 100%;
}

/* Both the editor pane's surface and the side-panel dialog's surface fill their pane. */
[b-4c71jtp1z7] .surface {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

[b-4c71jtp1z7] .k-tabstrip {
    flex: 1 1 auto;
    min-height: 0;
}

[b-4c71jtp1z7] .k-tabstrip-content {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}

/* #container is the svg-editor mount created at runtime by SoftraEditorInit.js. */
[b-4c71jtp1z7] #container {
    height: 100%;
}
/* /Pages/PGS/PgsVideoModal.razor.rz.scp.css */
/* PGS video preview modal: a toolbar above a fixed-aspect stage that stacks the
   webcodecs video canvas and the slot-overlay canvas at identical size. */

.pgs-video-modal[b-rbgr87y21r] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* The host window sizes us now, so fill it completely. A small min-width keeps
       the toolbar from collapsing, but is low enough that the 16:9 stage still gets
       a usable height in the (larger) host window. */
    width: 100%;
    height: 100%;
    min-width: 320px;
}

.pgs-video-toolbar[b-rbgr87y21r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pgs-video-toolbar-left[b-rbgr87y21r],
.pgs-video-toolbar-right[b-rbgr87y21r] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Camera title sits in the toolbar centre and truncates rather than pushing the
   button groups apart on a narrow window. */
.pgs-video-title[b-rbgr87y21r] {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pgs-video-caption[b-rbgr87y21r] {
    margin-left: 6px;
    font-weight: normal;
    font-size: 0.85em;
    opacity: 0.7;
}

.pgs-video-error[b-rbgr87y21r] {
    color: var(--kendo-color-error, #d9534f);
    font-size: 0.9rem;
}

/* The stage keeps a 16:9 box so the overlay quads (normalized to the frame) line
   up with the painted JPEG regardless of the actual stream resolution. It grows to
   take all the vertical space the toolbar leaves; aspect-ratio + the 100% max box
   makes it fill the larger window dimension while staying inside it (no overflow). */
.pgs-video-stage[b-rbgr87y21r] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    background: #000;
    overflow: hidden;
}

/* Container the webcodecs stack targets via .camera-id[cameraId] .video-element;
   it fills the stage so both stacked canvases share one box. */
.pgs-video-camera[b-rbgr87y21r] {
    position: absolute;
    inset: 0;
}

.pgs-video-camera .video-element[b-rbgr87y21r] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Overlay canvas: same box, on top, transparent. Pointer events stay on so the
   edit-mode drag handlers receive input; in view mode the JS simply ignores them. */
.pgs-video-camera .slot-overlay[b-rbgr87y21r] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
}
/* /Pages/PGS/SensorConfig.razor.rz.scp.css */
/* Colour control row: the Telerik ColorPicker sits next to the "Set colour"
   button, mirroring the inline layout of the other form actions. */
.pgs-colour-row[b-3ukdepf4fk] {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* /Pages/PGS/SensorHistoryPanel.razor.rz.scp.css */
/* The panel chrome (border, background, padding, scroll, height) comes from the shared
   .surface class — matching the config/diagnostics side panels. Only the occupation-history
   list itself needs component styles. */

.sensor-history-empty[b-5k7ezgqj4a] {
    color: #666;
    font-size: 12px;
    margin-top: 0.8vh;
}

.sensor-history-list[b-5k7ezgqj4a] {
    display: flex;
    flex-direction: column;
    margin-top: 0.8vh;
}

.sensor-history-row[b-5k7ezgqj4a] {
    display: grid;
    grid-template-columns: 9.5rem 6rem 1fr 4.5rem;
    align-items: center;
    gap: 0.5rem;
    padding: 4px 2px;
    border-bottom: 1px solid #eee;
    font-size: 12px;
}

.sensor-history-when[b-5k7ezgqj4a] {
    font-variant-numeric: tabular-nums;
    color: #555;
}

.sensor-history-status[b-5k7ezgqj4a] {
    font-weight: 600;
}

.sensor-history-plate[b-5k7ezgqj4a] {
    font-family: Consolas, monospace;
    color: #333;
}

.sensor-history-photo img[b-5k7ezgqj4a] {
    max-width: 4.5rem;
    max-height: 3rem;
    border-radius: 3px;
    border: 1px solid #ddd;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
}

.sensor-history-more[b-5k7ezgqj4a] {
    display: flex;
    justify-content: center;
    padding-top: 1vh;
}

/* In-app full-frame lightbox (no new tab / redirect). */
.sensor-history-preview[b-5k7ezgqj4a] {
    position: fixed;
    inset: 0;
    z-index: 10050;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

.sensor-history-preview img[b-5k7ezgqj4a] {
    max-width: 92vw;
    max-height: 92vh;
    object-fit: contain;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.6);
}
/* /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; can grow past it when row min-heights demand more
       space (parent .current-activity-tab handles the scroll). Mirrors the
       RecognitionRates report so a large lot count makes the page scroll
       instead of squeezing the bottom row to nothing. */
    min-height: 100%;
    background-color: transparent;
}

.dwell-row-1[b-vwfxuwxqnv] {
    display: flex;
    gap: 8px;
    /* Proportional share of the tab when everything fits; min-height keeps the
       donut + grid readable and forces a page scroll when they can't shrink
       further. */
    flex: 0 0 45%;
    min-height: 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 when it
       fits; min-height keeps the density chart + grid usable so they scroll
       the page rather than collapse to zero height. */
    flex: 1 1 45%;
    min-height: 360px;
}

.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);
}

/* Row 2 rebalances the split — the duration-density chart (cell-65) takes
   40% and the breakdown grid (cell-35) takes 60%, so the grid's month/avg
   columns get the wider share. Row 1 keeps the default 35/65 donut split. */
.dwell-row-2 .cell-65[b-vwfxuwxqnv] {
    flex: 0 0 calc(40% - 4px);
}

.dwell-row-2 .cell-35[b-vwfxuwxqnv] {
    flex: 1 1 calc(60% - 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;
}

/* Darken the grid header row and bold the column titles so the header stands
   apart from the data rows (a touch darker than the #e9ecef other reports
   use, per design). */
[b-vwfxuwxqnv] .k-grid-header,
[b-vwfxuwxqnv] .k-grid-header-wrap,
[b-vwfxuwxqnv] .k-grid .k-table-thead,
[b-vwfxuwxqnv] .k-grid .k-header {
    background-color: #ced4da;
    color: #343a40;
    font-weight: 600;
}
/* /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; can grow past it when row min-heights demand more
       space (parent .current-activity-tab handles the scroll). Mirrors the
       RecognitionRates report so a large lot count makes the page scroll
       instead of squeezing the bottom row to nothing. */
    min-height: 100%;
    background-color: transparent;
}

.occupation-row-1[b-8jfm338x1c] {
    display: flex;
    gap: 8px;
    /* Proportional share of the tab when everything fits; min-height keeps the
       donut + lot bar readable (and stable across the row-2 PlateType / Group
       / VehicleType filter switch) and forces a page scroll when they can't
       shrink further. */
    flex: 0 0 45%;
    min-height: 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 when it
       fits; min-height keeps the hour-flow chart + group grid usable so they
       scroll the page rather than collapse to zero height. */
    flex: 1 1 45%;
    min-height: 360px;
}

.occupation-cell[b-8jfm338x1c] {
    padding: 12px;
    display: flex;
    flex-direction: column;
    position: relative;
    /* Lets the inner k-chart / k-grid (`flex: 1` below) shrink under the
       cell's available height. Without this the children defer to their
       intrinsic content size, which leaves a wide white band at the bottom
       of the card when the chart/grid renders at less than the cell's
       full height. */
    min-height: 0;
    overflow: hidden;
}

.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);
}

/* `flex: 1` claims the leftover space, `min-height: 0` lets the chart/grid
   actually shrink below its intrinsic content height (Telerik's default
   400px for charts, full-row sum for grids) so they fill the cell instead
   of bleeding past it or leaving white space below. `height: 100%` is the
   anchor Telerik's internal layout uses to size its plot area / grid body. */
.occupation-cell[b-8jfm338x1c]  .k-chart,
.occupation-cell[b-8jfm338x1c]  .k-grid {
    flex: 1;
    min-height: 0;
    height: 100%;
}

/* 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; can grow past it when row min-heights demand more
       space (parent .current-activity-tab handles the scroll). Mirrors the
       RecognitionRates report so a large lot count makes the page scroll
       instead of squeezing a row to nothing. */
    min-height: 100%;
    background-color: transparent;
}

.revenue-row-1[b-n1och0n84t] {
    display: flex;
    gap: 8px;
    /* Absorbs the leftover vertical space below row-2 when it fits; min-height
       keeps the donut readable and forces a page scroll when it can't shrink
       further. Legend cards inside scroll if they overflow. */
    flex: 1 1 45%;
    min-height: 360px;
}

.revenue-row-2[b-n1och0n84t] {
    display: flex;
    gap: 8px;
    /* Proportional share when everything fits; min-height keeps the lot
       breakdown readable and forces a page scroll when it can't shrink. */
    flex: 0 0 45%;
    min-height: 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: 8px;
    padding-bottom: 8px;
}

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

/* Trim the chart cards' vertical real estate aggressively — the goal is
   for the top of the grid to peek above the fold on a standard laptop,
   so the user immediately sees "there's a grid below" without scrolling. */
.charts-row > .report-card .k-chart[b-rr3c2npa5d] {
    height: 14vh;
    min-height: 110px;
    max-height: 180px;
}

/* The PlateType / VehicleType peak-comparison grid card sits beside the
   Monthly comparison chart. Its page size is fixed at 15 rows, so a
   partially-filled page renders the remaining rows as empty space inside
   the grid frame and the pager stays at the card bottom — no height
   reservation needed since the row count is constant. */

/* Lot strip directly above the charts-row also contributes to the
   above-the-fold budget — keep it tight so it doesn't push the chart
   row past the grid. */
.lot-strip-card[b-rr3c2npa5d] {
    padding: 8px 12px;
}

.lot-strip-row[b-rr3c2npa5d] {
    margin-top: 4px;
}

/* Collapsed state — only the "Aikštelės" title is shown, the row of
   lot cards is hidden via the class toggle below. Shrink the padding
   so the collapsed strip is just a slim bar. (The HTML `hidden`
   attribute can't be used here — Blazor renders `hidden="false"`
   when expanded, and any value of `hidden` is truthy to the browser,
   so the row would never re-appear.) */
.lot-strip-card-collapsed[b-rr3c2npa5d] {
    padding-top: 6px;
    padding-bottom: 6px;
}

.lot-strip-row-hidden[b-rr3c2npa5d] {
    display: none;
}

/* The Užimtumas + Transporto srautai grid card collapses to just its
   title when the user clicks anywhere on its white background outside
   the grid wrapper. Cursor signals the click target; the chevron flips
   between ▾ and ▸ depending on state. The grid wrapper itself stops
   propagation so row clicks don't trigger the collapse. */
.monthly-grid-card[b-rr3c2npa5d] {
    cursor: pointer;
}

.monthly-grid-card-collapsed[b-rr3c2npa5d] {
    padding-top: 6px;
    padding-bottom: 6px;
}

.monthly-grid-card-chevron[b-rr3c2npa5d] {
    margin-left: 6px;
    font-size: 0.8em;
    color: #6c757d;
}

/* Each (category × lot) tuple in the Užimtumas/Transporto srautai grid
   spans three rows (Užimtumas / Įvažiavimų srautas / Išvažiavimų
   srautas). Hide the row-separator border between those three so the
   triplet visually reads as one merged block — only the row before the
   first row of the next triplet keeps its border. */
/* The Aikštelė + Klientų tipas columns belong to one merged left block
   per (lot × category) — we hide all horizontal borders on those cells
   so the lot banner reads as a continuous column instead of stripes. */
[b-rr3c2npa5d] td.monthly-grid-triplet-merged,
[b-rr3c2npa5d] td.monthly-grid-lot-cell {
    border-bottom-color: transparent;
    border-top-color: transparent;
}

/* Aikštelė column — the lot name appears once per lot (on the first
   block's Parkavimo įvykiai row) and reads as a banner spanning every
   row beneath it. Every row of the lot gets the .monthly-grid-lot-cell
   class so the row-separator borders below it can be hidden, and the
   banner row gets a heavier top border to mark where the new lot
   starts. */
[b-rr3c2npa5d] td.monthly-grid-lot-cell {
    border-bottom-color: transparent;
}

[b-rr3c2npa5d] td.monthly-grid-lot-banner {
    font-weight: 600;
    color: #1a2b5f;
    vertical-align: top;
    padding-top: 8px;
}

/* Row-kind label cell (Parkavimo įvykiai / Įvažiavimų srautas /
   Išvažiavimų srautas) — italic + bold to read as a distinct "kind
   marker" without competing with the numeric values for emphasis. */
[b-rr3c2npa5d] td.monthly-grid-row-kind-cell {
    color: #495057;
    font-style: italic;
    font-weight: 500;
}

/* Hyperlink-style toggle for Įvažiavimų / Išvažiavimų srautas rows.
   Click expands a list of per-terminal sub-rows beneath the flow row.
   The chevron flips between ▾ (expanded) and ▸ (collapsed) to mirror
   the lot-strip auto-collapse affordance. */
[b-rr3c2npa5d] .flow-row-toggle {
    color: #1a2b5f;
    cursor: pointer;
    user-select: none;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
    /* Match the Parkavimo įvykiai cell style (italic + 500) so all three
       triplet labels look the same; only the dotted underline + colour
       hint at "this one is clickable". */
    font-style: italic;
    font-weight: 500;
}

[b-rr3c2npa5d] .flow-row-toggle:hover {
    color: #3b5998;
}

[b-rr3c2npa5d] .flow-row-chevron {
    display: inline-block;
    width: 12px;
    margin-left: 6px;
    text-align: center;
    font-style: italic;
}

/* Terminal sub-row label — indented under the parent flow row so the
   grouping reads as a parent / children pair. Regular weight so the
   sub-rows don't compete with the bold parent row-kind labels above. */
[b-rr3c2npa5d] .flow-row-terminal {
    display: inline-block;
    padding-left: 22px;
    color: #495057;
    font-style: normal;
    font-weight: normal;
}

/* Visual grouping for an expanded flow row + its terminal sub-rows.
   The parent and children share a soft grey background and a left
   accent border so the eye reads them as one box. */
[b-rr3c2npa5d] td.flow-group-row {
    background-color: rgba(108, 117, 125, 0.07);
}

/* Top border on the expanded Įvažiavimų / Išvažiavimų srautas row
   should only span the Tipas + month columns, not the merged
   Aikštelė + Klientų tipas cells (those visually belong to the merged
   left block and shouldn't get a horizontal divider here). */
[b-rr3c2npa5d] td.flow-group-row-parent:not(.monthly-grid-triplet-merged):not(.monthly-grid-lot-cell) {
    border-top: 2px solid #adb5bd;
}

[b-rr3c2npa5d] td.flow-group-row-terminal {
    color: #495057;
}

/* Closing divider after a terminal sub-row — same scope as the opening
   divider above the parent flow row (Tipas + month columns only, not
   the merged Aikštelė / Klientų tipas cells). */
[b-rr3c2npa5d] tr:has(td.flow-group-row-terminal) + tr td:not(.monthly-grid-triplet-merged):not(.monthly-grid-lot-cell) {
    border-top: 2px solid #adb5bd;
}

/* Row-block selection — clicking any row of a (lot × category) block
   highlights every row that shares its BlockKey. The TR-level class is
   stamped on by OnRowRender; we paint a tinted background on the cells
   so the whole grouped section reads as one selected block. The colour
   is deliberately stronger than the expand-group grey backdrop so the
   selection still reads after the user expands a terminal list. */
[b-rr3c2npa5d] tr.monthly-grid-block-selected td {
    background-color: rgba(59, 89, 152, 0.18) !important;
}

[b-rr3c2npa5d] tr.monthly-grid-block-selected td:first-child {
    border-left: 3px solid #3b5998;
}

/* Header row of a selected block (Parkavimo įvykiai for recognised
   categories, first TrafficIn for failure-mode ones). A stronger
   accent paint so the user reads it as the title of the highlighted
   group while everything below it is the body. */
[b-rr3c2npa5d] tr.monthly-grid-block-header td {
    background-color: rgba(59, 89, 152, 0.28) !important;
    font-weight: 600;
}

/* Clickable title — acts as the accordion toggle. The chevron sits to
   its right and rotates between ▾ (expanded) / ▸ (collapsed) so the
   user reads "click here to toggle" at a glance. */
.lot-strip-title[b-rr3c2npa5d] {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lot-strip-chevron[b-rr3c2npa5d] {
    font-size: 0.8em;
    color: #6c757d;
}

/* Match the Monthly comparison legend card typography to the Traffic
   Flow legend cards above — plate-type name is the prominent dark navy
   title on top, the all-months total sits below as a slightly smaller
   bold value. Keeps both legend strips visually consistent. */
.legend-cards .legend-card-value[b-rr3c2npa5d] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a2b5f;
}

.legend-card-total[b-rr3c2npa5d] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #495057;
    margin-top: 2px;
}

/* .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: #2E5FA1;
}

.dot-subscriber[b-rr3c2npa5d] {
    --dot-color: #3F8E5C;
}

/* 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;
}

/* Lot legend cards row below the Monthly comparison chart. Single-select
   filter — clicking a card pins that lot, others fade out. The selected
   card gets a navy border highlight; others drop to opacity 0.4 via
   .legend-card-faded (defined in statistics.css). Cards are evenly
   distributed across the full chart width; a single lot expands to fill
   the whole row. */
.lot-cards[b-rr3c2npa5d] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.lot-cards .lot-card[b-rr3c2npa5d] {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 10px;
}

.lot-cards .dot-lot[b-rr3c2npa5d] {
    --dot-color: #3b5998;
}

/* Full-width strip above the charts that surfaces the lot picker as its
   own card. Visually mirrors the report-card pattern (white background,
   rounded corners, soft shadow) so it reads as part of the dashboard
   family. The strip sits below the grouping-mode tabs and above the
   charts-row; lot cards inside flex-fill across the entire width. */
.lot-strip-card[b-rr3c2npa5d] {
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    padding: 12px 16px;
    margin-bottom: 8px;
}

/* Wrapping row of lot cards. Each card has a fixed minimum width so
   titles stay readable when there are many lots (15-20+); cards that
   don't fit on the first row wrap to the next, keeping every card at a
   consistent readable size. */
.lot-strip-row[b-rr3c2npa5d] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.lot-strip-row .lot-card[b-rr3c2npa5d] {
    flex: 0 0 auto;
    min-width: 160px;
    padding: 6px 10px;
}

.lot-strip-row .dot-lot[b-rr3c2npa5d] {
    --dot-color: #3b5998;
}

/* Prompt shown inside the lot strip when no lots are selected. Same colour
   family as the in-grid warning banner so all "you need to pick X" prompts
   visually belong together. Sits below the lot cards so the user reads
   "here's the list, pick one" in one visual flow. */
/* Traffic Flow legend cards — one card per terminal with two rows
   inside: Įtekas total (green dot) and Ištekas total (navy dot). The
   row wraps when the chart card is narrow so cards never overflow. */
.traffic-flow-legend[b-rr3c2npa5d] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.traffic-flow-legend-card[b-rr3c2npa5d] {
    flex: 1 1 0;
    min-width: 140px;
    padding: 8px 10px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.traffic-flow-legend-title[b-rr3c2npa5d] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #1a2b5f;
    margin-bottom: 6px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.traffic-flow-legend-row[b-rr3c2npa5d] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #495057;
}

.traffic-flow-legend-row strong[b-rr3c2npa5d] {
    margin-left: auto;
    color: #1a2b5f;
}

.traffic-flow-legend-dot[b-rr3c2npa5d] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--dot-color, #999);
}

.traffic-flow-legend-label[b-rr3c2npa5d] {
    color: slategrey;
}

.lot-strip-empty-message[b-rr3c2npa5d] {
    margin-top: 8px;
    padding: 8px 12px;
    background-color: #d1e7fd;
    border: 1px solid #9ec5fe;
    color: #084298;
    border-radius: 6px;
    font-size: 0.85rem;
    text-align: center;
}

/* Monthly grid below the two charts — category + lot + 12 month columns.
   Styles mirror the .cell-monthly-grid look used by RevenueSummaryReport's
   per-terminal grid so both dashboards read as the same UI family. */
[b-rr3c2npa5d] .k-grid-header,
[b-rr3c2npa5d] .k-grid-header-wrap,
[b-rr3c2npa5d] .k-grid .k-table-thead,
[b-rr3c2npa5d] .k-grid .k-header {
    background-color: #e9ecef;
    color: #495057;
    font-weight: 500;
}

[b-rr3c2npa5d] .k-grid,
[b-rr3c2npa5d] .k-grid .k-table-th,
[b-rr3c2npa5d] .k-grid .k-table-td {
    font-size: 0.75rem;
}

[b-rr3c2npa5d] .k-grid .k-table-th,
[b-rr3c2npa5d] .k-grid .k-table-td {
    padding-block: 4px;
    padding-inline: 6px;
}

/* Charts-row uses margin-bottom: 8px to separate from siblings, but the
   grid card is a direct .report-card placed between charts-row and the
   Day view card. Without its own bottom margin it sits flush against the
   Day view chart; this restores the same 8px gap the other report cards
   have. */
.charts-row + .report-card[b-rr3c2npa5d] {
    margin-bottom: 8px;
}

/* Grid wrapper + body reserve space for the full (lots × categories) row
   count so the card height doesn't shift when the user toggles legend
   cards or moves between paginated lot counts. Wrapper min-height covers
   header + body + pager; body min-height keeps the data area from
   shrinking when only a few rows are visible. Both come from inline CSS
   custom properties set in the .razor markup, in lockstep with PageSize. */
.monthly-grid-wrapper[b-rr3c2npa5d] {
    min-height: var(--monthly-grid-wrapper-min);
}

.monthly-grid-wrapper[b-rr3c2npa5d]  .k-grid-content {
    min-height: var(--monthly-grid-body-min);
}

/* Groups grid card — tabs (Subscriber / Online), 10-group cap warning,
   search input, and the grid itself stacked vertically. The button group
   doubles as the tab strip; the warning banner only appears when the
   active tab has more than the selectable cap. */
.groups-grid-card[b-rr3c2npa5d] {
    margin-bottom: 8px;
}

.groups-grid-card[b-rr3c2npa5d]  .k-button-group {
    margin-bottom: 12px;
}

.groups-grid-warning[b-rr3c2npa5d] {
    background-color: #d1e7fd;
    border: 1px solid #9ec5fe;
    color: #084298;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: 0.8rem;
}

/* Toolbar above the Groups grid: left slot (over the checkbox + ID
   columns, 108px wide) holds the "Sort selected first" toggle button;
   the rest of the row hosts the search input lined up with the
   GroupTitle column. */
.groups-grid-toolbar[b-rr3c2npa5d] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.groups-grid-toolbar-left[b-rr3c2npa5d] {
    flex: 0 0 auto;
    min-width: 108px;
    display: flex;
    align-items: center;
}

.groups-grid-toolbar-mid[b-rr3c2npa5d] {
    flex: 1;
    min-width: 0;
}

.groups-grid-card[b-rr3c2npa5d]  .groups-grid-search {
    width: 100%;
}

/* Match the sort-selected button height (28px) so the toolbar reads as
   one consistent row instead of the search box looking shrunken next to
   the taller button. */
.groups-grid-card[b-rr3c2npa5d]  .groups-grid-search,
.groups-grid-card[b-rr3c2npa5d]  .groups-grid-search .k-input,
.groups-grid-card[b-rr3c2npa5d]  .groups-grid-search .k-input-inner {
    height: 28px !important;
    min-height: 28px !important;
    box-sizing: border-box !important;
}

.groups-grid-sort-selected[b-rr3c2npa5d] {
    background-color: transparent;
    border: 1px solid #3b5998;
    color: #3b5998;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    box-sizing: border-box;
    min-width: 180px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}

.groups-grid-sort-selected:hover[b-rr3c2npa5d],
.groups-grid-sort-selected.active[b-rr3c2npa5d] {
    background-color: #3b5998;
    color: #fff;
}

.groups-grid-sort-selected-icon[b-rr3c2npa5d] {
    display: inline-block;
    width: 12px;
    text-align: center;
}

.groups-grid-select-header-row[b-rr3c2npa5d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

.groups-grid-deselect-icon[b-rr3c2npa5d] {
    background-color: transparent;
    border: none;
    color: #6c757d;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0 4px;
    line-height: 1;
}

.groups-grid-deselect-icon:hover[b-rr3c2npa5d] {
    color: #dc3545;
}

.groups-grid-select-header[b-rr3c2npa5d] {
    display: inline-block;
    cursor: pointer;
    user-select: none;
    color: #3b5998;
    font-size: 0.85rem;
    padding: 0 4px;
}

.groups-grid-select-header:hover[b-rr3c2npa5d] {
    color: #1a2b5f;
}

/* Wrapper around both upper chart cards so a single overlay banner can
   sit centred across them when the Groups cap kicks in. */
.charts-row-wrapper[b-rr3c2npa5d] {
    position: relative;
}

/* Title blur only on the LEFT card (the Monthly comparison chart) —
   the right card is now the Groups grid, which must stay crisp so the
   user can read its column headers and tab labels while picking groups. */
.charts-row-wrapper.charts-blurred[b-rr3c2npa5d]  .charts-row > .report-card:first-child .report-card-title {
    filter: blur(5px);
    opacity: 0.55;
    pointer-events: none;
}

/* Blue centred banner over the Monthly comparison chart only — in Peak
   the second top-row card is now the Groups grid, which the user needs
   to click on to pick groups. Blurring it would hide the very control
   the prompt is asking them to use. The Monthly comparison card occupies
   the left ~35% of the wrapper, so left: 17.5% centres the overlay on
   it. Anchored a third of the way down so it lands at roughly the
   optical centre of the chart area. pointer-events: none keeps clicks
   falling through. */
.charts-blurred-overlay[b-rr3c2npa5d] {
    position: absolute;
    top: 35%;
    left: 17.5%;
    transform: translate(-50%, -50%);
    background-color: #d1e7fd;
    border: 1px solid #9ec5fe;
    color: #084298;
    border-radius: 8px;
    padding: 10px 16px;
    font-weight: 600;
    text-align: center;
    z-index: 3;
    pointer-events: none;
    max-width: 32%;
}

.charts-blurred-content[b-rr3c2npa5d] {
    filter: blur(5px) !important;
    opacity: 0.55 !important;
    pointer-events: none;
}

/* Inline spinner next to the Groups grid title — visible while a
   Shift+click range selection's chart rebuild is in flight. */
.groups-grid-range-spinner[b-rr3c2npa5d] {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    vertical-align: middle;
}

/* Soft-deleted group title rendered with the same struck-through look the
   legacy sidebar used so the user can recognise inactive groups at a
   glance. */
.filter-label-deleted[b-rr3c2npa5d] {
    color: #6c757d;
    text-decoration: line-through;
}

/* Highlight the month column the user picked in the grid header or in the
   Monthly comparison chart. Applied via OnCellRender + HeaderClass so each
   cell of the selected column gets the side borders / tinted background. */
[b-rr3c2npa5d] .monthly-grid-col-selected {
    background-color: rgba(59, 89, 152, 0.08);
    border-left: 2px solid #3b5998;
    border-right: 2px solid #3b5998;
}

[b-rr3c2npa5d] .k-table-th.monthly-grid-col-selected,
[b-rr3c2npa5d] th.monthly-grid-col-selected {
    border-top: 2px solid #3b5998 !important;
}

[b-rr3c2npa5d] .k-table-row:last-child .monthly-grid-col-selected {
    border-bottom: 2px solid #3b5998;
}

/* Month column header is clickable — cursor + tight inline layout so the
   selection feels actionable. */
.monthly-grid-month-header[b-rr3c2npa5d] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
}

.monthly-grid-month-header:hover[b-rr3c2npa5d] {
    color: #1a2b5f;
}
/* /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. Vertical flex column
   so the Subscriber/Online .group-section children can split the leftover
   space below Lots + Periods. position: sticky pins the sidebar to the top
   of the scroll container (.peaks-scroll), and max-height: 100% caps it at
   the viewport height — so when the user clicks "Show all" and the group
   list would otherwise extend below the chart column, the cap stops the
   sidebar at the same bottom edge as the third chart and the inner
   .group-list-scroll picks up the overflow with its own scrollbar. */
.filtersLevel1[b-5pmr7jdjti] {
    display: flex;
    flex-direction: column;
    /* Sidebar is one of two flex children inside .peaks-layout. The parent
       has height: 100% + align-items: stretch, so the sidebar already
       claims the full visible region height — no sticky/contain tricks
       needed. min-height: 0 + overflow: hidden are still required so the
       inner .group-section's intrinsic content height doesn't push the
       sidebar past those bounds; the inner .group-list-scroll handles the
       overflow with its own scrollbar instead. */
    min-height: 0;
    overflow: hidden;
}

/* 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 row container inside a .group-section. flex: 1 + min-height: 0
   make it claim whatever vertical space is left in the .group-section
   after the chrome above it (ComboBox / select-all / show-all). The
   sidebar's max-height + overflow: hidden chain (.filtersLevel1 with
   min-height: 0 + overflow: hidden, .group-section with flex: 1 +
   min-height: 0) prevents the intrinsic content height from pushing the
   sidebar past the chart column's bottom; this container then handles
   the overflow with its own scrollbar. */
.group-list-scroll[b-5pmr7jdjti] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Each .group-section claims the leftover vertical space in the sidebar
   below the Lots/Periods/Klientų tipai blocks. flex: 1 + min-height: 0
   lets it stretch to fill that space — the inner .group-list-scroll
   (flex: 1; min-height: 0; overflow-y: auto) then takes the area below
   the section's chrome and scrolls internally when the group list is
   long. With two sections (Subscriber + Online) flex distributes the
   leftover space evenly between them. */
.group-section[b-5pmr7jdjti] {
    border: 0.7px solid LightGray;
    border-radius: 4px;
    padding: 6px;
    margin-top: 16px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
}

.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;
}

/* Lots and Periods sidebar headers — same collapse/expand affordance as the
   group sub-section headers above. user-select: none prevents the heading
   text from flashing into a text-selection state on quick double-clicks.
   The tighter top + bottom margins (vs. the default .filtersLevel1 h4
   spacing — see line ~153) keep two collapsed sections from leaving a
   tall blank gap before the next sidebar block. We chain the parent
   class .filtersLevel1 into the selector to win the specificity race
   against `.filtersLevel1 h4 { margin: 20px 0 12px }`. */
.filtersLevel1 h4.filter-section-header[b-5pmr7jdjti] {
    cursor: pointer;
    user-select: none;
    margin-top: 16px;
    margin-bottom: 4px;
}

.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;
}

/* Aikštelės strip lives in the parent OccupationReport component now —
   it sits above the grouping-mode tab strip so every sub-report shares
   one instance of the lot picker. Styles previously duplicated in the
   per-report scoped CSS files were left there but no longer apply
   because the markup migrated up here. */
.lot-strip-card[b-5pmr7jdjti] {
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    padding: 8px 12px;
    margin-bottom: 8px;
    /* Whole card is the accordion toggle — clicking anywhere on the
       white background collapses/expands the strip. The lot tiles
       inside use @onclick:stopPropagation so picking a lot doesn't
       also flip the accordion. */
    cursor: pointer;
}

.lot-strip-card-collapsed[b-5pmr7jdjti] {
    padding-top: 6px;
    padding-bottom: 6px;
}

.lot-strip-title[b-5pmr7jdjti] {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lot-strip-chevron[b-5pmr7jdjti] {
    font-size: 0.8em;
    color: #6c757d;
}

.lot-strip-row[b-5pmr7jdjti] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.lot-strip-row-hidden[b-5pmr7jdjti] {
    display: none;
}

.lot-strip-row .lot-card[b-5pmr7jdjti] {
    flex: 0 0 auto;
    min-width: 160px;
    padding: 6px 10px;
}

.lot-strip-row .dot-lot[b-5pmr7jdjti] {
    --dot-color: #3b5998;
}

.lot-strip-empty-message[b-5pmr7jdjti] {
    margin-top: 8px;
    padding: 8px 12px;
    background-color: #d1e7fd;
    border: 1px solid #9ec5fe;
    color: #084298;
    border-radius: 6px;
    font-size: 0.85rem;
    text-align: center;
}
/* /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: 8px;
    padding-bottom: 8px;
}

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

/* Trim the chart cards' vertical real estate aggressively — the goal is
   for the top of the grid to peek above the fold on a standard laptop,
   so the user immediately sees "there's a grid below" without scrolling. */
.charts-row > .report-card .k-chart[b-thlhhlau2b] {
    height: 14vh;
    min-height: 110px;
    max-height: 180px;
}

/* Lot strip directly above the charts-row also contributes to the
   above-the-fold budget — keep it tight so it doesn't push the chart
   row past the grid. */
.lot-strip-card[b-thlhhlau2b] {
    padding: 8px 12px;
}

.lot-strip-row[b-thlhhlau2b] {
    margin-top: 4px;
}

/* Collapsed state — only the "Aikštelės" title is shown, the row of
   lot cards is hidden via the class toggle below. Shrink the padding
   so the collapsed strip is just a slim bar. (The HTML `hidden`
   attribute can't be used here — Blazor renders `hidden="false"`
   when expanded, and any value of `hidden` is truthy to the browser,
   so the row would never re-appear.) */
.lot-strip-card-collapsed[b-thlhhlau2b] {
    padding-top: 6px;
    padding-bottom: 6px;
}

.lot-strip-row-hidden[b-thlhhlau2b] {
    display: none;
}

/* The Užimtumas + Transporto srautai grid card collapses to just its
   title when the user clicks anywhere on its white background outside
   the grid wrapper. Cursor signals the click target; the chevron flips
   between ▾ and ▸ depending on state. The grid wrapper itself stops
   propagation so row clicks don't trigger the collapse. */
.monthly-grid-card[b-thlhhlau2b] {
    cursor: pointer;
}

.monthly-grid-card-collapsed[b-thlhhlau2b] {
    padding-top: 6px;
    padding-bottom: 6px;
}

.monthly-grid-card-chevron[b-thlhhlau2b] {
    margin-left: 6px;
    font-size: 0.8em;
    color: #6c757d;
}

/* Each (category × lot) tuple in the Užimtumas/Transporto srautai grid
   spans three rows (Užimtumas / Įvažiavimų srautas / Išvažiavimų
   srautas). Hide the row-separator border between those three so the
   triplet visually reads as one merged block — only the row before the
   first row of the next triplet keeps its border. */
/* The Aikštelė + Klientų tipas columns belong to one merged left block
   per (lot × category) — we hide all horizontal borders on those cells
   so the lot banner reads as a continuous column instead of stripes. */
[b-thlhhlau2b] td.monthly-grid-triplet-merged,
[b-thlhhlau2b] td.monthly-grid-lot-cell {
    border-bottom-color: transparent;
    border-top-color: transparent;
}

/* Aikštelė column — the lot name appears once per lot (on the first
   block's Parkavimo įvykiai row) and reads as a banner spanning every
   row beneath it. Every row of the lot gets the .monthly-grid-lot-cell
   class so the row-separator borders below it can be hidden, and the
   banner row gets a heavier top border to mark where the new lot
   starts. */
[b-thlhhlau2b] td.monthly-grid-lot-cell {
    border-bottom-color: transparent;
}

[b-thlhhlau2b] td.monthly-grid-lot-banner {
    font-weight: 600;
    color: #1a2b5f;
    vertical-align: top;
    padding-top: 8px;
}

/* Row-kind label cell (Parkavimo įvykiai / Įvažiavimų srautas /
   Išvažiavimų srautas) — italic + bold to read as a distinct "kind
   marker" without competing with the numeric values for emphasis. */
[b-thlhhlau2b] td.monthly-grid-row-kind-cell {
    color: #495057;
    font-style: italic;
    font-weight: 500;
}

/* Hyperlink-style toggle for Įvažiavimų / Išvažiavimų srautas rows.
   Click expands a list of per-terminal sub-rows beneath the flow row.
   The chevron flips between ▾ (expanded) and ▸ (collapsed) to mirror
   the lot-strip auto-collapse affordance. */
[b-thlhhlau2b] .flow-row-toggle {
    color: #1a2b5f;
    cursor: pointer;
    user-select: none;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
    /* Match the Parkavimo įvykiai cell style (italic + 500) so all three
       triplet labels look the same; only the dotted underline + colour
       hint at "this one is clickable". */
    font-style: italic;
    font-weight: 500;
}

[b-thlhhlau2b] .flow-row-toggle:hover {
    color: #3b5998;
}

[b-thlhhlau2b] .flow-row-chevron {
    display: inline-block;
    width: 12px;
    margin-left: 6px;
    text-align: center;
    font-style: italic;
}

/* Terminal sub-row label — indented under the parent flow row so the
   grouping reads as a parent / children pair. Regular weight so the
   sub-rows don't compete with the bold parent row-kind labels above. */
[b-thlhhlau2b] .flow-row-terminal {
    display: inline-block;
    padding-left: 22px;
    color: #495057;
    font-style: normal;
    font-weight: normal;
}

/* Visual grouping for an expanded flow row + its terminal sub-rows.
   The parent and children share a soft grey background and a left
   accent border so the eye reads them as one box. */
[b-thlhhlau2b] td.flow-group-row {
    background-color: rgba(108, 117, 125, 0.07);
}

/* Top border on the expanded Įvažiavimų / Išvažiavimų srautas row
   should only span the Tipas + month columns, not the merged
   Aikštelė + Klientų tipas cells (those visually belong to the merged
   left block and shouldn't get a horizontal divider here). */
[b-thlhhlau2b] td.flow-group-row-parent:not(.monthly-grid-triplet-merged):not(.monthly-grid-lot-cell) {
    border-top: 2px solid #adb5bd;
}

[b-thlhhlau2b] td.flow-group-row-terminal {
    /* Sub-rows are visually nested — let them share the grey backdrop
       but stay separated by faint inner borders. */
    color: #495057;
}

/* When the last sub-row finishes, the very next non-group row should
   get a top border so the group has a clear bottom edge. The grid
   doesn't know which row is "after the last sub-row", so we paint a
   thicker bottom border on the terminal sub-row when nothing follows. */
/* Closing divider after a terminal sub-row — same scope as the opening
   divider above the parent flow row (Tipas + month columns only, not
   the merged Aikštelė / Klientų tipas cells). */
[b-thlhhlau2b] tr:has(td.flow-group-row-terminal) + tr td:not(.monthly-grid-triplet-merged):not(.monthly-grid-lot-cell) {
    border-top: 2px solid #adb5bd;
}

/* Row-block selection — clicking any row of a (lot × category) block
   highlights every row that shares its BlockKey. The TR-level class is
   stamped on by OnRowRender; we paint a tinted background on the cells
   so the whole grouped section reads as one selected block. The colour
   is deliberately stronger than the expand-group grey backdrop so the
   selection still reads after the user expands a terminal list. */
[b-thlhhlau2b] tr.monthly-grid-block-selected td {
    background-color: rgba(59, 89, 152, 0.18) !important;
}

[b-thlhhlau2b] tr.monthly-grid-block-selected td:first-child {
    border-left: 3px solid #3b5998;
}

/* Header row of a selected block (Parkavimo įvykiai for recognised
   categories, first TrafficIn for failure-mode ones). A stronger
   accent paint so the user reads it as the title of the highlighted
   group while everything below it is the body. */
[b-thlhhlau2b] tr.monthly-grid-block-header td {
    background-color: rgba(59, 89, 152, 0.28) !important;
    font-weight: 600;
}

/* Clickable title — acts as the accordion toggle. The chevron sits to
   its right and rotates between ▾ (expanded) / ▸ (collapsed) so the
   user reads "click here to toggle" at a glance. */
.lot-strip-title[b-thlhhlau2b] {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lot-strip-chevron[b-thlhhlau2b] {
    font-size: 0.8em;
    color: #6c757d;
}

/* Match the Monthly comparison legend card typography to the Traffic
   Flow legend cards above — plate-type name is the prominent dark navy
   title on top, the all-months total sits below as a slightly smaller
   bold value. Keeps both legend strips visually consistent. */
.legend-cards .legend-card-value[b-thlhhlau2b] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a2b5f;
}

.legend-card-total[b-thlhhlau2b] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #495057;
    margin-top: 2px;
}

/* .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: #2E5FA1;
}

.dot-subscriber[b-thlhhlau2b] {
    --dot-color: #3F8E5C;
}

/* Lot legend cards row below the Monthly comparison chart. Single-select
   filter — clicking a card pins that lot, others fade out. The selected
   card gets a navy border highlight; others drop to opacity 0.4 via
   .legend-card-faded (defined in statistics.css). Cards are evenly
   distributed across the full chart width; a single lot expands to fill
   the whole row. */
.lot-cards[b-thlhhlau2b] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.lot-cards .lot-card[b-thlhhlau2b] {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 10px;
}

.lot-cards .dot-lot[b-thlhhlau2b] {
    --dot-color: #3b5998;
}

/* Full-width strip above the charts that surfaces the lot picker as its
   own card. Visually mirrors the report-card pattern (white background,
   rounded corners, soft shadow) so it reads as part of the dashboard
   family. The strip sits below the grouping-mode tabs and above the
   charts-row; lot cards inside flex-fill across the entire width. */
.lot-strip-card[b-thlhhlau2b] {
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    padding: 12px 16px;
    margin-bottom: 8px;
}

/* Wrapping row of lot cards. Each card has a fixed minimum width so
   titles stay readable when there are many lots (15-20+); cards that
   don't fit on the first row wrap to the next, keeping every card at a
   consistent readable size. */
.lot-strip-row[b-thlhhlau2b] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.lot-strip-row .lot-card[b-thlhhlau2b] {
    flex: 0 0 auto;
    min-width: 160px;
    padding: 6px 10px;
}

.lot-strip-row .dot-lot[b-thlhhlau2b] {
    --dot-color: #3b5998;
}

/* Prompt shown inside the lot strip when no lots are selected. Same colour
   family as the in-grid warning banner so all "you need to pick X" prompts
   visually belong together. Sits below the lot cards so the user reads
   "here's the list, pick one" in one visual flow. */
/* Traffic Flow legend cards — one card per terminal with two rows
   inside: Įtekas total (green dot) and Ištekas total (navy dot). The
   row wraps when the chart card is narrow so cards never overflow. */
.traffic-flow-legend[b-thlhhlau2b] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.traffic-flow-legend-card[b-thlhhlau2b] {
    flex: 1 1 0;
    min-width: 140px;
    padding: 8px 10px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.traffic-flow-legend-title[b-thlhhlau2b] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #1a2b5f;
    margin-bottom: 6px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.traffic-flow-legend-row[b-thlhhlau2b] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #495057;
}

.traffic-flow-legend-row strong[b-thlhhlau2b] {
    margin-left: auto;
    color: #1a2b5f;
}

.traffic-flow-legend-dot[b-thlhhlau2b] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--dot-color, #999);
}

.traffic-flow-legend-label[b-thlhhlau2b] {
    color: slategrey;
}

.lot-strip-empty-message[b-thlhhlau2b] {
    margin-top: 8px;
    padding: 8px 12px;
    background-color: #d1e7fd;
    border: 1px solid #9ec5fe;
    color: #084298;
    border-radius: 6px;
    font-size: 0.85rem;
    text-align: center;
}

/* Monthly grid below the two charts — category + lot + 12 month columns.
   Styles mirror the .cell-monthly-grid look used by RevenueSummaryReport's
   per-terminal grid so both dashboards read as the same UI family. */
[b-thlhhlau2b] .k-grid-header,
[b-thlhhlau2b] .k-grid-header-wrap,
[b-thlhhlau2b] .k-grid .k-table-thead,
[b-thlhhlau2b] .k-grid .k-header {
    background-color: #e9ecef;
    color: #495057;
    font-weight: 500;
}

[b-thlhhlau2b] .k-grid,
[b-thlhhlau2b] .k-grid .k-table-th,
[b-thlhhlau2b] .k-grid .k-table-td {
    font-size: 0.75rem;
}

[b-thlhhlau2b] .k-grid .k-table-th,
[b-thlhhlau2b] .k-grid .k-table-td {
    padding-block: 4px;
    padding-inline: 6px;
}

/* Charts-row uses margin-bottom: 8px (line 38) to separate from siblings,
   but the grid card is a direct .report-card placed between charts-row and
   the Day view card. Without its own bottom margin it sits flush against
   the Day view chart; this restores the same 8px gap the other report
   cards have. */
.charts-row + .report-card[b-thlhhlau2b] {
    margin-bottom: 8px;
}

/* Grid wrapper + body reserve space for the full (lots × categories) row
   count so the card height doesn't shift when the user toggles legend
   cards or moves between paginated lot counts. Wrapper min-height covers
   header + body + pager; body min-height keeps the data area from
   shrinking when only a few rows are visible. Both come from inline CSS
   custom properties set in the .razor markup, in lockstep with PageSize. */
.monthly-grid-wrapper[b-thlhhlau2b] {
    min-height: var(--monthly-grid-wrapper-min);
}

.monthly-grid-wrapper[b-thlhhlau2b]  .k-grid-content {
    min-height: var(--monthly-grid-body-min);
}

/* Groups grid card — tabs (Subscriber / Online), 10-group cap warning,
   search input, and the grid itself stacked vertically. The button group
   doubles as the tab strip; the warning banner only appears when the
   active tab has more than the selectable cap. */
.groups-grid-card[b-thlhhlau2b] {
    margin-bottom: 8px;
}

.groups-grid-card[b-thlhhlau2b]  .k-button-group {
    margin-bottom: 12px;
}

.groups-grid-warning[b-thlhhlau2b] {
    background-color: #d1e7fd;
    border: 1px solid #9ec5fe;
    color: #084298;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: 0.8rem;
}

/* Toolbar above the Groups grid: left slot (over the checkbox + ID
   columns, 108px wide) holds the "Sort selected first" toggle button;
   the rest of the row hosts the search input lined up with the
   GroupTitle column. */
.groups-grid-toolbar[b-thlhhlau2b] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.groups-grid-toolbar-left[b-thlhhlau2b] {
    flex: 0 0 auto;
    min-width: 108px;
    display: flex;
    align-items: center;
}

.groups-grid-toolbar-mid[b-thlhhlau2b] {
    flex: 1;
    min-width: 0;
}

.groups-grid-card[b-thlhhlau2b]  .groups-grid-search {
    width: 100%;
}

/* Match the sort-selected button height (28px) so the toolbar reads as
   one consistent row instead of the search box looking shrunken next to
   the taller button. Telerik's TelerikTextBox renders as a wrapper +
   inner .k-input + .k-input-inner; we lock the height on every layer
   that contributes to the visible box so font / padding inside doesn't
   collapse the field below the button's box. */
.groups-grid-card[b-thlhhlau2b]  .groups-grid-search,
.groups-grid-card[b-thlhhlau2b]  .groups-grid-search .k-input,
.groups-grid-card[b-thlhhlau2b]  .groups-grid-search .k-input-inner {
    height: 28px !important;
    min-height: 28px !important;
    box-sizing: border-box !important;
}

.groups-grid-sort-selected[b-thlhhlau2b] {
    background-color: transparent;
    border: 1px solid #3b5998;
    color: #3b5998;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    /* Lock width / height + border-box so flipping the chevron between
       ▼ and ▽ (which render at slightly different widths) doesn't make
       the button visibly reflow on each toggle click. The :active /
       :focus borders also stay within the same outer box because the
       border lives inside the height via box-sizing. */
    box-sizing: border-box;
    min-width: 180px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}

.groups-grid-sort-selected:hover[b-thlhhlau2b],
.groups-grid-sort-selected.active[b-thlhhlau2b] {
    background-color: #3b5998;
    color: #fff;
}

/* Fixed-width slot for the leading chevron — keeps text aligned across
   the ▼ / ▽ swap. */
.groups-grid-sort-selected-icon[b-thlhhlau2b] {
    display: inline-block;
    width: 12px;
    text-align: center;
}

/* Layout for the select-column header: chevron toggle (sort-selected-on-
   top) on the left, "deselect all" button on the right. Both share the
   48px column so they stay compact regardless of grid font size. */
.groups-grid-select-header-row[b-thlhhlau2b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

.groups-grid-deselect-icon[b-thlhhlau2b] {
    background-color: transparent;
    border: none;
    color: #6c757d;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0 4px;
    line-height: 1;
}

.groups-grid-deselect-icon:hover[b-thlhhlau2b] {
    color: #dc3545;
}

/* Clickable header in the group grid's select column — toggles whether
   selected rows float to the top. The triangle icon flips filled when the
   sort is active, mirrors the affordance used by sortable grid headers. */
.groups-grid-select-header[b-thlhhlau2b] {
    display: inline-block;
    cursor: pointer;
    user-select: none;
    color: #3b5998;
    font-size: 0.85rem;
    padding: 0 4px;
}

.groups-grid-select-header:hover[b-thlhhlau2b] {
    color: #1a2b5f;
}

/* Wrapper around both upper chart cards so a single overlay banner can
   sit centred across them when the Groups cap kicks in. position:
   relative anchors the absolute-positioned overlay below. */
.charts-row-wrapper[b-thlhhlau2b] {
    position: relative;
}

/* Blur state leaves the chart cards at their normal size — only the
   filter blur + overlay banner change, no height tweaks. Resizing the
   chart between blur and normal states triggered visible re-layout
   jumps each time the selection updated. */

/* Blur the chart card titles too — without this the bold "Mėnesių
   palyginimas" / "Mėnesio rodinys" headings stay crisp and pull the
   eye away from the centred prompt banner. The overlay banner itself
   has z-index: 3 so it sits above the blurred titles. */
.charts-row-wrapper.charts-blurred[b-thlhhlau2b]  .report-card-title {
    filter: blur(5px);
    opacity: 0.55;
    pointer-events: none;
}

/* Blue centred banner over both upper chart cards — when the Groups cap
   kicks in, the Monthly comparison chart AND the Traffic Flow chart are
   both blurred (their data is meaningless until the user picks groups
   from the grid on the right). The banner spans across both cards so
   the prompt visually belongs to the whole row, not just the left card.
   Same colour family as the in-grid warning banner so both "too many
   groups" prompts visually belong together. Anchored a third of the
   way down so it lands at roughly the optical centre of the chart area.
   pointer-events: none keeps clicks falling through to the Groups grid
   below. */
.charts-blurred-overlay[b-thlhhlau2b] {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #d1e7fd;
    border: 1px solid #9ec5fe;
    color: #084298;
    border-radius: 8px;
    padding: 10px 16px;
    font-weight: 600;
    text-align: center;
    z-index: 3;
    pointer-events: none;
    max-width: 60%;
}

/* Chart frame stays mounted (data + axes valid) but renders blurred when
   the overlay banner is showing. filter: blur + opacity dims the chart
   so the user's eye lands on the prompt / Groups grid instead. */
.charts-blurred-content[b-thlhhlau2b] {
    filter: blur(5px) !important;
    opacity: 0.55 !important;
    pointer-events: none;
}

/* Inline spinner next to the Groups grid title — visible while a
   Shift+click range selection's chart rebuild is in flight. The grid
   keeps its highlighted rows visible instantly; the spinner signals
   that the chart catches up shortly. */
.groups-grid-range-spinner[b-thlhhlau2b] {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    vertical-align: middle;
}


/* Soft-deleted group title rendered with the same struck-through look the
   legacy sidebar used so the user can recognise inactive groups at a
   glance. */
.filter-label-deleted[b-thlhhlau2b] {
    color: #6c757d;
    text-decoration: line-through;
}

/* Keyboard navigation deferred — Telerik's built-in Navigable="true"
   handles arrow keys at the cell level. Row-focus highlighting via a
   custom .groups-grid-row-focused class can be re-added when we wire
   our own keyboard handler. */

/* Highlight the month column the user picked in the grid header or in the
   Monthly comparison chart. Applied via OnCellRender + HeaderClass so each
   cell of the selected column gets the side borders / tinted background. */
[b-thlhhlau2b] .monthly-grid-col-selected {
    background-color: rgba(59, 89, 152, 0.08);
    border-left: 2px solid #3b5998;
    border-right: 2px solid #3b5998;
}

[b-thlhhlau2b] .k-table-th.monthly-grid-col-selected,
[b-thlhhlau2b] th.monthly-grid-col-selected {
    border-top: 2px solid #3b5998 !important;
}

[b-thlhhlau2b] .k-table-row:last-child .monthly-grid-col-selected {
    border-bottom: 2px solid #3b5998;
}

/* Month column header is clickable — cursor + tight inline layout so the
   selection feels actionable. */
.monthly-grid-month-header[b-thlhhlau2b] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
}

.monthly-grid-month-header:hover[b-thlhhlau2b] {
    color: #1a2b5f;
}
/* /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: 16px;
    position: relative;
}

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

/* .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/SystemPages/TlsCertificates/ManagementForm.razor.rz.scp.css */
.title[b-rkx7u8lx7h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hint[b-rkx7u8lx7h] {
    padding-top: 0.2vh;
    display: block;
    color: var(--layout-color-primary);
}

[b-rkx7u8lx7h] .k-upload .k-file-icon-wrapper {
    display: none;
}

.upload-section[b-rkx7u8lx7h] {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.upload-section .text-danger[b-rkx7u8lx7h] {
    margin-top: 0.5rem;
}

.upload-section-buttons[b-rkx7u8lx7h] {
    margin-top: 1rem;
}

.upload-error-message[b-rkx7u8lx7h] {
    margin-top: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-radius: 4px;
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
}

.success-message[b-rkx7u8lx7h] {
    margin-top: 1rem;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
}

.upload-key-row[b-rkx7u8lx7h] {
    display: flex;
    gap: 4px;
    align-items: center;
}

.upload-key-input[b-rkx7u8lx7h] {
    width: 100%;
}
/* /Pages/SystemPages/TlsCertificates/TlsCertificates.razor.rz.scp.css */
[b-32bpgxtgpl] .k-grid .k-sort-icon,
[b-32bpgxtgpl] .k-grid .k-sort-order {
    display: none !important;
}

[b-32bpgxtgpl] .k-grid td .k-numerictextbox,
[b-32bpgxtgpl] .k-grid th .k-numerictextbox {
    width: 100% !important;
    min-width: unset !important;
}

[b-32bpgxtgpl] td.k-checkbox-cell,
[b-32bpgxtgpl] th.k-checkbox-cell {
    padding: 0 4px !important;
    text-align: center !important;
}

.expiry-badge[b-32bpgxtgpl] {
    display: block;
    text-align: center;
}

.expiry-badge-none[b-32bpgxtgpl] {
    background-color: rgba(13, 110, 253, 0.25);
    color: #084298;
    border-color: rgba(13, 110, 253, 0.45);
}

.expiry-badge-critical[b-32bpgxtgpl] {
    background-color: rgba(220, 53, 69, 0.25);
    color: #842029;
    border-color: rgba(220, 53, 69, 0.45);
}

.expiry-badge-warning[b-32bpgxtgpl] {
    background-color: rgba(253, 126, 20, 0.25);
    color: #7d3800;
    border-color: rgba(253, 126, 20, 0.45);
}

.expiry-badge-caution[b-32bpgxtgpl] {
    background-color: rgba(255, 193, 7, 0.25);
    color: #664d03;
    border-color: rgba(255, 193, 7, 0.45);
}

.expiry-badge-ok[b-32bpgxtgpl] {
    background-color: rgba(25, 135, 84, 0.25);
    color: #0a3622;
    border-color: rgba(25, 135, 84, 0.45);
}
/* /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[b-vszgjxwyxk]  .separator
{
    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;
}
[b-vszgjxwyxk] .error-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 1rem;
    padding: 3rem 2rem;
    text-align: center;
    box-sizing: border-box;
}
[b-vszgjxwyxk] .error-content .error-icon {
    font-size: 4rem;
    color: var(--kendo-color-primary);
}
[b-vszgjxwyxk] .error-content h3 {
    margin: 0;
    font-size: 1.6rem;
}
[b-vszgjxwyxk] .error-content .error-message {
    color: var(--kendo-color-on-app-surface, #3d3d3d);
    font-size: 1rem;
    width: 100%;
    max-width: 60%;
    word-break: break-word;
    background: var(--kendo-color-surface, #fafafa);
    padding: 1.5rem 2rem;
    border-radius: 6px;
    border-left: 4px solid var(--kendo-color-primary);
    line-height: 1.6;
}
[b-vszgjxwyxk] .error-content .error-hint {
    color: var(--kendo-color-on-app-surface, #3d3d3d);
    font-size: 0.95rem;
    opacity: 0.7;
}
[b-vszgjxwyxk] .error-content .error-actions {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}
/* /Shared/WsStatusIndicator.razor.rz.scp.css */
[b-nuskjhtcul] #ws-button.Connected svg,
.state.Connected[b-nuskjhtcul]  svg {
    fill: #28a745;
}

[b-nuskjhtcul] #ws-button.Connecting svg,
.state.Connecting[b-nuskjhtcul]  svg {
    fill: #ffc107;
}

[b-nuskjhtcul] #ws-button.Disconnected svg,
.state.Disconnected[b-nuskjhtcul]  svg {
    fill: #6c757d;
}

[b-nuskjhtcul] #ws-button.Error svg,
.state.Error[b-nuskjhtcul]  svg {
    fill: #dc3545;
}

#log-container[b-nuskjhtcul] {
    min-width: 90vw;
    max-height: 80vh;
}

.ws-connection[b-nuskjhtcul] {
    padding-bottom: 1vh;
}

.ws-log[b-nuskjhtcul] {
    background-color: var(--layout-color-background);
    padding: 1vh 1vw;
    border-radius: MIN(0.5vh, 0.5vw);
    max-height: 30vh;
    min-height: 30vh;
    overflow-y: scroll;
    width: 90vw;
}

.ws-log div[b-nuskjhtcul] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ws-log .Log[b-nuskjhtcul] {
    color: var(--kendo-color-primary-active);
    font-weight: bold;
}

.ws-log .Error[b-nuskjhtcul] {
    color: #dc3545;
    font-weight: bold;
}

.ws-log .Sent[b-nuskjhtcul] {
    color: var(--layout-color-primary);
    font-weight: bold;
}

.ws-title[b-nuskjhtcul] {
    padding: min(1vw, 1vh);
    display: flex;
    align-items: center;
    gap: 0.4vw;
}

.ws-title .state[b-nuskjhtcul] {
    padding-right: 0.5vw;
}

.ws-toolbar[b-nuskjhtcul] {
    display: flex;
    align-items: center;
    gap: 0.5vw;
    padding-bottom: 1vh;
}

.ws-filters[b-nuskjhtcul] {
    display: flex;
    gap: 0.3vw;
    flex-shrink: 0;
}

.ws-subscribe[b-nuskjhtcul] {
    padding: 0.3vh 0;
}

.ws-subscribe-types[b-nuskjhtcul] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2vw;
    max-height: 20vh;
    overflow-y: auto;
    padding-bottom: 0.5vh;
}

.ws-subscribe-types[b-nuskjhtcul]  .k-button {
    padding: 0.1rem 0.3rem;
    font-size: 0.7rem;
    min-width: 0;
    line-height: 1.2;
}

.ws-subscribe-actions[b-nuskjhtcul] {
    display: flex;
    align-items: center;
    gap: 0.4vw;
    padding-top: 0.3vh;
}

.ws-presets[b-nuskjhtcul] {
    display: flex;
    align-items: flex-start;
    gap: 0.4vw;
    padding-top: 0.3vh;
}

.ws-presets[b-nuskjhtcul]  .k-textarea {
    flex: 1;
    min-width: 30vw;
}

.ws-flow[b-nuskjhtcul] {
    padding: 0.5vh 0;
}

.ws-flow-toolbar[b-nuskjhtcul] {
    display: flex;
    gap: 0.4vw;
    padding-bottom: 0.5vh;
}

.ws-flow-empty[b-nuskjhtcul] {
    color: #888;
    padding: 3vh 2vw;
    text-align: center;
    font-style: italic;
}

.ws-flow-svg[b-nuskjhtcul] {
    width: 90vw;
    height: 50vh;
    background: var(--layout-color-background);
    border-radius: MIN(0.5vh, 0.5vw);
}

.flow-edge-label[b-nuskjhtcul] {
    pointer-events: none;
    font-size: 10px;
    color: #ccc;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 16px;
    transition: color 0.3s, text-shadow 0.3s;
}

.flow-edge-active[b-nuskjhtcul] {
    color: #00ff88;
    text-shadow: 0 0 6px rgba(0, 255, 136, 0.6);
    font-weight: bold;
}

.flow-node-label[b-nuskjhtcul] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    pointer-events: none;
}

.flow-node-name[b-nuskjhtcul] {
    font-size: 11px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    word-break: break-word;
    line-height: 1.2;
}

.flow-node-time[b-nuskjhtcul] {
    font-size: 9px;
    color: #888;
}

.flow-broadcast[b-nuskjhtcul] {
    color: #ffc107;
    font-style: italic;
}