/*
 * ════════════════════════════════════════════════════════════════════════════
 *  GEMBA HOTEL & RESORT — ADMIN DESIGN SYSTEM
 * ════════════════════════════════════════════════════════════════════════════
 *  Loaded AFTER theme.min.css to override the Duralux defaults so the admin
 *  panel matches the Gemba Hotel & Resort guest-facing design language.
 *
 *  Layers:
 *   1. Font imports (Marcellus + Satoshi)
 *   2. Brand & semantic CSS variables (light + dark)
 *   3. Base body / typography reset
 *   4. Bootstrap class overrides (.btn, .card, .badge, .table, .form-*, ...)
 *   5. Duralux sidebar / header overrides
 *   6. Gemba utility components (.gemba-*  classes used by <x-*> Blade comps)
 * ════════════════════════════════════════════════════════════════════════════
 */

/* ──────────────────────────────────────────────────────────────────────────
   1. FONTS
   ────────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700,900&display=swap');

/* ──────────────────────────────────────────────────────────────────────────
   2. CSS VARIABLES
   ────────────────────────────────────────────────────────────────────────── */
:root {
    /* ── Brand tokens ─────────────────────────────────────────────────── */
    --emerald-green:  oklch(0.37 0.16 142);    /* #046307 */
    --champagne-gold: oklch(0.73 0.15 87);     /* #D4AF37 */
    --warm-sand:      oklch(0.88 0.03 80);     /* #E4D9C4 */
    --off-white:      oklch(0.98 0.01 80);     /* #faf7f2 */
    --sunset-coral:   oklch(0.67 0.19 26);     /* #ff6f61 */

    /* ── Semantic tokens (light mode) ─────────────────────────────────── */
    --background: oklch(0.98 0.01 80);
    --foreground: oklch(0.18 0.03 145);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.18 0.03 145);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.18 0.03 145);
    --primary: oklch(0.37 0.16 142);
    --primary-foreground: oklch(0.98 0.01 80);
    --secondary: oklch(0.73 0.15 87);
    --secondary-foreground: oklch(0.18 0.03 87);
    --muted: oklch(0.88 0.03 80);
    --muted-foreground: oklch(0.5 0.03 80);
    --accent: oklch(0.73 0.15 87);
    --accent-foreground: oklch(0.18 0.03 87);
    --destructive: oklch(0.67 0.19 26);
    --border: oklch(0.88 0.03 80);
    --input: oklch(0.88 0.03 80);
    --ring: oklch(0.37 0.16 142);

    /* ── Sidebar tokens ───────────────────────────────────────────────── */
    --sidebar: oklch(0.95 0.02 80);
    --sidebar-foreground: oklch(0.18 0.03 145);
    --sidebar-primary: oklch(0.37 0.16 142);
    --sidebar-primary-foreground: oklch(0.98 0.01 80);
    --sidebar-accent: oklch(0.88 0.03 80);
    --sidebar-accent-foreground: oklch(0.18 0.03 87);
    --sidebar-border: oklch(0.84 0.03 80);

    /* ── Chart tokens ─────────────────────────────────────────────────── */
    --chart-1: oklch(0.37 0.16 142);
    --chart-2: oklch(0.73 0.15 87);
    --chart-3: oklch(0.67 0.19 26);
    --chart-4: oklch(0.55 0.10 142);
    --chart-5: oklch(0.88 0.03 80);

    /* ── Radius scale ─────────────────────────────────────────────────── */
    --radius: 0.45rem;
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --radius-2xl: calc(var(--radius) + 8px);
    --radius-3xl: calc(var(--radius) + 12px);
    --radius-4xl: calc(var(--radius) + 16px);

    /* ── Legacy aliases (keep old templates working) ──────────────────── */
    --hms-primary: #046307;
    --hms-primary-light: #0a7a14;
    --hms-primary-dark: #034a05;
    --hms-primary-darker: #023504;
    --hms-gold: #D4AF37;
    --hms-gold-light: #e0c156;
    --hms-gold-dark: #a68829;
    --hms-cream: #faf7f2;
}

.dark {
    --background: oklch(0.17 0.02 145);
    --foreground: oklch(0.95 0.01 80);
    --card: oklch(0.22 0.02 145);
    --card-foreground: oklch(0.95 0.01 80);
    --popover: oklch(0.22 0.02 145);
    --popover-foreground: oklch(0.95 0.01 80);
    --primary: oklch(0.56 0.16 142);
    --primary-foreground: oklch(0.17 0.02 145);
    --secondary: oklch(0.73 0.15 87);
    --secondary-foreground: oklch(0.17 0.02 87);
    --muted: oklch(0.27 0.02 145);
    --muted-foreground: oklch(0.65 0.03 80);
    --accent: oklch(0.32 0.05 87);
    --accent-foreground: oklch(0.95 0.01 80);
    --destructive: oklch(0.67 0.19 26);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.56 0.16 142);
    --sidebar: oklch(0.22 0.02 145);
    --sidebar-foreground: oklch(0.95 0.01 80);
    --sidebar-primary: oklch(0.56 0.16 142);
    --sidebar-primary-foreground: oklch(0.95 0.01 80);
    --sidebar-accent: oklch(0.27 0.02 145);
    --sidebar-accent-foreground: oklch(0.95 0.01 80);
    --sidebar-border: oklch(1 0 0 / 10%);
    --chart-1: oklch(0.56 0.16 142);
    --chart-2: oklch(0.73 0.15 87);
    --chart-3: oklch(0.67 0.19 26);
    --chart-4: oklch(0.45 0.10 142);
    --chart-5: oklch(0.88 0.03 80);
}

/* ──────────────────────────────────────────────────────────────────────────
   2b. DARK MODE — Bootstrap utility class fixes
   These override hardcoded colors that won't pick up CSS variables.
   ────────────────────────────────────────────────────────────────────────── */
.dark body { background: var(--background) !important; color: var(--foreground) !important; }

.dark .text-dark        { color: var(--foreground) !important; }
.dark .text-muted       { color: var(--muted-foreground) !important; }
.dark .text-black       { color: var(--foreground) !important; }
.dark .bg-white         { background-color: var(--card) !important; }
.dark .bg-light         { background-color: oklch(from var(--card) l c h / 0.5) !important; }
.dark .bg-body          { background-color: var(--background) !important; }
.dark .border           { border-color: var(--border) !important; }
.dark .border-top,
.dark .border-bottom,
.dark .border-start,
.dark .border-end       { border-color: var(--border) !important; }

/* Card surface in dark mode */
.dark .card,
.dark .gemba-card,
.dark .gemba-stat-card  {
    background-color: var(--card) !important;
    border-color: var(--border) !important;
    box-shadow: 0 1px 3px oklch(0 0 0 / 0.3), 0 1px 2px oklch(0 0 0 / 0.2) !important;
}
.dark .card-header,
.dark .card-footer      { border-color: var(--border) !important; }

/* Tables — striped headers and hover */
.dark .table            { color: var(--foreground) !important; border-color: var(--border) !important; }
.dark .table > thead,
.dark .table-light,
.dark .table-light th,
.dark .table-light td   {
    background-color: oklch(from var(--muted) l c h / 0.4) !important;
    color: var(--muted-foreground) !important;
    border-color: var(--border) !important;
}
.dark .table > tbody > tr > td { border-color: oklch(from var(--border) l c h / 0.6) !important; }
.dark .table-hover > tbody > tr:hover {
    background-color: oklch(from var(--champagne-gold) l c h / 0.06) !important;
}

/* Form controls in dark mode */
.dark .form-control,
.dark .form-select      {
    background-color: oklch(from var(--card) l c h / 0.5) !important;
    border-color: var(--input) !important;
    color: var(--foreground) !important;
}
.dark .form-control::placeholder { color: oklch(from var(--muted-foreground) l c h / 0.6) !important; }
.dark .form-control:focus,
.dark .form-select:focus { background-color: var(--card) !important; }
.dark .form-check-input { background-color: oklch(from var(--card) l c h / 0.5); border-color: var(--input); }

/* Dropdowns / popovers / modals */
.dark .dropdown-menu    { background-color: var(--popover) !important; border-color: var(--border) !important; box-shadow: 0 10px 30px oklch(0 0 0 / 0.5) !important; }
.dark .dropdown-item    { color: var(--foreground) !important; }
.dark .dropdown-item:hover,
.dark .dropdown-item:focus { background-color: oklch(from var(--muted) l c h / 0.5) !important; color: var(--foreground) !important; }
.dark .dropdown-divider { background-color: var(--border) !important; }
.dark .modal-content    { background-color: var(--card) !important; border-color: var(--border) !important; }

/* List groups */
.dark .list-group       { background-color: transparent !important; }
.dark .list-group-item  { background-color: transparent !important; border-color: oklch(from var(--border) l c h / 0.6) !important; color: var(--foreground) !important; }

/* Alert dismiss button (close icon) */
.dark .btn-close        { filter: invert(1) grayscale(1) opacity(0.7); }

/* Breadcrumb separator */
.dark .breadcrumb-item + .breadcrumb-item::before { color: var(--muted-foreground) !important; }

/* Page header & main content */
.dark .nxl-content .page-header .page-title,
.dark .page-header .page-header-title h5 { color: var(--foreground) !important; }

/* Bootstrap soft-* badges keep their semantic colors but shift bg opacity slightly */
.dark .badge.bg-soft-secondary,
.dark .bg-soft-secondary {
    background-color: oklch(from var(--muted) l c h / 0.4) !important;
    color: var(--muted-foreground) !important;
}

/* Sidebar in dark mode — gold divider stays, items adapt */
.dark .nxl-navigation { background: var(--sidebar) !important; border-right-color: var(--sidebar-border) !important; }
.dark .nxl-navigation .m-header { background: var(--sidebar) !important; }
.dark .nxl-navigation .nxl-navbar .nxl-item .nxl-link { color: var(--sidebar-foreground) !important; }
.dark .nxl-navigation .nxl-navbar .nxl-item.active > .nxl-link {
    background: var(--sidebar-accent) !important;
    color: var(--sidebar-accent-foreground) !important;
}
.dark .nxl-navigation .nxl-navbar .nxl-submenu { background: oklch(0 0 0 / 0.2) !important; }
.dark .hms-brand-name { color: var(--sidebar-foreground) !important; }

/* Top header bar in dark mode */
.dark .nxl-header { background: var(--background) !important; border-bottom-color: var(--border) !important; }
.dark .nxl-header .nxl-head-link { color: var(--muted-foreground) !important; }
.dark .nxl-header .nxl-head-link:hover { color: var(--primary) !important; background: oklch(from var(--primary) l c h / 0.12) !important; }

/* Notification dropdown bg-opacity helpers */
.dark .bg-opacity-10 { background-color: oklch(from currentColor l c h / 0.15) !important; }

/* Welcome banner stays vivid in dark mode but darker base */
.dark .gemba-welcome {
    background: linear-gradient(135deg,
        oklch(from var(--primary) calc(l - 0.1) c h) 0%,
        oklch(from var(--primary) calc(l + 0.05) c h) 100%);
}

/* Room status cells — keep card surface */
.dark .gemba-room-cell { background: var(--card); }

/* Empty state colour */
.dark .gemba-empty { color: var(--muted-foreground); }

/* Progress track in dark mode */
.dark .progress { background-color: oklch(from var(--muted) l c h / 0.6) !important; }

/* ──────────────────────────────────────────────────────────────────────────
   3. BASE TYPOGRAPHY & RESET
   ────────────────────────────────────────────────────────────────────────── */
body {
    font-family: 'Satoshi', 'Inter', system-ui, -apple-system, sans-serif !important;
    background-color: var(--background) !important;
    color: var(--foreground) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background-color: oklch(0.73 0.15 87 / 0.3);
    color: oklch(0.18 0.03 145);
}

button:not(:disabled),
[role="button"]:not(:disabled) {
    cursor: pointer;
}

/* Headings — use Marcellus for that luxury hotel feel */
h1, h2, h3, h4, h5, h6,
.card-title, .page-title, .modal-title {
    font-family: 'Marcellus', Georgia, serif !important;
    color: var(--foreground);
    font-weight: 400;
    letter-spacing: -0.005em;
}

/* ──────────────────────────────────────────────────────────────────────────
   4. BOOTSTRAP CLASS OVERRIDES
   ────────────────────────────────────────────────────────────────────────── */

/* ─── Buttons ──────────────────────────────────────────────────────────── */
.btn {
    font-family: 'Satoshi', sans-serif !important;
    font-weight: 500 !important;
    border-radius: var(--radius-lg) !important;
    transition: all 150ms ease !important;
    letter-spacing: 0.005em;
}

.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: oklch(from var(--primary) calc(l - 0.05) c h) !important;
    border-color: oklch(from var(--primary) calc(l - 0.05) c h) !important;
    color: var(--primary-foreground) !important;
    box-shadow: 0 4px 12px oklch(from var(--primary) l c h / 0.25) !important;
}

.btn-outline-primary {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    background: transparent !important;
}
.btn-outline-primary:hover, .btn-outline-primary:active {
    background-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
}

.btn-soft-primary, .bg-soft-primary {
    background-color: oklch(from var(--primary) l c h / 0.1) !important;
    color: var(--primary) !important;
}

.btn-success {
    background-color: var(--emerald-green) !important;
    border-color: var(--emerald-green) !important;
    color: #fff !important;
}
.btn-warning {
    background-color: var(--champagne-gold) !important;
    border-color: var(--champagne-gold) !important;
    color: oklch(0.18 0.03 87) !important;
}
.btn-danger {
    background-color: var(--destructive) !important;
    border-color: var(--destructive) !important;
    color: #fff !important;
}
.btn-info {
    background-color: oklch(0.6 0.15 250) !important;
    border-color: oklch(0.6 0.15 250) !important;
    color: #fff !important;
}

/* btn-light-brand — used extensively in tables/headers */
.btn-light-brand {
    background-color: oklch(from var(--primary) l c h / 0.08) !important;
    color: var(--primary) !important;
    border: 1px solid oklch(from var(--primary) l c h / 0.15) !important;
}
.btn-light-brand:hover {
    background-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
    border-color: var(--primary) !important;
}

/* Generic colour classes — emerald takes over Bootstrap blue */
.text-primary, [class*="text-primary"] { color: var(--primary) !important; }
.bg-primary:not(.bg-primary-gradient) { background-color: var(--primary) !important; color: #fff; }
.border-primary { border-color: var(--primary) !important; }
.text-success { color: var(--emerald-green) !important; }
.text-warning { color: oklch(0.55 0.15 85) !important; }
.text-danger  { color: var(--destructive) !important; }
.text-info    { color: oklch(0.5 0.15 250) !important; }
.text-muted   { color: var(--muted-foreground) !important; }

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.nxl-link):not(.b-brand) {
    color: var(--primary);
    text-decoration: none;
}
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.nxl-link):not(.b-brand):hover {
    color: oklch(from var(--primary) calc(l - 0.08) c h);
}

/* ─── Cards ────────────────────────────────────────────────────────────── */
.card {
    border: 1px solid oklch(from var(--border) l c h / 0.5) !important;
    background-color: var(--card) !important;
    box-shadow: 0 1px 3px oklch(from var(--foreground) l c h / 0.04),
                0 1px 2px oklch(from var(--foreground) l c h / 0.03) !important;
    border-radius: calc(var(--radius) + 8px) !important; /* radius-2xl */
    overflow: hidden;
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid oklch(from var(--border) l c h / 0.5) !important;
    padding: 1.25rem 1.5rem !important;
}

.card-header .card-title {
    color: var(--foreground) !important;
    font-size: 1.0625rem !important;
    margin-bottom: 0;
}

.card-body { padding: 1.5rem !important; }
.card-footer {
    background: transparent !important;
    border-top: 1px solid oklch(from var(--border) l c h / 0.5) !important;
    padding: 1rem 1.5rem !important;
}

/* ─── Tables ───────────────────────────────────────────────────────────── */
.table {
    color: var(--foreground) !important;
    margin-bottom: 0;
    border-color: oklch(from var(--border) l c h / 0.5) !important;
}

.table > thead, .table-light, .table-light th, .table-light td {
    background-color: oklch(from var(--muted) l c h / 0.3) !important;
    color: var(--muted-foreground) !important;
    font-size: 0.7rem !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500 !important;
    border-bottom: 1px solid oklch(from var(--border) l c h / 0.5) !important;
}

.table > thead th, .table-light th {
    padding: 0.75rem 1.25rem !important;
    border-bottom: 1px solid var(--border);
}

.table > tbody > tr > td {
    padding: 0.875rem 1.25rem !important;
    font-size: 0.8125rem;
    border-bottom: 1px solid oklch(from var(--border) l c h / 0.4) !important;
    vertical-align: middle;
}

.table-hover > tbody > tr:hover {
    background-color: oklch(from var(--champagne-gold) l c h / 0.04) !important;
    transition: background 150ms ease;
}

/* ─── Badges ───────────────────────────────────────────────────────────── */
.badge {
    font-family: 'Satoshi', sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.625rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.625rem !important;
    border-radius: 9999px !important;
}

.badge.bg-primary { background-color: var(--primary) !important; color: #fff !important; }
.badge.bg-success { background-color: var(--emerald-green) !important; color: #fff !important; }
.badge.bg-warning { background-color: var(--champagne-gold) !important; color: oklch(0.18 0.03 87) !important; }
.badge.bg-danger  { background-color: var(--destructive) !important; color: #fff !important; }
.badge.bg-info    { background-color: oklch(0.6 0.15 250) !important; color: #fff !important; }

/* Soft variants — translucent backgrounds, full-strength text */
.badge.bg-soft-primary, .bg-soft-primary {
    background-color: oklch(from var(--primary) l c h / 0.1) !important;
    color: var(--primary) !important;
}
.badge.bg-soft-success, .bg-soft-success {
    background-color: oklch(from var(--emerald-green) l c h / 0.1) !important;
    color: var(--emerald-green) !important;
}
.badge.bg-soft-warning, .bg-soft-warning {
    background-color: oklch(from var(--champagne-gold) l c h / 0.15) !important;
    color: oklch(0.45 0.15 85) !important;
}
.badge.bg-soft-danger, .bg-soft-danger {
    background-color: oklch(from var(--destructive) l c h / 0.1) !important;
    color: var(--destructive) !important;
}
.badge.bg-soft-info, .bg-soft-info {
    background-color: oklch(0.6 0.15 250 / 0.1) !important;
    color: oklch(0.5 0.15 250) !important;
}
.badge.bg-soft-secondary, .bg-soft-secondary {
    background-color: oklch(from var(--muted) l c h / 0.5) !important;
    color: var(--muted-foreground) !important;
}

/* ─── Form controls ────────────────────────────────────────────────────── */
.form-control, .form-select {
    border: 1px solid var(--input) !important;
    background-color: var(--card) !important;
    color: var(--foreground) !important;
    border-radius: var(--radius-lg) !important;
    font-family: 'Satoshi', sans-serif !important;
    font-size: 0.875rem !important;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.form-control:focus, .form-select:focus {
    border-color: var(--ring) !important;
    box-shadow: 0 0 0 3px oklch(from var(--ring) l c h / 0.2) !important;
    outline: none;
}

.form-control::placeholder {
    color: oklch(from var(--muted-foreground) l c h / 0.5) !important;
}

.form-control:disabled, .form-select:disabled {
    opacity: 0.5;
    background-color: oklch(from var(--muted) l c h / 0.3) !important;
}

.form-check-input:checked {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.form-check-input:focus {
    border-color: var(--ring) !important;
    box-shadow: 0 0 0 3px oklch(from var(--ring) l c h / 0.2) !important;
}

.form-switch .form-check-input:checked {
    background-color: var(--primary) !important;
}

.form-label {
    font-size: 0.7rem !important;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--muted-foreground) !important;
    font-weight: 500 !important;
    margin-bottom: 0.5rem;
}

/* ─── Alerts ───────────────────────────────────────────────────────────── */
.alert {
    border-radius: var(--radius-xl) !important;
    border: none !important;
    padding: 1rem 1.25rem !important;
    font-size: 0.875rem !important;
}

.alert-success {
    background-color: oklch(from var(--emerald-green) l c h / 0.1) !important;
    color: var(--emerald-green) !important;
}
.alert-danger {
    background-color: oklch(from var(--destructive) l c h / 0.1) !important;
    color: var(--destructive) !important;
}
.alert-warning {
    background-color: oklch(from var(--champagne-gold) l c h / 0.12) !important;
    color: oklch(0.4 0.15 85) !important;
}
.alert-info {
    background-color: oklch(0.6 0.15 250 / 0.1) !important;
    color: oklch(0.5 0.15 250) !important;
}

/* ─── Pagination ───────────────────────────────────────────────────────── */
.page-item.active .page-link {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
}

.page-link {
    color: var(--muted-foreground) !important;
    border-color: oklch(from var(--border) l c h / 0.5) !important;
    border-radius: var(--radius-lg) !important;
    margin: 0 2px;
}

.page-link:hover {
    background-color: oklch(from var(--muted) l c h / 0.5) !important;
    color: var(--foreground) !important;
}

/* ─── Breadcrumbs ──────────────────────────────────────────────────────── */
.breadcrumb-item a {
    color: var(--muted-foreground) !important;
    font-size: 0.8125rem;
}
.breadcrumb-item a:hover { color: var(--primary) !important; }
.breadcrumb-item.active {
    color: var(--foreground) !important;
    font-weight: 500;
    font-size: 0.8125rem;
}
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--border) !important;
    content: "/";
}

/* ─── Avatar / initials ────────────────────────────────────────────────── */
.avatar-text {
    background-color: var(--muted) !important;
    color: var(--muted-foreground) !important;
    font-family: 'Satoshi', sans-serif !important;
    font-weight: 600 !important;
    border-radius: 9999px !important;
}
.avatar-text.bg-primary, .avatar-text.bg-soft-primary {
    background-color: oklch(from var(--primary) l c h / 0.12) !important;
    color: var(--primary) !important;
}
.avatar-text.bg-soft-success { background-color: oklch(from var(--emerald-green) l c h / 0.12) !important; color: var(--emerald-green) !important; }
.avatar-text.bg-soft-warning { background-color: oklch(from var(--champagne-gold) l c h / 0.15) !important; color: oklch(0.45 0.15 85) !important; }
.avatar-text.bg-soft-danger  { background-color: oklch(from var(--destructive) l c h / 0.12) !important; color: var(--destructive) !important; }
.avatar-text.bg-soft-info    { background-color: oklch(0.6 0.15 250 / 0.12) !important; color: oklch(0.5 0.15 250) !important; }

/* ─── Progress bars ────────────────────────────────────────────────────── */
.progress {
    background-color: oklch(from var(--muted) l c h / 0.5) !important;
    border-radius: 9999px !important;
    overflow: hidden;
}
.progress-bar {
    background-color: var(--primary) !important;
    background-image: linear-gradient(90deg, var(--primary), oklch(from var(--primary) calc(l + 0.06) c h)) !important;
}

/* ─── Nav tabs / pills ─────────────────────────────────────────────────── */
.nav-tabs { border-bottom: 1px solid var(--border) !important; }
.nav-tabs .nav-link {
    color: var(--muted-foreground) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    font-family: 'Satoshi', sans-serif !important;
    font-weight: 500;
    padding: 0.75rem 1.25rem !important;
}
.nav-tabs .nav-link:hover { color: var(--foreground) !important; }
.nav-tabs .nav-link.active {
    color: var(--foreground) !important;
    background: transparent !important;
    border-bottom-color: var(--primary) !important;
}
.nav-pills .nav-link.active {
    background-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
}

/* ─── Dropdowns ────────────────────────────────────────────────────────── */
.dropdown-menu {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: 0 10px 30px oklch(from var(--foreground) l c h / 0.08) !important;
    padding: 0.25rem !important;
    background-color: var(--popover) !important;
}
.dropdown-item {
    border-radius: var(--radius-md) !important;
    font-size: 0.8125rem !important;
    padding: 0.5rem 0.75rem !important;
    color: var(--foreground) !important;
}
.dropdown-item:hover, .dropdown-item:focus {
    background-color: oklch(from var(--muted) l c h / 0.5) !important;
    color: var(--foreground) !important;
}
.dropdown-item.active, .dropdown-item:active {
    background-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
}
.dropdown-divider {
    background-color: var(--border) !important;
    margin: 0.25rem 0 !important;
}

/* ─── List groups ──────────────────────────────────────────────────────── */
.list-group-item {
    background-color: transparent !important;
    border-color: oklch(from var(--border) l c h / 0.4) !important;
    color: var(--foreground) !important;
}

/* ─── Modals ───────────────────────────────────────────────────────────── */
.modal-content {
    background-color: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: calc(var(--radius) + 12px) !important; /* radius-3xl */
    box-shadow: 0 25px 50px oklch(from var(--foreground) l c h / 0.15) !important;
}
.modal-header { border-bottom: 1px solid oklch(from var(--border) l c h / 0.5) !important; padding: 1.5rem 2rem !important; }
.modal-body { padding: 1.5rem 2rem !important; }
.modal-footer { border-top: 1px solid oklch(from var(--border) l c h / 0.5) !important; padding: 1rem 2rem !important; }
.modal-title {
    font-family: 'Marcellus', serif !important;
    font-size: 1.25rem !important;
    font-weight: 400 !important;
    color: var(--foreground) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   5. DURALUX SIDEBAR / HEADER OVERRIDES
   ────────────────────────────────────────────────────────────────────────── */
.nxl-navigation {
    background: var(--sidebar) !important;
    border-right: 1px solid var(--sidebar-border) !important;
}

.nxl-navigation .m-header {
    background: var(--sidebar) !important;
    border-bottom: none !important;
    position: relative;
}

/* Gold gradient divider underneath the brand */
.nxl-navigation .m-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 1rem;
    right: 1rem;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--champagne-gold), transparent);
    opacity: 0.5;
}

/* Brand */
.hms-brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    padding: 0 !important;
}
.hms-brand-logo {
    width: 38px !important;
    height: 38px !important;
    border-radius: 8px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    display: block !important;
}
.hms-brand-name {
    font-size: 1.0625rem !important;
    font-weight: 400 !important;
    color: var(--sidebar-foreground) !important;
    white-space: nowrap !important;
    font-family: 'Marcellus', serif !important;
    letter-spacing: 0.005em;
}
.minimenu .hms-brand-name { display: none !important; }
.minimenu .hms-brand { justify-content: center !important; }

/* Sidebar nav items */
.nxl-navigation .nxl-navbar .nxl-item .nxl-link {
    color: var(--sidebar-foreground) !important;
    font-family: 'Satoshi', sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 400;
    border-left: 2px solid transparent;
    transition: all 150ms ease;
}

.nxl-navigation .nxl-navbar .nxl-item .nxl-link:hover {
    background: oklch(from var(--sidebar-accent) l c h / 0.5) !important;
    color: var(--sidebar-accent-foreground) !important;
}

.nxl-navigation .nxl-navbar .nxl-item.active > .nxl-link {
    background: var(--sidebar-accent) !important;
    color: var(--sidebar-accent-foreground) !important;
    font-weight: 500 !important;
    border-left-color: var(--sidebar-primary) !important;
}

/* Active item — replace Duralux's pseudo-element accent */
.nxl-navigation .nxl-navbar .nxl-item.active > .nxl-link::before {
    display: none !important;
}

/* Section captions */
.nxl-navigation .nxl-navbar .nxl-caption label {
    color: var(--muted-foreground) !important;
    text-transform: uppercase !important;
    font-size: 0.625rem !important;
    letter-spacing: 0.2em !important;
    font-weight: 500 !important;
    font-family: 'Satoshi', sans-serif !important;
}

/* Submenu */
.nxl-navigation .nxl-navbar .nxl-submenu {
    background: oklch(from var(--sidebar-accent) l c h / 0.4) !important;
}

/* Sidebar scrollbar */
.nxl-navigation .nxl-navbar::-webkit-scrollbar { width: 6px; }
.nxl-navigation .nxl-navbar::-webkit-scrollbar-thumb {
    background: oklch(from var(--sidebar-primary) l c h / 0.3) !important;
    border-radius: 9999px;
}

/* ─── Header / top bar ─────────────────────────────────────────────────── */
.nxl-header {
    background: var(--background) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
    height: 4rem;
}

.nxl-header .nxl-head-link {
    color: var(--muted-foreground) !important;
    border-radius: var(--radius-lg) !important;
}

.nxl-header .nxl-head-link:hover {
    color: var(--primary) !important;
    background: oklch(from var(--primary) l c h / 0.06) !important;
}

/* ─── Page header (title + breadcrumbs + buttons) ─────────────────────── */
.nxl-content .page-header {
    background: transparent;
    padding: 1.5rem 2rem 0.5rem !important;
    margin-bottom: 1rem;
}

.nxl-content .page-header .page-title,
.page-header .page-header-title h5,
.page-header-title h5 {
    font-family: 'Marcellus', serif !important;
    color: var(--foreground) !important;
    font-size: 1.875rem !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em;
    margin-bottom: 0.25rem;
}

.nxl-content .main-content {
    padding: 0 2rem 2rem !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   6. GEMBA UTILITY COMPONENTS (.gemba-*)
   Used by the new <x-*> Blade components.
   ────────────────────────────────────────────────────────────────────────── */

/* Gold gradient divider — the signature decorative line */
.gemba-gold-divider {
    height: 1px;
    width: 100%;
    background: linear-gradient(to right, transparent, var(--champagne-gold), transparent);
    opacity: 0.4;
    margin: 1.5rem 0;
    border: none;
}
.gemba-gold-divider--thick {
    height: 2px;
    opacity: 0.8;
    border-radius: 9999px;
}

/* Page title (Marcellus, large) */
.gemba-page-title {
    font-family: 'Marcellus', serif;
    font-size: 1.875rem;
    font-weight: 400;
    color: var(--foreground);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0;
}
.gemba-page-subtitle {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    margin-top: 0.25rem;
    font-family: 'Satoshi', sans-serif;
}

/* Stat / metric card */
.gemba-stat-card {
    padding: 1.5rem;
    border-radius: calc(var(--radius) + 8px);
    border: 1px solid oklch(from var(--border) l c h / 0.5);
    background: var(--card);
    transition: all 200ms ease;
    position: relative;
    overflow: hidden;
}
.gemba-stat-card:hover {
    border-color: oklch(from var(--champagne-gold) l c h / 0.4);
    box-shadow: 0 6px 18px oklch(from var(--foreground) l c h / 0.06);
}

.gemba-stat-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.gemba-stat-card__label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted-foreground);
    font-weight: 500;
    font-family: 'Satoshi', sans-serif;
}

.gemba-stat-card__icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: oklch(from var(--primary) l c h / 0.1);
    color: var(--primary);
    flex-shrink: 0;
    font-size: 1rem;
}
.gemba-stat-card__icon--success { background: oklch(from var(--emerald-green) l c h / 0.1); color: var(--emerald-green); }
.gemba-stat-card__icon--warning { background: oklch(from var(--champagne-gold) l c h / 0.15); color: oklch(0.45 0.15 85); }
.gemba-stat-card__icon--danger  { background: oklch(from var(--destructive) l c h / 0.1); color: var(--destructive); }
.gemba-stat-card__icon--info    { background: oklch(0.6 0.15 250 / 0.1); color: oklch(0.5 0.15 250); }
.gemba-stat-card__icon--gold    { background: oklch(from var(--champagne-gold) l c h / 0.15); color: oklch(0.55 0.15 87); }

.gemba-stat-card__value {
    font-family: 'Marcellus', serif;
    font-size: 2rem;
    font-weight: 400;
    color: var(--foreground);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.gemba-stat-card__sub {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    margin-top: 0.5rem;
}

.gemba-stat-card__trend {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    margin-top: 0.5rem;
    font-weight: 500;
}
.gemba-stat-card__trend--up   { color: var(--emerald-green); }
.gemba-stat-card__trend--down { color: var(--destructive); }
.gemba-stat-card__trend--flat { color: var(--muted-foreground); }

/* Glass card variant */
.gemba-card {
    padding: 1.5rem;
    border-radius: calc(var(--radius) + 8px);
    border: 1px solid oklch(from var(--border) l c h / 0.5);
    background: var(--card);
}

.gemba-card--glass {
    background: oklch(from var(--card) l c h / 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.gemba-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid oklch(from var(--border) l c h / 0.4);
}
.gemba-card__title {
    font-family: 'Marcellus', serif;
    font-size: 1.0625rem;
    font-weight: 400;
    color: var(--foreground);
    margin: 0;
}

/* CTA / Gold button */
.gemba-cta {
    background: var(--champagne-gold);
    color: oklch(0.18 0.03 87);
    font-family: 'Marcellus', serif !important;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.75rem;
    padding: 0.75rem 2rem !important;
    border-radius: var(--radius-xl) !important;
    border: none !important;
    transition: all 200ms ease;
}
.gemba-cta:hover {
    background: oklch(from var(--champagne-gold) calc(l - 0.05) c h);
    color: oklch(0.18 0.03 87);
    box-shadow: 0 6px 16px oklch(from var(--champagne-gold) l c h / 0.35);
}

/* Filter pills */
.gemba-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 1rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    font-family: 'Satoshi', sans-serif;
    cursor: pointer;
    transition: all 150ms ease;
    background: oklch(from var(--muted) l c h / 0.5);
    color: var(--muted-foreground);
    border: none;
    text-decoration: none;
}
.gemba-pill:hover { background: var(--muted); color: var(--foreground); }
.gemba-pill.is-active {
    background: var(--champagne-gold);
    color: oklch(0.18 0.03 87);
}

/* Welcome banner — hero card with emerald gradient */
.gemba-welcome {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: calc(var(--radius) + 8px);
    color: #fff;
    background: linear-gradient(135deg,
        oklch(from var(--primary) calc(l - 0.05) c h) 0%,
        oklch(from var(--primary) calc(l + 0.05) c h) 100%);
    border: 1px solid oklch(from var(--champagne-gold) l c h / 0.3);
    position: relative;
    overflow: hidden;
}
.gemba-welcome::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--champagne-gold), transparent);
    opacity: 0.7;
}
.gemba-welcome__logo {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    object-fit: contain;
    flex-shrink: 0;
    background: rgba(255,255,255,0.08);
    padding: 4px;
}
.gemba-welcome__title {
    font-family: 'Marcellus', serif;
    color: var(--champagne-gold);
    font-size: 1.25rem;
    font-weight: 400;
    margin: 0;
    letter-spacing: 0.005em;
}
.gemba-welcome__subtitle {
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.75);
    margin-top: 0.125rem;
}

/* Status board cell (room status grid) */
.gemba-room-cell {
    border: 1px solid oklch(from var(--border) l c h / 0.5);
    border-radius: var(--radius-lg);
    padding: 0.75rem 0.5rem;
    text-align: center;
    background: var(--card);
    transition: all 150ms ease;
}
.gemba-room-cell:hover {
    border-color: oklch(from var(--champagne-gold) l c h / 0.4);
    transform: translateY(-1px);
}
.gemba-room-cell--clean        { border-left: 3px solid var(--emerald-green); }
.gemba-room-cell--dirty        { border-left: 3px solid var(--champagne-gold); }
.gemba-room-cell--inspected    { border-left: 3px solid var(--primary); }
.gemba-room-cell--out_of_order { border-left: 3px solid var(--destructive); }
.gemba-room-cell--out_of_service { border-left: 3px solid var(--muted-foreground); }

.gemba-room-cell__number {
    font-family: 'Marcellus', serif;
    font-size: 1.0625rem;
    color: var(--foreground);
}
.gemba-room-cell__status {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-foreground);
    margin-top: 2px;
}

/* Empty state */
.gemba-empty {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--muted-foreground);
    font-style: italic;
    font-size: 0.875rem;
}
.gemba-empty i { display: block; font-size: 1.5rem; margin-bottom: 0.5rem; opacity: 0.5; }

/* Section heading (used between cards on a dashboard) */
.gemba-section-title {
    font-family: 'Marcellus', serif;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--foreground);
    margin: 0 0 1rem;
    letter-spacing: -0.005em;
}

/* Uppercase tracking label (used for sub-headings) */
.gemba-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted-foreground);
    font-weight: 500;
    font-family: 'Satoshi', sans-serif;
}

/* ── Borders for "border-X" Bootstrap utility classes ───────────────────── */
.border-success { border-color: oklch(from var(--emerald-green) l c h / 0.4) !important; }
.border-warning { border-color: oklch(from var(--champagne-gold) l c h / 0.4) !important; }
.border-danger  { border-color: oklch(from var(--destructive) l c h / 0.4) !important; }
.border-info    { border-color: oklch(0.6 0.15 250 / 0.4) !important; }

/* ── Avatar sizes used by existing markup ──────────────────────────────── */
.avatar-text.avatar-sm  { width: 1.75rem; height: 1.75rem; font-size: 0.75rem; }
.avatar-text.avatar-md  { width: 2.25rem; height: 2.25rem; font-size: 0.8125rem; }
.avatar-text.avatar-lg  { width: 2.75rem; height: 2.75rem; font-size: 0.9375rem; }