/* /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;
}
/* Annotation overlay: a transparent canvas covering the video box, drawn at display resolution
   (see webcodecs.js drawAnnotationOverlay) so boxes/text stay crisp on low-res streams. Below the
   loader/lost overlays (later in source, same z) and click-through. */
#videoElements[b-2swmspgzzf]  .camera-id .annotation-overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}
#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
   live-frame 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 for the stacked video + slot-overlay canvases; it fills the stage so both
   share one box and the overlay quads line up with the painted frame. */
.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;
}

/* Fixed-size viewport; the img inside is scaled + shifted (ThumbImgStyle) to show just the slot's
   crop box. overflow:hidden clips the rest of the frame. Rendered only when there is a photo. */
.sensor-history-thumb[b-5k7ezgqj4a] {
    position: relative;
    width: 4.5rem;
    height: 3rem;
    overflow: hidden;
    border-radius: 3px;
    border: 1px solid #ddd;
}

.sensor-history-thumb img[b-5k7ezgqj4a] {
    position: absolute;
    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;
    outline: none; /* focused on open (for Esc-to-close) — suppress the focus ring */
}

.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/Pos/PosView.razor.rz.scp.css */
/* Page-specific bits only — the wrapper/surface/title chrome comes from main.css so this page
   matches every other CloudUI page. */

/* .surface is flex-grow:1 inside the flex-column .wrapper, so it already fills the page height.
   Making it a column here lets the stage claim the leftover space and centre the screen in it,
   without anyone having to subtract header/toolbar heights in pixels. */
.pos-view-surface[b-85tyjg42kv] {
    display: flex;
    flex-direction: column;
}

.pos-view-toolbar[b-85tyjg42kv] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.pos-view-status[b-85tyjg42kv] {
    font-size: 13px;
    opacity: 0.75;
}

.pos-view-status.is-live[b-85tyjg42kv] {
    opacity: 1;
    font-weight: 600;
}

.pos-view-status.is-stale[b-85tyjg42kv] {
    opacity: 1;
    font-weight: 600;
    color: var(--kendo-color-warning, #d68910);
}

/* A live indicator earns its keep here: a frozen frame and a live one look identical, so
   without it an operator cannot tell a stalled stream from an idle paystation. */
.pos-view-status.is-live[b-85tyjg42kv]::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--kendo-color-success, #2ecc71);
    animation: pos-view-pulse-b-85tyjg42kv 1.6s ease-in-out infinite;
}

@keyframes pos-view-pulse-b-85tyjg42kv {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

/* Takes the space the title and toolbar leave over, and centres the screen in it both ways.
   min-height:0 is what lets the canvas shrink instead of overflowing the surface. */
.pos-view-stage[b-85tyjg42kv] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* min-* matter before the first frame: the canvas backing store starts at 2x2, and this box
   shrink-wraps it, so the "waiting" overlay (inset: 0) would otherwise measure 2x2 and its loader
   collapse to nothing — invisible exactly when it is the only thing to show. */
.pos-view-screen[b-85tyjg42kv] {
    position: relative;
    display: flex;
    min-width: 320px;
    min-height: 180px;
    max-width: 100%;
    max-height: 100%;
    background: #000;
    border-radius: min(0.5vh, 0.5vw);
    border: 0.2vh solid var(--kendo-color-primary);
    overflow: hidden;
}

/* The backing store is the frame's own pixel size; this scales it down to fit while keeping the
   aspect ratio, which is what makes normalized click coordinates land correctly. */
.pos-view-canvas[b-85tyjg42kv] {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    cursor: pointer;
}

/* Frozen frame: still readable, visibly not live, and not clickable — a click would be sent to a
   paystation whose screen has almost certainly moved on. */
.pos-view-screen.is-stale .pos-view-canvas[b-85tyjg42kv] {
    filter: grayscale(0.7) brightness(0.6);
    cursor: not-allowed;
}

.pos-view-overlay[b-85tyjg42kv] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    font-size: 14px;
}

/* Click feedback, spawned by pos-screen.js showRipple(). */
[b-85tyjg42kv] .pos-screen-ripple {
    position: absolute;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid var(--kendo-color-success, #2ecc71);
    border-radius: 50%;
    pointer-events: none;
    animation: pos-screen-ripple-b-85tyjg42kv 0.5s ease-out forwards;
}

@keyframes pos-screen-ripple-b-85tyjg42kv {
    from { transform: scale(0.4); opacity: 1; }
    to { transform: scale(2.6); opacity: 0; }
}
/* /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;
}


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

/* The figure sits below the name and stays quieter than it — lighter weight
   and a grey tone, matching the Summary report's cards. */
.legend-card-total[b-rr3c2npa5d] {
    font-size: 0.75rem;
    font-weight: 400;
    color: #6c757d;
    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;
}

/* …except the plate-type cards, which are read-only: the peak is the max of
   the SUM across plate types, so an individual type cannot be switched off.
   Show a default cursor so the card doesn't advertise a click that does
   nothing. */
.legend-card-static[b-rr3c2npa5d] {
    cursor: default;
}

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

/* Direction label cell (Įvažiavimų / Išvažiavimų srautas) — italic + bold
   to read as a distinct 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;
}

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

/* All three grouping modes (customer type / customer group / vehicle type)
   share one card shape: a muted dimension label, the name as the prominent
   dark navy line, and the selected month's figure beneath it. */
.legend-cards .legend-card-value[b-thlhhlau2b] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a2b5f;
}

/* The figure is deliberately quieter than the name above it — smaller, lighter
   weight and a grey tone. It answers "how many" only after the eye has found
   "which one", so it must not compete with the name for attention. */
.legend-card-total[b-thlhhlau2b] {
    font-size: 0.75rem;
    font-weight: 400;
    color: #6c757d;
    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;
}

/* Terminal name + lot cells of the flow grid. Each terminal spans two rows
   (entry / exit); only the first carries the text, so the borders between
   the pair are hidden and the pair reads as one block. */
[b-thlhhlau2b] td.monthly-grid-terminal-cell {
    border-bottom-color: transparent;
    border-top-color: transparent;
}

[b-thlhhlau2b] td.monthly-grid-terminal-banner {
    font-weight: 600;
    color: #1a2b5f;
}

/* Chip naming the terminal the user pinned in the grid. Sits at the right
   edge of the Traffic Flow and heatmap card titles; clicking it clears the
   filter, so it doubles as the way back to "all terminals". */
.terminal-filter-title[b-thlhhlau2b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.terminal-filter-chip[b-thlhhlau2b] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #d1e7fd;
    border: 1px solid #9ec5fe;
    color: #084298;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    max-width: 240px;
}

.terminal-filter-chip:hover[b-thlhhlau2b] {
    background-color: #b6d9fc;
}

.terminal-filter-chip-label[b-thlhhlau2b] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.terminal-filter-chip-clear[b-thlhhlau2b] {
    font-size: 0.8em;
    opacity: 0.7;
}

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

/* Only the TOP row is height-locked — the Month/Day row below shares the
   .charts-row class and must keep sizing to its own content.
   700px = the average grid's fixed 324px (5 rows + tabs + search + pager, see
   .dwell-right-column) plus ~370px for the donuts above it. The donuts are
   three side-by-side pies, so their card needs real vertical room or they
   render as tiny circles; the Monthly-comparison chart beside them grows by
   the same amount. */
.charts-row-top[b-gzava70gfb] {
    height: 700px;
    align-items: stretch;
}

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

/* In the height-locked top row the Monthly-comparison card must divide its
   560px between the chart and the legend strip instead of letting the chart
   keep its default 400px and push the cards out of the card. Flex column +
   min-height:0 on the chart is what makes the chart the part that gives way,
   so every legend card stays visible. */
.charts-row-top > .report-card:first-child[b-gzava70gfb] {
    display: flex;
    flex-direction: column;
}

.charts-row-top > .report-card:first-child[b-gzava70gfb]  .k-chart {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}

/* The legend strip keeps its natural height — it is what the chart yields to. */
.charts-row-top > .report-card:first-child > .legend-cards[b-gzava70gfb] {
    flex: 0 0 auto;
}

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

/* Right-hand 65% of the top row, split vertically between the donuts and the
   average grid. Takes the same flex share the Month view card used to have, so
   the row's 35/65 split is unchanged. */
.dwell-right-column[b-gzava70gfb] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* min-height: 0 lets the cards shrink to their allotted share instead of being
   pushed taller by their content. */
.dwell-right-column > .report-card[b-gzava70gfb] {
    min-height: 0;
    padding-top: 16px;
    display: flex;
    flex-direction: column;
}

/* The grid gets a fixed 324px — enough for 5 data rows plus its tabs, search box
   and pager — and the donuts take whatever is left. An even 50/50 split left the
   grid showing only two or three rows, which is the whole reason this row is
   height-locked. */
.dwell-right-column > .dwell-donuts-card[b-gzava70gfb] {
    flex: 1 1 auto;
}

.dwell-right-column > .dwell-avg-grid-card[b-gzava70gfb] {
    flex: 0 0 324px;
}

/* THREE fixed slots, always — a donut occupies one third of the card whether one
   group is ticked or three, and empty slots simply stay empty. Only when more than
   three groups are ticked does the row divide by the real count (see
   .dwell-donuts-row-many).

   This is deliberate after several attempts at sizing columns to the live count:
   every one of them made the column width change as groups were ticked, and
   because Telerik draws the ring to the box's SHORTER side while centring it on
   the longer one, a widening column moved the ring away from its own title and a
   narrowing one clipped it. A constant third keeps the ring the same size in the
   same place, so ticking a group only fills or empties a slot. */
.dwell-donuts-row[b-gzava70gfb] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
}

/* Past three, equal slices of the real count — three fixed slots would overflow
   the card. Set from the markup, which knows the count. */
.dwell-donuts-row-many[b-gzava70gfb] {
    grid-template-columns: repeat(var(--dwell-donut-count), 1fr);
}

.dwell-donut[b-gzava70gfb] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Legend card inside each donut's frame, above the ring. flex: 0 0 auto keeps it
   at its natural height so the ring below absorbs the leftover space instead of
   the card stretching; the ring is what should grow when the row gets taller. */
.dwell-donut-legend-card[b-gzava70gfb] {
    flex: 0 0 auto;
    min-width: 0;
    margin-bottom: 4px;
    padding: 4px 0;
    /* Centre the title over the ring, which Telerik centres horizontally in the
       chart box below. justify-content, NOT text-align: .legend-card is itself a
       flex container, so text-align does not move its child div — that is why the
       titles stayed hard left while the rings sat centred, and the two looked
       unrelated. */
    justify-content: center;
    text-align: center;
    /* The parent .dwell-donut is the click target, so the card must not swallow
       hover/click events on its way there. */
    pointer-events: none;
}

/* The card sits ON the donut frame, which is what carries the hover tint, so the
   card must not paint its own surface over it — .legend-card's default #f8f9fa
   would hide the tint exactly the way Telerik's white chart background did.
   Transparent here means the whole panel tints as one on hover. */
.dwell-donut-legend-card[b-gzava70gfb],
.dwell-donut:hover .dwell-donut-legend-card[b-gzava70gfb] {
    background-color: transparent;
    box-shadow: none;
    border-color: transparent;
}

/* Long group names get an ellipsis rather than wrapping to a second line, which
   would make the donuts in the row uneven in height. The full name stays
   available as the element's title attribute. */
.dwell-donut-legend-card .legend-card-value[b-gzava70gfb] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The chart box spans the full column and the ring centres inside it.

   Two earlier attempts tried to left-align the ring by shrinking this box to a
   square (aspect-ratio + width:auto + margin-right:auto). Do NOT reintroduce
   that: the hover/click tint lives on .dwell-donut, which is always full column
   width, so a narrower chart box makes the tinted rectangle extend far past the
   ring — a big empty highlighted area on the right. A full-width box keeps the
   ring, the tint and the click target as one region, which matters more here than
   flush-left alignment, because the whole panel is a toggle. */
.dwell-donut[b-gzava70gfb]  .k-chart {
    /* height:0 + flex:1 1 auto, not height:100%: the latter resolves against the
       parent's full height and so overshoots the space actually left under the
       title, which pushed the ring down and let it spill past the column. This way
       flex assigns the height and the box is exactly the remainder. */
    flex: 1 1 auto;
    width: 100%;
    height: 0;
    min-height: 0;
    min-width: 0;
    padding: 0;
    overflow: hidden;
}

/* Each donut doubles as its category's on/off switch. Background-only states —
   no border, so there is no second colour that could fail to match the fill.
   At rest the card stays white (no tint, no frame): three permanently outlined
   panels made the row look busy. The wash appears only on hover/focus below. */
.dwell-donut-clickable[b-gzava70gfb] {
    cursor: pointer;
    border-radius: 8px;
    padding: 4px;
    transition: opacity 0.2s ease, filter 0.2s ease, background-color 0.15s ease;
}

/* The browser's own focus ring is what drew that hard outline after a click —
   Firefox renders :focus-visible on any element carrying a click handler, and it
   uses the accent colour, which is why it appeared red and ignored every border
   rule tried here. Replace it with the same wash the hover uses, so focus and
   hover are indistinguishable and there is only ever one colour on the card. */
.dwell-donut.dwell-donut-clickable:hover[b-gzava70gfb],
.dwell-donut.dwell-donut-clickable:focus[b-gzava70gfb],
.dwell-donut.dwell-donut-clickable:focus-visible[b-gzava70gfb] {
    background-color: rgba(59, 89, 152, 0.06);
    outline: none;
}

/* Telerik paints the chart's own white background from all.css, which sits on
   top of the card's hover tint and leaves a white block where the ring is — so
   hovering appeared to do nothing over most of the donut. !important is needed
   because the framework's own selector is more specific than this one. */
.dwell-donut[b-gzava70gfb]  .k-chart,
.dwell-donut[b-gzava70gfb]  .k-chart-surface,
.dwell-donut[b-gzava70gfb]  .k-chart svg,
.dwell-donut[b-gzava70gfb]  .k-chart .k-chart-surface > svg {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
}

/* Switched-off state greys the WHOLE donut — ring, title and figure — rather
   than tinting a border around it. The ring is the thing the eye reads here, so
   desaturating it is what actually communicates "excluded"; a greyed frame
   around a still-colourful chart read as a rendering glitch.
   grayscale() drains the slice colours, and the reduced opacity pushes the
   whole card back without hiding which category it is. */
.dwell-donut-off[b-gzava70gfb] {
    filter: grayscale(100%);
    opacity: 0.45;
}

/* === Group picker inside the average grid (Groups mode only) ========= */

.dwell-avg-grid-card[b-gzava70gfb]  .k-button-group {
    margin-bottom: 8px;
}

/* Shown when a tab holds more groups than can be ticked — the cap is a hard
   limit, so the user needs to know why a checkbox went dead. */
.dwell-group-warning[b-gzava70gfb] {
    background-color: #d1e7fd;
    border: 1px solid #9ec5fe;
    color: #084298;
    border-radius: 6px;
    padding: 6px 10px;
    margin-bottom: 8px;
    font-size: 0.75rem;
}

.dwell-group-toolbar[b-gzava70gfb] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.dwell-avg-grid-card[b-gzava70gfb]  .dwell-group-search {
    flex: 1;
    min-width: 0;
}

/* "3 / 10" — reads as a budget, so the user sees how much room is left before
   the checkboxes start refusing. */
.dwell-group-count[b-gzava70gfb] {
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
}

.dwell-avg-grid-card[b-gzava70gfb]  .dwell-group-checkbox {
    cursor: pointer;
}

/* A checkbox disabled by the cap still needs to look deliberate rather than
   broken. */
.dwell-avg-grid-card[b-gzava70gfb]  .dwell-group-checkbox:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.dwell-avg-grid-card[b-gzava70gfb]  .dwell-group-clear {
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    padding: 0 2px;
}

.dwell-avg-grid-card[b-gzava70gfb]  .dwell-group-clear:hover {
    color: #dc3545;
}

.dwell-avg-grid-card[b-gzava70gfb]  .dwell-group-select-header {
    text-align: center;
}

/* Month header doubles as the month picker, like the grids on the Occupation
   reports — clicking it selects that month everywhere (chart plot band, donuts,
   Month view). Cursor signals that. */
.dwell-avg-grid-card[b-gzava70gfb]  .monthly-grid-month-header {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.dwell-avg-grid-card[b-gzava70gfb]  .monthly-grid-month-header:hover {
    color: #1a2b5f;
}

/* Month headers right-align with the figures beneath them. Telerik's TextAlign
   only reaches the data cells, so the header cell needs its own rule — and the
   inner .k-link it wraps the title in has to be pushed over too, otherwise the
   text stays left inside a right-aligned cell. */
.dwell-avg-grid-card[b-gzava70gfb]  .dwell-avg-header-right,
.dwell-avg-grid-card[b-gzava70gfb]  th.dwell-avg-header-right {
    text-align: right;
}

.dwell-avg-grid-card[b-gzava70gfb]  .dwell-avg-header-right .k-link {
    justify-content: flex-end;
}

/* Selected month column in the average grid — same treatment as the Occupation
   reports' grids so the highlight reads identically across tabs. */
.dwell-avg-grid-card[b-gzava70gfb]  .monthly-grid-col-selected {
    background-color: rgba(59, 89, 152, 0.08);
    border-left: 2px solid #3b5998;
    border-right: 2px solid #3b5998;
}

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

/* Closes the outline along the bottom. The side borders come from every cell in
   the column and the top from the header, so the last row has to supply the
   fourth edge — without it the highlight reads as an open-ended channel. */
.dwell-avg-grid-card[b-gzava70gfb]  .k-table-row:last-child .monthly-grid-col-selected {
    border-bottom: 2px solid #3b5998;
}

/* The grid area scrolls inside its half rather than stretching the card. */
.dwell-avg-grid-card[b-gzava70gfb]  .k-grid {
    flex: 1 1 auto;
    min-height: 0;
}

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

/* Average-duration grid — same compact typography as the grids on the
   Occupation Summary / Peak reports so all four tabs read as one family. */
.dwell-avg-grid-card[b-gzava70gfb]  .k-grid-header,
.dwell-avg-grid-card[b-gzava70gfb]  .k-grid-header-wrap,
.dwell-avg-grid-card[b-gzava70gfb]  .k-grid .k-table-thead,
.dwell-avg-grid-card[b-gzava70gfb]  .k-grid .k-header {
    background-color: #e9ecef;
    color: #495057;
    font-weight: 500;
}

.dwell-avg-grid-card[b-gzava70gfb]  .k-grid,
.dwell-avg-grid-card[b-gzava70gfb]  .k-grid .k-table-th,
.dwell-avg-grid-card[b-gzava70gfb]  .k-grid .k-table-td {
    font-size: 0.75rem;
}

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

/* Never ellipsise: a truncated average is worse than no average, since the
   figure is the whole point of the row. */
.dwell-avg-grid-card[b-gzava70gfb]  .k-grid .k-table-td,
.dwell-avg-grid-card[b-gzava70gfb]  .k-grid .k-table-th {
    text-overflow: clip;
    white-space: nowrap;
}

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

/* Dwell-span name on top, its figure beneath — the same two-line card the
   Occupation Summary and Peak reports use. The figure stays quieter than the
   name: smaller, lighter and grey, so the eye finds "which interval" first. */
.legend-cards .legend-card-value[b-gzava70gfb] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a2b5f;
}

.legend-card-total[b-gzava70gfb] {
    font-size: 0.75rem;
    font-weight: 400;
    color: #6c757d;
    margin-top: 2px;
}

/* 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/GroupOccupation.razor.rz.scp.css */
.group-occupation-banner[b-xvel0oxokl] {
    background-color: #d1e7fd;
    border: 1px solid #9ec5fe;
    color: #084298;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: 0.8rem;
}

.group-occupation-banner.denied[b-xvel0oxokl] {
    background-color: #f8d7da;
    border-color: #f1aeb5;
    color: #58151c;
}

.group-occupation-banner .headline[b-xvel0oxokl] {
    font-weight: 600;
    margin-bottom: 4px;
}

.group-occupation-banner .hint[b-xvel0oxokl] {
    margin-top: 4px;
    opacity: 0.85;
}

.group-occupation-notice[b-xvel0oxokl] {
    padding: 8px 12px;
    font-size: 0.8rem;
    opacity: 0.75;
}
/* /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;
}