/* ============================================================
   MarsX Charger — Operator Dashboard
   Design System: https://design-token.marsxthings.com/
   Version 1.1 — Orange Primary × Navy Secondary
   Font: Noto Sans Thai
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
    /* ─── Color Tokens: Primary (Orange #FD853A) ─── */
    --color-primary-50:  #FFF4EC;
    --color-primary-100: #FFE4D0;
    --color-primary-200: #FFD0AE;
    --color-primary-300: #FFBB8B;
    --color-primary-400: #FDA963;
    --color-primary-500: #FD853A;
    --color-primary-600: #E5702A;
    --color-primary-700: #C45B1C;
    --color-primary-800: #A24812;
    --color-primary-900: #73320B;
    --color-primary-950: #451D05;

    /* ─── Color Tokens: Secondary (Navy Blue) ─── */
    --color-secondary-50:  #E8EDF5;
    --color-secondary-100: #C5D1E6;
    --color-secondary-200: #9FB3D5;
    --color-secondary-300: #7894C3;
    --color-secondary-400: #5A7DB6;
    --color-secondary-500: #3D66A9;
    --color-secondary-600: #2E5291;
    --color-secondary-700: #1E3F78;
    --color-secondary-800: #1A3668;
    --color-secondary-900: #122650;
    --color-secondary-950: #0B1A38;

    /* ─── Color Tokens: Neutral ─── */
    --color-neutral-0:   #FFFFFF;
    --color-neutral-50:  #F8F9FA;
    --color-neutral-100: #F1F3F5;
    --color-neutral-200: #E9ECEF;
    --color-neutral-300: #DEE2E6;
    --color-neutral-400: #CED4DA;
    --color-neutral-500: #ADB5BD;
    --color-neutral-600: #868E96;
    --color-neutral-700: #495057;
    --color-neutral-800: #343A40;
    --color-neutral-900: #212529;
    --color-neutral-950: #0D1117;

    /* ─── Color Tokens: Semantic ─── */
    --color-success-light: #D3F9D8;
    --color-success:       #2B8A3E;
    --color-success-dark:  #1B5E27;
    --color-warning-light: #FFF3BF;
    --color-warning:       #E67700;
    --color-warning-dark:  #B35C00;
    --color-error-light:   #FFE3E3;
    --color-error:         #C92A2A;
    --color-error-dark:    #8C1D1D;
    --color-info-light:    #D0EBFF;
    --color-info:          #1971C2;
    --color-info-dark:     #0F4F8B;

    /* ─── Typography ─── */
    --font-family:           'Noto Sans Thai', sans-serif;
    --font-size-xs:          0.75rem;
    --font-size-sm:          0.875rem;
    --font-size-base:        1rem;
    --font-size-md:          1.125rem;
    --font-size-lg:          1.25rem;
    --font-size-xl:          1.5rem;
    --font-size-2xl:         1.875rem;
    --font-size-3xl:         2.25rem;
    --font-weight-regular:   400;
    --font-weight-medium:    500;
    --font-weight-semibold:  600;
    --font-weight-bold:      700;
    --line-height-tight:     1.25;
    --line-height-normal:    1.5;
    --line-height-relaxed:   1.625;

    /* ─── Spacing ─── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* ─── Border Radius ─── */
    --radius-none: 0;
    --radius-sm:   0.25rem;
    --radius-md:   0.5rem;
    --radius-lg:   0.75rem;
    --radius-xl:   1rem;
    --radius-2xl:  1.5rem;
    --radius-full: 9999px;

    /* ─── Shadows ─── */
    --shadow-xs:    0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm:    0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md:    0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-lg:    0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
    --shadow-xl:    0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);
    --shadow-inner: inset 0 2px 4px rgba(0,0,0,0.06);

    /* ─── Transitions ─── */
    --transition-fast:   150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow:   400ms ease;

    /* ─── Z-Index ─── */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-tooltip:  600;

    /* ─── Backward-compat aliases (components using old --primary-* names) ─── */
    --primary-50:  var(--color-primary-50);
    --primary-100: var(--color-primary-100);
    --primary-200: var(--color-primary-200);
    --primary-300: var(--color-primary-300);
    --primary-400: var(--color-primary-400);
    --primary-500: var(--color-primary-500);
    --primary-600: var(--color-primary-600);
    --primary-700: var(--color-primary-700);
    --primary-800: var(--color-primary-800);
    --primary-900: var(--color-primary-900);

    --secondary-50:  var(--color-secondary-50);
    --secondary-100: var(--color-secondary-100);
    --secondary-200: var(--color-secondary-200);
    --secondary-300: var(--color-secondary-300);
    --secondary-400: var(--color-secondary-400);
    --secondary-500: var(--color-secondary-500);
    --secondary-600: var(--color-secondary-600);
    --secondary-700: var(--color-secondary-700);
    --secondary-800: var(--color-secondary-800);
    --secondary-900: var(--color-secondary-900);
    --secondary-950: var(--color-secondary-950);

    --neutral-0:   var(--color-neutral-0);
    --neutral-50:  var(--color-neutral-50);
    --neutral-100: var(--color-neutral-100);
    --neutral-200: var(--color-neutral-200);
    --neutral-300: var(--color-neutral-300);
    --neutral-400: var(--color-neutral-400);
    --neutral-500: var(--color-neutral-500);
    --neutral-600: var(--color-neutral-600);
    --neutral-700: var(--color-neutral-700);
    --neutral-800: var(--color-neutral-800);
    --neutral-900: var(--color-neutral-900);
    --neutral-950: var(--color-neutral-950);

    --success:       var(--color-success);
    --success-light: var(--color-success-light);
    --warning:       var(--color-warning);
    --warning-light: var(--color-warning-light);
    --error:         var(--color-error);
    --error-light:   var(--color-error-light);
    --info:          var(--color-info);
    --info-light:    var(--color-info-light);

    /* ─── Layout semantic vars ─── */
    --font:         var(--font-family);
    --sidebar-w:    256px;
    --topbar-h:     56px;
    --content-bg:   var(--color-neutral-50);
    --card-bg:      var(--color-neutral-0);
    --card-border:  var(--color-neutral-200);

    /* ─── Bootstrap 5 variable overrides — maps design tokens to Bootstrap ─── */
    --bs-primary:              #FD853A;
    --bs-primary-rgb:          253, 133, 58;
    --bs-secondary:            #1E3F78;
    --bs-secondary-rgb:        30, 63, 120;
    --bs-success:              #2B8A3E;
    --bs-success-rgb:          43, 138, 62;
    --bs-danger:               #C92A2A;
    --bs-danger-rgb:           201, 42, 42;
    --bs-warning:              #E67700;
    --bs-warning-rgb:          230, 119, 0;
    --bs-info:                 #1971C2;
    --bs-info-rgb:             25, 113, 194;
    --bs-font-sans-serif:      'Noto Sans Thai', system-ui, sans-serif;
    --bs-body-font-family:     'Noto Sans Thai', system-ui, sans-serif;
    --bs-body-font-size:       0.9375rem;
    --bs-body-color:           #212529;
    --bs-body-bg:              #F8F9FA;
    --bs-border-color:         #DEE2E6;
    --bs-border-radius:        0.5rem;
    --bs-border-radius-sm:     0.25rem;
    --bs-border-radius-lg:     0.75rem;
    --bs-border-radius-xl:     1rem;
    --bs-link-color:           #3D66A9;
    --bs-link-hover-color:     #E5702A;
    --bs-link-color-rgb:       61, 102, 169;
    --bs-link-hover-color-rgb: 229, 112, 42;
    /* Bootstrap form focus ring — matches our orange */
    --bs-focus-ring-color:     rgba(253, 133, 58, 0.25);
    /* Bootstrap button base */
    --bs-btn-font-family:      'Noto Sans Thai', system-ui, sans-serif;
    --bs-btn-font-size:        0.9375rem;
    --bs-btn-font-weight:      600;
    --bs-btn-border-radius:    0.5rem;
    /* Bootstrap table */
    --bs-table-bg:             transparent;
    --bs-table-striped-bg:     rgba(253, 133, 58, 0.03);
    --bs-table-hover-bg:       rgba(253, 133, 58, 0.06);
    /* Bootstrap card */
    --bs-card-border-radius:   0.75rem;
    --bs-card-border-color:    #E9ECEF;
    /* Bootstrap input */
    --bs-form-control-border-radius: 0.5rem;
}

/* ============================================================
   Reset & Base
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: var(--color-neutral-900);
    background: var(--content-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html, body, #app { font-family: var(--font-family); }

a {
    color: var(--color-secondary-500);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover { color: var(--color-primary-600); }

/* ============================================================
   Layout
   ============================================================ */
.citrine-layout {
    display: flex;
    min-height: 100vh;
}

.citrine-sidebar {
    width: var(--sidebar-w);
    background: linear-gradient(180deg, var(--color-secondary-950) 0%, var(--color-secondary-900) 100%);
    border-right: 1px solid var(--color-secondary-900);
    position: fixed; top: 0; left: 0; height: 100vh;
    display: flex; flex-direction: column;
    z-index: var(--z-sticky);
    box-shadow: 2px 0 16px rgba(0,0,0,0.18);
    overflow: hidden;
}

.citrine-main {
    margin-left: var(--sidebar-w);
    flex: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.citrine-content {
    padding: var(--space-8);
    max-width: 1400px;
    flex: 1;
}

/* ============================================================
   Top Bar
   ============================================================ */
.citrine-topbar {
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-6);
    background: var(--card-bg);
    border-bottom: 1px solid var(--card-border);
    position: sticky;
    top: 0;
    z-index: var(--z-dropdown);
    box-shadow: var(--shadow-xs);
    flex-shrink: 0;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-left: auto;  /* pushes right side content to the right */
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-600);
}

.topbar-tenant {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
}

.topbar-tenant select {
    width: auto;
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    border-radius: var(--radius-sm);
}

/* ============================================================
   Sidebar
   ============================================================ */
.sidebar-logo {
    padding: var(--space-4) var(--space-5);
    display: flex; align-items: center; gap: var(--space-3);
    border-bottom: 1px solid rgba(253, 133, 58, 0.12);
    min-height: var(--topbar-h);
    flex-shrink: 0;
}

.logo-icon {
    font-size: 1.375rem;
    line-height: 1;
    filter: drop-shadow(0 0 8px rgba(253,133,58,0.5));
}

.logo-text {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-0);
    letter-spacing: -0.02em;
    line-height: 1;
}

.logo-accent { color: var(--color-primary-400); }

.sidebar-nav {
    flex: 1;
    min-height: 0;          /* critical: lets flex child shrink so scroll works */
    padding: var(--space-2) var(--space-2);
    display: flex; flex-direction: column; gap: 6px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(253,133,58,0.25) transparent;
}

.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); border-radius: var(--radius-full); }
.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(253,133,58,0.3);
    border-radius: var(--radius-full);
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(253,133,58,0.5);
}

.nav-group {
    font-size: 0.9375rem;        /* 15px — section header, readable Thai */
    font-weight: var(--font-weight-bold);
    color: rgba(159, 179, 213, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: var(--space-4) var(--space-3) var(--space-2);
    margin-top: var(--space-1);
    cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
    -webkit-user-select: none;
    user-select: none;
    transition: color var(--transition-fast);
    border-radius: var(--radius-md);
    line-height: 1.4;            /* better Thai line height */
}
.nav-group:hover { color: rgba(159, 179, 213, 0.85); background: rgba(255,255,255,0.03); }
.nav-arrow { font-size: 0.75rem; }

.sidebar-item {
    display: flex; align-items: center; gap: var(--space-3);
    padding: 0.75rem var(--space-3);     /* comfortable vertical spacing for Thai */
    border-radius: var(--radius-md);
    color: var(--color-secondary-200);
    font-size: 1rem;                     /* 16px — sidebar item standard */
    font-weight: var(--font-weight-regular);
    line-height: 1.4;
    transition: all var(--transition-fast);
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
    border-left: 3px solid transparent;
}

.sidebar-item:hover {
    background: rgba(253, 133, 58, 0.08);
    color: var(--color-neutral-0);
    border-left-color: rgba(253,133,58,0.25);
    text-decoration: none !important;
}

.sidebar-item.active {
    background: rgba(253, 133, 58, 0.13);
    color: var(--color-primary-400);
    font-weight: var(--font-weight-semibold);
    border-left-color: var(--color-primary-500);
}

.sidebar-icon {
    font-size: 1.25rem;          /* 20px — Tabler Icons sized via font-size */
    width: 22px;
    text-align: center;
    flex-shrink: 0;
    line-height: 1;
    color: inherit;              /* let parent control color */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sidebar-icon i { display: block; line-height: 1; }
.nav-arrow i { font-size: 1rem; line-height: 1; }

/* Tabler-style icon polish for inline use in headings/buttons */
.ti { vertical-align: -0.125em; }

.sidebar-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-footer {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}

.sidebar-version {
    color: var(--color-secondary-400);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    text-align: center;
    margin-top: var(--space-2);
}

.lang-btn {
    background: transparent;
    border: 1px solid rgba(253,133,58,0.2);
    color: var(--color-secondary-200);
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family);
    transition: all var(--transition-fast);
}
.lang-btn:hover { border-color: rgba(253,133,58,0.5); color: white; }
.lang-btn.active {
    background: rgba(253,133,58,0.15);
    border-color: var(--color-primary-500);
    color: var(--color-primary-400);
}

/* ============================================================
   Cards
   ============================================================ */
.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-4);
}

.card-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-500);
    margin-bottom: var(--space-1);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.card-value {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-900);
    line-height: var(--line-height-tight);
}

.card-sub {
    font-size: var(--font-size-xs);
    color: var(--color-neutral-500);
    margin-top: var(--space-1);
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

/* ============================================================
   Tables
   ============================================================ */
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.data-table th {
    background: var(--color-secondary-700);
    color: var(--color-neutral-0);
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
    white-space: nowrap;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.data-table th:first-child { border-top-left-radius: calc(var(--radius-lg) - 1px); }
.data-table th:last-child  { border-top-right-radius: calc(var(--radius-lg) - 1px); }

.data-table td {
    padding: 0.5625rem var(--space-4);
    font-size: var(--font-size-sm);
    white-space: nowrap;
    border-bottom: 1px solid var(--color-neutral-100);
    color: var(--color-neutral-800);
}

.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--color-primary-50); }

/* ============================================================
   Badges
   ============================================================ */
.badge {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: 0.1875rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    white-space: nowrap;
}

.badge.online, .badge.success     { background: var(--color-success-light); color: var(--color-success); }
.badge.offline, .badge.destructive { background: var(--color-error-light);   color: var(--color-error); }
.badge.warning                     { background: var(--color-warning-light); color: var(--color-warning); }
.badge.primary                     { background: var(--color-primary-100);   color: var(--color-primary-800); }
.badge.info                        { background: var(--color-info-light);    color: var(--color-info); }
.badge.muted                       { background: var(--color-neutral-100);   color: var(--color-neutral-600); }

/* ============================================================
   Buttons
   ============================================================ */
/* ── Custom button base (our .primary / .small / .secondary classes) ─────── */
/* Scope to NOT override Bootstrap's .btn-* classes so they work independently */
button:not([class*="btn-"]):not(.lang-btn),
.btn:not([class*="btn-"]) {
    font-family: var(--font-family);
    font-size: 0.9375rem;
    cursor: pointer;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-4);
    font-weight: var(--font-weight-semibold);
    transition: all var(--transition-fast);
    display: inline-flex; align-items: center; gap: var(--space-2);
    background: var(--color-neutral-100);
    color: var(--color-neutral-700);
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none;
}

button:not([class*="btn-"]):not(.lang-btn):hover {
    background: var(--color-neutral-200);
    border-color: var(--color-neutral-300);
}
button:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* Ensure Bootstrap buttons still get our font */
.btn { font-family: var(--font-family); }

button.primary, .btn.primary {
    background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
    color: var(--color-neutral-0);
    border-color: var(--color-primary-600);
    box-shadow: 0 2px 6px rgba(253, 133, 58, 0.3);
}
button.primary:hover, .btn.primary:hover {
    background: linear-gradient(135deg, var(--color-primary-400) 0%, var(--color-primary-500) 100%);
    box-shadow: 0 4px 12px rgba(253, 133, 58, 0.4);
    transform: translateY(-1px);
    border-color: var(--color-primary-500);
}

button.secondary, .btn.secondary {
    background: var(--color-secondary-600);
    color: var(--color-neutral-0);
    border-color: var(--color-secondary-700);
}
button.secondary:hover { background: var(--color-secondary-700); }

button.small, .btn.small {
    padding: 0.25rem var(--space-3);
    font-size: var(--font-size-xs);
    border-radius: var(--radius-sm);
    background: var(--color-secondary-50);
    color: var(--color-secondary-600);
    border-color: var(--color-secondary-100);
    font-weight: var(--font-weight-medium);
}
button.small:hover { background: var(--color-secondary-100); border-color: var(--color-secondary-200); }
button.small.danger { background: var(--color-error-light); color: var(--color-error); border-color: #ffd0d0; }
button.small.danger:hover { background: #ffc8c8; }

/* Bootstrap primary button — themed to our orange CI */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-primary-500);
    --bs-btn-border-color: var(--color-primary-600);
    --bs-btn-hover-bg: var(--color-primary-600);
    --bs-btn-hover-border-color: var(--color-primary-700);
    --bs-btn-active-bg: var(--color-primary-700);
    --bs-btn-focus-shadow-rgb: 253, 133, 58;
}
.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-secondary-600);
    --bs-btn-border-color: var(--color-secondary-700);
    --bs-btn-hover-bg: var(--color-secondary-700);
    --bs-btn-hover-border-color: var(--color-secondary-800);
}
.btn-outline-primary {
    --bs-btn-color: var(--color-primary-600);
    --bs-btn-border-color: var(--color-primary-500);
    --bs-btn-hover-bg: var(--color-primary-500);
    --bs-btn-hover-border-color: var(--color-primary-500);
    --bs-btn-hover-color: #fff;
}

button.login-btn    { background: var(--color-success);      color: white; border-color: var(--color-success-dark); }
button.register-btn { background: var(--color-secondary-500); color: white; border-color: var(--color-secondary-600); }

/* ============================================================
   Forms
   ============================================================ */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
    background: var(--color-neutral-0);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-size: 0.9375rem;
    color: var(--color-neutral-900);
    font-family: var(--font-family);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: var(--shadow-xs);
    width: 100%;
    line-height: 1.5;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px rgba(253, 133, 58, 0.15);
}

input::placeholder { color: var(--color-neutral-400); }

label {
    font-size: var(--font-size-sm);  /* was xs — bigger for Thai */
    color: var(--color-neutral-600);
    font-weight: var(--font-weight-semibold);
    display: block;
    margin-bottom: var(--space-1);
    letter-spacing: 0.01em;
}

/* Bootstrap form-control themed to CI ─────────────────────────── */
.form-control, .form-select {
    font-family: var(--font-family);
    font-size: 0.9375rem;
    border-color: var(--color-neutral-300);
    border-radius: var(--radius-md);
    color: var(--color-neutral-900);
}
.form-control:focus, .form-select:focus {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 0.25rem rgba(253, 133, 58, 0.2);
}
.form-label {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-600);
}

/* Bootstrap table themed ─────────────────────────────────────── */
.table {
    font-family: var(--font-family);
    font-size: 0.9375rem;
}
.table thead th {
    background-color: var(--color-secondary-700);
    color: var(--color-neutral-0);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    border-color: var(--color-secondary-800);
}
.table-hover > tbody > tr:hover > * { background-color: var(--color-primary-50); }

/* Bootstrap card themed ─────────────────────────────────────── */
.card { border-color: var(--card-border); border-radius: var(--radius-lg); }
.card-header { background-color: var(--color-neutral-50); font-weight: var(--font-weight-semibold); }

/* Bootstrap badge overrides ─────────────────────────────────── */
.badge {
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

/* ============================================================
   Code
   ============================================================ */
code {
    background: var(--color-secondary-50);
    color: var(--color-secondary-700);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
}

/* ============================================================
   Page Typography
   ============================================================ */
.page h1 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-secondary-950);
    margin-bottom: var(--space-1);
    letter-spacing: -0.02em;
    line-height: var(--line-height-tight);
}

.page h2 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-secondary-800);
    margin: var(--space-6) 0 var(--space-3);
}

.page h3 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-secondary-800);
    margin: var(--space-5) 0 var(--space-3);
}

.subtitle {
    color: var(--color-neutral-500);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-6);
    line-height: var(--line-height-relaxed);
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
    gap: var(--space-4);
}

.form-row {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: center;
    margin: var(--space-3) 0;
}

.error   { color: var(--color-error);   font-size: var(--font-size-sm); margin-top: var(--space-2); }
.success { color: var(--color-success); font-size: var(--font-size-sm); margin-top: var(--space-2); }

.highlight { background: var(--color-primary-50) !important; transition: background 1s; }

.links { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }
.links a {
    color: var(--color-secondary-600);
    padding: var(--space-2) var(--space-4);
    background: var(--color-secondary-50);
    border: 1px solid var(--color-secondary-100);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-fast);
}
.links a:hover {
    background: var(--color-secondary-100);
    text-decoration: none;
    border-color: var(--color-secondary-200);
}

/* ============================================================
   Dark Theme
   Scoped via .citrine-layout.dark — toggled by ThemeService
   ============================================================ */
.citrine-layout.dark {
    --content-bg:          #0D1117;
    --card-bg:             #161B22;
    --card-border:         #30363D;
    --color-neutral-100:   #21262D;
    --color-neutral-200:   #30363D;
    --color-neutral-300:   #484F58;
    --color-neutral-500:   #7D8590;
    --color-neutral-600:   #8D96A0;
    --color-neutral-700:   #B1BAC4;
    --color-neutral-800:   #C9D1D9;
    --color-neutral-900:   #E6EDF3;
}

.citrine-layout.dark,
.citrine-layout.dark .citrine-content { background: var(--content-bg); color: var(--color-neutral-900); }

.citrine-layout.dark .citrine-topbar {
    background: var(--card-bg);
    border-bottom-color: var(--card-border);
}

.citrine-layout.dark .card {
    background: var(--card-bg);
    border-color: var(--card-border);
    color: var(--color-neutral-900);
}

.citrine-layout.dark .data-table {
    background: var(--card-bg);
    border-color: var(--card-border);
}
.citrine-layout.dark .data-table th { background: #1C2128; color: var(--color-neutral-700); }
.citrine-layout.dark .data-table td { border-bottom-color: var(--card-border); color: var(--color-neutral-700); }
.citrine-layout.dark .data-table tr:hover td { background: #1C2128; }

.citrine-layout.dark input,
.citrine-layout.dark select,
.citrine-layout.dark textarea {
    background: var(--card-bg);
    color: var(--color-neutral-900);
    border-color: var(--card-border);
}

.citrine-layout.dark button:not(.primary):not(.secondary):not(.login-btn):not(.register-btn) {
    background: var(--color-neutral-100);
    color: var(--color-neutral-900);
    border-color: var(--card-border);
}

.citrine-layout.dark h1,
.citrine-layout.dark h2,
.citrine-layout.dark h3 { color: var(--color-neutral-900); }

.citrine-layout.dark .page h1 { color: var(--color-neutral-900); }
.citrine-layout.dark .subtitle { color: var(--color-neutral-500); }
.citrine-layout.dark a:not(.sidebar-item):not(.btn) { color: #58A6FF; }

/* ============================================================
   Hamburger button (mobile sidebar toggle)
   ============================================================ */
.hamburger-btn {
    display: none;
    background: transparent;
    border: none;
    padding: var(--space-2);
    cursor: pointer;
    color: var(--color-neutral-700);
    border-radius: var(--radius-md);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px; height: 40px;
    flex-shrink: 0;
    transition: background var(--transition-fast);
}
.hamburger-btn:hover { background: var(--color-neutral-100); }
.hamburger-btn span {
    display: block;
    width: 20px; height: 2px;
    background: var(--color-neutral-700);
    border-radius: 2px;
    transition: all var(--transition-fast);
}

/* Sidebar overlay (mobile) */
.sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(11, 26, 56, 0.5);
    z-index: calc(var(--z-sticky) - 1);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity var(--transition-normal);
}
.sidebar-overlay.visible { display: block; opacity: 1; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 992px) {
    /* Collapse stat grid earlier */
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    /* Sidebar hidden off-screen; toggled via .open class */
    .citrine-sidebar {
        transform: translateX(-100%);
        transition: transform var(--transition-normal);
        z-index: var(--z-modal);
    }
    .citrine-sidebar.open { transform: translateX(0); }

    .citrine-main { margin-left: 0; }

    .stat-grid { grid-template-columns: 1fr 1fr; }
    .citrine-content { padding: var(--space-4); }
    .citrine-topbar { padding: 0 var(--space-3); gap: var(--space-2); }

    /* Show hamburger on mobile */
    .hamburger-btn { display: flex; }

    /* Table horizontal scroll on small screens */
    .data-table-wrapper { overflow-x: auto; }
    .data-table { min-width: 600px; }

    /* Stack page header on mobile */
    .page-header { flex-direction: column; align-items: stretch; }
    .page-header > * { width: 100%; }
}

@media (max-width: 480px) {
    .stat-grid { grid-template-columns: 1fr; }
    .citrine-content { padding: var(--space-3); }
    .topbar-user .badge { display: none; }
    .topbar-tenant span:first-child { display: none; }
}

/* ============================================================
   Blazor Overrides
   ============================================================ */
.top-row, .navbar, .nav-scrollable { all: unset; }

#blazor-error-ui {
    background: var(--color-error);
    color: white;
    padding: var(--space-2) var(--space-4);
    text-align: center;
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: var(--z-modal);
    font-size: var(--font-size-sm);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
}

.valid.modified:not([type=checkbox]) { outline: none; }
.invalid { outline: 2px solid var(--color-error); outline-offset: 1px; border-radius: var(--radius-sm); }

/* ============================================================
   Tabler-inspired polish (Phase 2, Option A)
   Lightweight refinements that keep our tokens; no Tabler bundle.
   ============================================================ */

/* Cards — flatter, crisper border, lift on hover */
.card {
    border: 1px solid #e6e7e9;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.card:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06); }
.card-header {
    border-bottom: 1px solid #e6e7e9;
    background: var(--color-neutral-50);
}

/* Buttons — flatter, no gradient, Tabler-style 4px radius and weights */
button.primary, .btn.primary, .btn-primary {
    background: var(--color-primary-500) !important;
    background-image: none !important;
    border-color: var(--color-primary-500) !important;
    box-shadow: none !important;
    border-radius: 0.25rem;
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
button.primary:hover, .btn.primary:hover, .btn-primary:hover {
    background: var(--color-primary-600) !important;
    background-image: none !important;
    border-color: var(--color-primary-600) !important;
    transform: none;
}

button:not([class*="btn-"]):not(.lang-btn),
.btn:not([class*="btn-"]) {
    border-radius: 0.25rem;
    border-color: var(--color-neutral-300);
    background: var(--color-neutral-0);
    color: var(--color-neutral-800);
    font-weight: 500;
    box-shadow: none;
}
button:not([class*="btn-"]):not(.lang-btn):hover {
    background: var(--color-neutral-50);
    border-color: var(--color-neutral-400);
}

/* Tables — borderless rows with subtle dividers, hover highlight */
.data-table th {
    background: var(--color-neutral-50);
    color: var(--color-neutral-700);
    border-bottom: 1px solid #e6e7e9;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
}
.data-table td {
    padding: 0.75rem var(--space-4);
    border-bottom: 1px solid #f1f3f5;
    color: var(--color-neutral-800);
}
.data-table tr:hover td { background: rgba(253, 133, 58, 0.04); }
.table thead th {
    background-color: var(--color-neutral-50);
    color: var(--color-neutral-700);
    border-bottom: 1px solid #e6e7e9;
    border-color: #e6e7e9;
}
.table > :not(caption) > * > * { padding: 0.75rem 1rem; }

/* Inputs — 4px radius, orange focus ring */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
select,
textarea,
.form-control,
.form-select {
    border-radius: 0.25rem;
    border-color: #d6d8da;
    box-shadow: none;
}
input:focus, select:focus, textarea:focus,
.form-control:focus, .form-select:focus {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px rgba(253, 133, 58, 0.18);
}

/* Sidebar — flatter background (no gradient), cleaner hover */
.citrine-sidebar {
    background: var(--color-secondary-950);
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.12);
}
.sidebar-item:hover {
    background: rgba(253, 133, 58, 0.10);
    border-left-color: rgba(253, 133, 58, 0.35);
}
.sidebar-item.active {
    background: rgba(253, 133, 58, 0.15);
}

/* Inline icon spacing helpers (used in headings/buttons) */
.ti-inline { vertical-align: -0.125em; margin-right: 0.35em; }

/* ─── Sidebar sub-item (indented child link) ──────────────────────
   Used by Wallet > Topups + Wallet > Reservations to show they're
   children of the parent /wallet page. */
.sidebar-item.sidebar-sub {
    padding-left: 2.5rem;
    font-size: 0.85rem;
    opacity: 0.85;
}
.sidebar-item.sidebar-sub .sidebar-icon {
    font-size: 0.95rem;
    width: 1.1rem;
}
.sidebar-item.sidebar-sub.active {
    opacity: 1;
}