@import "ronya-design-system.less";
@import "TelerikComponents.less";
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.listing-card.hover-card-green {
    transition: 200ms ease all;

    &:hover {
        background: @color-primary-bg !important;
        border: 1px solid @color-primary !important;
    }
}

html {
    color: @color-text-primary !important;
}

body {
    background: #EDEFF3;
    font-family: @font-family-base;
    font-size: @font-size-base;
    color: @color-text-primary !important;
}


// ============================================================
//   LAYOUT
// ============================================================
// ── MasterLayout wrapper ──

#app {
    background: #EDEFF3;
}

.app-layout {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    align-items: stretch;
    /* @media (min-width:1440px) {
        max-width: 1224px;
        margin: 0 auto;
        min-height: 80vh;
    }*/
}

.main-content {
    flex: 1;
    min-width: 0;
    overflow-x: hidden;
    max-width: 1920px;
    margin-right: auto;
}
// ── Legacy MainLayout (keep working if used elsewhere) ──
.page.relative {
    display: flex !important;
    flex-direction: row !important;
    min-height: 100vh;
    align-items: stretch;
}

.sidebar ~ main.height-scroll,
.sidebar + main.height-scroll {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    // propagate full height down the legacy MainLayout wrapper chain
    > section {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;

        > div {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 0;

            > .col-12 {
                flex: 1;
                display: flex;
                flex-direction: column;
                min-height: 0;
            }
        }
    }
}
// ============================================================
//   SIDEBAR
// ============================================================

.sidebar {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    width: 100px;
    min-width: 105px;
    max-width: 120px;
    background: #ffffff;
    border-right: 1px solid @color-border-stat-card;
    display: flex;
    flex-direction: column;
    z-index: 200;
    overflow: hidden;
    flex-shrink: 0;
}

.sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px 0 10px;
    gap: 8px;
}

.logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

.logo-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.hamburger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: @color-gray-500;
    font-size: 20px;
    cursor: pointer;
    transition: background @transition-fast, color @transition-fast;
    padding: 0;

    &:hover {
        background: @color-gray-100;
        color: @color-gray-700;
    }
}

.nav-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    padding: 20px 0;
    flex: 1;
    gap: 6px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;

    &::-webkit-scrollbar {
        display: none;
    }
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 95px;
    text-decoration: none;
    color: inherit;
    position: relative;
    gap: 4px;
    padding: 6px 0;
    background: transparent;

    &:hover {
        background: transparent;

        .nav-icon {
            background: @color-text-primary;
            color: @color-white;

            i {
                color: @color-white;
            }

            img {
                filter: brightness(0) invert(1);
            }
        }

        .nav-label {
            color: @color-text-primary;
        }
    }

    &.active {
        background: transparent;

        .nav-icon {
            background: @color-text-primary;

            i {
                color: @color-white;
            }

            img {
                filter: brightness(0) invert(1);
            }
        }

        .nav-label {
            color: @color-text-primary;
            font-weight: @font-weight-semibold;
        }
    }
}

.nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    transition: background @transition-fast;
    flex-shrink: 0;

    img {
        width: 22px;
        height: 22px;
        object-fit: contain;
        transition: filter @transition-fast;
    }

    i {
        font-size: 20px;
        color: @color-text-primary;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: color @transition-fast;
    }
}

.nav-label {
    font-size: 9px;
    font-weight: @font-weight-medium;
    color: @color-text-primary;
    text-align: center;
    line-height: 1.2;
    white-space: normal;
    transition: color @transition-fast;
    word-break: break-word;
}
// sidebar footer (tour btn + avatar)
.sidebar-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0 14px;
    gap: 4px;
}

.sidebar-footer-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 46px;
    height: 46px;
}
// Language switcher compact mode inside sidebar
.lang-wrap {
    .k-input-inner {
        padding: 0 4px !important;
        justify-content: center;
        // keep only the flag, hide label text
    }
}

.avatar-mini {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: @color-text-primary;
    color: @color-text-inverse;
    font-size: @font-size-sm;
    font-weight: @font-weight-bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
// ── Expanded sidebar (MasterMenu only) ──────────────────────
// .sidebar is shared by MasterMenu, NavMenu and OnboardingMenu; only the master
// menu opts into the wide grouped layout, the other two keep the icon rail. The
// rows themselves are the detail-nav classes (.nd-detail-nav-section /
// .nd-detail-nav-item / .nd-nav-dot) reused as-is — this block only re-flows the
// shell from a centred column of icons to a left-aligned list.
.sidebar--expanded {
    width: 280px;
    min-width: 280px;
    max-width: 280px;

    .sidebar-brand {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding: 18px 20px 14px;
    }

    .logo-img {
        width: auto;
        height: 32px;
    }

    .nd-search-combo {
        margin: 20px 16px 0px;
        background: @color-gray-50;
    }

    .nd-search-input-wrap {
        min-width: 0;
        flex: 1;
    }

    .nd-search-input {
        padding-left: 38px;
    }
    /*.nd-search-icon {
        font-size: 18px;
        color: @color-gray-400;
    }*/

    .nav-list {
        align-items: stretch;
        padding: 4px 0 16px;
        gap: 0;
    }

    .nd-detail-nav-section {
        padding: 20px 24px 10px;
        /*  font-size: 10px;*/
        /*color: @color-gray-400;*/
    }

    .nd-detail-nav-item {
        margin: 0 10px;
        padding-left: 12px;
        padding-right: 12px;
        color: @color-gray-600 !important;
        font-weight: @font-weight-medium;

        .nd-nav-dot {
            width: 5px;
            height: 5px;
        }
    }

    button.nd-detail-nav-item {
        width: auto;
        border: none;
        background: transparent;
        font-family: inherit;
        text-align: left;
    }

    .nav-icon {
        width: 22px;
        height: 22px;
    }

    .sidebar-footer .nav-icon {
        width: auto;
        height: auto;
    }
    // .nav-icon pins its glyph to the primary text colour — let the selected row tint it green
    .nd-detail-nav-item.active .nav-icon i {
        color: inherit;
    }

    .sidebar-footer {
        align-items: flex-start;
        padding: 5px 20px 5px;
        border-top: 1px solid @color-border-stat-card;
    }

        .sidebar-footer .nav-item {
            width: auto;
        }
}
// ============================================================
//   MASTER MENU — MOBILE TOPBAR & DRAWER
// ============================================================

.app-mobile-topbar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: #ffffff;
    border-bottom: 1px solid @color-border-stat-card;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 300;
}

.app-mobile-logo {
    display: flex;
    align-items: center;

    img {
        width: 90px;
        object-fit: contain;
    }
}

.app-mobile-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-mobile-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    border: none;
    background: transparent;
    color: @color-text-primary;
    font-size: 25px;
    cursor: pointer;
    border-radius: 8px;
    padding: 0;
    transition: background @transition-fast, color @transition-fast;

    &:hover {
        background: @color-gray-100;
        color: @color-gray-700;
    }
}

.app-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 400;
}

.app-mobile-drawer {
    position: fixed;
    top: 0;
    left: -280px;
    width: 260px;
    height: 100vh;
    background: #ffffff;
    z-index: 500;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.12);
    transition: left 0.25s ease;

    &.open {
        left: 0;
    }

    .nd-detail-nav-section {
        padding: 20px 20px 10px;
        font-size: 12px;
        color: @color-gray-400;
    }

    .app-drawer-item {
        font-size: 13px;
        color: @color-gray-600;
    }

    .nd-detail-nav-item {
        color: @color-gray-600 !important;
        font-weight: @font-weight-medium;

        .nd-nav-dot {
            width: 5px;
            height: 5px;
        }
    }
}

@media (min-width: @screen-lg) {
    .app-mobile-drawer,
    .app-drawer-overlay {
        display: none !important;
    }
}

.app-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 8px;
    border-bottom: 1px solid @color-border-stat-card;
}

.app-drawer-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: @color-gray-500;
    font-size: 20px;
    cursor: pointer;
    border-radius: 6px;
    padding: 0;

    &:hover {
        background: @color-gray-100;
        color: @color-gray-700;
    }
}

.app-drawer-nav {
    display: flex;
    flex-direction: column;
    padding: 12px 0;
    overflow-y: auto;
    flex: 1;
}

.app-drawer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    text-decoration: none;
    color: @color-text-primary;
    font-size: @font-size-sm;
    font-weight: @font-weight-medium;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    transition: background @transition-fast;

    i, .material-symbols-outlined {
        font-size: 20px;
        color: @color-gray-500;
        flex-shrink: 0;
    }

    &:hover, &.active {
        background: @color-gray-50;
        color: @color-text-primary;

        i, .material-symbols-outlined {
            color: @color-text-primary;
        }
    }

    .avatar-mini {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }
}

// ============================================================
//   CARD
// ============================================================

.card {
    background: @color-bg-card;
    border: 1px solid @color-border-card;
    border-radius: @radius-xl;
    box-shadow: @shadow-card;
    padding: @space-6 @space-7;
}

.card-title {
    font-family: @font-family-base;
    font-size: @font-size-lg;
    font-weight: @font-weight-bold;
    color: @color-text-primary;
    margin: 0 0 2px;
    line-height: @line-height-tight;
}

.card-sub {
    font-size: @font-size-base;
    font-weight: @font-weight-normal;
    color: @color-text-faint;
    margin: 0 0 @space-5;
}

// Middle segments of a button group (3+ options) carry neither
// k-group-start nor k-group-end, so they miss the override above
// and fall back to the theme's default selected color.
.k-button-group .k-selected {
    background: @color-primary;
    border-color: @color-primary;
}
// ============================================================
//   TelerikSplitButton / TelerikDropDownButton — primary style
// ============================================================

.btn--secondary .k-split-button,
.btn--secondary .k-split-button,
.btn--secondary.k-dropdown-button,
.btn--secondary.k-button-group {
    background: @color-white;
    color: @color-text-secondary;
    border-color: @color-gray-300;

    &:hover {
        background: @color-gray-50;
        border-color: @color-gray-400;
        color: @color-text-primary;
    }

    .k-button {
        background: @color-white;
        color: @color-text-secondary;
        border-color: @color-gray-300;
        border-width: 0 !important;
        font-size: @font-size-base !important;
        font-family: @font-family-base !important;

        &:hover,
        &:focus,
        &:focus-visible,
        &:active {
            background: @color-gray-50;
            border-color: @color-gray-400;
            color: @color-text-primary;
            border-width: 0px !important;
        }
    }

    &:hover,
    &:focus,
    &:focus-visible,
    &:active {
        background: @color-gray-50;
        border-color: @color-gray-400;
        color: @color-text-primary;
    }

    .k-split-button-arrow {
        border-left: 1px solid rgba(255, 255, 255, 0.35) !important;
    }
}
// ============================================================
//   BADGE / PILL
// ============================================================

.badge {
    display: inline-flex;
    align-items: center;
    padding: @space-1 @space-3;
    border-radius: @radius-full;
    font-size: @font-size-xs;
    font-weight: @font-weight-bold;
    white-space: nowrap;

    &--blue {
        background: @color-info-bg;
        color: @color-info;
    }

    &--orange {
        background: @color-warning-bg;
        color: @color-warning-dark;
    }

    &--green {
        background: @color-success-bg;
        color: @color-success-dark;
    }

    &--gray {
        background: @color-gray-100;
        color: @color-gray-600;
    }

    &--red {
        background: @color-danger-bg;
        color: @color-danger;
    }

    &--primary {
        background: @color-primary-bg;
        color: @color-primary;
    }
}
// ============================================================
//   DASHBOARD WRAPPER
// ============================================================

.dashboard-wrap {
    padding: @space-8 16px @space-1;
    height: max-content;
    display: flex;
    flex-direction: column;
}

.tour-dashboard-graph {
    flex: 1;
    min-height: 0;
    // Both columns fill the row height
    > [class*="col-"] {
        display: flex;
        flex-direction: column;

        .stat-card {
            flex: 1;
            min-height: 0;
        }
    }
}

.nd-urgent-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
// ── Page Header ──
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: @space-9;
    flex-wrap: wrap;
    gap: @space-4;
}

.page-title {
    font-size: @font-size-xl;
    font-weight: @font-weight-medium;
    margin-bottom: @space-1;
}
// ── Global layout actions (tour + language) fixed top-right ──
.master-layout-global-actions {
    position: absolute;
    top: 16px;
    right: 12px;
    z-index: 201;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    pointer-events: auto;

    @media (max-width: @screen-lg) {
        display: none;
    }
}

.greeting-title {
    font-size: 18px;
    font-weight: @font-weight-semibold;
    /* color: @color-black;*/
    margin: 0 0 4px;
}

.greeting-sub {
    font-size: @font-size-base;
    /* color: @color-black;*/
    margin: 0;
    font-style: italic;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: @space-3;
    flex-wrap: wrap;
}
// ── Search Section ──
.search-section {
    display: flex;
    align-items: center;
    gap: @space-3;
    margin-bottom: @space-8;
    flex-wrap: wrap;
}

.search-input-wrap {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: @color-gray-400;
    font-size: @font-size-lg;
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: 9px 14px 9px 36px;
    border: 1px solid @color-gray-200;
    border-radius: @radius-md;
    font-size: @font-size-base;
    background: #fff;
    color: @color-text-secondary;
    outline: none;
    transition: border-color @transition-fast, box-shadow @transition-fast;

    &:focus {
        border-color: @color-primary-focus;
        box-shadow: @shadow-focus-primary;
    }
}

// ============================================================
//   STAT CARDS
// ============================================================
/* -- DONE REVISION ON CODE REFACTOR*/
.stat-card {
    background: @color-bg-card;
    border-radius: @radius-xl;
    padding: @space-6 @space-7;
    height: 100%;
    border: 1px solid @color-border-stat-card;
    display: flex;
    flex-direction: column;
    min-height: 155px;

    &__label {
        font-size: @font-size-md;
        font-weight: @font-weight-normal;
        /*   color: @color-text-muted;*/
        margin: 0 0 @space-1;
    }

    &__value {
        font-size: @font-size-xl;
        font-weight: @font-weight-semibold;
        color: @color-text-primary;
        line-height: @line-height-tight;
        margin: 20px 0 5px;
    }

    &__sub {
        font-size: @font-size-sm;
        color: @color-primary;
        margin: 0;
    }

    &__change {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        font-size: @font-size-sm;
        /*  font-weight: @font-weight-semibold;*/
        margin: 0;
        font-style: italic;

        &--up {
            color: @color-success;
        }

        &--down {
            color: @color-danger;
        }
    }
    // KPI icon — the material-symbols-outlined span in the card header
    > div > .material-symbols-outlined,
    > div > span.material-symbols-outlined {
        font-size: 28px;
        font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 32;
        /* color: @color-gray-500;*/
        flex-shrink: 0;
    }

    &__icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        flex-shrink: 0;
        color: @color-gray-800;
    }
    // Inline alert text — no pill, just colored text
    &__alert-text {
        font-size: @font-size-sm;
        /*  font-weight: @font-weight-medium;*/
        color: #0036C0;
        font-style: italic;
    }

    .stat-card-footer {
        margin-top: auto;
    }
    // ── Active/selected state for a clickable KPI card ──
    // Applied via the `stat-card--active` class the markup toggles when a card's filter is on.
    // Gives a PERSISTENT primary border (same colour as the hover border) so the selected card
    // stays outlined after the cursor leaves; a second click removes the class and the border.
    &--active {
        border-color: @color-primary;
    }
    // ── Hero variant (wide total-fleet card) ──
    &--hero {
        position: relative;
        overflow: hidden;
        background: linear-gradient(135deg, @color-primary-bg 0%, @color-bg-card 60%);

        .stat-card__value {
            font-size: @font-size-3xl;
            font-weight: @font-weight-bold;
            color: @color-primary-dark;
        }
    }

    &__height {
        max-height: 55vh;
        overflow-y: scroll;
    }
    // Click-to-filter KPI cards — pointer affordance to signal clickability.
    // Only cards carrying the --clickable modifier get the pointer; display-only
    // cards (e.g. Avg. Resolution) keep the default cursor.
    &--clickable {
        cursor: pointer;
    }
}

// ── Garage Cockpit — stat-card body: big count + label/count/chevron breakdown rows ──
// Reuses the .stat-card shell (padding/border/footer) as-is; GarageCockpit.razor
// (ronya.gms.Garage, b.gms.cl) only needs these extra classes for its different card body.
.stat-card__count-row {
    display: flex;
    align-items: baseline;
    gap: @space-2;
    margin: @space-3 0 @space-4;
}

.stat-card__count {
    font-size: @font-size-3xl;
    font-weight: @font-weight-bold;
    color: @color-text-primary;
    line-height: @line-height-tight;
}

.stat-card__count-suffix {
    font-size: @font-size-md;
    color: @color-text-muted;
}

.stat-card__breakdown {
    border-top: 1px solid @color-border-stat-card;
    padding-top: @space-3;
    display: flex;
    flex-direction: column;
    gap: @space-2;
}

.stat-card__breakdown-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: @font-size-base;
    color: @color-text-secondary;
}

.stat-card__breakdown-row--clickable {
    cursor: pointer;

    &:hover {
        color: @color-primary;
    }
}

.stat-card__breakdown-chevron {
    font-size: 18px !important;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}

.stat-card__breakdown-more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: @font-size-sm;
    color: @color-text-muted;
    cursor: pointer;

    &:hover {
        color: @color-primary;
    }
}

.stat-card__breakdown-value {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-weight: @font-weight-medium;
}

.fixed-height {
    min-height: 170px;
}

.stat-card__hero-icon {
    position: absolute;
    right: -8px;
    bottom: -8px;
    font-size: 96px;
    font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 96;
    color: @color-primary;
    opacity: 0.12;
    pointer-events: none;
    line-height: 1;
}

// Bold modifier for stat-card label
.stat-card__label--bold {
    font-weight: @font-weight-semibold;
}

/* Driver Licence Reminder Report — all seven KPI tiles share one line, so each is narrow enough that
   "Verification due" wraps to two lines while "Overdue" stays on one. Without a floor under the two
   text blocks, the number and the sub-line would sit at a different height in every tile. Reserving
   two label lines and two sub-line lines puts the label, the count and the sub-line on the same
   baseline across the row; the card's own `.stat-card-footer { margin-top: auto }` then keeps the
   footer bottom-anchored as before. Scoped to this page's tiles — no other KPI row is affected. */
#driver-Licence-report-page {
    /* Two lines of @font-size-md (14px) at the inherited 1.5 line-height. */
    .stat-card__label {
        min-height: 42px;
    }

    /* Two lines of @font-size-sm (11px). `display: block` because .stat-card__change is inline-flex,
       which ignores min-height while inline. */
    .stat-card__change,
    .stat-card__alert-text {
        display: block;
        min-height: 34px;
    }
}

// Secondary label below the main __label (e.g. category subtitle on the
// "Saved with RONYA" KPI card showing "Maintenance and Repairs").
.stat-card__sub-label {
    font-size: @font-size-sm;
    font-weight: @font-weight-normal;
    color: @color-text-muted;
    margin: 0 0 @space-1;
}

// "Saved with RONYA" KPI card — diagonal shimmer sweep from bottom-left to top-right
.stat-card--saved-with-ronya {
    position: relative;
    overflow: hidden;
    // Children sit above the shimmer
    > * {
        position: relative;
        z-index: 1;
    }

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 45deg, transparent 35%, rgba(255, 255, 255, 0.65) 50%, transparent 65% );
        background-size: 250% 250%;
        background-position: 100% 0%; // start: highlight at bottom-left of card
        animation: stat-card-shimmer-bl-tr 3.5s ease-in-out infinite;
        pointer-events: none;
        z-index: 0;
    }
}

@keyframes stat-card-shimmer-bl-tr {
    0% {
        background-position: 100% 0%; // highlight at bottom-left
    }

    60%, 100% {
        background-position: 0% 100%; // highlight at top-right
    }
}

// ============================================================
//   PANELS (chart + urgent actions)
// ============================================================

.panel {
    background: @color-bg-card;
    border-radius: @radius-xl;
    padding: @space-7;
    box-shadow: @shadow-card;
    height: 100%;
    border: 1px solid @color-border-card;
}

.panel-title {
    font-size: @font-size-lg;
    font-weight: @font-weight-semibold;
    color: @color-text-primary;
    margin: 0 0 20px;
}

.panel-sub {
    font-size: @font-size-base;
    color: @color-text-faint;
    margin: 0 0 @space-5;
}
// ============================================================
//   URGENT ACTION ITEMS
// ============================================================

.urgent-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid @color-border-stat-card;
    margin-bottom: 8px;
    transition: 0.5s ease all;
    cursor: pointer;

    &:hover {
        background: @color-gray-50;
        border-color: @color-primary;
    }
}

.initials-box {
    width: 36px;
    height: 36px;
    border-radius: @radius-lg;
    background: @intials-bg;
    color: #A19EB2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: @font-size-sm;
    font-weight: @font-weight-medium;
    flex-shrink: 0;
    text-transform: uppercase;
}

.booking-info {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 10%;
}

.booking-no {
    font-size: 14px;
    font-weight: @font-weight-semibold;
    color: @color-black;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    cursor: pointer;
    line-height: normal;

    @media(max-width:@screen-sm) {
        font-size: 12px;
    }

    &:hover {
        color: @color-primary;
    }
}

.booking-stage {
    font-size: @font-size-base;
    color: @color-gray-500;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
// Action badges
.action-badge {
    padding: @space-1 @space-3;
    border-radius: @radius-full;
    font-size: @font-size-xs;
    font-weight: @font-weight-bold;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;

    &--blue {
        background: #FFEDD5;
        color: #EA580C;
    }

    &--orange {
        background: #FFEDD5;
        color: #EA580C;
    }

    &--green {
        background: @color-success-bg;
        color: @color-success-dark;
    }

    &--gray {
        background: @color-gray-100;
        color: @color-gray-600;
    }
}
// ============================================================
//   PAGE LAYOUT — PageLayout.razor
// ============================================================

.nd-page-wrap {
    display: flex;
    flex-direction: column;
    padding: 22px 16px 20px;
    flex: 1;
    min-width: 0;
    min-height: 0;
    // detail split-layout pages: strip outer padding so sidebar is flush
    &:has(.nd-detail-layout) {
        padding: 0;

        .nd-page-title-row {
            padding: 10px 24px;
            margin-bottom: 0;
            border-bottom: 1px solid @color-border-light;
            justify-content: flex-end; // actions-only row — push tour+language to the right
        }
    }
}

.nd-page-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: @space-4;
    flex-wrap: wrap;
}

.nd-page-title {
    font-size: @font-size-xl;
    font-weight: @font-weight-semibold;
    color: @color-text-primary;
    margin: 0;
}

.nd-header-actions {
    display: flex;
    align-items: center;
    gap: @space-3;
    flex-wrap: wrap;
}

.nd-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid @color-border-icon-btn;
    border-width: 0 1px 0 0;
    color: @color-black;
    background: transparent;
    font-weight: @font-weight-medium;
    font-size: 12px;
    cursor: pointer;
    transition: background @transition-fast, color @transition-fast;
    padding-right: 15px;
    margin-right: 15px;

    &:hover {
        background: @color-gray-100;
        color: @color-text-primary;
    }
}

.nd-page-content {
    /* flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;*/
    /*  overflow-y: auto;*/
}
// ============================================================
//   LIST PAGE
// ============================================================

.nd-list-page {
    display: flex;
    flex-direction: column;
    gap: 0;
}
// ── Status Tabs ──
.nd-status-tabs-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 16px;
    flex-wrap: nowrap;
    border-bottom: 2px solid @color-gray-100;
}

.nd-status-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    padding-bottom: 10px;
    border-radius: 0;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    background: transparent;
    color: @color-gray-500;
    font-size: @font-size-base;
    font-weight: @font-weight-medium;
    cursor: pointer;
    white-space: nowrap;
    transition: color @transition-fast, border-color @transition-fast;

    @media(max-width:@screen-sm-max) {
        padding: 8px 8px;
    }

    &:hover {
        color: @color-text-primary;
        border-color: @color-gray-300;
    }
}

.nd-status-tab-count {
    background: @color-gray-200;
    border-radius: @radius-sm;
    font-size: @font-size-xs;
    padding: 2px 5px !important;
}

.nd-tab-active {
    color: @color-text-primary !important;
    border-color: @color-primary !important;
    font-weight: @font-weight-semibold;
    background: transparent;

    @media(max-width:@screen-lg) {
        padding: 2px 5px;
    }

    &:hover {
        color: @color-primary;
        border-color: @color-primary;
    }

    .nd-status-tab-count {
        background: @color-primary-bg;
    }
}
// ── Status Filter Pills ──
//
// ⚠ THIS BLOCK HAS BEEN ADDED, DELETED AND RE-ADDED. Do not "clean it up" as dead a second time.
//   · shipped originally with the Leasing Return revamp (OQ-44, commit 98dd55f89)
//   · DELETED in round 9/12 (commit b7f4e53be) when the ruling was "underlined tabs everywhere, no rounded
//     pills" — at which point these 97 lines were correctly identified as dead and removed
//   · RESTORED 2026-08-20 at the CLIENT's request, who rejected the underlined version: two identical
//     underlined bars stacked on top of each other read as "tab inside tab", which is the exact problem
//     OQ-44 was raised to solve in the first place. Restored WITHOUT the dots — see below.
// Three flips on one decision, so the trail is written down. If a future ruling removes them again, delete
// this comment with the block or the next reader will restore them a third time.
//
// ⚠ THE COLOURED STATUS DOTS ARE GONE FOR GOOD, AND DELIBERATELY NOT RESTORED. The original block carried
// .nd-filter-pill-dot plus six colour modifiers, and RepairTabBase carried a GetFilterDotClass mapping
// filter values to them. The client's target mockup (2026-08-20) has NO dot on any pill, so they were left
// out of this restore rather than restored and deleted again. Do not reinstate them from 98dd55f89 — their
// absence is the current spec, not an oversight in the cherry-pick.
// .nd-filter-pill is a gap-based inline-flex, so a pill with no dot child renders correctly: the gap simply
// applies between the label and the count instead.
//
// Rounded outlined pills, per the Leasing Return mockup. Deliberately NOT the .nd-status-tab underlined-tab
// style above: the revamped Leasing Return page stacks its module tab strip directly on top of this filter
// row, and two identical underlined bars is a "which one am I clicking?" problem. New classes only —
// .nd-status-tabs-wrap / .nd-status-tab / .nd-status-tab-count / .nd-tab-active are untouched and keep
// serving BookingList, the module tab strip and every other consumer as before.
//
// ⚠ DO NOT HARMONISE .nd-filter-pills-wrap WITH .nd-status-tabs-wrap. They differ in one way that matters
// beyond looks, and the difference is a REASON TO PREFER THIS ONE for a filter row:
//
//     .nd-status-tabs-wrap   flex-wrap: nowrap  + (mobile) overflow-x: auto, scrollbar-width: none  (:5547)
//     .nd-filter-pills-wrap  flex-wrap: wrap    + no mobile override
//
// The tab wrapper therefore hides a HORIZONTAL SCROLLER at mobile — filters past the fold sit off-screen
// behind a scrollbar that is deliberately invisible, so there is no affordance telling the user they exist.
// That was a live discoverability problem on this row while it used the tab treatment. The pill wrapper WRAPS
// instead, so every filter is visible at every width; it costs vertical space and gains nothing hidden.
// Merging the two wrappers, or adding an overflow-x override here to "match", silently reintroduces it.
.nd-filter-pills-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.nd-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid @color-border-default;
    background: @color-white;
    color: @color-text-secondary;
    font-size: @font-size-base;
    font-weight: @font-weight-medium;
    cursor: pointer;
    white-space: nowrap;
    transition: color @transition-fast, border-color @transition-fast, background-color @transition-fast;

    @media(max-width:@screen-sm-max) {
        padding: 5px 10px;
    }

    &:hover {
        border-color: @color-gray-400;
        color: @color-text-primary;
    }
}

// Selected filter: filled brand tint plus a brand border, so the active pill is unambiguous without
// relying on the dot — the dot encodes which status, not whether it is selected.
.nd-filter-pill-active {
    background: @color-primary-bg !important;
    border-color: @color-primary !important;
    color: @color-primary !important;
    font-weight: @font-weight-semibold;

    &:hover {
        border-color: @color-primary;
        color: @color-primary;
    }
}

.nd-filter-pill-count {
    color: @color-gray-500;
    font-size: @font-size-xs;
    font-weight: @font-weight-medium;
}

.nd-filter-pill-active .nd-filter-pill-count {
    color: @color-primary;
}

// ── Stat Cards Row ──
.nd-stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: @space-5;
    margin-bottom: @space-5;
}

.nd-stat-card {
    background: @color-white;
    border: 1px solid @color-border-stat-card;
    border-radius: @radius-xl;
    padding: @space-6 @space-7;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: @space-3;

    &__body {
    }

    &__label {
        font-size: @font-size-sm;
        color: @color-text-muted;
        font-weight: @font-weight-medium;
        margin: 0 0 6px;
    }

    &__value {
        font-size: 22px;
        font-weight: @font-weight-bold;
        color: @color-text-primary;
        margin: 0 0 2px;
        line-height: 1.2;
    }

    &__sub {
        font-size: @font-size-sm;
        color: @color-text-muted;
        margin: 0;
    }

    &__icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        color: @color-gray-700;
        flex-shrink: 0;
    }
}
// ── Toolbar ──
.nd-toolbar {
    /*  display: flex;
    align-items: center;
    gap: @space-3;*/
    margin-bottom: @space-5;
    /*  flex-wrap: wrap;
    justify-content: space-between;*/
}

.nd-toolbar-spacer {
    flex: 1;
}

.nd-filter-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: @radius-full;
    background: @color-primary-bg;
    color: @color-primary;
    font-size: 10px;
    font-weight: @font-weight-bold;
}
// ── DateRangePicker Popup ──
.DateRange-pop {
    width: 580px !important;
    max-width: 95vw !important;

    .k-calendar-container,
    .k-multiviewcalendar {
        width: 100% !important;
    }
}

// ── Filter Popup ──
.nd-filter-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 500;
    width: 700px;
    background: @color-white;
    border: 1px solid @color-gray-200;
    border-radius: @radius-xl;
    box-shadow: 0 8px 28px rgba(0,0,0,0.10);
}

.nd-filter-pop-body {
    padding: @space-5;
    max-height: 440px;
    overflow-y: auto;
}

.nd-filter-pop-row {
    display: flex;
    align-items: center;
    gap: @space-3;
    flex-wrap: wrap;
}

.nd-filter-label {
    font-size: @font-size-sm;
    font-weight: @font-weight-medium;
    color: @color-text-secondary;
    white-space: nowrap;

    &--muted {
        color: @color-text-muted;
        font-weight: @font-weight-normal;
    }
}

.nd-filter-label-input {
    flex: 1;
    min-width: 200px;
}

.nd-filter-pop-divider {
    height: 1px;
    background: @color-gray-100;
    margin: 12px 0;
}

.nd-filter-title {
    font-size: @font-size-sm;
    font-weight: @font-weight-semibold;
    color: @color-text-primary;
}

.nd-client-filter-grid {
    max-height: 330px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    scrollbar-width: thin;
}

.nd-filter-check-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: @font-size-sm;
    color: @color-text-secondary;
    cursor: pointer;
}

.nd-filter-pop-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px @space-5;
    border-top: 1px solid @color-gray-100;
}

.nd-filter-clear-btn.k-button,
.nd-filter-clear-btn {
    height: 34px;
    padding: 0 @space-4;
    border-radius: @radius-md;
    font-size: @font-size-sm;
}

.nd-filter-apply-btn.k-button,
.nd-filter-apply-btn {
    height: 34px;
    padding: 0 @space-4;
    border-radius: @radius-md;
    font-size: @font-size-sm;
}
// ── Applied Filter Badges ──
.nd-applied-filters-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    width: 100%;
}

.nd-filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    /* background:    @color-gray-100;*/
    background: @color-primary-bg;
    border-radius: @radius-full;
    font-size: @font-size-sm;
    color: @color-text-secondary;
    border: 1px solid #067e5e6e;
}

.nd-filter-badge-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: none;
    background: transparent;
    color: @color-text-muted;
    cursor: pointer;
    padding: 0;
    font-size: 12px;

    &:hover {
        color: @color-danger;
    }
}

.nd-filter-clear-all {
    font-size: @font-size-sm;
    color: @color-primary;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: @radius-sm;

    &:hover {
        background: @color-primary-bg;
    }
}
// ── Search Combo ──
.nd-search-combo {
    display: flex;
    align-items: center;
    border: 1px solid @color-gray-200;
    border-radius: @radius-md;
    overflow: hidden;
    background: @color-white;
    &:hover, &:focus {
        box-shadow: 0 0 1px @color-primary;
    }
}

.nd-menu-search-panel {
    margin: 8px 0;
    border: 1px solid @color-gray-200;
    border-radius: @radius-md;
    background: @color-white;
    max-height: 320px;
    overflow-y: auto;
    flex-shrink: 0;
}

.font-10 {
    font-size: 10px;
}

.nd-menu-search-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    cursor: pointer;
    line-height: 1.2;
    word-break: break-all;
}

.nd-menu-search-item--disabled {
    cursor: default;
    opacity: 0.55;

    &:hover {
        background: transparent;
        border-left: none;
        color: inherit;
    }
}

.nd-search-type-pills {
    display: flex;
    align-items: center;
    border-right: 1px solid @color-gray-200;
    flex-shrink: 0;
}

.nd-search-type-pill {
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: @color-text-muted;
    font-size: @font-size-sm;
    font-weight: @font-weight-medium;
    cursor: pointer;
    white-space: nowrap;
    transition: background @transition-fast, color @transition-fast;

    &:hover {
        background: @color-gray-50;
        color: @color-text-secondary;
    }
}

.nd-search-type-pill--active {
    background: @color-gray-100;
    color: @color-text-primary;
}

.nd-search-input-wrap {
    display: flex;
    align-items: center;
    position: relative;
    min-width: 260px;
    min-height: 40px;

    &::placeholder {
        color: @color-gray-400;
    }
}

.nd-search-icon {
    position: absolute;
    left: 10px;
    /*  color: @color-gray-400;*/
    font-size: 20px !important;
    pointer-events: none;
}

.nd-search-input {
    width: 100%;
    padding: 9px 32px 9px 30px;
    border: none;
    background: transparent;
    font-size: @font-size-sm;
    color: @color-text-secondary;
    outline: none;

    &::placeholder {
        color: @color-text-faint;
    }
}

.nd-search-clear-btn {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: @color-text-muted;
    cursor: pointer;
    font-size: 14px;
    padding: 0;

    &:hover {
        color: @color-text-primary;
    }
}
// ── List / Table Wrap ──
.nd-list-wrap {
    background: @color-white;
    border: 1px solid @color-gray-200;
    border-radius: @radius-xl;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    min-height: 280px;
    overflow: hidden;
}

.nd-list-grid {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.nd-pager-wrap {
    flex-shrink: 0;
}
// ── List Cards ──
.nd-list-card {
    display: flex;
    align-items: center;
    gap: @space-5;
    padding: 12px 16px;
    border-bottom: 1px solid @color-gray-100;
    cursor: pointer;
    transition: background @transition-fast;

    &:last-child {
        border-bottom: none;
    }

    &:hover {
        background: @color-gray-50;
    }
}

.nd-list-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: @radius-full;
    background: @intials-bg;
    color: @color-gray-700;
    font-size: @font-size-sm;
    font-weight: @font-weight-medium;
}
// ── List Columns ──
.nd-list-col {
    /*  display: flex;
    flex-direction: column;
    gap: 3px;*/
    min-width: 0;
}

.nd-list-col--id {
    flex: 0 0 160px;
}

.nd-list-col--garage {
    flex: 1;
    min-width: 0;
}

.nd-list-col--date {
    flex: 0 0 120px;
}

.nd-list-col--amount {
    flex: 0 0 100px;
}

.nd-list-title {
    font-size: @font-size-md;
    font-weight: @font-weight-medium;
    color: @color-text-primary;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    &--muted {
        color: @color-text-faint;
    }
}

.nd-garage-person {
    font-size: @font-size-sm;
    font-weight: @font-weight-medium;
    color: @color-text-primary;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nd-garage-role {
    font-size: 10px;
    color: @color-text-muted;
}

.nd-garage-address {
    font-size: @font-size-sm;
    color: @color-text-muted;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nd-date-primary {
    font-size: @font-size-sm;
    font-weight: @font-weight-medium;
    color: @color-text-primary;
}

.nd-date-secondary {
    font-size: 10px;
    color: @color-text-muted;
}

.nd-amount {
    font-size: @font-size-sm;
    font-weight: @font-weight-semibold;
    color: @color-text-primary;
}

.nd-list-end {
    display: flex;
    align-items: center;
    gap: @space-3;
    margin-left: auto;
    flex-shrink: 0;
}
// ── Booking List Grid (tabular div layout) ──
.nd-list-grid {
    width: 100%;
    background: @color-white;
    border-radius: @radius-xl;
    overflow-x: auto;
    border: 1px solid @color-gray-200;
}

.nd-list-header-row,
.nd-list-row {
    display: grid;
    /*  grid-template-columns: 1.6fr 2fr 1.5fr 1.4fr 1.1fr 1.8fr;*/
    grid-template-columns: 1.6fr 2fr 1.5fr 1.4fr 1.1fr;
    align-items: center;
    gap: @space-4;
    padding: @space-4 @space-7;
}

.nd-list-header-row {
    background: #EFF5F4;
    color: #5C7873;
    border-bottom: 1px solid @color-gray-200;
    position: sticky;
    top: 0;
    z-index: 1;
}

.nd-list-header-col {
    font-size: @font-size-base;
    font-weight: @font-weight-medium;
    /*  text-transform: uppercase;*/
    color: #5C7873;
    /* letter-spacing: 0.4px;*/
    white-space: nowrap;
}

.nd-list-row {
    border-bottom: 1px solid @color-gray-100;
    transition: background @transition-fast;

    &:last-child {
        border-bottom: none;
    }

    &--clickable {
        cursor: pointer;
    }

        &--clickable:hover {
            background: @color-gray-50;
        }
}

.nd-list-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;

    &--with-avatar {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }
}

.nd-row-primary {
    font-size: @font-size-base;
    font-weight: @font-weight-medium;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nd-row-secondary {
    /*   display: flex;
    align-items: center;
    gap: 3px;*/
    font-size: @font-size-xs;
    color: @color-text-muted;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    i {
        font-size: @font-size-sm;
    }
}

.nd-row-amount {
    font-size: @font-size-base;
    font-weight: @font-weight-medium;
    color: @color-text-primary;
}
// ── Table ──
.nd-table {
    width: 100%;
    border-collapse: collapse;
}

.nd-table-head {
    background: @color-gray-50;
    border-bottom: 1px solid @color-gray-200;
}

.nd-table-th {
    padding: 10px 14px;
    font-size: @font-size-sm;
    font-weight: @font-weight-semibold;
    color: @color-text-muted;
    text-align: left;
    white-space: nowrap;
}

.nd-table-row {
    border-bottom: 1px solid @color-gray-100;
    cursor: pointer;
    transition: background @transition-fast;

    &:last-child {
        border-bottom: none;
    }

    &:hover {
        background: @color-gray-50;
    }
}

.nd-table-td {
    padding: 12px 14px;
    vertical-align: middle;
    font-size: @font-size-sm;
    color: @color-text-secondary;
}
// ── Table Cell Types ──
.nd-booking-id {
    font-size: @font-size-base;
    font-weight: @font-weight-semibold;
    color: @color-text-primary;
    margin-bottom: 4px;
}

.nd-garage-person {
    font-size: @font-size-sm;
    font-weight: @font-weight-medium;
    color: @color-text-primary;
}

.nd-garage-role {
    font-size: 10px;
    color: @color-text-muted;
    margin-bottom: 2px;
}

.nd-garage-address {
    font-size: @font-size-sm;
    color: @color-text-muted;
}

.nd-date-primary {
    font-size: @font-size-sm;
    font-weight: @font-weight-medium;
    color: @color-text-primary;
}

.nd-date-secondary {
    font-size: 10px;
    color: @color-text-muted;
    margin-top: 2px;
}

.nd-amount {
    font-size: @font-size-sm;
    font-weight: @font-weight-semibold;
    color: @color-text-primary;
}
// ── Status Badge ──
.nd-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: @radius-full;
    font-size: 10px;
    font-weight: @font-weight-semibold;
    background: @color-gray-100;
    color: @color-text-secondary;
    white-space: nowrap;
    width: max-content;

    i {
        font-size: 12px;
    }

    &.booking-completed {
        background: @color-success-bg;
        color: @color-success-dark;
    }

    &.status-danger {
        background: @color-danger-bg;
        color: @color-danger;
    }

    &.status-warning {
        background: @color-warning-bg;
        color: @color-warning-dark;
    }
}
// ── Module Tag ──
.nd-module-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: @intials-bg;
    border-radius: @radius-lg;
    font-size: 12px;
    color: @color-text-primary;
    font-weight: @font-weight-medium;
    white-space: nowrap;
}
// ── Misc ──
.nd-list-sub {
    font-size: 10px;
    color: @color-text-muted;
}

.nd-list-arrow {
    font-size: 18px;
    color: @color-gray-400;
}
// ── Grid Card (Vehicle List) ──
.nd-grid-card {
    background: @color-white;
    border: 1px solid @color-gray-200;
    border-radius: @radius-xl;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 330px);
    min-height: 300px;
    overflow: hidden;
}

.nd-grid-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: auto;
    min-height: 0;

}

// ── Pager Row ──
.nd-pager-row {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
    border-top: 1px solid @color-gray-100;
}

/****telerik Card *********/
.k-card {
    border: 1px solid @color-gray-100;
    border-radius: @radius-xl;
    /*  min-height: 300px;*/
    .k-card-header {
        font-size: @font-size-lg;
        font-weight: 500;

    }

}
/*Table**/

.custom-table {
    background: @color-white;
    border: 1px solid @color-gray-200;
    border-radius: @radius-xl;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);

    &.table-detail-scroll {
        max-height: calc(100vh - 5rem);
        overflow-y: auto;
        scrollbar-width: thin;
        box-sizing: border-box;

        .header-row {
            position: sticky;
            top: 0;
            z-index: 1;
        }

        .footer-row {
            position: sticky;
            bottom: 0;
        }
    }

    @media(max-width:@screen-sm) {
        border: 0px solid @color-gray-200;
        box-shadow: none;
        border-radius: 0;
    }

    > .header-row {
        background: #EFF5F4;
        color: #5C7873;
        border-bottom: 1px solid @color-gray-200;
        font-size: @font-size-base;
        font-weight: @font-weight-medium;
        color: #5C7873;
        white-space: nowrap;
        padding: @space-4 @space-7;
        border-radius: @radius-xl @radius-xl 0 0;
    }

    > .body-row {
        border: 1px solid @color-gray-100;
        margin-bottom: 8px;
        text-align: left;
        overflow-x: hidden;
        color: @color-text-primary;

        @media(max-width:@screen-sm) {
            border: 0px;
            margin: 5px;
        }

        > .row {
            border-bottom: 1px solid @color-gray-100 !important;
            padding: @space-4 @space-7;

            &:hover {
                background: #EFF5F4;
            }

            @media(max-width:@screen-sm) {
                border: 1px solid @color-gray-200 !important;
                padding: @space-4 @space-3;
                margin: 0 0 @space-2 0;
                border-radius: 8px;
            }

            &:last-child {
                border-bottom: 0 !important;

                @media(max-width:@screen-sm) {
                    border: 1px solid @color-gray-200 !important;
                }
            }
        }

        &:last-child {
            margin-bottom: 0;
        }
    }

    .footer-row {
        font-weight: 600;
        padding: @space-4 @space-7;
        border-radius: 0 0 @radius-xl @radius-xl;
        background: @color-gray-100;
    }
}

// Booking Source Report table: let long localized text (e.g. German) wrap inside its own
// column instead of overflowing into the neighboring column. Scoped to #booking-report-table
// only — .header-row and .nd-status-pill are shared classes used across other tables/pages.
#booking-report-table {
    .header-row .row > [class*="col-"] {
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .nd-status-pill {
        white-space: normal;
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: break-word;
        text-align: center;
    }
}

// RO-9762. Import Overview's Status column is the same narrow col-6/col-md-1 idiom as
// #booking-report-table above (same defect class, same fix). The awaiting-decision branch adds a
// pill ("Decision required") plus a variable-length count link ("{0} car plates need a decision")
// where every sibling status ("Completed", "Failed") was previously a single short word — .nd-
// status-pill's base rule is white-space: nowrap, so a long localized pill label would clip
// (silently, no ellipsis) against the parent .body-row's overflow-x: hidden instead of wrapping.
// The count link itself needs no fix: it's plain block text with no nowrap override, so it already
// wraps within the column — only the pill needed this.
#import-overview-table {
    .nd-status-pill {
        white-space: normal;
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: break-word;
        text-align: center;
    }
}

/**********
        ANT Image
        *********/
.ant-image-preview-operations-wrapper,
.ant-image-preview-wrap {
    z-index: 99999;
}

.ant-image-preview-mask {
    z-index: 11111;
}
// ── Custom Pager ──
.custom-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 5px;
    background: @color-white;
    border-top: 1px solid @color-gray-200;
    font-family: @font-family-base;
    border-radius: 0 0 12px 12px;
    width: 100%;
    // Prev / Next nav buttons — shown as text links
    .k-pager-nav {
        border: none !important;
        font-size: @font-size-md;
        font-weight: @font-weight-medium;
        border-radius: 6px;

    }

    // Page number buttons
    .k-pager-numbers {

        .k-button {
            border: none !important;
            font-size: @font-size-base;
            font-weight: @font-weight-normal;
            border-radius: @radius-sm;

        }
    }
    // "Result per page" size selector
    .k-pager-sizes {

        .k-dropdownlist,
        select {
            font-size: @font-size-sm;
            border: 1px solid @color-gray-200;
            border-radius: 6px;
            padding: 3px 8px;
        }
    }
}
// ── Empty State ──
.nd-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: @space-5;

    img {
        width: 160px;
        opacity: 0.6;
    }

    p {
        font-size: @font-size-md;
        color: @color-text-muted;
        margin: 0;
    }
}
// ============================================================
//   TELERIK CHART — nd-booking-chart gradient override
// ============================================================

.nd-booking-chart {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    // Stretch Telerik's direct wrapper div without touching its display type
    > div {
        flex: 1;
        min-height: 0;
        width: 100%;
    }

        // Top line stroke
        .k-chart path[fill="none"] {
            stroke: #ededed !important;
            stroke-width: 1px !important;
        }
        // Dot markers
        .k-chart circle {
            stroke: #ffffff !important;
            stroke-width: 1px !important;
        }
        // Grid lines
        .k-chart .k-grid-line {
            stroke: #7280FF !important;
            stroke-width: 1px !important;
        }
}
// ============================================================
//   Telerik grid — global overrides
// ============================================================

.k-grid {
    border-radius: 8px;
    border: 1px solid @color-border;

    table {
        border-collapse: separate;
        border-spacing: 0;
    }

    .k-column-title {
        font-size: 12px;
        font-weight: 500;
    }

}

.k-grid-header {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;

    th.k-header,
    th {
        padding-top: 12px !important;
    }
}

.k-grid-content {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

// Report grid header treatment — shared by the LR SLA report and the Damage report. The grids are
// a single (flat) header row of leaf columns; the former two-level group headers (ORDER & PICKUP,
// COST OFFER, …) were removed, along with the extra cell gridlines, so the tables match the
// platform's other borderless report grids. Scoped to these two grid classes so no other grid is
// affected. Damage shares the same rules because its longer titles (esp. German) truncate at the
// fixed column widths otherwise.
.lr-sla-grid,
.damage-grid {
    // The long column titles (e.g. "Job Completed by Workshop (…)", "Total Delay due to
    // Customer (…)") were truncated with Telerik's default single-line ellipsis at the fixed
    // column widths. Let the header title wrap across lines instead of being cut off, and
    // top-align the header cell so wrapped titles read from the top of the row.
    .k-grid-header th.k-header,
    .k-table-th {
        vertical-align: top;
        text-align: left;
    }
    // Left-align the header title content (override Telerik centering) so headers line up with
    // the left-aligned cell content, and keep long titles wrapping rather than ellipsised.
    th.k-header .k-cell-inner > .k-link {
        white-space: normal;
        justify-content: flex-start;
    }

    th.k-header .k-column-title {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        text-align: left;
    }
}
// ============================================================
//   RESPONSIVE
// ============================================================

@media (max-width: @screen-md) {
    .dashboard-wrap {
        padding: 14px 12px 60px;
    }

    .greeting-title {
        font-size: @font-size-xl;
    }

    .search-section {
        flex-direction: column;
        align-items: stretch;
    }

    .search-input-wrap {
        min-width: unset;
    }

    .header-actions {
        flex-wrap: wrap;
    }
}

@media (max-width: @screen-md-max) {
    // Tighter height on tablet/mobile — toolbar wraps and takes more vertical space
    .nd-list-wrap {
        height: calc(100vh - 200px);
        min-height: 240px;
    }
    // Hide the desktop column-header row — replaced by inline data-labels
    .nd-list-header-row {
        display: none;
    }
    // Override the 6-column grid → stacked card layout
    .nd-list-row {
        display: flex !important;
    }

    .nd-list-row {
        flex-direction: column;
        gap: 0;
        padding: 12px 16px;
    }
    // Each cell: label on the left, value on the right — both left-aligned
    .nd-list-cell {
        flex-direction: row;
        align-items: flex-start;
        gap: 8px;
        padding: 3px 0;
        text-align: left;
        // Value side: allow text wrapping, stay left-aligned
        > * {
            flex: 1;
            min-width: 0;
            text-align: left;
        }
        // Inline data-label shown before the value
        &::before {
            content: attr(data-label);
            font-size: @font-size-xs;
            font-weight: @font-weight-semibold;
            color: @color-text-muted;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            min-width: 88px;
            max-width: 88px;
            flex-shrink: 0;
            padding-top: 2px;
            text-align: left;
        }
        // Avatar+booking-number cell — no label prefix, shown prominently at top
        &--with-avatar {
            flex-direction: row;
            align-items: center;
            padding: 0 0 8px;
            border-bottom: 1px solid @color-gray-100;
            margin-bottom: 6px;

            > * {
                flex: 1;
                min-width: 0;
            }

            &::before {
                display: none;
            }
        }
    }

    // Allow text to wrap in the value column — no clipping on mobile
    .nd-row-primary,
    .nd-row-secondary {
        white-space: normal;
        overflow: visible;
    }

    .nd-row-primary {
        font-size: @font-size-base;
    }

    // ── Booking list: card format on tablet + mobile ──
    .nd-list-wrap {
        background: @color-gray-50;
        border-color: transparent;
    }

    .nd-list-grid {
        padding: 8px;
        background: @color-gray-50;
    }

    .nd-list-row {
        background: @color-white;
        border-radius: @radius-lg;
        border: 1px solid @color-gray-100 !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
        margin-bottom: 8px;
        text-align: left;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .nd-list-cell,
    .nd-row-primary,
    .nd-row-secondary,
    .nd-row-amount,
    .nd-status-pill {
        width: 100%;
        text-align: left !important;
    }

    .nd-status-pill {
        max-width: max-content;
    }

    .nd-list-cell .material-symbols-outlined {
        display: none;
    }
}

@media (max-width: @screen-sm) {
    .nd-list-wrap {
        height: calc(100vh - 300px);
        min-height: 220px;
    }

    .nd-list-cell::before {
        min-width: 76px;
        max-width: 76px;
    }
}

.nd-filter-pop-body {
    padding: 20px 20px 8px;
}

.nd-filter-pop-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.nd-filter-pop-section {
    margin-bottom: 12px;
}

.nd-filter-pop-divider {
    height: 1px;
    background: #f3f4f6;
    margin: 12px 0;
}

.nd-filter-pop-footer {
    background: #f8fafc;
    border-top: 1px solid @color-border-light;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
/* Filter popup — header */
.nd-filter-pop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 14px 20px;
    border-bottom: 1px solid @color-border;
}

.nd-filter-pop-title {
    font-size: 15px;
    font-weight: 500;
    color: #1a1a2e;
}

.nd-filter-pop-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nd-filter-reset-btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    background: transparent;
    color: #374151;
    border: 1px solid @color-gray-300;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

    .nd-filter-reset-btn:hover {
        background: #f3f4f6;
        border-color: @color-gray-400;
    }

.nd-filter-apply-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 14px;
    background: @color-primary;
    color: #fff;
    border: none;
    border-radius: @radius-lg;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

    .nd-filter-apply-label:hover {
        background: #155a3e;
    }

.nd-filter-pop-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 20px;
    cursor: pointer;
    transition: color 0.15s;
    padding: 0;
    line-height: 1;
}

    .nd-filter-pop-close:hover {
        color: #374151;
    }

/* "All filters" drawer — stacked/collapsible section headers (RO-5199 US-FFP-002).
   Composed from two already-established Fleet patterns rather than new values: typography from
   .nd-detail-nav-section (small/bold/uppercase/letter-spaced/@color-gray-700 -- the sidebar's own
   section-divider label) + interaction from .app-drawer-item (transparent -> @color-gray-50 hover/active,
   never a color fill -- the sidebar's own collapsible nav-group header). Overrides Bootstrap's default
   .accordion-button (light-blue :not(.collapsed) fill) for this drawer only. The chevron reuses the same
   content-based Material Symbols technique already used elsewhere in this file instead of Bootstrap's own
   icon, so it matches app-drawer-item's expand_more/expand_less glyph rather than Bootstrap's SVG arrow. */
.nd-filter-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: @space-4 @space-7;
    background: @color-white;
    border: none;
    box-shadow: none;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: @color-gray-700;
    cursor: pointer;
    text-align: left;
    transition: background @transition-fast;

    &::after {
        content: "expand_more";
        font-family: 'Material Symbols Outlined';
        font-size: 20px;
        font-weight: 400;
        text-transform: none;
        letter-spacing: normal;
        color: @color-gray-500;
        background-image: none;
        transition: transform @transition-fast;
        flex-shrink: 0;
    }

    &:hover {
        background: @color-gray-50;
    }

    &:not(.collapsed) {
        background: @color-gray-50;
        color: @color-gray-700;
        box-shadow: none;

        &::after {
            content: "expand_less";
            background-image: none;
        }
    }

    &:focus {
        box-shadow: none;
        border-color: transparent;
        z-index: auto;
    }
}

/* Filter drawer "push/squeeze" layout (RO-5199 US-FFP-002). The list card and the drawer are SIBLING FLEX
   ITEMS in one row, both fully visible, no overlay/backdrop. Shared by every drawer page via classes:
     .nd-split-wrap / .nd-split-content  -- the list row and the card inside it (on top of .nd-list-wrap /
                                            .nd-list-content, which stay untouched for the other pages)
     .nd-filter-drawer                   -- the drawer panel (--report adds a viewport height cap)
     .nd-filter-accordion                -- its Bootstrap accordion token overrides
     .nd-split-page / .nd-split-body     -- Reports pages only: the row/body that squeezes KPI + chart
                                            cards together with the grid (--squeezed set while open)
   Two-class selectors (e.g. ".nd-list-wrap.nd-split-wrap") are used where the rule must beat a single-class
   base rule such as ".nd-list-wrap". No ID selectors. */

// Resets the visual properties ".nd-list-wrap" supplies (background/border/border-radius) so the outer flex
// row does not draw a fourth rounded border behind the two cards, and adds a gap between them.
.nd-list-wrap.nd-split-wrap {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: @space-4;
    border: none;
    border-radius: 0;
    background: transparent;
}

// The grid/loader/pager/empty-state wrapper -- the OTHER flex-row sibling of .nd-filter-drawer/.nd-filter-drawer
// below. "flex: 1 1 auto" + "min-width: 0" is the standard push/squeeze pattern: without "min-width: 0" a
// flex item's default "min-width: auto" keeps it at its content's natural width and either pushes the panel
// out of the row or forces the whole row to overflow horizontally, instead of the grid actually narrowing to
// share space with the panel. The border/radius/background below are the same three values ".nd-list-wrap"
// itself uses, so this now reads as its own rounded card (REQ-027).
.nd-list-content.nd-split-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid @color-gray-200;
    border-radius: @radius-xl;
    background: @color-white;
}

// The filter panel -- a fixed-width flex item at the >=1200px tier (Tier 1). Only ever in the DOM while
// BookingList.razor's/VehicleList.razor's own ShowFilterDrawer is true (a Blazor @if, not a CSS
// width:0/display:none toggle) -- when closed, ".nd-split-content"/".nd-split-content" is the row's only child and
// naturally fills the full width via its own "flex: 1 1 auto" above, exactly like today's default
// (no-drawer) view. The old plain "border-left" divider is now a full border + radius, matching
// .nd-split-content's own card treatment (REQ-027).
.nd-filter-drawer {
    flex: 0 0 340px;
    width: 340px;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    border: 1px solid @color-gray-200;
    border-radius: @radius-xl;
    background: @color-white;
    overflow: hidden;
}

// Push/squeeze fix (RO-5199 re-review, 2026-09-11 -- user feedback on Option A): the Filters drawer on
// these 5 Reports & Analytics pages must NOT overlay the page -- it pushes/squeezes the whole report
// body (context row + KPI cards + chart cards + list wrap) to the left instead, exactly like
// BookingList/VehicleList squeeze their grid, just scoped to the entire body instead of only the grid.
// "#*PageWrap" is the flex row (its own "position: relative" is the anchor the Tier-2 (992-1199px)
// absolute-positioned drawer below needs); "#*PageBody" is its flex:1 1 auto/min-width:0 child holding
// everything the page used to render as a direct child of its own root div; "#*FilterDrawer" (already
// back in the shared base rule above) is the row's second flex child.
.nd-split-page {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: @space-4;
    position: relative;
}

.nd-split-body {
    flex: 1 1 auto;
    min-width: 0;
}

// W2 fix (RO-5199 re-review, 2026-09-11 -- fleet.fe review): Bootstrap's "col-xl"/"col-lg-4"/etc. on each
// page's KPI-card row (and FuelCard's own two-chart-card row, tagged ".nd-kpi-row" the same way so its
// charts stack too) key off the VIEWPORT width, not the squeezed body's actual width -- at 1280px with
// the drawer open the body narrows to ~790px while still rendering the same 4-5 equal Bootstrap columns
// sized for the full 1280px, so labels wrap to 2-3 lines and the cards go tall and ragged. This
// codebase has no container queries, so ".nd-split-body--squeezed" (set on ".nd-split-body" from
// "ShowFilterDrawer" in the .razor) + this rule override each card's flex sizing directly: "flex: 1 1
// 220px" (flex-grow enabled, so cards still fill the row evenly, just wrapping once there's no room for
// another 220px card) instead of Bootstrap's fixed viewport-keyed width/max-width. 220px chosen as the
// minimum a stat-card's label + value + icon reads comfortably at without wrapping; verified it's also
// wide enough for FuelCard's fixed-300px-wide donut TelerikChart card, since with only 2 cards in that
// row, "flex-grow: 1" expands each to roughly half the squeezed body's width (~370-390px at 1280px),
// well above 220px and above the chart's own 300px. Scoped to the ≥1200px Tier-1 desktop breakpoint
// ONLY -- below that, the drawer becomes absolute/fixed (see the two media queries further down this
// file) and nothing is squeezed, so Bootstrap's normal responsive columns should apply unmodified.
@media (min-width: @screen-xl) {
    .nd-split-body.nd-split-body--squeezed .nd-kpi-row > [class*="col-"] {
        flex: 1 1 220px;
        width: auto;
        max-width: none;
    }
}

// W1 fix (RO-5199 re-review, 2026-09-11 -- fleet.fe review): "position: sticky" here was INERT -- every
// page renders inside "<main class="height-scroll">", which is itself "overflow: hidden", so it's that
// element's own child that actually scrolls, not the document; "position: sticky" measures against the
// nearest scrolling ancestor's scrollport, and since that ancestor never scrolls, the panel never had
// anything to stick relative to. Dropped "position: sticky" and "top" outright -- KEPT
// "max-height: calc(100vh - 2 * @space-4)", which still does real work independent of sticky: it caps
// the panel so it can never grow taller than the viewport, so its own ".offcanvas-body" (the drawer's
// scrollable middle section, between the fixed header and footer) scrolls internally instead of pushing
// the footer off-screen -- via Bootstrap's own ".offcanvas-body { flex-grow: 1; overflow-y: auto; }",
// reused as-is, no new CSS needed for that part. Deliberately scoped to ONLY the Reports drawers via ".nd-filter-drawer--report" (not merged into
// the shared base rule above, which every other drawer in the app also uses and doesn't need this height
// cap) -- this is a separate, additive rule. Both Tier-2 (992-1199px, below) and Tier-3 (<992px, below)
// media queries set their own "max-height" for these same drawers and come later in this file, so they
// correctly override this back to "none"/"90vh" at those breakpoints -- this rule only takes effect at
// the ≥1200px desktop tier.
.nd-filter-drawer--report {
    max-height: calc(100vh - 2 * @space-4);
}

// RO-5199 (US-FFP-002 redesign, REQ-027): Tier 2 -- anchored 400px panel at 992-1199px. Shadow/z-index
// reused from ".nd-filter-pop:2407". ".nd-split-wrap { position: relative }" is deliberately omitted here --
// the markup already carries Bootstrap's "position-relative" (BookingList.razor/VehicleList.razor), and
// .nd-split-wrap/.nd-split-wrap sits directly below the toolbar row spanning the same width, so its top-right
// corner is already "below the Filters button" with no JS-computed offset needed.
@media (min-width: @screen-lg) and (max-width: @screen-lg-max) {
    .nd-filter-drawer {
        position: absolute;
        top: 0;
        right: 0;
        bottom: auto;
        left: auto;
        width: 400px;
        max-width: 400px;
        max-height: none;
        box-shadow: 0 8px 28px rgba(0, 0, 0, .10);
        z-index: 500;
    }
}

// RO-5199 (US-FFP-002 redesign, REQ-027): Tier 3 -- mobile/tablet bottom sheet at <=991px. The exact
// values ".nd-filter-pop:5725" already uses for its own bottom-sheet recipe. "position: fixed" removes the
// panel from .nd-split-wrap's/.nd-split-wrap's flex row entirely, so .nd-split-content's/.nd-split-content's own
// "flex: 1 1 auto" automatically reclaims the full row width -- no separate adjustment needed. No backdrop
// element: neither ".nd-filter-pop" nor this panel has one, and outside-click-to-dismiss is deliberately
// absent at every tier.
@media (max-width: @screen-md-max) {
    .nd-filter-drawer {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, .14);
        z-index: 1050;
        max-height: 90vh;
    }
}

/* Ties Bootstrap's own accordion CSS custom properties to existing Fleet tokens instead of its
   Bootstrap-blue defaults -- these are Bootstrap's own documented override points, not new invented
   values. Scoped to this one drawer's accordion, not a global accordion restyle.
   Extended to .nd-filter-accordion (prototype-fleet port, VehicleList.razor's own 4-section accordion added
   for the "chevron does nothing" fix) -- same established pattern as the id-list extensions above.
   Extended (RO-5199, search/accordion parity port) to .nd-filter-accordion (ReminderManagement's own
   Client/Status sections) and .nd-filter-accordion (BookingLinkSharedDetail's own Car plate/Driver
   name-email/Link shared date range sections) -- the last 2 drawers in the app still missing this
   pattern. */
.nd-filter-accordion {
    --bs-accordion-border-color: @color-border;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-body-padding-y: @space-6;
    --bs-accordion-body-padding-x: @space-7;
}

/* Trims the trailing @space-4 (12px) that .nd-filter-pop-row's shared margin-bottom (needed for its
   original multi-row popover context) leaves at the bottom of a section that only has one row. Scoped to
   this drawer only; .nd-filter-pop-row itself is untouched everywhere else it's used (VehicleList.razor's
   own stacked rows below). */
.nd-filter-drawer .nd-filter-pop-row:last-child {
    margin-bottom: 0;
}

/* .nd-client-filter-grid has a later "display: grid; grid-template-columns: repeat(auto-fill,
   minmax(160px, 1fr))" definition further down this file that wins the cascade and produces a 2-column
   layout. Overriding the shared class itself would change VehicleList/LeasingReturn/UserManagement too, so
   this collapses it to one column for this drawer only. */
.nd-filter-drawer .nd-client-filter-grid {
    grid-template-columns: 1fr;
}

/* Bugfix (prototype-fleet port, live-browser repro): VehicleList.razor's 3 text-filter rows (Driver
   Name/Email, Approver Group, Natcode) put the "nd-filter-label--muted 'Like'" chip layout inside this
   ~306px-wide drawer body, which leaves too little row width for .nd-filter-label-input to read as a usable
   text box once its chip siblings claim their own space. Stacks the label/"Like" chips above a full-width
   input instead -- scoped to .nd-filter-drawer's own ".nd-filter-pop-row--stacked" modifier (added only to
   those 3 rows in VehicleList.razor) so the shared unscoped .nd-filter-pop-row/.nd-filter-label-input rules,
   and BookingList's own .nd-filter-drawer rows (none of which use this modifier), are untouched.
   Extended (2026-09-02) to .nd-filter-drawer/.nd-filter-drawer (their "Created date" rows: the "Between" chip
   plus TelerikDateRangePicker's two inputs do not fit one non-wrapping row in the ~306px body either -- the
   picker fell out of view behind the drawer's overflow:hidden, user screenshot), .nd-filter-drawer
   (ClientsReport's Type/Status dropdown rows, same stacked shape) and .nd-filter-drawer (Leasing Return
   Upcoming tab's contract-end-date row). Extended again (2026-09-03) to .nd-filter-drawer (Import Overview's
   own Status dropdown row, same stacked shape as ClientsReport's). Same modifier, no new rule.
   REMOVED .nd-filter-drawer/.nd-filter-drawer (Testing Sprint Review 2026.18, review fix): both drawers'
   Type/Status sections converted from dropdowns to the single-select checkbox grid described further up
   this file -- neither has any .nd-filter-pop-row--stacked element left, so both are dropped from the
   selector lists below. */
.nd-filter-drawer .nd-filter-pop-row--stacked {
    flex-direction: column;
    align-items: stretch;
    gap: @space-2;
}

.nd-filter-drawer .nd-filter-pop-row--stacked .nd-filter-label-input {
    flex: none;
    width: 100%;
    min-width: 0;
}

// RO-5199 (5T.5, D37/D38): the toolbar's search box loses "w-100" (BookingList.razor) once "flex-wrap" is
// added to the row, so it needs its own basis/floor instead of claiming the full line -- "flex: 1 1 260px"
// still lets it absorb slack while giving the line-breaking algorithm a real width to wrap the pills
// around, and "min-width: 200px" stops it collapsing the way the <=991px rule's "flex: 1; min-width: 0"
// would. The 3-class selector beats that class rule at every width; ".nd-toolbar-row" itself is shared by 9 other
// pages (5T.1) and is deliberately not touched.
// The Leasing Return Repair tab's toolbar shares these rules: same search box, same pill row, plus a column
// picker. Added to the existing selectors rather than duplicated, so the two toolbars cannot drift apart.
.nd-toolbar-row.nd-filter-toolbar .nd-search-combo {
    flex: 1 1 260px;
    min-width: 200px;
}

// UI bug fix (2026-09-02, alignment/consistency pass -- no behaviour change): the toolbar's search box,
// six filter pills and "Filters" trigger button were reading as visually different heights next to each
// other. Traced with a computed-style snapshot at 1900/1280px (single-line, no wrap):
//   .tour-bookinglist-filter-fields (Filters btn): h=42.0, top=37.0, bottom=79.0
//   .nd-search-combo:                              h=42.0, top=37.0, bottom=79.0
//   .nd-filter-type-pill (plain, e.g. #btnPillBookingDate): h=28.5, top=37.0, bottom=65.5
//   .nd-filter-type-pill (with count badge, e.g. #btnPillStatus): h=30.0, top=37.0, bottom=67.0
// All three share the same TOP (37.0) because .nd-filter-toolbar's default flex "align-items: stretch" stretches
// every direct child's wrapper to the line's height -- but a plain <button> isn't itself a flex container, so
// it doesn't inherit that stretch; it just renders at its own content height, flush to the top of its
// stretched wrapper. Net effect: the pills sat ~12.5-13.5px short of the row's bottom edge (and badge vs.
// non-badge pills even differed from each other by 1.5px), while .btn already declares an explicit
// height:40px (:1136) and .nd-search-input-wrap an explicit min-height:40px (:2603) -- neither pill class did.
// Fix: give the six toolbar pill *triggers* the same explicit height as their siblings, scoped to
// ".nd-filter-toolbar-pills > div > .nd-filter-type-pill" (direct children only) so the shared ".nd-filter-type-pill"
// class -- reused unscoped by the Today/This Week/This Month/Next 30 Days quick-date chips nested one level
// deeper inside these same pills' own popovers (:218-225, :273-280), and by DriverLicenceReminderReport.razor
// -- is completely untouched; only the row's own 6 trigger buttons are affected.
.nd-filter-toolbar-pills > div > .nd-filter-type-pill {
    height: 40px;
    padding: 0 14px;
}

// The search box's own 2px overshoot (42px measured vs. the button's 40px): .nd-search-combo has no explicit
// height of its own, so its auto height = its child .nd-search-input-wrap's min-height:40px content box, PLUS
// .nd-search-combo's own 1px top/bottom border (auto-sizing always adds a box's own border regardless of
// box-sizing, which only governs how an *explicit* width/height is interpreted). Trimming the inner wrap's
// min-height by the 2px the outer border adds brings the rendered total to exactly 40px, scoped to this
// toolbar row only -- ".nd-search-input-wrap" itself is shared by the same 9 other pages as ".nd-toolbar-row".
.nd-toolbar-row.nd-filter-toolbar .nd-search-input-wrap {
    min-height: 38px;
}

// RO-5199 (5T.5, D37): the six toolbar filter pill popovers. ".nd-filter-pop"'s 700px width (:2412 above)
// is sized for VehicleList's wide tabbed popover and this drawer's own multi-row content -- far too wide
// for a single compact field. Values match the prototype's own pill popovers.
.nd-filter-toolbar-pills .nd-filter-pop {
    width: 320px;
    max-width: calc(100vw - 24px);
}

// The six pill popovers -- ".nd-client-filter-grid" resolves to "repeat(auto-fill, minmax(160px, 1fr))" further
// down this file (non-deterministic inside a 320px popover), so this extends .nd-filter-drawer's own
// identical one-column override (above) to the popover instances. The shared class itself stays untouched
// -- VehicleList.razor and several UserManagement lists still depend on its auto-fill behaviour. (RO-5199,
// 2026-09-02: the Leasing Return list's own LrClientFilterPanel.razor, formerly a third dependent, is
// removed -- both its tabs now use LrFilterDrawer's own one-column override, .nd-filter-drawer
// .nd-client-filter-grid"/.nd-filter-drawer .nd-client-filter-grid" below.)
.nd-filter-toolbar-pills .nd-client-filter-grid {
    grid-template-columns: 1fr;
}

// RO-5199 (review fix, OQ-12): BookingList.razor:23 wraps the whole page in "nd-list-page overflow-hidden".
// The search box (flex: 1 1 260px, the only growing toolbar child) pushes .nd-filter-toolbar-pills hard against the
// right edge next to the Filters trigger, so a 320px popover anchored left:0 on the right-most pill
// extends past that clipped edge and is silently cut off -- on any single-line desktop width, not just a
// wrapped/narrow one. Right-anchoring the last pill's own popover opens it inward instead. If
// .nd-filter-toolbar-pills wraps internally, ":last-child" is the last item on the last line -- right-most only
// when that line is full, which is still strictly better than the unconditional left:0 it replaces.
.nd-filter-toolbar-pills > div:last-child .nd-filter-pop {
    left: auto;
    right: 0;
}

/* Filter popup — tabbed layout */
.nd-filter-pop-tabbed {
    display: flex;
    min-height: 400px;
}

.nd-filter-tab-list {
    width: 200px;
    flex-shrink: 0;
    background: @color-primary-bg;
    border-right: 1px solid #c9e6d5;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
}

.nd-filter-tab-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 500;
    color: @color-text-primary;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.15s, font-weight 0.1s;
}

    .nd-filter-tab-item:hover {
        color: #1a6b4a;
    }

.nd-filter-tab-item--active {
    color: #1a1a2e;
    font-weight: 500;
    background: @color-white;
    border-left: 1px solid @color-primary;
}

.nd-filter-tab-content {
    flex: 1;
    padding: 20px;
    min-width: 0;
    background: #fff;
    align-self: flex-start;
    width: 100%;
}

    .nd-filter-tab-content .nd-filter-pop-row {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        margin-bottom: 0;
        flex-wrap: nowrap;
    }

    .nd-filter-tab-content .nd-filter-label-input {
        flex: 1;
        min-width: 0;
    }
/* Label chips inside filter popup */
.nd-filter-label {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    background: #f8fafc;
    border: 1px solid @color-border;
    border-radius: 7px;
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

.nd-filter-label--muted {
    color: #9ca3af;
}

.nd-filter-label-input {
    flex: 1;
    min-width: 0;
}
/* Type pills inside filter popup */
.nd-filter-type-pill {
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    border: 1.5px solid @color-gray-200;
    color: #4b5563;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.12s;
    background: #fff;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

    .nd-filter-type-pill:hover,
    .nd-filter-type-pill--active,
    .nd-filter-type-pill.active-menu {
        border-color: @color-primary;
        background: white;
        color: @color-primary;
    }

.nd-customer-tag {
    background: #ffffff;
    border-radius: 20px;
    font-size: 10px;
    padding: 3px 6px;
    line-height: 10px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    border: 1px solid @color-border-base;
    color: @color-text-muted;
}

.nd-profile-pending {
    font-size: 10px;
    color: @color-primary;
}

.nd-list-meta-item {
    font-size: 10px;
    color: @color-text-muted;
    margin-right: 15px;
}
/* Client checkboxes grid inside popup */
.nd-client-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 4px 12px;
    max-height: 340px;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: #e5e7eb transparent;
}

    .nd-client-filter-grid::-webkit-scrollbar {
        width: 4px;
    }

    .nd-client-filter-grid::-webkit-scrollbar-thumb {
        background: #e5e7eb;
        border-radius: 4px;
    }

.nd-filter-check-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #374151;
    cursor: pointer;
    padding: 3px 0;
}

/*.nd-filter-label-input .k-floating-label-container {
    border: 1px solid @color-border-light;
}*/

// ── Vehicle list: Fields popup — vertical list, label left / toggle right ──
.my-custom-filter-popup {
    right: 0 !important;
    /*  left: auto !important;*/
    width: 300px !important;
    max-width: calc(100vw - 16px) !important;
    // Force all menu items to stack vertically
    .k-menu-popup > ul,
    .k-group {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

        .k-menu-popup > ul > li,
        .k-group > li {
            display: block !important;
            width: 100% !important;
        }
    // Each field row: label on left, toggle on right
    .k-menu-link,
    .k-menu-link-text {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
    }

    label {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0px 12px !important;
        cursor: pointer;
    }
}
/***********
    Default form style
    ************/
.form-control {
    border-radius: 8px;
    min-height: 40px;
    font-size: 12px;
    border-color: @color-border-default;

    &.k-combobox .k-icon-button {
        background: white;
        border: 0;
    }

    &:hover, &:focus {
        box-shadow: 0px 0px 1px @color-primary !important;
    }
}

.form-label {
    color: @color-text-primary;
}

label {
    margin-bottom: 5px;
}

.input-group-text {
    border-radius: @radius-md;
    color: @color-text-primary;
}

.listing-card {
    border-radius: @radius-xl;
    margin-bottom: 5px;
    padding: 15px;
    border: 1px solid @color-border-light;
    transition: 0.5s ease all;
    background: white;
}

/* Scrolling result list inside the driver-assignment dialog. */
.driver-search-list {
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Damage booking option cards (Vehicle condition Yes/No, etc.) selected state */
.vehicle-item {
    transition: 0.5s ease all;
    border-color: @color-gray-200 !important;

    &.selected {
        border-color: @color-primary !important;
        background-color: @color-primary-bg;
        color: @color-primary !important;
    }

    &:hover {
        border-color: @color-primary;
    }
}

.option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;

    &.selected {
        color: @color-primary !important;
    }
}

/* Radio-group option tiles (Police report, etc.): hide the raw Telerik radio circle and let the
   tile fill the row, so the option text + checkmark align like the employee/Lite page (no top-aligned radio). */

/* Secondary question heading used on damage pages (Police report, Accident involvement).
   Without this it fell back to the large default <h2> size, looking bigger than other screens. */
.section-card-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
}

.search-box {
    border-radius: 8px !important;
    min-height: 40px !important;
    /*   border: 1px solid @color-border-light !important;*/
}

.attach-select-file {
    border-radius: 8px !important;

    .k-dropzone {
        border-radius: 8px;
    }
}

.page-title-track {
    display: flex;
    margin-bottom: 20px;
    justify-content: space-between;
    align-items: center;
}
/******
    POP us default settings
    *******/

/********************
    Custom Pop
*********************/
.custom-pop {

    .k-window-content {
        font-size: 12px;
    }
}
/************************
 Delete confirm box UI   
 *************************/
/****Delete Telerik POP UP ****/
.k-dialog.delete-pop {

    .k-dialog-titlebar {
        border-radius: 8px 8px 0 0;
        border: 0px;

        label {
            font-size: 18px;
            font-weight: 600;
        }
    }

    .k-window-titlebar {

        .k-window-title {
            .delete-icon-bg {
                border-radius: 50%;
                border: 7px solid #fbe2e2;

            }
        }
    }

}

// ============================================================
//   USER PROFILE POPUP — anchor near sidebar avatar
// ============================================================
/*.sidebar-profile-popup {
    top: auto !important;
    bottom: 10px !important;
    left: 82px !important;
}*/
/*********User profile popup********/

.user-popup-window {
    border-radius: 12px;
    top: auto !important;
    bottom: 10px !important;
    left: 82px !important;

    &.sidebar-profile-popup {
        position: fixed !important;
        // the master menu sidebar is 280px wide now — clear it instead of the old icon rail
        left: 292px !important;
    }

    &.sidebar-profile-popup--titled {
        left: 90px !important;
        bottom: 10px !important;

        .k-window-content {
            display: none;
        }

        .k-window-titlebar {
            background: transparent;
            border-bottom: none;
        }

        h6 {
            font-size: @font-size-md;
            font-weight: 600;
        }

        small {
            font-size: @font-size-base;
        }

        .k-window-actions .btn {
            font-size: @font-size-base;
        }
    }

    h6 {
        font-size: 14px;
        margin-bottom: 4px;
    }

    p {
        font-weight: 600;
        font-size: 12px;
        margin-bottom: 5px;
    }

    small {
        font-size: 10px;
        color: @color-text-muted;
    }

    .profile-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: @color-text-primary;
        border: 1px solid @color-text-primary;
        padding: 1px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        font-size: 16px;
        background-clip: content-box;
    }

    .profile-item {
        display: flex;
        align-items: start;
        cursor: pointer;
        padding: 10px 0;

        &:hover {
            background-color: #f8f9fa;
        }

        i {
            font-size: 12px;
            color: @color-text-muted;
            padding-top: 2px;
            margin-right: 10px;
        }
    }

    .k-window-actions {
        border-top: 1px solid #ddd;
    }
}

.logout-btn {
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    padding: 10px 0;
    font-weight: 500;
    color: #dc3545;
}

    .logout-btn:hover {
        background-color: #f8f9fa;
    }

// ============================================================
//   BOOKING DETAIL — split layout (sidebar + content)
// ============================================================
.hover-bg-color:focus {
    background: #EEF9F7 !important;
}

.nd-detail-layout {
    display: flex;
    flex-direction: row !important;
    width: 100%;
    height: calc(100vh - 4.5rem); // viewport minus legacy top-row
    overflow: hidden;
}

// Sidebar
.nd-detail-sidebar {
    width: 280px;
    flex-shrink: 0;
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 2px 0 8px rgba(0,0,0,0.03);
    /* position: fixed;*/
}

.nd-detail-sidebar-header {
    padding: 16px 20px 12px;
    border-bottom: 1px solid @color-border-light;
}

.nd-detail-booking-no {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 4px;
}

.nd-detail-plate {
    font-size: 13px;
    color: @color-primary;
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    /*  margin-bottom: 8px;*/

    &:hover {
        text-decoration: underline;
        color: @color-primary-dark;
    }
}

.nd-detail-sidebar-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.nd-detail-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

// Sidebar navigation
.nd-detail-nav {
    padding: 12px 0;
    flex: 1;
}

.nd-detail-nav-section {
    padding: 14px 20px 4px;
    font-size: 10px;
    color: @color-gray-500;
    font-weight: @font-weight-semibold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nd-detail-nav-group {
    padding-bottom: 6px;

    & + .nd-detail-nav-group {
        border-top: 1px solid @color-border-card;
    }
}

.nd-detail-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-right: 12px;
    margin-left: 12px;
    color: @color-text-primary;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    gap: 8px;
    user-select: none;

    &:hover {
        background: @color-primary-bg;
        color: @color-primary;
        text-decoration: none;
    }

    &.active {
        background: @color-primary-bg;
        color: @color-primary;
        font-weight: 600;
        border-left-color: @color-primary;

        .nd-nav-dot {
            background: @color-primary;
        }
    }

    .nd-nav-dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: @color-gray-300;
        flex-shrink: 0;
    }

    .nd-nav-arrow {
        font-size: 14px;
        color: #9ca3af;
        flex-shrink: 0;
    }
}

// Right column wrapper
.nd-detail-right {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    /*  margin-left: 260px;
    @media(max-width:@screen-lg) {
        margin-left: 0;
    }*/
}

// Main content area
.nd-detail-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /*    background: #f4f5f7;*/
    min-width: 0;
    padding: 15px 15px;

    @media(min-width:@screen-3xl) {
        padding: 15px 0 15px 15px;
    }

    @media(max-width:@screen-sm) {
        padding: 15px;
    }
}

// Mobile horizontal nav
.nd-detail-mobile-nav {
    display: none;
    overflow-x: auto;
    white-space: nowrap;
    background: #fff;
    border-bottom: 1px solid @color-border-light;
    padding: 0 16px;
    gap: 0;
    flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    &::-webkit-scrollbar {
        display: none;
    }
}

.nd-detail-mobile-nav-item {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.1s, border-color 0.1s;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;

    &:hover {
        color: @color-primary;
    }

    &.active {
        color: @color-primary;
        border-bottom-color: @color-primary;
        font-weight: 700;
    }
}

// Mobile header strip
.nd-detail-mobile-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid @color-border-light;
    flex-shrink: 0;
    gap: 8px;
}

.nd-detail-mobile-header-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

// ── Mobile Top Bar (logo + lang + hamburger) ───────────────
.nd-detail-mobile-topbar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid @color-border-light;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 50;

    .nd-mobile-logo {
        display: flex;
        align-items: center;

        img {
            height: 34px;
            width: auto;
        }
    }

    .nd-mobile-topbar-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        // Visually first (left of the logo) without touching GarageDetail.razor's markup order,
        // which is shared with GMS's own host app.
        order: -1;
    }

    .nd-mobile-hamburger {
        background: none;
        border: none;
        padding: 6px 8px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 22px;
        color: #374151;
        line-height: 1;
        display: flex;
        align-items: center;
        transition: background 0.15s;

        &:hover {
            background: #f3f4f6;
        }
    }
}

// ── Drawer overlay ──────────────────────────────────────────
.nd-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 400;
}

// ── Mobile Nav Drawer (slides from left) ───────────────────
.nd-detail-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    max-width: 85vw;
    height: 100vh;
    background: #fff;
    z-index: 500;
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 24px rgba(0,0,0,0.12);

    &.open {
        transform: translateX(0);
    }

    .nd-drawer-header {
        padding: 48px 20px 16px;
        border-bottom: 1px solid @color-border-light;
        background: #f9fafb;
        display: flex;
        flex-direction: column;
        gap: 6px;
        position: relative;
    }

    .nd-drawer-close-btn {
        position: absolute;
        top: 12px;
        right: 12px;
        background: none;
        border: none;
        font-size: 22px;
        cursor: pointer;
        color: #6b7280;
        padding: 4px 6px;
        border-radius: 6px;
        line-height: 1;
        display: flex;
        align-items: center;

        &:hover {
            background: #f0f0f0;
        }
    }

    .nd-drawer-nav {
        flex: 1;
        padding: 8px 0;
        overflow-y: auto;
    }
}

// Vehicle info sidebar header
.nd-detail-vehicle-plate {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 2px;
}

.nd-detail-vehicle-model {
    font-size: 12px;
    color: #6b7280;
}

// Popover content
.nd-plate-popover-header {
    background: #eef2ff;
    border-radius: 10px 10px 0 0;
    padding: 14px 16px 12px;
}

.nd-plate-popover-plate {
    font-size: 18px;
    font-weight: 700;
    color: #1e1b4b;
    margin: 0 0 2px;
}

.nd-plate-popover-variant {
    font-size: 12px;
    color: #4f46e5;
    margin: 0 0 2px;
}

.nd-plate-popover-dates {
    font-size: 11px;
    color: #6b7280;
    margin: 0 0 8px;
}

.nd-plate-popover-meta {
    display: flex;
    gap: 16px;
    font-size: 11px;
    color: #374151;
    flex-wrap: wrap;
}

.nd-plate-popover-body {
    padding: 12px 16px 12px 0;
}

.nd-plate-popover-row {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    border-bottom: 1px solid @color-border-card;
    font-size: 12px;
    color: #374151;

    &:last-child {
        border-bottom: none;
    }
}

.nd-plate-popover-label {
    font-size: 10px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

// ============================================================
//   AUDIT LOG TIMELINE
// ============================================================
.nd-timeline {
    padding: 8px 0;
}

.nd-timeline-item {
    display: flex;
    gap: 12px;
    padding: 10px 16px;
    position: relative;

    & + .nd-timeline-item::before {
        content: '';
        position: absolute;
        left: 28px;
        top: 0;
        bottom: 0;
        width: 1px;
        background: #f0f0f0;
    }
}

.nd-timeline-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #eef2ff;
    color: #4f46e5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.nd-timeline-content {
    flex: 1;
    min-width: 0;
}

.nd-timeline-status {
    font-size: 12px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 4px;
}

.nd-timeline-meta {
    font-size: 11px;
    color: #9ca3af;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: center;
}

.dlr-timeline-pop .k-window-content {
    height: auto;
    max-height: 70vh;
    overflow: auto;
}

.licence-history-item {
    position: relative;
    padding-bottom: 16px;

    &:last-child {
        padding-bottom: 0;
    }
    // Continuous connecting line through the dots (skipped on the last item).
    &:not(:last-child)::before {
        content: "";
        position: absolute;
        top: 15px;
        bottom: 0;
        left: 8px;
        width: 1px;
        background: @color-gray-300;
        z-index: -1;
    }
}

.licence-history-dot {
    position: relative;
    z-index: 1;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;

    &.history-dot-declined {
        background: #B42318;
    }

    &.history-dot-done {
        background: #067E5E;
    }
    // Pending Review (current) — hollow orange ring.
    &.history-dot-pending {
        background: #fff;
        border: 2px solid #F97D34;
    }
    // Decision (upcoming) — hollow grey ring.
    &.history-dot-upcoming {
        background: #fff;
        border: 2px solid #CBD5E1;
    }
}

// ============================================================
//   DETAIL PAGE HEADER — breadcrumb + tour + language (one row)
// ============================================================
.nd-detail-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 15px;
    background: #fff;
    border-bottom: 1px solid @color-border-light;
    flex-shrink: 0;
    gap: 12px;
    flex-wrap: wrap;
}

.nd-detail-page-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

// ============================================================
//   SECTION PAGES — inner content tabs
// ============================================================
.nd-desktop-only {
    display: flex;
    gap: 15px;
}

.nd-section-wrap {
    padding: 24px;
    max-width: 880px;
    width: 100%;
}

// Breadcrumb (inside nd-detail-page-header — no bottom margin needed)
.nd-detail-page-header .nd-breadcrumb {
    margin-bottom: 0;
}

// Booking number + plate shown on right in mobile/tablet page header
.nd-mobile-booking-meta {
    display: none;
}

// Breadcrumb
.nd-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 16px;
    flex-wrap: wrap;

    a {
        color: @color-primary;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-weight: 500;
        transition: color 0.1s;

        &:hover {
            color: @color-primary-dark;
        }
    }
}

.nd-breadcrumb-sep {
    color: #d1d5db;
}

.nd-breadcrumb-current {
    color: #6b7280;
}

// Section header row
.nd-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 12px;
    flex-wrap: wrap;
}

.nd-section-title {
    font-size: 18px;
    font-weight: 500;
    color: @color-black;
    margin: 0;
}

.nd-section-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

// Info display rows (icon + text block)
.nd-info-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.nd-info-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f3f4f6;
    border: 1px solid @color-gray-200;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.nd-info-block {
    flex: 1;
    min-width: 0;
}

.nd-info-name {
    font-size: 13px;
    font-weight: 500;
    color: #111827;
    margin: 0 0 4px;
}

.nd-info-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 12px;
    /* color: #6b7280;*/
    align-items: center;

    i {
        font-size: 12px;
    }
}

// Address section divider
.nd-address-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0 8px;
    margin-top: 8px;
    border-top: 1px solid @color-border-card;
    gap: 8px;
}

.nd-address-section-title {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 6px;
}

// Address rows inside cards
.nd-address-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid @color-border-card;

    &:last-child {
        border-bottom: none;
    }
}

.nd-address-row-left {
    flex: 1;
    min-width: 0;
    /*  font-size: 13px;*/
    /*   color: #374151;*/
}

.nd-address-hint {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 3px;
}

.nd-address-row-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

// Small badges
.nd-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid @color-gray-200;
    white-space: nowrap;
}

.nd-badge-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #f3f4f6;
    border: 1px solid @color-gray-200;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

// Invoice rows
.nd-invoice-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid @color-border-card;
    gap: 16px;

    &:last-child {
        border-bottom: none;
    }
}

.nd-invoice-row-left {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.nd-invoice-no {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.nd-invoice-meta {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 2px;
}

.nd-invoice-amount {
    text-align: right;
    flex-shrink: 0;
}

.nd-invoice-amount-value {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
}

.nd-invoice-amount-label {
    font-size: 10px;
    color: #9ca3af;
}

// Invoice summary footer
.nd-invoice-summary {
    display: flex;
    gap: 24px;
    padding: 14px 0 0;
    border-top: 2px solid @color-border-card;
    flex-wrap: wrap;
}

.nd-invoice-summary-item {
    display: flex;
    flex-direction: column;
}

.nd-invoice-summary-label {
    font-size: 10px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.nd-invoice-summary-value {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
}

// Notes
.nd-note-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.nd-note-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #eef2ff;
    color: #4f46e5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.nd-note-body {
    flex: 1;
    min-width: 0;
}

.nd-note-author {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.nd-note-time {
    font-size: 11px;
    color: #9ca3af;
    margin-left: 8px;
}

.nd-note-text {
    margin-top: 6px;
    padding: 10px 14px;
    background: #f9fafb;
    border-radius: 8px;
    font-size: 13px;
    color: #374151;
    border: 1px solid @color-border-card;
    max-width: 600px;
}

// Note compose row
.nd-note-compose {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 24px;
}

// Section empty state
.nd-section-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 24px;
    text-align: center;

    i {
        font-size: 40px;
        color: #e5e7eb;
        margin-bottom: 12px;
    }

    p {
        font-size: 13px;
        color: #9ca3af;
        margin: 0;
    }
}

/**** DAshboard************/
.icon-box {
    /* background: @bg-light-white;*/
    padding: 6px 7px;
    color: @color-primary;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    width: 35px;
    height: 35px;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #eee;

    &.red-box {
        background: #FFE7DD;
        color: #F54A00;
    }
}
// ============================================================
//   RESPONSIVE — detail layout (≤ 991px)
// ============================================================
@media (max-width: @screen-md-max) {
    // ── Outer master nav: hide sidebar, show mobile topbar ──
    .sidebar {
        display: none !important;
    }

    .app-mobile-topbar {
        display: flex;
    }
    /*
    .app-layout {
        flex-direction: column;
    }*/

    .main-content {
        padding-top: 56px; // offset for fixed topbar
    }

    // ── Booking detail inner nav ──
    .nd-detail-sidebar {
        display: none;
    }

    // Hide the page-level topbar — the global app-mobile-topbar already covers this
    .nd-detail-mobile-topbar {
        display: none;
    }

    // Hide hamburger — nav is always visible as top bar
    .nd-mobile-hamburger {
        display: none;
    }

    // No overlay needed when drawer is a top bar
    .nd-drawer-overlay {
        display: none !important;
    }

    .nd-detail-layout {
        flex-direction: column;
        height: calc(100vh - 4.5rem);
        overflow: hidden;
    }

    // Repurpose drawer as a permanent sticky top nav bar
    .nd-detail-drawer {
        position: sticky !important;
        top: 0;
        left: auto !important;
        transform: none !important;
        transition: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        flex-direction: column;
        flex-shrink: 0;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
        z-index: 100;
        display: flex !important;
        // Hide the booking info header — redundant with breadcrumb
        .nd-drawer-header {
            display: none;
        }
        // Close button not needed in top-bar mode
        .nd-drawer-close-btn {
            display: none;
        }
        // Horizontal scrollable nav strip
        .nd-drawer-nav {
            display: flex;
            flex-direction: row;
            flex: none;
            overflow-x: auto;
            overflow-y: visible;
            padding: 0 8px;
            border-top: 1px solid @color-border-light;
            scrollbar-width: none;

            &::-webkit-scrollbar {
                display: none;
            }
        }

        .nd-detail-nav-group {
            display: inline-flex;
            flex-direction: row;
            padding: 0;
            border-top: none;

            & + .nd-detail-nav-group {
                border-top: none;
                /*border-left: 1px solid @color-border-card;*/
            }
        }
        // Hide section headings (e.g. "Initiation", "Garage")
        .nd-detail-nav-section {
            display: none;
        }

        .nd-detail-nav-item {
            display: inline-flex;
            align-items: center;
            padding: 10px 14px;
            font-size: 12px;
            white-space: nowrap;
            border-left: none !important;
            border-bottom: 2px solid transparent;
            flex-shrink: 0;

            &.active {
                border-left: none !important;
                border-bottom: 2px solid @color-primary;
                background: @color-primary-bg;
            }

            &:hover {
                border-bottom-color: @color-primary;
            }
        }
        // Hide dots and arrows in horizontal layout
        .nd-nav-dot,
        .nd-nav-arrow {
            display: none;
        }
    }

    .nd-detail-content {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }

    // Allow Telerik dropdown popups to overflow the page container on mobile
    .nd-list-page {
        overflow: visible !important;
    }

    // Vehicle list grid: full-width horizontally scrollable on tablet/mobile
    .nd-grid-card {
        border-radius: @radius-lg;
        min-height: 0;
    }

    .nd-grid-scroll {
        -webkit-overflow-scrolling: touch;
    }

    // Page header: left = back link only, right = booking number + plate
    .nd-mobile-booking-meta {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
        margin-left: auto;
        flex-shrink: 0;
    }

    .nd-mobile-booking-no {
        font-size: 11px;
        font-weight: 700;
        color: #111827;
        line-height: 1.2;
    }

    .nd-mobile-booking-plate {
        font-size: 10px;
        font-weight: 600;
        color: @color-primary;
        line-height: 1.2;
    }

    // Hide desktop actions (tour + language switcher) — global topbar covers this
    .nd-detail-page-header-actions {
        display: none;
    }

    // Hide tour button + language switcher inside page headers on mobile
    // (they are already shown in the mobile top bar)
    .nd-desktop-only {
        display: none;
    }

    // Dashboard: stack actions row vertically, buttons above search
    .dashboard-actions-row {
        flex-direction: column;
        align-items: stretch;

        .header-actions {
            order: 1;
            display: flex;
            justify-content: flex-end;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 8px;
        }

        .dashboard-search {
            order: 2;
            margin-right: 0 !important;
            width: 100%;
        }
    }

    .nd-list-avatar {
        display: none;
    }

    // Status tabs: horizontal scroll instead of wrapping
    .nd-status-tabs-wrap {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none;
        }
    }

    // Toolbar: row 1 = filter + search, row 2 = action buttons
    .nd-toolbar-row {
        flex-wrap: wrap;
    }

        .nd-toolbar-row .nd-search-combo {
            flex: 1;
            width: auto !important;
            min-width: 0;
        }

    .nd-toolbar-actions {
        width: 100%;
        justify-content: flex-end;
        flex-shrink: 0;
    }
}

// ============================================================
//   RESPONSIVE — list pages (≤ 767px)
// ============================================================
@media (max-width: @screen-sm-max) {
    // Hide KPI stat cards on mobile (dashboard, booking list, vehicle list)
    .tour-dashboard-dailypending-bookings {
        display: none !important;
    }

    .nd-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }

    .nd-search-combo {
        width: 100%;
    }

    .nd-search-input-wrap {
        flex: 1;
    }

    .nd-filter-pop {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.14);
        z-index: 1050;
        max-height: 90vh;
        overflow-y: auto;
    }

    .nd-filter-pop-tabbed {
        flex-direction: column;
        min-height: unset;
    }

    .nd-filter-tab-list {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid #c9e6d5;
        padding: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none;
        }
    }

    .nd-filter-tab-item {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        width: auto;
        padding: 10px 16px;
        border-left: none;
        border-bottom: 2px solid transparent;
        flex-shrink: 0;
    }

    .nd-filter-tab-item--active {
        border-left: none;
        border-bottom: 2px solid @color-primary;
        background: @color-white;
    }

    .nd-filter-tab-content {
        padding: 16px;
    }

        .nd-filter-tab-content .nd-filter-pop-row {
            flex-wrap: wrap;
        }

        .nd-filter-tab-content .nd-filter-label-input {
            width: 100%;
            flex: 1 1 100%;
        }

    .nd-client-filter-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        max-height: 180px;
    }

    .nd-filter-pop-header {
        padding: 12px 14px 12px 16px;
    }

    .nd-list-card {
        padding: 12px 16px;
    }

    .nd-page-title-row {
        padding: 5px;
    }
}

.date-range-picker .k-dateinput, .date-range-picker .k-timepicker {
    height: 36px !important;
    border-radius: 8px;

    input {
        /*border: 1px solid @color-border-base;*/
        height: 36px;
        border-radius: 8px;
    }
}

.tcoReport {
    height: 12px;
}

.breakdown-colors {
    margin: 4px;
    width: 12px;
    height: 12px;
}

// ============================================================
//   Settings Page
// ============================================================

.nd-settings-page {
    padding: @space-2 0;
}

.nd-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: @space-7;
    align-items: start;
}

.nd-settings-card {
    background: @color-bg-card;
    border: 1px solid @color-border-stat-card;
    border-radius: @radius-xl;
    padding: @space-6 @space-7;
    box-shadow: @shadow-card;
    transition: box-shadow @transition-base;

    &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
    }
}

.nd-settings-card-header {
    display: flex;
    align-items: center;
    gap: @space-3;
    margin-bottom: @space-5;
    padding-bottom: @space-4;
    border-bottom: 1px solid @color-border-light;
}

.nd-settings-card-icon {
    width: 36px;
    height: 36px;
    border-radius: @radius-md;
    background: @color-primary-bg;
    display: flex;
    align-items: center;
    justify-content: center;
    color: @color-primary;
    font-size: @font-size-lg;
    flex-shrink: 0;
}

.nd-settings-card-title {
    font-size: @font-size-md;
    font-weight: @font-weight-semibold;
    color: @color-text-primary;
    margin: 0;
}

.nd-settings-card-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;

    li {
        a {
            display: flex;
            align-items: center;
            padding: @space-2 @space-3;
            border-radius: @radius-sm;
            font-size: @font-size-md;
            color: @color-text-secondary;
            text-decoration: none;
            transition: background @transition-fast, color @transition-fast;

            &::before {
                content: '';
                width: 5px;
                height: 5px;
                border-radius: 50%;
                background: @color-gray-300;
                margin-right: @space-3;
                flex-shrink: 0;
                transition: background @transition-fast;
            }

            &:hover {
                background: @color-primary-bg;
                color: @color-primary;

                &::before {
                    background: @color-primary;
                }
            }
        }
    }
}

// ============================================================
// Status Pills  (nd-status-pill)
// Usage: <span class="nd-status-pill nd-status-pill--placed">Booking Placed</span>
// ============================================================

.nd-status-pill {
    border-radius: 999px;
    border: 0px solid transparent;
    font-size: 10px;
    font-weight: 500;
    //-------------Pending: Awaiting decision - yellow--------/
    &--awaiting {
        background-color: #FFFBEA;
        color: #9C7209;
        border-color: #FFFBEA;
    }
    //------Active: Booking Placed - Blue---------//
    &--placed {
        background-color: #F0F6FC;
        color: #1976D2;
        border-color: #F0F6FC;
    }
    // ---Booking Completed: Closed successfully - Green-----------//
    &--completed {
        background-color: #E6F5F0;
        color: #16A34A;
        border-color: #E6F5F0;
    }
    // --- Purple: At Workshop ---
    &--at-workshop {
        background-color: #F3EBFF;
        color: #8458D0;
    }
    // --- Dark Pink/Purple: Additional Work ---
    &--additional-work {
        background-color: #F3EBFF;
        color: #8458D0;
    }
    // --- Yellow-Green: Collection in Progress ---
    &--collection {
        background-color: #FFFBEA;
        color: #9C7209;
        border-color: #FFFBEA;
    }
    // --- Yellow: Delivery in Progress / underrun /in service---
    &--delivery {
        background-color: #FFFBEA;
        color: #9C7209;
        border-color: #FFFBEA;
    }
    // --- Cream/Light Yellow: Awaiting Approval ---
    &--awaiting {
        background-color: #FFFBEA;
        color: #9C7209;
        border-color: #FFFBEA;
    }
    // --- Warm Cream: Booking Confirmed ---
    &--confirmed {
        background-color: #FFFBEA;
        color: #9C7209;
        border-color: #FFFBEA;
    }
    // --- Teal blue: Garage Job Completed/ active / returned
    &--garage-completed {
        background-color: #F0F6FC;
        color: #1976D2;
        border-color: #F0F6FC;
    }
}

/*.k-card {
    border-radius: 8px;
}*/

/*******
    From old css file 
    ********/

.field-icon {
    background: white;
    border: 1px solid @color-border-base;
    color: @color-text-primary;
    padding: 0 @space-2;
    height: 40px;
    border-radius: 8px;
    transition: 0.5s ease all;

    @media(max-width:@screen-sm) {
        padding: @space-2;
        height: 35px;

        .k-svg-icon {
            width: 14px;
            height: 14px;
        }
    }

    &.k-text-none {
        .k-button-text {
            display: none;
        }
    }

    &:hover {
        border: 1px solid @color-border-base;
        color: @color-text-primary;
    }

    &.bg-admin-blue {
        border-color: @color-primary;
        color: @color-primary;

        &:hover {
            background: #ddd;
            border-color: @color-primary;
        }
    }
}

.service-title {
    a {
        color: @color-text-primary;

        &:hover {
            color: @color-primary;

            i {
                display: inline-block;
            }
        }
    }

    i {
        display: none;
        padding-left: 5px;
    }
}

.language-switcher {
    background: transparent !important;
    color: @color-text-primary !important;
    border: 0px;
    width: auto;
    margin-right: 5px;

    &:focus-within {
        box-shadow: none;
    }
}

.top-row {
    height: 4.5rem !important;
    display: flex;
    align-items: center;
    z-index: 4 !important;
    background: #fff !important;
    text-transform: capitalize;
    border-bottom: 1px solid @color-border-base;
}

.login-bg {
    background: #FAFAF9 !important;

    @media (max-width: @screen-xs-max) {
        background: #fff !important; // clean white bg on smallest screens
    }
}

.login-hero img {
    width: 90%;
}

.login-form {
    padding: 60px 30px;
    background: #fff;
    box-shadow: 0px 4px 4px rgba(51, 51, 51, 0.04), 0px 4px 16px rgba(51, 51, 51, 0.08);
    height: calc(100vh - 96px);
    overflow-y: scroll;
    display: flex;
    align-items: center;
    flex-direction: column;

    @media (max-width: @screen-lg-max) {
        padding: 40px 24px; // reduce side padding on smaller desktops
    }

    @media (max-width: @screen-md-max) {
        padding: 32px 20px;
        overflow: visible;
    }

    @media (max-width: @screen-xs-max) {
        padding: 24px 12px;
        box-shadow: none;
    }

    h6 {
        font-size: 18px;
        font-weight: 400;

        @media (max-width: @screen-sm-max) {
            font-size: 14px;
        }
    }

    h1, h2 {
        font-weight: 500 !important;
        font-size: 24px !important;
        width: 100%;

        @media (max-width: @screen-sm-max) {
            font-size: 20px !important; // slightly smaller heading on phones
        }

        @media (max-width: @screen-xs-max) {
            font-size: 18px !important;
        }
    }

    .form-control {
        border-color: @color-border-base;
        height: 35px;
        font-size: 14px;
        border-radius: 0;
    }

    .input-group-text {
        border-radius: 0;
    }

    label {
        font-size: 14px;
        margin-bottom: 5px;
    }
}

// Damage Report timeline popup — dedicated window, decoupled from .timeline-pop so it can be
// aligned independently. True-centered on BOTH axes via transform: the percentages recompute as
// the element resizes, so it stays centered even after the async timeline loads and the window
// grows (Telerik's built-in auto-center only positions once, at open time, and drifts after
// growth). !important overrides Telerik's inline top/left. Window height is bounded by the
// component's MaxHeight + the inner list's own scroll, so it never exceeds the viewport.
.damage-timeline-window {
    border-radius: 6px;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;

    .k-window-titlebar {
        border-radius: 6px 6px 0 0;
    }
    // Scroll cap on the content area (not the inner list): the window grows to fit the timeline
    // entries and only scrolls once the list would exceed the viewport — no premature scrollbar
    // while there is still room to grow. Bounded so the transform-centered window stays on-screen.
    .k-window-content {
        max-height: calc(85vh - 3.5rem); // window MaxHeight (85vh) minus the titlebar → no clip
        overflow-y: auto;
    }

    h5 {
        font-size: 16px;
        margin: 0;
    }
}

// RO-9762. Client-conflict decision dialog (Fleet bulk import) — same defect and same fix as
// .damage-timeline-window above: the window has no height cap, so a page's worth of conflict rows
// (grid + counts + filters + apply-to-all + pager + footer) can grow taller than the viewport.
// Telerik centers on open, but a window taller than the screen overflows both edges — the title
// bar and close button end up above y=0 with nothing to scroll them into view. True-centered on
// both axes via transform (recomputes as the grid loads and the window grows — Telerik's own
// auto-center only positions once, at open time) + a bounded MaxHeight on the component
// (Width/MaxWidth/MaxHeight set on <TelerikWindow> in ClientConflictDecisionDialog.razor) with the
// actual scroll cap living here, on the content area, not the window itself.
// RO-9762 follow-up round 2: the 6px border-radius override (window + titlebar) that used to live
// here is removed — it contradicted Fleet's own global .k-window default of 8px (:4054-4065
// above) and this dialog now simply inherits that, matching every other Fleet pop-up. Care's
// parity CSS mirrors 8px, not this one-off 6px.
.client-conflict-dialog {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;

    // Scroll cap on the content area (not the window): the window grows to fit the filter row,
    // grid and pager, and only scrolls once that content would exceed the viewport — the title
    // bar and footer (Cancel/Save decisions) stay pinned and visible throughout.
    .k-window-content {
        max-height: calc(85vh - 3.5rem); // window MaxHeight (85vh) minus the titlebar → no clip
        overflow-y: auto;
    }
}

.add-garage-center-pop,
.add-garage-workbay-pop {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;

    .k-window-content {
        max-height: calc(85vh - 3.5rem);
        overflow-y: auto;
    }
}

.timeline {
    position: relative;
    margin: 20px 0;
    padding-left: 10px;

    &::before {
        content: '';
        position: absolute;
        left: 12px;
        top: 0;
        bottom: 0;
        width: 1px;
        background: #e0e0e0;
        height: 99%;
    }

    .timeline-item {
        position: relative;
        margin-bottom: 30px;

        &:last-child {
            margin-bottom: 0;
        }

        .timeline-icon {
            position: absolute;
            left: -10px;
            top: 0;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #fff;
            border: 1px solid @color-primary-bg-hover;
            background: @color-primary-bg-hover;
            display: flex;
            align-items: center;
            justify-content: center;

            i {
                color: @color-primary;
                font-size: 14px;
            }
        }

        &:nth-child(2n+1) {

            .timeline-icon {
                background: #fff;
                border-color: @color-gray-400;

                i {
                    color: @color-gray-400;
                }
            }
        }
    }

    .timeline-content {
        padding-left: 33px;

        i {
            font-size: 12px;
        }
    }
}

.k-switch-on .k-switch-track {
    border-color: @color-primary !important;
    background-color: @color-primary !important;
}

.icon-grey-bg {
    background: @color-gray-50;
    border: 1px solid @color-gray-200;
    border-radius: @radius-full;
    color: @color-gray-500;
    padding: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    line-height: normal;
    min-width: 25px;
    height: 25px;
}
/* 40x40 icon slot for tinted badges (e.g. bg-light-green rounded) holding a 20x20 glyph. */
.nd-icon-40 {
    width: 40px;
    height: 40px;
}
/*********Skelton image upload********/
.material-symbols-outlined {
    font-size: 12px;
}
/***DAMAGE**/
/*********Capture image SKELTON*****************/
.car-wrapper {
    position: relative;
    height: 500px;
    /* max-width: 100%;*/
    margin: 0 auto;
}

.car-bg {
    width: 100%;
    height: 500px;
    display: block;
    border-radius: 8px;
    object-fit: contain;

    @media(max-width:@screen-sm-max) {
        height: 400px;
    }
}

.car-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 500px;
    pointer-events: none;

    @media(max-width:@screen-sm-max) {
        height: 400px;
    }
}

.car-part {
    fill: rgba(6, 126, 94, 0.3);
    opacity: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    pointer-events: all;

    &.active {
        opacity: 1;
        fill: rgb(6, 126, 94);
    }

    &:hover {
        opacity: 0.8;
        fill: rgb(6, 126, 94);
    }
}

.hidden-file-input {
    display: none;
}

// ============================================================
//   PDF Viewer & File Upload (Documents page)
// ============================================================

.pdf-viewer-frame {
    width: 100%;
    height: 100%;
    border: none;
}

// ── Documents Folder List Grid ──
.documents-list-grid {
    border-radius: @radius-lg;
}

.documents-list-columns {
    grid-template-columns: 3fr 1.5fr 1.5fr 1fr !important;
}

@media (max-width: 575.98px) {
    .documents-list-columns {
        grid-template-columns: 1fr auto !important;
    }
}

/******Select file selection****/
.select-file-section {
    border-radius: 8px;
    border: 1px dashed @color-gray-400;
    background: @color-white;

    .select-header {
        background: @color-gray-100;
        border-radius: 8px 8px 0 0;
        padding: 15px;
        border-bottom: 1px dashed @color-gray-400;
        border-top: 1px dashed @color-gray-400;
    }

    .select-body {
        padding: 15px;
        text-align: center;
    }

    .btn-select .k-dropzone {
        display: block;
        text-align: center;
        background: @color-white;
    }
}

.section-upload-loading {
    position: absolute;
    top: 0;
    z-index: 9;
    height: 100%;
    margin: 0 auto;
    right: auto;
    left: 0;
    width: 100%;
    background: white;
    padding-top: 40px;
    border-radius: 0 0 8px 8px;

    .line-loading {
        min-height: auto !important;
    }
}

.btn-select {
    border: 0px;

    .k-dropzone {
        padding: 0;
        display: inline-block;
    }

    .k-dropzone-hint {
        display: none;
    }

    .k-button {
        padding: 7px 15px;
        border: 1px solid @color-gray-300;
        color: @color-text-primary !important;
        background: @color-white !important;
        border-radius: 6px;
        margin-bottom: 20px;
    }

    .k-upload-files {
        .k-upload-action {
            padding: 0px;
            color: @color-text-primary !important;
        }
    }

    .k-file-validation-message {
        color: red;
        font-style: italic;
        font-size: 11px !important;
    }
}

.attach-button {
    border: 0px;

    .k-dropzone {
        padding: 0;
        display: inline-block;
    }

    .k-dropzone-hint {
        display: none;
    }

    .k-button {
        padding: 7px 15px;
        border: 1px solid @color-gray-300;
        color: @color-text-primary !important;
        background: @color-white !important;
        border-radius: 6px;
        margin-bottom: 0px;
    }

    .k-upload-files {
        .k-upload-action {
            padding: 0px;
            color: @color-text-primary !important;
        }
    }

    .k-file-validation-message {
        color: red;
        font-style: italic;
        font-size: 11px !important;
    }
}

span.telerik-blazor.k-button-icon.k-icon.k-svg-icon.k-svg-i-caret-alt-down:after {
    font-family: 'Material Symbols Outlined';
    font-size: 16px;
}
/******Footer********/
footer.footer_section {
    background: #fff;
    padding: 10px 0px;
    width: 100%;
    bottom: 0px;
    border-top: 1px solid @color-border-base;
    z-index: 1;

    @media (max-width: @screen-sm-max) {
        font-size: 10px;
    }

    li a {
        color: @color-text-primary;

        @media (max-width: @screen-sm-max) {
            font-size: 10px;
        }
    }
}
/****Client onboarding from Ronya
    ****************/

.custom-stepper {
    overflow: auto;

    &.mobile-stepper {
        @media(max-width: @screen-md) {
            .k-step {
                width: 30%!important;
                min-width: 20% !important;
            }
        }
    }

}

.garage-wizard-stepper {
    overflow-x: auto;
    padding-bottom: 4px;

    .k-stepper {
        min-width: max-content;
    }

    .k-step-list {
        flex-wrap: nowrap;
    }

    .k-step {
        flex: 0 0 auto;
        min-width: 132px;
    }

    .k-step-link {
        flex-direction: column;
    }

    .garage-wizard-step-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: #fff;
        border: 1px solid #dfe3e8;
        color: @color-text-primary;
    }

    .k-step-current .garage-wizard-step-icon {
        background: @color-success-bg;
        border-color: @color-success;
        color: @color-success-dark;
    }

    .k-step-done .garage-wizard-step-icon {
        background: @color-success;
        border-color: @color-success;
        color: #fff;

        i, .material-symbols-outlined {
            display: none;
        }

        &::after {
            font-family: 'Material Symbols Outlined';
            font-size: 20px;
            content: 'check';
        }
    }

    .k-progressbar {
        background: none;
        border-top: 2px dashed #dfe3e8;
        border-radius: 0;

        .k-progressbar-value {
            background: none;
            border-top: 2px solid @color-success;
        }
    }

    .garage-wizard-step-label {
        display: block;
        margin-block-start: 4px;
        font-size: 11px;
        white-space: nowrap;
    }

    .k-step-disabled {
        opacity: .45;
        cursor: default;
    }
}

.your-fleet {
    min-height: calc(100vh - 97px);

    @media(max-width:@screen-lg) {
        min-height: auto;
        margin-bottom: 3px;
        padding: 15px 0px;
    }
}

.file-border {
    border: 1px dashed #ddd;
    border-radius: 4px;
    padding: 4px;
}

.k-tabstrip-items-wrapper {

    ul.k-tabstrip-items {

        li.k-tabstrip-item {

            &.k-active {
                border-block-end-color: @color-primary !important;
                border-width: 0 0 2px;
            }
        }
    }
}

.mw-fit {
    max-width: fit-content;
}

// ── LR checklist: equal-width paired controls ──────────────────────────────────────────────────────────
//
// One variable, because the answer pill and the answer toggle have the SAME requirement even though they are
// different controls: fit the longest of Yes/No/Ja/Nein plus that control's own padding. The binding string is
// GERMAN "Nein" in both cases, so the two floors coincide at 60px — recorded as a variable rather than typed
// twice so a re-derivation cannot update one and miss the other.
//
// ⚠ They are separate SELECTORS on purpose. The pill is 10px text with a ~20px icon block; the toggle is 12px
// text with no icon. If either's font or padding changes, that control's floor must be re-derived and the two
// may then need to diverge — at which point split the variable rather than compromising on one number.
@lr-answer-min-width: 60px;

// LR checklist answer pills — equal-width Yes/No pair.
//
// The only reason this exists as CSS: there is NO min-width utility at this granularity. Bootstrap ships
// mw-100 and min-vw-100 and nothing between, and the repo has none. The centring that goes with it IS a
// utility (justify-content-center), so that stays in the markup and this carries the one declaration that
// cannot.
//
// ⚠ min-width, NOT width. The value variant ("Yes · 2 pcs.", ~87px) must still expand past this floor; a fixed
// width would clip it. The floor only equalises the plain Yes/No pair.
//
// 60px is sized for the longest of that pair in EITHER language, which is GERMAN and inverts the English
// relationship: "Nein" (~56.5px incl. icon and padding) is longer than "No" (~48.5px), where "Ja" (~46px) is
// shorter than "Yes" (~53px). Sizing to English alone would leave German unequal in the opposite direction.
//
// Scoped to this pill deliberately — .nd-status-pill itself is shared by the LR list's status and excess
// badges, where the widths are data-driven and must NOT be equalised.
.lr-answer-pill {
    min-width: @lr-answer-min-width;
}

// The EDIT-mode counterpart: the two halves of the Yes/No toggle. Same defect the pill had, and worse in
// German — at px-3 the halves measure Yes ~54px / No ~49px but Ja ~46px / Nein ~58px, so English differs by
// 5px and German by 12px with the relationship inverted. The floor makes all four render at 60px.
//
// ⚠ Scoped to this class, never to .k-button or the Telerik button-group classes — those are shared by every
// button group in the product, including EditServices and EditModuleConfiguration.
.lr-answer-toggle-half {
    min-width: @lr-answer-min-width;
}

// The stepper's − and + buttons. A separate number because the requirement is different: these hold a single
// glyph, not a word, and the asymmetry is that "+" is ~2.5px wider than "-" at the same padding. 26px covers
// the wider one, so both render equal. Deliberately NOT @lr-answer-min-width — 60px on a glyph button would
// be absurd, and the two numbers must not be conflated.
//
// Keeps the group's arithmetic sound: 2 × 26px of buttons inside the 100px container leaves ~48px for the
// value cell, still above its ~45px floor.
.lr-stepper-btn {
    min-width: 26px;
}

.k-textbox, .k-numerictextbox, .k-dropdownlist {
    &.k-disabled {
        background: @color-gray-200;
    }
}
/******
    Telerik upload
    ************/

.telerik-file-select-input,
.telerik-file-select-input .k-upload-button k-button,
.telerik-file-select-input .k-dropzone,
.telerik-file-select-input .k-upload-button-wrap {
    width: 100%;
    height: 100%;
    background: white;
}

.telerik-file-select-input {

    .k-upload-button-wrap {
        z-index: 1;
        opacity: 0;
    }

    .k-upload-button.k-button {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
    }

    .k-dropzone {
        z-index: inherit;
    }

    .k-button-text {
        display: none;
    }

    .k-file-name {
        font-size: @font-size-base;
    }

    .k-file-single {
        align-items: start;

        span {
            position: relative;
        }
    }
}

/*********
    import vehicle
    *************/
.import {
    border-radius: 4px;
    border: 1px solid @color-gray-100;
    padding: 10px;
    cursor: pointer;

    .import-active-icon {
        display: none;
    }
    /*.icon-grey-bg {
        padding: 8px;
    }*/

    &.import-active {
        border-color: @color-primary;
        /* background: @color-primary-bg-hover;
*/
        .icon-grey-bg {
            border: 1px solid @color-primary;
            color: @color-primary;
            background: white;
        }

        .import-active-icon {
            display: block;
            color: @color-primary;
        }
    }
}

.time.calendar-active {
    &:hover {
        background: #2c2c2c !important;
        color: @color-white !important;
    }
}
/******
    TElerik calendar
    ***********/
.k-calendar .k-calendar-td.k-selected:hover .k-link,
.k-calendar .k-calendar-td.k-selected .k-link {
    background-color: @color-primary !important;
}

.k-calendar .k-calendar-view .k-today {
    color: @color-primary !important;
}
/*******Client time line*************/
.clientTimeline {
    position: relative;
    margin: 20px 0;
    padding-left: 10px;
    max-height: max-content;
    overflow: auto;
    height: calc(100dvh - 25rem);

    .timeline-item {
        position: relative;
        padding-bottom: 30px;

        &::before {
            content: '';
            position: absolute;
            left: 2px;
            top: 20px;
            bottom: -10px;
            width: .1rem;
            background: @color-gray-200;
            height: 100%;
        }

        &.completed {
            .timeline-icon {
                border-color: @color-primary;
            }

            &:before {
                content: '';
                background: @color-primary;
            }
        }

        &.last-item {
            padding-bottom: 0;

            &:before {
                display: none;
            }
        }

        .timeline-icon {
            position: absolute;
            left: -8px;
            top: 0;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #fff;
            border: 1px solid @color-gray-200;
            display: flex;
            align-items: center;
            justify-content: center;

            i {
                font-size: 12px;
            }
        }
        /* .timeline-icon.completed {
            color: @primary-green;
        }*/
    }

    .timeline-content {
        padding-left: 25px;
    }
}
/*********** 
    match making 
    **********/
.border-green {
    border-color: @color-primary;
}

.draggable-item {
    padding: 5px;
    text-align: center;
    border: 1px solid #ccc;
    cursor: grab;
    background: #fff;
    border-radius: 2px;
    transition: box-shadow .15s;
}

    .draggable-item[draggable="false"] {
        background: #fff !important;
        cursor: not-allowed;
        color: #ccc;
    }

.drop-box {
    padding: 5px;
    margin-bottom: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    /*min-height: 70px;*/
    height: 100%;
    border-width: 2px;
    border-style: dashed !important;
    transition: background-color .2s, border-color .2s, transform .15s;

    .hint {
        font-size: .75rem;
        color: #666;
    }
}

.pac-container {
    z-index: 999999 !important;
}
/******
    horizontal scroll
    ***********/
.sroll-horizontal-service {
    @media(max-width:@screen-lg) {
        min-width: 800px;
        display: inline-block;
    }
}

.notification-badge {
    position: relative;
    bottom: -9px;
    overflow: visible;
    z-index: 1;
}
/*****Telerik Notification*****/
.demo-notification {

    .k-notification-wrap {
        font-size: 16px !important;
        font-weight: 500 !important;
    }

    .k-notification-wrap > .k-i-close {
        margin-right: 0;
        margin-left: 4px;
    }

    .k-notification-success {
        border-color: #fff !important;
        border-radius: 0px !important;
        border-bottom: 3px solid #07c597 !important;
        font-size: 15px;
        font-weight: 500;
    }

    .k-notification-error {
        border-color: #fff !important;
        border-radius: 0px !important;
        border-bottom: 3px solid red !important;
        font-size: 15px;
        font-weight: 500;
    }

    .k-notification-wrap > .k-i-close {
        margin-right: 0 !important;
        margin-left: 4px;
    }

}

// ============================================================
//   Login Split Layout — Fleet 3.0 New Design
// ============================================================

@login-left-bg-start: #0a3d2e;
@login-left-bg-mid: #0f5c42;
@login-left-bg-end: #1a7a58;
@login-accent-color: #07c597;
@login-brand-color: #03a57f;

/****** Phone field
    **********/
.login-phone-dropdown {

    .k-dropdownlist {
        border-right: 0px;
        border-radius: 8px 0 0 8px;
        border-width: 1px 0px 1px 1px !important;
    }

}
// --- Full-page split container ---
.login-split-layout {
    display: flex;
    min-height: 100vh;
    overflow: hidden;
    font-family: @font-family-base;
}

// ---- LEFT: marketing panel ----
.login-panel-left {
    flex: 0 0 48%;
    max-width: 48%;
    background: linear-gradient(132deg, @login-left-bg-start 4%, @login-left-bg-mid 46%, @login-left-bg-end 96%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 52px 52px 36px;
    position: relative;
    overflow: hidden;

    @media (max-width: @screen-md-max) {
        display: none;
    }
}

.lpl-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 800px;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
}

.lpl-heading {
    font-size: 34px;
    font-weight: 600;
    color: @color-white;
    line-height: 1.35;
    margin-bottom: 16px;

    span {
        color: @login-accent-color;
    }
    // max-width: 560px;
}

.lpl-accent {
    color: @login-accent-color;
}

.lpl-subtitle {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0;
    max-width: 540px;
}

.lpl-illustration {
    /*    flex: 1;*/
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 32px;
    padding-bottom: 16px;
}

.lpl-mockup {
    position: relative;
    width: 100%;
    // max-width: 440px;

    &__card {
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 16px;
        padding: 10px;
        backdrop-filter: blur(8px);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
        overflow: hidden;
        position: relative;
        z-index: 2;
        margin: 40px 20px;
    }

    &__img {
        width: 100%;
        /*height: auto;
        border-radius: 10px;
        display: block;*/
    }
}

.lpl-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    padding-top: 16px;

    a {
        color: rgba(255, 255, 255, 0.5);
        text-decoration: underline;

        &:hover {
            color: @color-white;
            text-decoration: underline;
        }
    }

    &__sep {
        opacity: 0.45;
    }
}

// ---- RIGHT: auth panel ----
.login-panel-right {
    flex: 0 0 52%;
    max-width: 52%;
    background: #EDEFF3;
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    @media (max-width: @screen-md-max) {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.lpr-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 25px;
    flex-shrink: 0;

    img {
        height: 30px;
        // width: auto;
    }

    @media (max-width: @screen-sm-max) {
        padding: 20px 24px;
    }
}

.lpr-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.lpr-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 90px 48px;
    overflow-y: auto;

    @media (max-width: @screen-sm-max) {
        padding: 20px 24px 40px;
        align-items: flex-start;
    }
}

/*.lpr-form-wrap {
    width: 100%;
    padding: 0 50px;
    height: 100%;
}*/

.lpr-welcome {
    margin-bottom: 20px;
    margin-top: 90px;

    &__title {
        font-size: 32px;
        font-weight: 600;
        margin-bottom: 6px;

        span {
            color: @color-primary;
        }
    }

    &__brand {
        color: @color-primary;
    }

    &__sub {
        font-size: 14px;
        color: @color-text-muted;
        margin: 0;
    }
}

.lpr-form-card {
    border-radius: 16px;
    padding: 0px 70px;
    border: 1px solid @color-border-stat-card;
    height: 100%;
    display: flex;
    flex-direction: column;
    /*   justify-content: center;*/
    width: 100%;
    background: @color-white url(https://bronyaprod.blob.core.windows.net/static/Images/login-bg.webp) top repeat-x;
    background-size: 100% auto;
    max-width: 800px;
    margin: 0 auto;
    min-height: 600px;
    max-height: 700px;

    @media (max-width: @screen-sm-max) {
        padding: 24px 20px;
        box-shadow: none;
        border: 1px solid @color-border;
    }
}

.lpr-section-label {
    font-size: 16px;
    font-weight: 600;
    color: @color-text-primary;
    margin-bottom: 35px;
    margin-top: 35px;
}

.lpr-email-display {
    font-size: 14px;
    color: @color-text-secondary;
    padding: 8px 0;
}

.lpr-otp-btn {
    border: 1px solid @color-gray-300;
    color: @color-text-primary;
    background: @color-white;
    font-size: 14px;
    border-radius: @radius-md;
    padding: 9px 16px;
    font-weight: 500;
    line-height: 1.5;

    &:hover {
        background: @color-gray-50;
        border-color: @color-gray-300;
        color: @color-text-primary;
    }

    &:focus {
        box-shadow: @shadow-focus-primary;
        outline: none;
    }
}

.lpr-disclaimer {
    text-align: center;
    color: @color-gray-500;

    small {
        font-size: 11px;
        line-height: 1.6;
        display: block;
    }

    a {
        color: @color-primary;

        &:hover {
            color: @color-primary;
        }
    }
}

// ============================================================
//   FUEL CARD REPORT (/fuel-card-analytics)
//   Scoped under `.fcr` to avoid clashes with other modules.
//   Modal-only classes (rendered at body level by Telerik) use
//   the `fcr-*` prefix instead of nesting.
// ============================================================
.mob-chart {
    margin-left: -15%;
}

.fcr {
    color: @color-text-primary;
    // ── Title row: logo + title block + year filter ──
    .fcr-title-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 24px;
    }

    .fcr-title-block {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .fcr-logo-icon {
        width: 38px;
        height: 38px;
        background: #1a2744;
        border-radius: @radius-md;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: @color-white;
        flex-shrink: 0;
    }

    .fcr-title-text {
        h1 {
            font-size: 22px;
            color: #1a2744;
            margin: 0;
            letter-spacing: -0.3px;
            font-weight: @font-weight-bold;
        }

        p {
            color: @color-text-muted;
            font-size: @font-size-base;
            margin: 2px 0 0;
        }
    }
    // ── Section label (uppercase + trailing line) ──
    .section-label {
        font-size: 10.5px;
        font-weight: @font-weight-semibold;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: @color-text-muted;
        margin: 0 0 14px;
        display: flex;
        align-items: center;
        gap: 10px;

        &::after {
            content: '';
            flex: 1;
            height: 1px;
            background: @color-border;
        }
    }
    // ── KPI grid (5 cards by default; 6 cards when including the
    //     Selection Criteria card via .kpi-grid-6) ──
    .kpi-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
        margin-bottom: 28px;

        @media (max-width: 1200px) {
            grid-template-columns: repeat(3, 1fr);
        }

        @media (max-width: 768px) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media (max-width: 480px) {
            grid-template-columns: 1fr;
        }
        // 6-column variant — Selection Criteria + 5 KPIs on a single line.
        // Cards become smaller, which is the intended trade-off.
        &.kpi-grid-6 {
            grid-template-columns: repeat(6, 1fr);

            @media (max-width: 1400px) {
                grid-template-columns: repeat(3, 1fr);
            }

            @media (max-width: 768px) {
                grid-template-columns: repeat(2, 1fr);
            }

            @media (max-width: 480px) {
                grid-template-columns: 1fr;
            }
        }
    }
    // Selection Criteria card — embeds two dropdowns; reduce padding to
    // accommodate inputs without breaking the single-line layout.
    .kpi-card-selection {
        padding: 14px 14px 14px 14px;

        .kpi-selection-body {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-top: 8px;
            // Telerik inputs inside the card — full width, compact height.
            .k-input,
            .k-picker {
                width: 100%;
            }
        }
    }

    .kpi-card {
        background: @color-white;
        border: 1px solid @color-border;
        border-radius: @radius-xl;
        padding: 18px 16px;
        position: relative;
        overflow: hidden;
        box-shadow: @shadow-card;
        transition: box-shadow @transition-base, transform @transition-base;

        &:hover {
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            transform: translateY(-1px);
        }

        &.alert-card {
            border-color: #fca5a5;
            border-left: 3px solid @color-danger;
        }
    }

    .kpi-icon {
        position: absolute;
        top: 14px;
        right: 13px;
        width: 30px;
        height: 30px;
        border-radius: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        background: @color-gray-50;

        &.kpi-icon-blue {
            background: @pastel-blue;
            color: @color-info;
        }

        &.kpi-icon-orange {
            background: @pastel-orange;
            color: @color-warning;
        }

        &.kpi-icon-green {
            background: @color-success-bg;
            color: @color-success-dark;
        }

        &.kpi-icon-red {
            background: @color-danger-bg;
            color: @color-danger;
        }
    }

    .kpi-label {
        font-size: @font-size-sm;
        font-weight: @font-weight-medium;
        color: @color-text-muted;
        margin-bottom: 6px;
    }

    .kpi-value {
        font-size: 26px;
        line-height: 1;
        color: #1a2744;
        font-weight: @font-weight-bold;

        &.kpi-alert {
            color: @color-danger;
        }
    }

    .kpi-sub {
        font-size: @font-size-sm;
        color: @color-text-muted;
        margin-top: 4px;
    }
    // ── Charts grid (donut narrow, monthly wide) ──
    .charts-grid {
        display: grid;
        grid-template-columns: 320px 1fr;
        gap: 16px;
        margin-bottom: 28px;

        @media (max-width: 992px) {
            grid-template-columns: 1fr;
        }
    }

    .chart-card {
        background: @color-white;
        border: 1px solid @color-border;
        border-radius: @radius-xl;
        padding: 22px;
        box-shadow: @shadow-card;

        h3 {
            font-size: 14px;
            font-weight: @font-weight-semibold;
            color: #1a2744;
            margin: 0 0 3px;
        }
    }

    .chart-sub {
        font-size: 11.5px;
        color: @color-text-muted;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 18px;
        flex-wrap: wrap;

        .legend-swatch {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 2px;
            margin-right: 5px;
            vertical-align: middle;
        }
    }

    .chart-wrap {
        position: relative;
        height: 230px;
        width: 100%;
        width: max-content;
        margin: 0 auto;

        .k-chart-surface {
            width: 100%;
        }
    }

    .donut-center {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        z-index: 1;
        text-align: center;

        .dc-val {
            font-size: 18px;
            line-height: 1;
            color: #1a2744;
            font-weight: @font-weight-bold;
        }

        .dc-label {
            font-size: 10px;
            color: @color-text-muted;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 2px;
        }
    }

    .legend {
        margin-top: 12px;
        display: flex;
        flex-wrap: wrap;
        gap: 5px 12px;
    }

    .legend-item {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: @font-size-sm;
        color: @color-text-muted;
    }

    .legend-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .chart-footer {
        text-align: center;
        font-size: @font-size-sm;
        color: @color-text-muted;
        margin-top: 10px;

        strong {
            color: #1a2744;
        }
    }
    // ── Driver Overview table ──
    .driver-table-wrap {
        background: @color-white;
        border: 1px solid @color-border;
        border-radius: @radius-xl;
        overflow: auto;
        box-shadow: @shadow-card;
        margin-bottom: 28px;
    }

    .driver-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 12.5px;

        thead th {
            background: @color-gray-50;
            padding: 11px 14px;
            text-align: left;
            font-size: 10px;
            font-weight: @font-weight-semibold;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: @color-text-muted;
            border-bottom: 1px solid @color-border;
            white-space: nowrap;
        }

        tbody td {
            padding: 11px 14px;
            border-bottom: 1px solid @color-border;
            vertical-align: middle;
            color: @color-text-primary;
        }

        tbody tr:last-child td {
            border-bottom: none;
        }

        tbody tr:hover td {
            background: @color-gray-50;
        }
    }

    .driver-name {
        font-weight: @font-weight-semibold;
        font-size: 13px;
        color: #1a2744;
    }

    .driver-unknown {
        color: @color-text-muted;
        font-style: italic;
        font-weight: @font-weight-normal;
        font-size: @font-size-base;
    }

    .plate-badge {
        display: inline-block;
        background: @pastel-blue;
        border: 1px solid #bfdbfe;
        border-radius: 4px;
        padding: 1px 7px;
        font-size: 10.5px;
        font-weight: @font-weight-bold;
        letter-spacing: 0.5px;
        color: @color-info;
        font-family: monospace;
        white-space: nowrap;
        margin: 1px 2px;
    }

    .tag {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        padding: 2px 7px;
        border-radius: @radius-full;
        font-size: 10px;
        font-weight: @font-weight-semibold;
        white-space: nowrap;

        &.tag-ev {
            background: @color-success-bg;
            color: @color-success-dark;
        }

        &.tag-fuel {
            background: @color-warning-bg;
            color: #92400e;
        }

        &.tag-mixed {
            background: #ede9fe;
            color: #5b21b6;
        }
    }

    .num-cell {
        text-align: right;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        color: #1a2744;
    }

    .total-cell {
        text-align: left;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        color: #1a2744;
        font-weight: @font-weight-bold;
        font-size: 13px;
    }

    .muted-dash {
        text-align: left;
        color: @color-gray-300;
    }
    // Pill buttons ────────────────────────────────────────────
    .txn-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        padding: 4px 10px;
        background: @pastel-blue;
        border: 1px solid #bfdbfe;
        border-radius: @radius-full;
        font-size: @font-size-base;
        font-weight: @font-weight-bold;
        color: @color-info;
        cursor: pointer;
        transition: all 0.18s;
        text-decoration: none;

        &:hover {
            background: @color-info;
            border-color: @color-info;
            color: @color-white;
            transform: scale(1.06);
        }

        &::after {
            content: '↗';
            margin-left: 4px;
            font-size: 9px;
            opacity: 0.6;
        }
    }

    .anomaly-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        padding: 4px 10px;
        background: #fff0f0;
        border: 1px solid #fca5a5;
        border-radius: @radius-full;
        font-size: @font-size-base;
        font-weight: @font-weight-bold;
        color: @color-danger;
        cursor: pointer;
        transition: all 0.18s;

        &:hover {
            background: @color-danger;
            border-color: @color-danger;
            color: @color-white;
            transform: scale(1.06);
        }

        &::after {
            content: '↗';
            margin-left: 4px;
            font-size: 9px;
            opacity: 0.6;
        }
    }

    .anomaly-none {
        color: #15803d;
        font-size: @font-size-base;
        font-weight: @font-weight-medium;
    }
    // ── Field Calculation Reference (collapsible panel) ──
    .formula-section {
        margin-top: 32px;
    }

    .formula-toggle {
        cursor: pointer;
        user-select: none;
    }

    .formula-toggle-icon {
        font-size: @font-size-base;
        color: @color-text-muted;
        transition: transform @transition-base;
        display: inline-block;
        margin-right: 6px;

        &.open {
            transform: rotate(90deg);
        }
    }

    .formula-panel {
        background: @color-white;
        border: 1px solid @color-border;
        border-radius: @radius-xl;
        padding: 24px;
        margin-top: 12px;
        box-shadow: @shadow-card;
    }

    .formula-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        gap: 20px;
    }

    .formula-group {
        h4 {
            font-size: @font-size-sm;
            font-weight: @font-weight-bold;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: #1a2744;
            margin: 0 0 10px;
            padding-bottom: 6px;
            border-bottom: 1px solid @color-border;
        }
    }

    .formula-row {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin-bottom: 10px;
    }

    .formula-field {
        font-size: @font-size-base;
        font-weight: @font-weight-semibold;
        color: #1a2744;
    }

    .formula-expr {
        font-family: monospace;
        font-size: @font-size-sm;
        color: @color-gray-700;
        background: @color-gray-100;
        padding: 4px 8px;
        border-radius: 4px;
        margin-top: 2px;
        line-height: 1.5;
        word-break: break-word;
    }

    .formula-note {
        font-size: 10.5px;
        color: @color-text-muted;
        margin-top: 2px;
        font-style: italic;
    }

    .formula-mapping {
        margin-top: 16px;
        font-size: @font-size-sm;
        color: @color-text-muted;
        border-top: 1px solid @color-border;
        padding-top: 12px;

        strong {
            color: @color-text-secondary;
        }
    }
}

// ============================================================
//   FUEL CARD REPORT — Modal classes (rendered at body level)
//   Prefix `fcr-` (no nesting) since Telerik windows are
//   siblings of <body>, not descendants of `.fcr`.
// ============================================================

.fcr-modal-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: @color-border;
    border-bottom: 1px solid @color-border;
    margin-bottom: 12px;

    @media (max-width: 768px) {
        grid-template-columns: repeat(2, 1fr);
    }
}

.fcr-modal-stat {
    background: @color-gray-50;
    padding: 14px 18px;
}

.fcr-modal-stat-label {
    font-size: 10px;
    color: @color-text-muted;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 4px;
}

.fcr-modal-stat-val {
    font-size: 17px;
    color: #1a2744;
    font-weight: @font-weight-bold;

    span {
        font-size: @font-size-base;
        color: @color-text-muted;
        font-weight: @font-weight-normal;
    }
}

.fcr-modal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: @font-size-base;

    thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: @color-gray-50;
        padding: 10px 16px;
        text-align: left;
        font-size: 10px;
        font-weight: @font-weight-semibold;
        text-transform: uppercase;
        letter-spacing: 1.4px;
        color: @color-text-muted;
        border-bottom: 1px solid @color-border;
        white-space: nowrap;
    }

    tbody td {
        padding: 11px 16px;
        border-bottom: 1px solid @color-border;
        vertical-align: middle;
        color: @color-text-primary;
    }

    tbody tr:last-child td {
        border-bottom: none;
    }

    tbody tr:hover td {
        background: @color-gray-50;
    }

    tbody tr.fcr-tx-row-critical td {
        background: @color-danger-bg;
    }

    .num-cell {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .plate-sm {
        font-size: 10.5px;
        font-weight: @font-weight-bold;
        color: @color-info;
        font-family: monospace;
    }

    .gross-cell {
        text-align: left;
        font-variant-numeric: tabular-nums;
        font-weight: @font-weight-semibold;
        color: #1a2744;
    }
}

.fcr-cat-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;

    &.fcr-cat-dot-fuel {
        background: @color-warning;
    }

    &.fcr-cat-dot-ev {
        background: @color-success;
    }

    &.fcr-cat-dot-wash {
        background: #8b5cf6;
    }
}

.fcr-flag-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: @font-weight-medium;
    white-space: nowrap;
    margin: 1px 2px;

    &.a-mileage,
    &.a-highfill,
    &.a-frequency,
    &.a-foreignfuel {
        color: #92400e;
        background: @color-warning-bg;
    }

    &.a-misfuel {
        color: @color-danger-dark;
        background: @color-danger-bg;
    }
}

.fcr-flag-clean {
    color: #15803d;
    font-weight: @font-weight-semibold;
}

.fcr-severity {
    display: inline-flex;
    align-items: center;
    font-size: @font-size-sm;
    font-weight: @font-weight-semibold;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;

    &.fcr-severity-high {
        color: @color-danger-dark;
        background: @color-danger-bg;
    }

    &.fcr-severity-medium {
        color: @color-warning-dark;
        background: @color-warning-bg;
    }

    &.fcr-severity-low {
        color: @color-text-muted;
        background: @color-gray-100;
    }
}

.fcr-anomaly-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: @font-size-sm;
    font-weight: @font-weight-medium;
    white-space: nowrap;

    &.a-mileage,
    &.a-highfill,
    &.a-frequency,
    &.a-foreignfuel {
        color: #92400e;
        background: @color-warning-bg;
    }

    &.a-misfuel,
    &.a-tankcapacity {
        color: @color-danger-dark;
        background: @color-danger-bg;
    }
}

.fcr-anomaly-row-critical {
    border-left: 3px solid @color-danger;
}

.fcr-modal-footer-line {
    padding: 12px 24px;
    border-top: 1px solid @color-border;
    font-size: @font-size-sm;
    color: @color-text-muted;
    background: @color-gray-50;
    text-align: right;

    strong {
        color: #1a2744;
    }
}

.section-loading {
    background: initial;
}

// ============================================================
//   FUEL CARD REPORT (/fuel-card-analytics)
//   Scoped under `.fcr` to avoid clashes with other modules.
//   Modal-only classes (rendered at body level by Telerik) use
//   the `fcr-*` prefix instead of nesting.
// ============================================================

.fcr {
    color: @color-text-primary;
    // ── Title row: logo + title block + year filter ──
    .fcr-title-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 24px;
    }

    .fcr-title-block {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .fcr-logo-icon {
        width: 38px;
        height: 38px;
        background: #1a2744;
        border-radius: @radius-md;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: @color-white;
        flex-shrink: 0;
    }

    .fcr-title-text {
        h1 {
            font-size: 22px;
            color: #1a2744;
            margin: 0;
            letter-spacing: -0.3px;
            font-weight: @font-weight-bold;
        }

        p {
            color: @color-text-muted;
            font-size: @font-size-base;
            margin: 2px 0 0;
        }
    }
    // ── Section label (uppercase + trailing line) ──
    .section-label {
        font-size: 10.5px;
        font-weight: @font-weight-semibold;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: @color-text-muted;
        margin: 0 0 14px;
        display: flex;
        align-items: center;
        gap: 10px;

        &::after {
            content: '';
            flex: 1;
            height: 1px;
            background: @color-border;
        }
    }
    // ── KPI grid (5 cards by default; 6 cards when including the
    //     Selection Criteria card via .kpi-grid-6) ──
    .kpi-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
        margin-bottom: 28px;

        @media (max-width: 1200px) {
            grid-template-columns: repeat(3, 1fr);
        }

        @media (max-width: 768px) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media (max-width: 480px) {
            grid-template-columns: 1fr;
        }
        // 6-column variant — Selection Criteria + 5 KPIs on a single line.
        // Cards become smaller, which is the intended trade-off.
        &.kpi-grid-6 {
            grid-template-columns: repeat(6, 1fr);

            @media (max-width: 1400px) {
                grid-template-columns: repeat(3, 1fr);
            }

            @media (max-width: 768px) {
                grid-template-columns: repeat(2, 1fr);
            }

            @media (max-width: 480px) {
                grid-template-columns: 1fr;
            }
        }
    }
    // Selection Criteria card — embeds two dropdowns; reduce padding to
    // accommodate inputs without breaking the single-line layout.
    .kpi-card-selection {
        padding: 14px 14px 14px 14px;

        .kpi-selection-body {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-top: 8px;
            // Telerik inputs inside the card — full width, compact height.
            .k-input,
            .k-picker {
                width: 100%;
            }
        }
    }

    .kpi-card {
        background: @color-white;
        border: 1px solid @color-border;
        border-radius: @radius-xl;
        padding: 18px 16px;
        position: relative;
        overflow: hidden;
        box-shadow: @shadow-card;
        transition: box-shadow @transition-base, transform @transition-base;

        &:hover {
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            transform: translateY(-1px);
        }

        &.alert-card {
            border-color: #fca5a5;
            border-left: 3px solid @color-danger;
        }
    }

    .kpi-icon {
        position: absolute;
        top: 14px;
        right: 13px;
        width: 30px;
        height: 30px;
        border-radius: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        background: @color-gray-50;

        &.kpi-icon-blue {
            background: @pastel-blue;
            color: @color-info;
        }

        &.kpi-icon-orange {
            background: @pastel-orange;
            color: @color-warning;
        }

        &.kpi-icon-green {
            background: @color-success-bg;
            color: @color-success-dark;
        }

        &.kpi-icon-red {
            background: @color-danger-bg;
            color: @color-danger;
        }
    }

    .kpi-label {
        font-size: @font-size-sm;
        font-weight: @font-weight-medium;
        color: @color-text-muted;
        margin-bottom: 6px;
    }

    .kpi-value {
        font-size: 26px;
        line-height: 1;
        color: #1a2744;
        font-weight: @font-weight-bold;

        &.kpi-alert {
            color: @color-danger;
        }
    }

    .kpi-sub {
        font-size: @font-size-sm;
        color: @color-text-muted;
        margin-top: 4px;
    }
    // ── Charts grid (donut narrow, monthly wide) ──
    .charts-grid {
        display: grid;
        grid-template-columns: 320px 1fr;
        gap: 16px;
        margin-bottom: 28px;

        @media (max-width: 992px) {
            grid-template-columns: 1fr;
        }
    }

    .chart-card {
        background: @color-white;
        border: 1px solid @color-border;
        border-radius: @radius-xl;
        padding: 22px;
        box-shadow: @shadow-card;

        h3 {
            font-size: 14px;
            font-weight: @font-weight-semibold;
            color: #1a2744;
            margin: 0 0 3px;
        }
    }

    .chart-sub {
        font-size: 11.5px;
        color: @color-text-muted;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 18px;
        flex-wrap: wrap;

        .legend-swatch {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 2px;
            margin-right: 5px;
            vertical-align: middle;
        }
    }

    .chart-wrap {
        position: relative;
        height: 230px;
        width: 100%;

        .k-chart-surface {
            width: 100%;
        }
    }

    .donut-center {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        z-index: 1;
        text-align: center;

        .dc-val {
            font-size: 18px;
            line-height: 1;
            color: #1a2744;
            font-weight: @font-weight-bold;
        }

        .dc-label {
            font-size: 10px;
            color: @color-text-muted;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 2px;
        }
    }

    .legend {
        margin-top: 12px;
        display: flex;
        flex-wrap: wrap;
        gap: 5px 12px;
    }

    .legend-item {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: @font-size-sm;
        color: @color-text-muted;
    }

    .legend-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .chart-footer {
        text-align: center;
        font-size: @font-size-sm;
        color: @color-text-muted;
        margin-top: 10px;

        strong {
            color: #1a2744;
        }
    }
    // ── Driver Overview table ──
    .driver-table-wrap {
        background: @color-white;
        border: 1px solid @color-border;
        border-radius: @radius-xl;
        overflow: auto;
        box-shadow: @shadow-card;
        margin-bottom: 28px;
    }

    .driver-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 12.5px;

        thead th {
            background: @color-gray-50;
            padding: 11px 14px;
            text-align: left;
            font-size: 10px;
            font-weight: @font-weight-semibold;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: @color-text-muted;
            border-bottom: 1px solid @color-border;
            white-space: nowrap;
        }

        tbody td {
            padding: 11px 14px;
            border-bottom: 1px solid @color-border;
            vertical-align: middle;
            color: @color-text-primary;
        }

        tbody tr:last-child td {
            border-bottom: none;
        }

        tbody tr:hover td {
            background: @color-gray-50;
        }
    }

    .driver-name {
        font-weight: @font-weight-semibold;
        font-size: 13px;
        color: #1a2744;
    }

    .driver-unknown {
        color: @color-text-muted;
        font-style: italic;
        font-weight: @font-weight-normal;
        font-size: @font-size-base;
    }

    .plate-badge {
        display: inline-block;
        background: @pastel-blue;
        border: 1px solid #bfdbfe;
        border-radius: 4px;
        padding: 1px 7px;
        font-size: 10.5px;
        font-weight: @font-weight-bold;
        letter-spacing: 0.5px;
        color: @color-info;
        font-family: monospace;
        white-space: nowrap;
        margin: 1px 2px;
    }

    .tag {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        padding: 2px 7px;
        border-radius: @radius-full;
        font-size: 10px;
        font-weight: @font-weight-semibold;
        white-space: nowrap;

        &.tag-ev {
            background: @color-success-bg;
            color: @color-success-dark;
        }

        &.tag-fuel {
            background: @color-warning-bg;
            color: #92400e;
        }

        &.tag-mixed {
            background: #ede9fe;
            color: #5b21b6;
        }
    }

    .num-cell {
        text-align: right;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        color: #1a2744;
    }

    .total-cell {
        text-align: left;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        color: #1a2744;
        font-weight: @font-weight-bold;
        font-size: 13px;
    }

    .muted-dash {
        text-align: left;
        color: @color-gray-300;
    }
    // Pill buttons ────────────────────────────────────────────
    .txn-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        padding: 4px 10px;
        background: @pastel-blue;
        border: 1px solid #bfdbfe;
        border-radius: @radius-full;
        font-size: @font-size-base;
        font-weight: @font-weight-bold;
        color: @color-info;
        cursor: pointer;
        transition: all 0.18s;
        text-decoration: none;

        &:hover {
            background: @color-info;
            border-color: @color-info;
            color: @color-white;
            transform: scale(1.06);
        }

        &::after {
            content: '↗';
            margin-left: 4px;
            font-size: 9px;
            opacity: 0.6;
        }
    }

    .anomaly-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        padding: 4px 10px;
        background: #fff0f0;
        border: 1px solid #fca5a5;
        border-radius: @radius-full;
        font-size: @font-size-base;
        font-weight: @font-weight-bold;
        color: @color-danger;
        cursor: pointer;
        transition: all 0.18s;

        &:hover {
            background: @color-danger;
            border-color: @color-danger;
            color: @color-white;
            transform: scale(1.06);
        }

        &::after {
            content: '↗';
            margin-left: 4px;
            font-size: 9px;
            opacity: 0.6;
        }
    }

    .anomaly-none {
        color: #15803d;
        font-size: @font-size-base;
        font-weight: @font-weight-medium;
    }
    // ── Field Calculation Reference (collapsible panel) ──
    .formula-section {
        margin-top: 32px;
    }

    .formula-toggle {
        cursor: pointer;
        user-select: none;
    }

    .formula-toggle-icon {
        font-size: @font-size-base;
        color: @color-text-muted;
        transition: transform @transition-base;
        display: inline-block;
        margin-right: 6px;

        &.open {
            transform: rotate(90deg);
        }
    }

    .formula-panel {
        background: @color-white;
        border: 1px solid @color-border;
        border-radius: @radius-xl;
        padding: 24px;
        margin-top: 12px;
        box-shadow: @shadow-card;
    }

    .formula-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        gap: 20px;
    }

    .formula-group {
        h4 {
            font-size: @font-size-sm;
            font-weight: @font-weight-bold;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: #1a2744;
            margin: 0 0 10px;
            padding-bottom: 6px;
            border-bottom: 1px solid @color-border;
        }
    }

    .formula-row {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin-bottom: 10px;
    }

    .formula-field {
        font-size: @font-size-base;
        font-weight: @font-weight-semibold;
        color: #1a2744;
    }

    .formula-expr {
        font-family: monospace;
        font-size: @font-size-sm;
        color: @color-gray-700;
        background: @color-gray-100;
        padding: 4px 8px;
        border-radius: 4px;
        margin-top: 2px;
        line-height: 1.5;
        word-break: break-word;
    }

    .formula-note {
        font-size: 10.5px;
        color: @color-text-muted;
        margin-top: 2px;
        font-style: italic;
    }

    .formula-mapping {
        margin-top: 16px;
        font-size: @font-size-sm;
        color: @color-text-muted;
        border-top: 1px solid @color-border;
        padding-top: 12px;

        strong {
            color: @color-text-secondary;
        }
    }
}

// ============================================================
//   FUEL CARD REPORT — Modal classes (rendered at body level)
//   Prefix `fcr-` (no nesting) since Telerik windows are
//   siblings of <body>, not descendants of `.fcr`.
// ============================================================

.fcr-modal-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: @color-border;
    border-bottom: 1px solid @color-border;
    margin-bottom: 12px;

    @media (max-width: 768px) {
        grid-template-columns: repeat(2, 1fr);
    }
}

.fcr-modal-stat {
    background: @color-gray-50;
    padding: 14px 18px;
}

.fcr-modal-stat-label {
    font-size: 10px;
    color: @color-text-muted;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 4px;
}

.fcr-modal-stat-val {
    font-size: 17px;
    color: #1a2744;
    font-weight: @font-weight-bold;

    span {
        font-size: @font-size-base;
        color: @color-text-muted;
        font-weight: @font-weight-normal;
    }
}

.fcr-modal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: @font-size-base;

    thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: @color-gray-50;
        padding: 10px 16px;
        text-align: left;
        font-size: 10px;
        font-weight: @font-weight-semibold;
        text-transform: uppercase;
        letter-spacing: 1.4px;
        color: @color-text-muted;
        border-bottom: 1px solid @color-border;
        white-space: nowrap;
    }

    tbody td {
        padding: 11px 16px;
        border-bottom: 1px solid @color-border;
        vertical-align: middle;
        color: @color-text-primary;
    }

    tbody tr:last-child td {
        border-bottom: none;
    }

    tbody tr:hover td {
        background: @color-gray-50;
    }

    tbody tr.fcr-tx-row-critical td {
        background: @color-danger-bg;
    }

    .num-cell {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .plate-sm {
        font-size: 10.5px;
        font-weight: @font-weight-bold;
        color: @color-info;
        font-family: monospace;
    }

    .gross-cell {
        text-align: left;
        font-variant-numeric: tabular-nums;
        font-weight: @font-weight-semibold;
        color: #1a2744;
    }
}

.fcr-cat-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;

    &.fcr-cat-dot-fuel {
        background: @color-warning;
    }

    &.fcr-cat-dot-ev {
        background: @color-success;
    }

    &.fcr-cat-dot-wash {
        background: #8b5cf6;
    }
}
/*<!----can be remove------->*/
.fcr-flag-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: @font-weight-medium;
    white-space: nowrap;
    margin: 1px 2px;

    &.a-mileage,
    &.a-highfill,
    &.a-frequency,
    &.a-foreignfuel {
        color: #92400e;
        background: @color-warning-bg;
    }

    &.a-misfuel {
        color: @color-danger-dark;
        background: @color-danger-bg;
    }
}

.fcr-flag-clean {
    color: #15803d;
    font-weight: @font-weight-semibold;
}

.fcr-severity {
    display: inline-flex;
    align-items: center;
    font-size: @font-size-sm;
    font-weight: @font-weight-semibold;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;

    &.fcr-severity-high {
        color: @color-danger-dark;
        background: @color-danger-bg;
    }

    &.fcr-severity-medium {
        color: @color-warning-dark;
        background: @color-warning-bg;
    }

    &.fcr-severity-low {
        color: @color-text-muted;
        background: @color-gray-100;
    }
}

.fcr-anomaly-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: @font-size-sm;
    font-weight: @font-weight-medium;
    white-space: nowrap;

    &.a-mileage,
    &.a-highfill,
    &.a-frequency,
    &.a-foreignfuel {
        color: #92400e;
        background: @color-warning-bg;
    }

    &.a-misfuel,
    &.a-tankcapacity {
        color: @color-danger-dark;
        background: @color-danger-bg;
    }
}

.fcr-anomaly-row-critical {
    border-left: 3px solid @color-danger;
}

.fcr-modal-footer-line {
    padding: 12px 24px;
    border-top: 1px solid @color-border;
    font-size: @font-size-sm;
    color: @color-text-muted;
    background: @color-gray-50;
    text-align: right;

    strong {
        color: #1a2744;
    }
}

.row-custom {
    display: flex;

    @media(max-width:@screen-md-max) {
        border: 1px solid @color-gray-100;
        border-radius: 8px;
        flex-wrap: wrap;
        margin: 5px;
    }

    &.header-row-custom {
        .cell {
            background: #EFF5F4;
            color: #5C7873;
            font-weight: 500;
        }
    }

    &.body-row-custom {
        &:hover {
            background: #EFF5F4;
        }

        &.nd-row-clickable {
            cursor: pointer;
        }
    }

    .cell {
        flex: 1;
        padding: 10px;
        border-bottom: 1px solid @color-gray-100;
        width: 150px; /* fixed — never shrinks */
        min-width: 200px;
        flex-shrink: 0;

        @media(max-width:@screen-md-max) {
            width: 50%;
            min-width: 145px;
            border-bottom: 0px solid #ddd;
        }
    }
    .cell.flex-fill {
        min-width: 270px;

        @media(max-width:@screen-md-max) {
            min-width: 145px;
        }
    }
}
/*component css*/
.image-box {
    border-radius: 8px;
    height: 160px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;

    img {
        object-fit: scale-down;
        height: 100%;
        width: 100%;
        margin: 0 auto;
    }
}

/* Accident-scene side tiles (Side one / Side two): fixed, consistent box for both the empty
   upload tile and the uploaded image, so the two sit close together and the photo can't stretch wide. */
.accident-side .telerik-file-select,
.accident-side .image-box {
    width: 220px;
    height: 160px;
    max-width: 100%;
}

/* Centered loader overlay shown while deleting/uploading a gallery photo */
.image-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    /* keep the small loader gif small (the .image-box img { width/height:100% } rule would otherwise stretch it) */
    .loader-img {
        width: 20px !important;
        height: auto !important;
    }
}

/************Image edit of LR********/

.annotation-editor-window .color-swatches {
    display: inline-flex;
    gap: 6px;
    padding-left: 8px;
    border-left: 1px solid @color-border;
    margin-left: 4px;
}

    .annotation-editor-window .color-swatches .swatch {
        width: 26px;
        height: 26px;
        border-radius: @radius-full;
        border: 2px solid @color-border;
        cursor: pointer;
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
        transition: transform 0.1s, border-color 0.15s;
    }

        .annotation-editor-window .color-swatches .swatch:hover {
            transform: scale(1.1);
        }

        .annotation-editor-window .color-swatches .swatch.active {
            border-color: @color-primary;
            transform: scale(1.15);
        }

.annotation-editor-window .stroke-sizes {
    display: inline-flex;
    gap: 6px;
    padding-left: 8px;
    border-left: 1px solid @color-border;
    margin-left: 4px;
}

    .annotation-editor-window .stroke-sizes .stroke {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border: 1px solid @color-border;
        background: #fff;
        border-radius: 50%;
        cursor: pointer;
    }

        .annotation-editor-window .stroke-sizes .stroke.active {
            border-color: @color-primary;
            /*    background: #f0f7f5;*/
        }

        .annotation-editor-window .stroke-sizes .stroke .stroke-dot {
            display: block;
            background: @color-gray-800;
            border-radius: @radius-full;
        }

.annotation-editor-window .annotate-canvas-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    background: @color-gray-100;
    min-height: 320px;
}

    /* Background lives on the Fabric-created wrapper, NOT on the canvas elements.
               Fabric creates two stacked canvases (lower + upper) inside .canvas-container.
               If we put a background on the canvas elements, the upper-canvas would obscure
               the lower-canvas (where the image + committed strokes are drawn). */
    .annotation-editor-window .annotate-canvas-wrap .canvas-container {
        background: #fff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
        max-width: 100%;
        max-height: 50vh;
    }

    .annotation-editor-window .annotate-canvas-wrap canvas {
        max-width: 100%;
        max-height: 50vh;
        background: transparent;
        /* Stop the browser from interpreting finger drags on the canvas as page
            scroll / pinch-zoom. Without this, dragging near the canvas edges on
            mobile can scroll the modal instead of drawing. Fabric v6 sets this
            on the upper-canvas itself, but we reinforce on both layers so the
            behaviour is consistent across all mobile browsers. */
        touch-action: none;
    }

    .annotation-editor-window .annotate-canvas-wrap .canvas-container {
        touch-action: none;
    }

.annotation-editor-window .annotate-thumbs {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    overflow-x: auto;
    border-top: 1px solid @color-border;
    background: @color-gray-100;
}

    .annotation-editor-window .annotate-thumbs .thumb {
        position: relative;
        flex: 0 0 64px;
        width: 64px;
        height: 64px;
        border: 2px solid transparent;
        border-radius: 6px;
        cursor: pointer;
        overflow: hidden;
        background: #fff;
    }

        .annotation-editor-window .annotate-thumbs .thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .annotation-editor-window .annotate-thumbs .thumb.active {
            border-color: @color-gray-700;
            box-shadow: 0 0 0 2px rgba(3, 165, 127, 0.25);
        }

        .annotation-editor-window .annotate-thumbs .thumb.edited::after {
            /* slight tint so user can spot edited thumbs at a glance */
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(3, 165, 127, 0.08);
            pointer-events: none;
        }

        .annotation-editor-window .annotate-thumbs .thumb.failed {
            border-color: @color-gray-500;
        }

.annotation-editor-window .annotate-upload-progress {
    padding: 12px 16px;
    background: #fff;
    border-top: 1px solid @color-border;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
}

.annotation-editor-window .annotate-empty {
    padding: 24px;
    text-align: center;
    color: @color-gray-100;
}

@media (max-width: 768px) {
    .annotation-editor-window .annotate-canvas-wrap .canvas-container {
        max-height: 40vh;
    }

    .annotation-editor-window .annotate-canvas-wrap {
        min-height: 240px;
        padding: 8px;
    }

        .annotation-editor-window .annotate-canvas-wrap canvas {
            max-height: 45vh;
        }

    .annotation-editor-window .annotate-toolbar .color-swatches .swatch {
        width: 22px;
        height: 22px;
    }

    .annotation-editor-window .annotate-thumbs .thumb {
        flex-basis: 56px;
        width: 56px;
        height: 56px;
    }
    /* On touch devices the X button is always visible — no hover */
    .annotation-editor-window .annotate-thumbs .thumb-remove {
        opacity: 1;
    }
}

/* Native <input type="radio"> rendered like the Telerik radio (.k-radio). Mirrors the effective
   look = Kendo default theme base + RonyaComponent component.css overrides: 14px circle, 1px #BABABA
   border, checked = white ring + dark centre. .k-radio is excluded so Telerik keeps its own rules. */
input[type="radio"]:not(.k-radio) {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    display: inline-block;
    flex: none;
    width: 14px;
    height: 14px;
    margin: 0;
    padding: 0;
    border: 1px solid #BABABA !important;
    border-radius: 50%;
    background: transparent !important;
    vertical-align: middle;
    cursor: pointer;
    outline: 0;
    transition: border-color .1s ease, box-shadow .1s ease;

    &:focus {
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
    }

    &:checked {
        color: #2C2C2C;
        box-shadow: inset 0 0 0 0.23em white, inset 0 0 0 1em #1d1d1d !important;
    }

    &:disabled {
        opacity: .6;
        cursor: default;
        pointer-events: none;
    }
}

.driver-licence-back-card {
    background-color: #1ba89a;
}

.border-list {
    // condition — only if .row exists inside
    &:has(> .row) {

        > .row {
            border-bottom: 1px solid @color-gray-200;
            margin-bottom: 14px;
            padding-bottom: 10px;
        }
            // last .row — 2nd last child because _bl_ spacer is last
            > .row:nth-last-child(2) {
                border-bottom: none;
                margin-bottom: 0;
                padding-bottom: 0;
            }
    }
}

/* Driver-licence photos use the AntDesign <Image> component directly, which
   ships its own styling and a built-in fullscreen preview (zoom in / out,
   rotate) on click — no custom zoom CSS is needed here. */
.dl-photo .ant-image,
.dl-photo .ant-image-img {
    width: 100%;
    height: auto;
}

.k-button-solid-primary {
    background: @color-primary !important;
    border: 1px solid @color-primary !important;
}

.k-time-header .k-time-now {
    color: @color-primary !important;

    &:hover {
        background: @color-gray-300 !important;
        box-shadow: none !important;
        color: @color-primary !important;
    }
}

.k-time-list .k-item:hover {
    color: @color-primary !important;
}

/* ================================================================================================
   LR inspection flow — the ONLY styles the new screens add.
   Everything else comes from Bootstrap utilities and the existing LR/fleet helpers: cards, buttons,
   rows, .image-box, .delete-icon, .image-loading-overlay, .border-dashed, .badge, .bg-light,
   .custom-stepper, .form-control, .desc / .font-* / .text-default-light.
   ================================================================================================ */

/* The large preview reuses .image-box; it only needs to be taller than a gallery thumbnail.
   Fixed height so the box does not jump between an empty slot's placeholder and a captured photo. */
.lr-preview {
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .lr-preview img {
        max-height: 100%;
        object-fit: contain;
    }

/* Perspective tile — .image-box supplies the frame; this adds the selected ring and captured tick. */
.lr-tile {
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lr-tile--active {
    outline: 2px solid #067E5E;
    outline-offset: -2px;
}

.lr-tile__check {
    position: absolute;
    top: 2px;
    right: 2px;
    color: #067E5E;
    background: #fff;
    border-radius: 50%;
}

.lr-video-thumb {
    width: 72px;
    height: 48px;
    object-fit: contain;
    flex: 0 0 auto;
}

/* Recorded-video preview. .image-box alone clipped it on desktop: its height:100% resolved against a
   panel with no height, so the browser's native control bar fell outside the box. A fixed height on
   the <video> plus object-fit:contain letterboxes any aspect ratio instead of cropping it, and the
   controls stay inside the element at every width. */
.lr-video-preview {
    display: block;
    height: auto;
}

    .lr-video-preview video {
        display: block;
        width: 100%;
        height: 250px;
        object-fit: contain;
        background: #000;
        border-radius: 4px;
    }

/* .image-box pins the delete control to the bottom, where it sits on top of the video controls.
   Move it to the top-right for the video only. */
.image-box.lr-video-preview a.delete-icon {
    top: 12px;
    bottom: auto;
    right: 12px;
}

/* LR Services list (New Flow, prototype 31) — compact row thumbnail. .image-box's 160px frame is
   sized for a full-page gallery tile; this table needs a much smaller thumbnail that sits inline with
   two lines of text in a single row. Reuses .image-box's border-radius/overflow/centering at table-row
   scale instead of gallery scale — the only genuinely new UI element this screen needed. */
.lr-services-thumb.image-box {
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
}

.lr-services-thumb .no-photo-placeholder {
    font-size: 24px;
    color: @color-gray-300;
}

/* LR Services screen (New Flow) — square corners + a plain white totals footer, per Figma.
   review-fe Should-Fix S4: RepairItems.razor:15-33 already scopes an identical pair of rules to this
   same #lr-services-screen id, but that rule lives in a component-local <style> block, and RepairItems
   never renders once EnableNewLrFlow is on — so its <style> is never injected for the New Flow screen
   that actually owns this id now. Moved here, into the live stylesheet, instead of adding a second
   <style> block (house rule) or touching the old flow's file. */
/*#lr-services-screen .k-card,
#lr-services-screen .k-card-header,
#lr-services-screen .custom-table,
#lr-services-screen .custom-table > .header-row,
#lr-services-screen .custom-table > .body-row,
#lr-services-screen .custom-table > .body-row > .row {
    border-radius: 0 !important;
}
*/
#lr-services-screen .footer-row--plain {
    background: #fff !important;
}

@media (max-width: 575px) {
    .lr-video-preview video {
        height: 200px;
    }
}

/* Stretches a TelerikFileSelect over its parent so the whole dashed row is clickable. */
.lr-file-overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
}

    .lr-file-overlay .k-upload-button.k-button,
    .lr-file-overlay .k-dropzone,
    .lr-file-overlay .k-upload-button-wrap {
        width: 100%;
        height: 100%;
    }

/* Hidden <input type=file> driven by a <label for>. InputFile is used instead of TelerikFileSelect
   where accept + capture are needed, so the camera opens directly on a phone. */
.lr-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Inspection completed (thank-you) --- */
.lr-done {
    text-align: center;
    padding: 24px 16px;
}

.lr-done__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #e6f4f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .lr-done__icon .material-symbols-outlined {
        font-size: 30px;
        color: #067E5E;
    }

.lr-done__actions {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .lr-done__actions .material-symbols-outlined {
        font-size: 18px;
        vertical-align: middle;
    }
/* --- LR inspection flow css end --- */

.nd-mail-body, .nd-mail-body * {
    font-family: inherit !important;
}
/* --- In-browser video recorder (LRInspectionVideoRecorder) --- */ /* 16:9 viewfinder. aspect-ratio rather than a fixed height so it fills the modal on a phone in

   portrait and never letterboxes twice. */

.lr-rec {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 4px;
    overflow: hidden;
}

.lr-rec__video {
    width: 100%;
    height: 100%;
    /* cover, not contain: the viewfinder should fill the frame like a camera app. The recorded file

       is unaffected - this is preview framing only. */ object-fit: cover;
    display: block;
}

/* Camera not live yet: keep the black frame but hide whatever the element is showing. */ .lr-rec--pending .lr-rec__video {
    visibility: hidden;
}

.lr-rec__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
}

.lr-rec__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.lr-rec__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ea4747;
    /* CSS animation, so the pulse costs no Blazor re-renders. */ animation: lr-rec-pulse 1.2s ease-in-out infinite;
}

@keyframes lr-rec-pulse {

    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.25;
    }
}

.lr-rec__timer {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 9px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.lr-rec__timer--warn {
    color: #FFD166;
}

.lr-rec__bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.25);
}

.lr-rec__fill {
    height: 100%;
    background: #03A57F;
    transition: width 0.2s linear;
}

.lr-rec__fill--warn {
    background: #F97D34;
}

/* Telerik centres the window; on a phone the default padding wastes most of the width. */ .lr-rec-window .k-window-content {
    padding: 12px;
}

/* Paused: amber and no pulsing dot, so a held recording can never be mistaken for a live one. */
.lr-rec__badge--paused {
    background: rgba(0, 0, 0, 0.55);
    color: #FFD166;
}

/*vaibhav--GarageType radio btn*/
.garage-radio-group .k-radio-list-item {
    background-color: #fff;
    padding: 1rem !important;
    border: 1px solid #ECECEC;
    border-radius: 8px;
}

.garage-radio-group .k-radio-list-item .k-radio-label {
    width: 100%;
}
/*.invoice-help-trigger {
    --dark-grey: #454545;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    margin-top: 12px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;

    &:hover {
        background: #f8f9fa;
    }

    .invoice-help-label {
        display: flex;
        align-items: center;
        font-size: 12px;
        font-weight: 600;
        color: var(--dark-grey);

        i {
            font-size: 1.25rem;
            margin-right: 8px;
        }
    }

    > i {
        color: var(--dark-grey);
    }
}
*/
/* Reusable bold-stroke modifier for Material Symbols icons. The design-system default is a thin
   weight-300 stroke set through font-variation-settings, which fw-* classes cannot override.
   Pair with the existing size/colour utilities, e.g. "material-symbols-outlined text-success fs-xl nd-icon-bold". */
.material-symbols-outlined.nd-icon-bold {
    font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 20;
}