// ============================================================
//   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-bg:        #fee2e2;

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

// ── Neutral Gray Scale ──
@color-white:            #ffffff;
@color-gray-50:          #f9fafb;
@color-gray-100:         #f3f4f6;
@color-gray-200:         #e5e7eb;
@color-gray-300:         #d1d5db;
@color-gray-400:         #9ca3af;
@color-gray-500:         #6b7280;
@color-gray-600:         #4b5563;
@color-gray-700:         #374151;
@color-gray-800:         #1f2937;
@color-gray-900:         #111827;
@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;

// ── Text ──
@color-text-primary:     #111827;
@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:           13px;
@font-size-lg:           15px;
@font-size-xl:           18px;
@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;


// ============================================================
//   GLOBAL BASE
// ============================================================

body {
    background:  #F8FAFC;
    font-family: @font-family-base;
}

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

// ============================================================
//   LAYOUT
// ============================================================
// ── MasterLayout wrapper ──
.app-layout {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    align-items: stretch;
}

.main-content {
    flex:       1;
    min-width:  0;
    overflow-x: hidden;
}

// ── 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-x: hidden;
}


// ============================================================
//   SIDEBAR
// ============================================================

.sidebar {
    position:   sticky;
    top:        0;
    align-self: flex-start;
    height:     100vh;
    width:      80px;
    min-width:  80px;
    max-width:  80px;
    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:        14px 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: center;
    padding:         10px 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:           60px;
    text-decoration: none;
    color:           inherit;
    position:        relative;
    gap:             4px;
    padding:         6px 0;
    background:      transparent;

    &:hover {
        background: transparent;

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

            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 {
    width:           46px;
    overflow:        hidden;
    display:         flex;
    align-items:     center;
    justify-content: center;

    .language-switcher.k-dropdownlist {
        width:      46px !important;
        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 !important;
            width:  20px !important;
            height: 14px !important;
        }

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


// ============================================================
//   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: 12px;
    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);

    &:focus-visible {
        outline: none;
        box-shadow: @shadow-focus-primary;
    }
    // ── Variants ──
    &--primary {
        background: @color-primary;
        color: @color-text-inverse;
        border-color: @color-primary;

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

        &.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;
               .k-icon.k-svg-icon.k-svg-i-caret-alt-down:after {
                  font-size: 16px;
               }
            }
        }

        &: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;
            }
        }
    }

    &--secondary {
        background: @color-white;
        color: @color-black;
        border-color: #D1DBE6;

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

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

        &: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: @color-danger;
        color: @color-text-inverse;
        border-color: @color-danger;

        &:hover {
            background: #b91c1c;
            border-color: #b91c1c;
            color: @color-text-inverse;
        }
    }
    // ── 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;
    }
}

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

// ── Page Header ──
.page-header {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    margin-bottom:   @space-5;
    flex-wrap:       wrap;
    gap:             @space-4;
}

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

.greeting-sub {
    font-size: 12px;
    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-md;
    background: #E8EEF4;
    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
// ============================================================

.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-base;
        font-weight: @font-weight-medium;
        color: @color-text-muted;
        margin: 0 0 @space-1;
    }

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

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

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

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

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

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

    .stat-card-footer {
        margin-top: auto;
    }
}


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

.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:    background @transition-fast, border-color @transition-fast;

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

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

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

    &: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 28px 10px;
    flex:           1;
    min-width:      0;
}

.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-medium;
    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 #8A8FA9;
    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;

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

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


// ============================================================
//   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:     wrap;
    border-bottom: 2px solid @color-gray-100;
}

.nd-status-tab {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         8px 16px;
    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;

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

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

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

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

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

    &__body {}

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

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

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

    &__icon {
        width:           40px;
        height:          40px;
        display:         flex;
        align-items:     center;
        justify-content: center;
        font-size:       22px;
        color:           @color-gray-700;
        flex-shrink:     0;
    }
}

// ── Toolbar ──
.nd-toolbar {
    display:       flex;
    align-items:   center;
    gap:           @space-3;
    margin-bottom: @space-5;
    flex-wrap:     wrap;
    justify-content: space-between;
}

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

.nd-filter-count-badge {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       18px;
    height:          18px;
    padding:         0 4px;
    border-radius:   @radius-full;
    background:      @color-primary;
    color:           @color-white;
    font-size:       10px;
    font-weight:     @font-weight-bold;
}

// ── Filter Popup ──
.nd-filter-pop {
    position:      absolute;
    top:           calc(100% + 6px);
    left:          0;
    z-index:       500;
    width:         500px;
    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:     220px;
    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;
}

.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;
    align-items:           center;
    gap:                   @space-4;
    padding:               @space-4 @space-7;
}

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

.nd-list-header-col {
    font-size:      @font-size-xs;
    font-weight:    @font-weight-bold;
    text-transform: uppercase;
    color:          @color-text-muted;
    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-md;
    font-weight:   @font-weight-semibold;
    color:         @color-text-primary;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.nd-row-secondary {
    display:       flex;
    align-items:   center;
    gap:           3px;
    font-size:     @font-size-sm;
    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-md;
    font-weight: @font-weight-bold;
    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;
    gap:           4px;
    padding:       3px 10px;
    border-radius: @radius-full;
    font-size:     10px;
    font-weight:   @font-weight-semibold;
    background:    @color-gray-100;
    color:         @color-text-secondary;
    white-space:   nowrap;

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

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

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

    // Hide first / last page jump buttons
    .k-pager-first,
    .k-pager-last { display: none; }

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

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

        .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-md;
            font-weight:   @font-weight-normal;
            border-radius: @radius-full;
            padding:       0 6px;

            &:hover { background: @color-gray-100 !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-lg;
                min-width:     28px;
                height:        28px;
                padding:       0;
                display:       inline-flex;
                align-items:   center;
                justify-content: center;
            }
        }

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

    .k-column-title {
        font-size: 12px;
        text-transform: uppercase;
    }
}

.k-grid-header {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background: #F9FAFA;
    th.k-header,
    th {
        padding-top: 7px !important;
        padding-bottom: 9px !important;
    }
}

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

// ============================================================
//   RESPONSIVE
// ============================================================

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

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

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

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

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

@media (max-width: 900px) {
    // 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-header-row,
    .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;
    }
}

@media (max-width: 576px) {
    .nd-list-wrap {
        height:     calc(100vh - 460px);
        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 #f0f0f0;
    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 #e9ecef;
}

.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 #d1d5db;
    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: #9ca3af;
}

.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: 300px;
}

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

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

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

/* Label chips inside filter popup */
.nd-filter-label {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    background: #f8fafc;
    border: 1px solid #e9ecef;
    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 #e5e7eb;
    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 #ddd;
    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: 260px;
    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;
}

/***********
    Default form style
    ************/
.form-control {
    border-radius: 8px;
    height: 40px;
}
.listing-card {
    border-radius: 8px;
    margin-bottom: 5px;
    padding: 15px;
    border: 1px solid #ECECEC;
    transition: 0.5s ease all;
}
.custom-pop {
    border-radius: 8px;
}

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