@import "ronya-design-system.less";

// ============================================================
//   Fleet New Design 3.0 — new classes only, no existing edits
// ============================================================

// ============================================================
//   STYLE GUIDE — LESS Variables
// ============================================================

// ── Brand / Primary ──
@color-primary: #067E5E;
@color-primary-dark: #055A43;
@color-primary-focus: #078A67;
@color-primary-bg: #E6F4F0;
@color-primary-bg-hover: #D4EDE7;

// ── Semantic: Success ──
@color-success: #059669;
@color-success-bg: #d1fae5;
@color-success-dark: #065f46;

// ── Semantic: Warning / Amber ──
@color-warning: #d97706;
@color-warning-bg: #fef3c7;
@color-warning-dark: #b45309;

// ── Semantic: Danger ──
@color-danger: #dc2626;
@color-danger-dark: #b91c1c;
@color-danger-bg: #fee2e2;

// ── Semantic: Info / Blue ──
@color-info: #1d4ed8;
@color-info-bg: #dbeafe;

// ── Neutral Gray Scale ──
@color-white: #ffffff;
@color-gray-50: #F5F7FA;
@color-gray-100: #EDF2F7;
@color-gray-200: #E1E9F0;
@color-gray-300: #D1DBE6;
@color-gray-400: #A0AEBE;
@color-gray-500: #64748B;
@color-gray-600: #475569;
@color-gray-700: #1E293B;
@color-gray-800: #0F172A;
@color-gray-900: #02010E;
@color-gray-950: #161817;
@color-black: #000000;


// ── Surface / Background ──
@color-bg-page: #f5f6fa;
@color-bg-card: #ffffff;
@color-bg-sidebar: #ffffff;
@intials-bg: #F0F2FE;

// ── Borders ──
@color-border: #e9ecef;
@color-border-light: #f0f0f0;
@color-border-card: #f3f4f6;
@color-border-stat-card: #E5E6F1;
@color-border-base: #dddddd;
@color-border-default: #D1DBE6;
@color-border-icon-btn: #8A8FA9;

// ---pastel from fleet 2.0

@pastel-red: #FEF2F2;
@pastel-yellow: #fafbed;
@pastel-orange: #FFF7ED;
@pastel-green: #13b6a51c;
@pastel-blue: #EFF6FF;
@pastel-purple: #FAF5FF;
@pastel-slate-100: #F1F5F9;

// ── Scrollbar ──
@color-scrollbar-thumb: @color-gray-300;
@color-scrollbar-track: transparent;

// ── Text ──
@color-text-primary: #02010E;
@color-text-secondary: #374151;
@color-text-muted: #6b7280;
@color-text-faint: #9ca3af;
@color-text-inverse: #ffffff;
@color-text-tooltip: #1f2937;

// ── Typography ──
/*@font-family-base: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

@font-size-xs: 10px;
@font-size-sm: 11px;
@font-size-base: 12px;
@font-size-md: 14px;
@font-size-lg: 16px;
@font-size-xl: 18px;
@font-size-1xl: 20px;
@font-size-2xl: 22px;
@font-size-3xl: 28px;

@font-weight-normal: 400;
@font-weight-medium: 500;
@font-weight-semibold: 600;
@font-weight-bold: 700;

@line-height-tight: 1.2;
@line-height-base: 1.5;*/

// ── Spacing ──
@space-1: 4px;
@space-2: 8px;
@space-3: 10px;
@space-4: 12px;
@space-5: 14px;
@space-6: 18px;
@space-7: 20px;
@space-8: 22px;
@space-9: 28px;

// ── Border Radius ──
@radius-sm: 6px;
@radius-md: 8px;
@radius-lg: 10px;
@radius-xl: 12px;
@radius-full: 9999px;

// ── Shadows ──
@shadow-card: 0 1px 4px rgba(0, 0, 0, 0.07);
@shadow-sidebar: 2px 0 8px rgba(0, 0, 0, 0.05);
@shadow-focus-primary: 0 0 0 3px rgba(6, 126, 94, 0.12);

// ── Transitions ──
@transition-fast: 0.15s ease;
@transition-base: 0.2s ease;

// ── Responsive Breakpoints ────────────────────────────────────
//
//   "Up" variables (min-width) — use for mobile-first rules:
//     @media (min-width: @screen-md) { … }   → tablets and above
//
//   "Down" variables (max-width) — use for "less than" overrides:
//     @media (max-width: @screen-sm-max) { … } → phones only
//
//   Device reference:
//     xs   < 576 px   phones portrait
//     sm   ≥ 576 px   phones landscape
//     md   ≥ 768 px   tablets portrait
//     lg   ≥ 992 px   tablets landscape / small laptop
//     xl   ≥ 1200 px  desktop
//     xxl  ≥ 1400 px  large desktop
//     3xl  ≥ 1920 px  wide / ultra-wide screens
// ─────────────────────────────────────────────────────────────

// min-width breakpoints (mobile-first / "up")
@screen-xs: 0px;
@screen-sm: 576px;
@screen-md: 768px;
@screen-lg: 992px;
@screen-xl: 1200px;
@screen-xxl: 1400px;
@screen-3xl: 1920px;

// max-width breakpoints ("down" / "less than next tier")
// Each value is (next breakpoint − 1 px) to avoid overlap.
@screen-xs-max: (@screen-sm - 1); // 575 px  — phones portrait only
@screen-sm-max: (@screen-md - 1); // 767 px  — phones (portrait + landscape)
@screen-md-max: (@screen-lg - 1); // 991 px  — up to tablet portrait
@screen-lg-max: (@screen-xl - 1); // 1199 px — up to small laptop
@screen-xl-max: (@screen-xxl - 1); // 1399 px — up to desktop

// Custom mid-point used for toolbar / list-height adjustments
@screen-tablet-lg: 900px; // between md and lg (tablet landscape edge)


// ============================================================
//   GLOBAL SCROLLBAR
// ============================================================
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: @color-scrollbar-track;
}

::-webkit-scrollbar-thumb {
    background: @color-scrollbar-thumb;
    border-radius: @radius-full;

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

* {
    scrollbar-width: thin;
    scrollbar-color: @color-scrollbar-thumb @color-scrollbar-track;
}


.color-primary {
    color: @color-primary;
}
.text-muted,
.text-default-light {
    color: @color-gray-500;
}
.primary-link,
.text-link {
    color: @color-primary;
    text-decoration: underline;

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

.secondary-link {
    color: @color-text-primary;
    text-decoration: underline;

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

.text-dark {
    color: @color-text-primary;
}
// ============================================================
//   GLOBAL BASE
// ============================================================
html {
    color: @color-text-primary !important;
}

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

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}

// ============================================================
//   UTILITY — FONT SIZES
// ============================================================
h1, h2, h3, h4, h5, h6 {
    color: @color-text-primary;
}

.fs-xs {
    font-size: @font-size-xs !important;
}
// 10px
.fs-sm {
    font-size: @font-size-sm !important;
}
// 11px
.fs-base {
    font-size: @font-size-base !important;
}
// 12px
.fs-md {
    font-size: @font-size-md !important;
}
// 14px
.fs-lg {
    font-size: @font-size-lg !important;
}
// 16px
.fs-xl {
    font-size: @font-size-xl !important;
}
// 18px
.fs-1xl {
    font-size: @font-size-1xl !important;
}
// 20px
.fs-2xl {
    font-size: @font-size-2xl !important;
}
// 22px
.fs-3xl {
    font-size: @font-size-3xl !important;
}
// 28px

// Font weight utilities
.fw-normal {
    font-weight: @font-weight-normal !important;
}
// 400
.fw-medium {
    font-weight: @font-weight-medium !important;
}
// 500
.fw-semibold {
    font-weight: @font-weight-semibold !important;
}
// 600
.fw-bold {
    font-weight: @font-weight-bold !important;
}
// 700

// ============================================================
//   UTILITY — COLORS
// ============================================================

// Text colors
.bg-light-grey {
    background: #F1F1F1 !important;
}

.bg-pastel-green {
    background: @pastel-green;
}

.bg-pastel-orange, .bg-warning {
    background: @pastel-orange !important;
}

.bg-pastel-blue, .bg-secondary {
    background: @pastel-blue;
}

.text-primary-brand {
    color: @color-primary !important;
}

.text-primary-dark {
    color: @color-primary-dark !important;
}

.text-success {
    color: @color-success !important;
}

.text-success-dark {
    color: @color-success-dark !important;
}

.text-warning {
    color: @color-warning !important;
}

.text-warning-dark {
    color: @color-warning-dark !important;
}

.text-danger {
    color: @color-danger !important;
}

.text-info {
    color: @color-info !important;
}

.text-white {
    color: @color-white !important;
}

.text-black {
    color: @color-black !important;
}

.text-body {
    color: @color-text-primary !important;
}

.text-secondary-body {
    color: @color-text-secondary !important;
}

.text-muted-body {
    color: @color-text-muted !important;
}

.text-faint {
    color: @color-text-faint !important;
}

.text-inverse {
    color: @color-text-inverse !important;
}

.text-gray-400 {
    color: @color-gray-400 !important;
}

.text-gray-500 {
    color: @color-gray-500 !important;
}

.text-gray-600 {
    color: @color-gray-600 !important;
}

.text-gray-700 {
    color: @color-gray-700 !important;
}

.text-gray-800 {
    color: @color-gray-800 !important;
}

.text-gray-900 {
    color: @color-gray-900 !important;
}

// Background colors
.bg-primary-brand {
    background-color: @color-primary !important;
}

.bg-primary-light {
    background-color: @color-primary-bg !important;
}

.bg-success {
    background-color: @color-success !important;
}

.bg-success-light {
    background-color: @color-success-bg !important;
}

.bg-warning {
    background-color: @color-warning !important;
}

.bg-warning-light {
    background-color: @color-warning-bg !important;
}

.bg-danger {
    background-color: @color-danger !important;
}

.bg-danger-light {
    background-color: @color-danger-bg !important;
}

.bg-info {
    background-color: @color-info !important;
}

.bg-info-light {
    background-color: @color-info-bg !important;
}

.bg-page {
    background-color: @color-bg-page !important;
}

.bg-card {
    background-color: @color-bg-card !important;
}

.bg-gray-50 {
    background-color: @color-gray-50 !important;
}

.bg-gray-100 {
    background-color: @color-gray-100 !important;
}

.bg-gray-200 {
    background-color: @color-gray-200 !important;
}

.bg-initials {
    background-color: @intials-bg !important;
}

// Border colors
.border-primary {
    border-color: @color-primary !important;
}

.border-success {
    border-color: @color-success !important;
}

.border-warning {
    border-color: @color-warning !important;
}

.border-danger {
    border-color: @color-danger !important;
}

.border-info {
    border-color: @color-info !important;
}

.border-card {
    border-color: @color-border-stat-card !important;
}

.border-light {
    border-color: @color-border-light !important;
}

.border-gray-200 {
    border-color: @color-gray-200 !important;
}

.border-gray-300 {
    border-color: @color-gray-300 !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 {
    /* .language-switcher.k-dropdownlist {
       min-width: 46px !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
    }*/

    .k-input-inner {
        padding: 0 4px !important;
        justify-content: center;
        // keep only the flag, hide label text
        /* span > img {
            margin: 0 5px 0 0 !important;
            width: 14px;
            height: 14px;
        }*/
        /* span > *:not(img) {
            display: none !important;
        }*/
    }
    /* .k-button-solid-base {
        display: none !important;
    }*/
}

.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;
}
// ============================================================
//   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;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: @color-gray-500;
    font-size: 22px;
    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;
    }
}

.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;
}
// ============================================================
//   BUTTONS — .btn base + variant modifiers
//   Usage: <a class="btn btn--primary">…</a>
// ============================================================

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: @space-1;
    height: 40px;
    padding: 0 @space-4;
    border-radius: @radius-md;
    font-family: @font-family-base;
    font-size: @font-size-base;
    font-weight: @font-weight-medium;
    line-height: @line-height-tight;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background @transition-fast, border-color @transition-fast, color @transition-fast, box-shadow @transition-fast;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.08);
    transition: 0.5s ease all;

    .material-symbols-outlined {
        font-size: 13px;
    }

    .btn-label {
        margin-left: 2px;

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

    .k-button-text {
        display: flex;
        align-items: center;

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

    @media(max-width:@screen-sm) {
        font-size: @font-size-sm;
        padding: 0 @space-2;
        /*  height: auto;*/
    }

    &:focus-visible {
        outline: none;
        box-shadow: @shadow-focus-primary;
    }
    // ── Variants ──
    &.admin-btn {
        background: #fff;
        color: @color-primary;
        border: 1px solid @color-primary;

        &-icon-btn-small {
            border-radius: 6px;
            height: auto;
            padding: 5px;
        }

        &:hover,
        &.focus, &:focus-within, &:focus-visible {
            border: 1px solid @color-primary;
            background: #F5F7F7 !important;
            color: @color-primary !important;
        }
    }

    &--primary {
        background: @color-primary;
        color: @color-text-inverse;
        border-color: @color-primary;

        &-icon-btn-small {
            border-radius: 6px;
            height: auto;
            padding: 5px;
        }

        .k-button-text {
            height: 100%;
        }

        span.btn-arrow {
            background: #055A43;
            height: 100%;
            width: 25px;
            margin-right: -12px;
            border-radius: 0 8px 8px 0px;
            margin-left: 5px;
            display: flex;
            align-items: center;
            justify-content: center;

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

        &--icon {
            padding: 0 8px;

            .material-symbols-outlined {
                font-size: 16px;
            }
        }

        .k-button {
            /* background: transparent;
            border-color: @color-primary-dark;
               color: @color-text-inverse;
           */
            height: 100%;
            background: @color-primary;
            color: @color-text-inverse;
            font-size: @font-size-base;
            border: 0px !important;
            padding-left: 0;

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

        &.k-split-button {
            padding-right: 0;

            .k-split-button-arrow {
                background: @color-primary-dark !important;
                border-radius: 0 8px 8px 0;
                padding: 0 8px !important;

                @media(max-width:@screen-sm-max) {
                    padding: 0 2px !important;
                }

                .k-icon.k-svg-icon.k-svg-i-caret-alt-down:after {
                    font-size: 16px;
                    /*
                    @media(max-width:@screen-sm-max) {
                        font-size: 12px;
                    }*/
                }
            }
        }

        &:active,
        &:hover, &:focus, &:focus-visible {
            background: @color-primary-dark !important;
            border-color: @color-primary-dark;
            color: @color-text-inverse;

            .k-button {
                background: @color-primary-dark;
                border-color: @color-primary-dark;
                color: @color-text-inverse;
                border: 0px !important;
            }
        }
        /*&:hover:not(:disabled):not(.disabled) {
    background-color: @color-surface-primary-hover; // #05795C
    border-color: @color-surface-primary-hover;
    color: @color-text-inverse;
}

&:focus-visible,
&.focus {
    background-color: @color-surface-primary-focus; // #058C6B
    border-color: @color-border-primary-focus; // #058C6B
    color: @color-text-inverse;
    box-shadow: @shadow-focus-primary; // 0 0 0 3px rgba(5,140,107,0.18)
    outline: none;
}

        &:active,
        &.active {
            background-color: @color-surface-primary-pressed; // #045E48
            border-color: @color-surface-primary-pressed;
            color: @color-text-inverse;
            box-shadow: none;
            transform: scale(0.98);
        }*/
    }

    &--secondary {
        background: @color-white;
        color: @color-text-primary;
        border-color: @color-border-default;

        &-icon-btn-small {
            border-radius: 6px;
            height: auto;
            padding: 5px;
        }

        &--icon {
            padding: 0 8px;

            .material-symbols-outlined {
                font-size: 16px;
            }
        }

        .k-button {
            font-size: @font-size-base;
            border: 0px !important;
            padding-left: 0;
        }

        &.k-split-button {
            padding-right: 0;

            .k-split-button-arrow {
                background: @color-gray-300 !important;
                border-radius: 0 8px 8px 0;
                padding: 0 5px !important;
                height: 100%;

                .k-icon.k-svg-icon.k-svg-i-caret-alt-down:after {
                    font-size: 16px;

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

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

    &--ghost {
        background: transparent;
        color: @color-text-muted;
        border-color: transparent;

        &-icon-btn-small {
            border-radius: 6px;
            height: auto;
            padding: 5px;
        }

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

    &--success {
        background: @color-success;
        color: @color-text-inverse;
        border-color: @color-success;

        &:hover {
            background: @color-success-dark;
            border-color: @color-success-dark;
            color: @color-text-inverse;
        }
    }
    // .btn--danger and .btn--destructive are identical — use either
    &--danger,
    &--destructive {
        background: transparent;
        color: @color-danger;
        border-color: @color-danger;

        &-icon-btn-small {
            border-radius: 6px;
            height: auto;
            padding: 5px;
        }

        &--icon {
            padding: 0 8px;

            .material-symbols-outlined {
                font-size: 16px;
            }
        }

        &:hover {
            background: @color-danger-bg;
            border-color: @color-danger;
            color: @color-danger;
        }
    }
    // ── Size modifiers ──
    &--sm {
        padding: 5px @space-3;
        font-size: @font-size-base;
    }

    &--lg {
        padding: 10px 20px;
        font-size: @font-size-lg;
    }
    // ── Icon-only square ──
    &--icon {
        padding: 0;
        width: 36px;
        height: 36px;
        border-radius: @radius-md;
        font-size: 18px;
    }
}

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

.k-group-start, .k-group-end {
    border-radius: @radius-md;
    padding: @space-1;
    background: transparent;

    &.k-selected {
        background: @color-primary;
        border-color: @color-primary;
    }
}
// ============================================================
//   TelerikSplitButton / TelerikDropDownButton — primary style
// ============================================================
/*.btn--primary,
.btn--primary ,
.btn--primary,
.btn--primary.k-button-group {

    .k-button {
        background: @color-primary !important;
        color: @color-text-inverse !important;
        border-color: @color-primary !important;
        box-shadow: none !important;
        font-size: @font-size-md !important;
        font-family: @font-family-base !important;

        &:hover,
        &:focus,
        &:focus-visible,
        &:active {
            background: @color-primary-dark !important;
            border-color: @color-primary-dark !important;
            box-shadow: none !important;
            outline: none !important;
        }
    }

    &:hover,
    &:focus,
    &:focus-visible,
    &:active {
        background: @color-primary-dark !important;
        border-color: @color-primary-dark !important;
        box-shadow: none !important;
        outline: none !important;
    }

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

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

    &__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-1xl;
        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-md;
        /*  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: 32px;
        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-md;
        /*  font-weight: @font-weight-medium;*/
        color: #0036C0;
        font-style: italic;
    }

    .stat-card-footer {
        margin-top: auto;
    }
    // ── 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;
    }
}

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

// 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-md;
    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;

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

.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: #64748B;
    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-text-muted;
    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-secondary;
        border-color: @color-gray-300;
    }
}

.nd-status-tab-count {
    background: #E5E5E5;
    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: #C6E8E2;
    }
}
// ── 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;
    color: @color-white;
    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: #067e5e14;
    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;
}

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

.nd-search-icon {
    position: absolute;
    left: 10px;
    /*  color: @color-gray-400;*/
    font-size: 14px;
    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;

    .k-grid {
        height: calc(100vh - 330px);
    }
}

// ── 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 {
    background: white;
    border: 1px solid @color-gray-100;
    border-radius: 0px;
    font-size: 12px;
    color: @color-text-primary;
    /*  min-height: 300px;*/
    .k-card-header {
        font-size: @font-size-lg;
        font-weight: 600;
        padding: 13px 17px;
        z-index: 0;
        color: @color-text-primary;

        h1, h2, h3, h4, h5, h6 {
            font-size: @font-size-lg !important;
            margin-bottom: 0;
        }
    }

    .k-card-body {
        padding: 20px 18px;
    }
}
/*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;
    }
}

.rounded-left {
    border-radius: 8px 0px 0px 8px !important;
}

.border-dashed {
    border-style: dashed !important;
}
/**********
        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 16px;
    background: @color-white;
    border-top: 1px solid @color-gray-200;
    font-family: @font-family-base;
    border-radius: 0 0 12px 12px;
    width: 100%;
    // Hide first / last page jump buttons
    .k-pager-first,
    .k-pager-last {
        display: none;

        @media(max-width:@screen-sm-max) {
            display: block;
        }
    }
    // Prev / Next nav buttons — shown as text links
    .k-pager-nav {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: @color-text-secondary;
        font-size: @font-size-md;
        font-weight: @font-weight-medium;
        padding: 4px 6px;
        border-radius: 6px;
        min-width: unset;

        &:hover {
            background: @color-gray-100 !important;
        }
        // Hide Telerik arrow icon
        .k-icon,
        .k-button-icon {
            display: none;

            @media(max-width:@screen-sm-max) {
                display: block;
            }
        }
    }

    .k-pager-prev {
        &::before {
            content: "< Back";
        }
    }

    .k-pager-next {
        &::after {
            content: "Next >";
        }
    }
    // Page number buttons
    .k-pager-numbers {
        display: flex;
        align-items: center;
        gap: 2px;

        @media(max-width:@screen-sm-max) {
            .k-button:not(.k-selected):not([aria-current="page"]) {
                display: none;
            }

            .k-button.k-selected[aria-current="page"] {
                display: inline-flex;
                pointer-events: none;
                cursor: default;
            }
        }

        .k-button {
            min-width: 28px;
            height: 28px;
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            color: @color-text-primary;
            font-size: @font-size-base;
            font-weight: @font-weight-normal;
            border-radius: @radius-sm;
            padding: 0 6px;

            @media(max-width:@screen-sm-max) {
                height: 20px;
                min-width: 20px;
                display: none;
            }

            &:hover {
                border: 1px solid @color-gray-200!important;
            }
            // Active page — dark filled circle
            &.k-selected {
                background: @color-gray-900 !important;
                color: @color-white !important;
                font-weight: @font-weight-semibold;
                border-radius: @radius-sm;
                min-width: 28px;
                height: 28px;
                padding: 0;
                display: inline-flex;
                align-items: center;
                justify-content: center;

                @media(max-width:@screen-sm-max) {
                    display: block !important;
                    min-width: 20px;
                    height: 20px;
                }
            }
        }
        // Ellipsis (…)
        > span {
            color: @color-text-muted;
            font-size: @font-size-md;
            padding: 0 2px;
        }
    }
    // Hide "X – Y of Z items" info text
    .k-pager-info {
        display: none;
    }
    // "Result per page" size selector
    .k-pager-sizes {
        display: flex;
        align-items: center;
        gap: 8px;

        label,
        .k-label {
            font-size: @font-size-sm;
            color: @color-text-muted;
            white-space: nowrap;
        }

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

    .k-chart {
        height: 100% !important;
        width: 100% !important;
        min-height: 260px; // fallback so chart never collapses on small screens
    }
        // Top line stroke
        .k-chart path[fill="none"] {
            stroke: #ededed !important;
            stroke-width: 1px !important;
        }
        // Area fill — reference the inline SVG gradient by fragment ID
        .k-chart svg path[fill-opacity] {
            fill: url(#bookingGradient) !important;
        }
        // Dot markers
        .k-chart circle {
            fill: #7280FF !important;
            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;
    overflow: hidden;
    border: 1px solid @color-border;

    table {
        border-collapse: separate;
        border-spacing: 0;
        color: @color-text-primary;
    }

    .k-column-title {
        font-size: 12px;
        font-weight: 500;
        color: #5C7873;
    }

    .k-table-tbody .k-table-row {
        margin-bottom: 8px;

        .k-table-td {
            border-bottom: 1px solid @color-gray-100;
            font-weight: 400;
        }

        &:hover {
            background: #EEF9F7 !important;

            .k-table-td {
                background: #EEF9F7 !important;
            }
        }
    }
}

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

    .k-table-thead {
        background: #EFF5F4;
    }

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

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

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

    .nd-booking-chart {
        .k-chart {
            min-height: 300px;
            height: 300px !important;
        }
    }

    .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: #1a6b4a;
    color: #fff;
    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;
    }
/* Filter popup — tabbed layout */
.nd-filter-pop-tabbed {
    display: flex;
    min-height: 400px;
}

.nd-filter-tab-list {
    width: 200px;
    flex-shrink: 0;
    background: #EEF9F7;
    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;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
    flex-shrink: 0;
}

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

.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;
}
.form-label {
    color: @color-text-primary;
}
.input-group-text {
    border-radius: @radius-md;
    color: @color-text-primary;
}

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

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

.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;
    }
}
/******
    POP us default settings
    *******/
.k-window {
    border-radius: 8px;

    .k-window-titlebar {
        border-radius: 8px 8px 0 0;
        font-size: 18px;

        label, h1, h2, h3, h4, h5 {
            font-size: 18px;
        }
    }
}

/********************
    Custom Pop
*********************/
.custom-pop {
    border-radius: 8px;

    .k-window-titlebar {
        border-radius: 8px 8px 0 0;
        font-size: 18px;

        h1, h2, h3, h4, h5 {
            font-size: 18px;
        }
    }
}
/************************
 Delete confirm box UI   
 *************************/
/****Delete Telerik POP UP ****/
.k-dialog.delete-pop {
    padding: 25px 15px;
    width: 500px;
    max-width: 100%;
    border-radius: 8px;
    text-align: left;

    .k-dialog-titlebar {
        background: white;
        color: var(--dark-grey);
        border-radius: 8px 8px 0 0;
        white-space: normal !important;
        border: 0px;

        label {
            font-size: 18px;
            font-weight: 600;
            color: @color-text-primary;
        }
    }

    .k-dialog-actions {
        margin-top: 20px;
        border-top: 0px;
        justify-content: end;
    }

    .k-window-titlebar {
        border-radius: 4px;
        background: transparent;

        .k-dialog-titlebar-actions {
            display: none;
        }

        .k-window-title {
            .delete-icon-bg {
                border-radius: 50%;
                background: #f8cfcf;
                border: 7px solid #fbe2e2;
                color: #ea4747;
                display: flex;
                width: 60px;
                height: 60px;
                margin: 0 auto 20px;
                justify-content: center;
                align-items: center;

                .bx-trash {
                    display: block;
                    font-size: 25px;
                }
            }
        }
    }

    .k-dialog-content {
        margin: 0 0px !important;
        /*  padding: 6px 0;*/
        font-size: 14px;
        padding-top: 0;
    }
}

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

    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: 260px;
    flex-shrink: 0;
    height: 100%;
    background: #fff;
    border-right: 1px solid @color-border;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 2px 0 8px rgba(0,0,0,0.03);
}

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

.nd-detail-booking-no {
    font-size: 13px;
    font-weight: 700;
    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;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #374151;
}

.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 20px;
    font-size: 13px;
    color: @color-text-primary;
    cursor: pointer;
    text-decoration: none;
    border-left: 3px solid transparent;
    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: 7px;
        height: 7px;
        border-radius: 50%;
        background: #d1d5db;
        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;
}

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

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

// ============================================================
//   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: 600;
    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 {
    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 {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    border: 0px solid transparent;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    width: auto;
    //-------------Draft: Not yet submitted - grey --------//
    &--draft {
        background: @color-gray-50;
        color: @color-gray-600;
        border-color: @color-gray-300;
    }
    //-------------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;
    }
    //  Booking Canceled:Canceled -  Red---//
    &--canceled {
        background-color: #FCF0F0;
        color: #CB4B4B;
        border-color: #FCF0F0;
    }
    // --- Pink: Booking Rejected ---
    &--rejected {
        background-color: #FCF0F0;
        color: #CB4B4B;
        border-color: #FCF0F0;
    }
    // --- 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;
    }

    &--default {
        background-color: @color-gray-300;
        color: @color-text-primary;
        border-color: @color-gray-300;
    }
    //-------DRAFT:- Not yet submitted------//

    &--inactive {
        background-color: #E9E9E9;
        color: #197772;
        border-color: #69696A;
    }
}

.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: auto;

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

/**********time line pop***********/
.timeline-pop {
    border-radius: 6px 6px 0 0;

    .k-window-titlebar {
        border-radius: 6px 6px 0 0;
    }

    .k-window-content {
        max-height: max-content;
        overflow: auto;
        height: calc(100dvh - 9rem);
    }

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

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

.k-switch-md {
    .k-switch-thumb {
    }

    .k-switch-track {
        height: 24px !important;

        @media(max-width:@screen-sm) {
            height: 20px !important;
        }
    }

    .k-switch-thumb {
        height: 24px !important;

        @media(max-width:@screen-sm) {
            height: 21px !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;
}
/*********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;
}

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

.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(77, 168, 146);
    }

    &:hover {
        opacity: 0.8;
        fill: rgb(77, 168, 146);
    }
}

.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-500;
    background: @color-white;

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

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

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

    .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 {
    content: "keyboard_arrow_down";
    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
    ****************/
.k-step-link {
    font-size: 12px;

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

.custom-stepper {
    .k-step-link {
        overflow: visible !important;

        @media (max-width: @screen-md) {
            white-space: normal !important;
        }
    }
}

.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;
}
/***** Telerik tabs **********/
.k-tabstrip-content:focus {
    outline: none;
}

.k-tabstrip-items-wrapper {
    border: 0;
    background: transparent;
    width: fit-content;
    padding: 2px;
    margin-bottom: 10px;

    ul.k-tabstrip-items {
        margin-bottom: 2px;

        li.k-tabstrip-item {
            background: transparent;
            padding: 4px 10px;
            color: inherit;

            &:focus {
                box-shadow: none;
            }

            @media(max-width:@screen-md) {
                padding: 4px 7px;
            }

            .k-link {
                font-size: 12px;
                background: transparent;

                &:active,
                &:hover {
                    background: transparent !important;
                    color: inherit;
                    border: 0px !important;
                }

                @media(max-width:@screen-md) {
                    font-size: 13px;
                }
            }

            &.k-active {
                background: transparent !important;
                color: @color-text-primary;
                border-block-end-color: @color-primary !important;
                border-width: 0 0 2px;
                font-weight: 600;
            }
        }
    }
}

.k-tabstrip-content {
    background: transparent;
    border: 0;
    padding: 0;
}

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

.k-textbox, .k-numerictextbox, .k-dropdownlist {
    &.k-disabled {
        background: @color-gray-200;
    }
}
/******
    Telerik upload
    ************/
/********telerik select 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;
        }
    }
}

.k-upload .k-upload-files .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 {
    margin-bottom: 65px;
    z-index: 999999 !important;
    text-transform: none !important;
    right: 20px !important;


    .k-notification-wrap {
        font-size: 16px !important;
        font-weight: 500 !important;
        padding: 4px 10px !important;
        align-items: center;
        line-height: normal;
    }

    .k-notification {
        width: 100%;
    }

    .notification-parent {
        position: relative;
    }

    .k-notification-container {
        margin: 2px 0;
        display: flex;
        vertical-align: top;
        width: 400px;

        @media(max-width:575px) {
            width: 100% !important;
        }
    }

    .k-notification-wrap > .k-i-close {
        margin-right: 0;
        margin-left: 4px;
        cursor: pointer;
        display: inline-block;
        position: absolute;
        top: 16px;
        right: 13px;
    }

    .k-notification-container .k-icon {
        color: #fff;
        line-height: normal;
        font-size: 14px;
    }

    .k-notification-error .k-icon,
    .k-notification-error .k-svg-icon {
        color: red;
    }

    .k-notification-success .k-icon,
    .k-notification-success .k-svg-icon {
        color: #07c597 !important;
    }

    .k-notification-success {
        background: #fff !important;
        color: #454545 !important;
        border-color: #fff !important;
        box-shadow: var(--ds-shadow-overlay, 0 0 1px rgba(9, 30, 66, 0.31), 0 20px 32px -8px rgba(9, 30, 66, 0.25)) !important;
        border-radius: 0px !important;
        padding: 15px 15px !important;
        border-bottom: 3px solid #07c597 !important;
        font-size: 15px;
        font-weight: 500;
    }

    .k-notification-error {
        background: #fff !important;
        color: #454545 !important;
        border-color: #fff !important;
        box-shadow: 0px 4px 9px 2px rgba(0, 0, 0, 0.1) !important;
        border-radius: 0px !important;
        padding: 15px 15px !important;
        border-bottom: 3px solid red !important;
        font-size: 15px;
        font-weight: 500;
    }

    span.k-icon.k-i-success, span.k-icon.k-i-error {
        font-size: 20px;
    }

    .k-notification-wrap > .k-icon {
        margin-right: 14px !important;
        flex: none !important;
    }

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

    .demo-notification .k-notification-wrap {
        padding: 0px 0px !important;
    }

        .demo-notification .k-notification-wrap .k-notification-content {
            padding-right: 10px !important;
        }

    .k-i-success::before {
        content: "\e11a" !important;
    }

    .k-i-error::before {
        content: "\e11d" !important;
    }

    @media only screen and (max-width:@screen-xl) {
        width: 59.2% !important;
    }

    @media only screen and (max-width:@screen-lg) {
        width: 79.1% !important;
    }

    @media only screen and (max-width:@screen-md) {
        width: 99% !important;
    }

    @media(max-width:@screen-sm) {
        width: 98% !important;
        align-items: stretch !important;
        right: 0 !important;
        left: 0 !important;
        margin: 60px auto !important;
    }
}



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

    .k-textbox.k-input {
        border-radius: 0 4px 4px 0;
    }
}
// --- 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;
    }
}

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