/* ============================================================
   VILLA IMPERIAL — WARM HOSPITALITY THEME
   ------------------------------------------------------------
   Design system layer for Bootstrap 5.3.

   HOW THIS WORKS (read before editing)
   ------------------------------------
   Load order is:  bootstrap.min.css -> theme.css -> responsive-compact.css

   This file does NOT redefine Bootstrap utility classes
   (.mb-3, .d-flex, .p-2, .text-primary ...). The previous version
   did, which silently broke Bootstrap's responsive variants
   (.mb-md-3 and friends) because it won on source order.

   Instead it retints Bootstrap from the inside by setting
   Bootstrap's own custom properties (--bs-*). Utilities, buttons,
   cards, tables and modals all pick up the palette automatically
   and every stock Bootstrap class keeps its documented behaviour.

   Sizing/spacing for 1366x768 stays the job of
   responsive-compact.css, which loads after this file.
   ============================================================ */

/* ============================================================
   1. TOKENS — LIGHT
   ============================================================ */

:root {
  color-scheme: light;

  /* --- Brand ------------------------------------------------ */
  --vi-brass:        #b08344;
  --vi-brass-hover:  #9a7038;
  --vi-brass-active: #866031;
  --vi-brass-soft:   #f6efe3;
  --vi-brass-ring:   rgba(176, 131, 68, 0.28);

  --vi-clay:         #a63d40;
  --vi-clay-hover:   #8f3336;
  --vi-clay-soft:    #fbeceb;

  --vi-forest:       #3f6b4f;
  --vi-forest-hover: #345a42;
  --vi-forest-soft:  #e8f1ea;

  /* Deepened from #b5811f: white button/badge labels only reached
     3.43:1 on the old value, below the 4.5:1 readability minimum. */
  --vi-ochre:        #96691a;
  --vi-ochre-hover:  #7d5715;
  --vi-ochre-soft:   #fbf1da;

  --vi-slate:        #45688a;
  --vi-slate-hover:  #3a5875;
  --vi-slate-soft:   #e9f0f6;

  /* --- Neutrals (warm-tinted, not pure grey) ---------------- */
  --vi-ground:    #fbf8f3;
  --vi-surface:   #ffffff;
  --vi-sunken:    #f4efe7;
  --vi-line:      #e6ded1;
  --vi-line-soft: #f0eae0;

  --vi-text:     #2e2620;
  --vi-text-mid: #6b5f52;
  /* Deepened from #948779, which gave stat-card labels and form
     placeholders only 3.50:1 on white. */
  --vi-text-dim: #7a6e60;

  --vi-on-accent: #ffffff;

  /* Text colour for anything sitting ON a semantic surface
     (.bg-success, .badge.bg-info, ...). Flips in dark mode, where
     those surfaces become light pastels. */
  --vi-on-semantic: #ffffff;

  /* --- Sidebar ---------------------------------------------
     A deep espresso rail against the light content area. Kept as
     its own token set so the sidebar can stay dark in light mode
     without dragging the rest of the palette with it. The active
     item uses the accent, so it follows the colour picker.

     --vi-sidebar-w is the SINGLE source of truth for the rail's
     width. Both `.sidebar { width }` and `.main-content
     { margin-left }` read it, so the content can never drift out
     of alignment with the rail. responsive-compact.css re-points
     this one value per breakpoint; nothing else needs to change.
     Previously the width was overridden at five breakpoints while
     the margin stayed pinned at 200px, leaving 10-40px gaps. */
  --vi-sidebar-w: 200px;
  --vi-sidebar-bg:          #2e2620;
  --vi-sidebar-text:        rgba(240, 233, 223, 0.78);
  --vi-sidebar-text-strong: #f5f0e8;
  --vi-sidebar-icon:        rgba(240, 233, 223, 0.55);
  --vi-sidebar-hover-bg:    rgba(255, 255, 255, 0.09);
  --vi-sidebar-line:        rgba(255, 255, 255, 0.10);
  --vi-sidebar-well:        rgba(255, 255, 255, 0.07);

  /* --- Elevation (warm shadows, not black) ------------------ */
  --vi-shadow-xs: 0 1px 2px rgba(62, 46, 30, 0.06);
  --vi-shadow-sm: 0 1px 3px rgba(62, 46, 30, 0.08), 0 1px 2px rgba(62, 46, 30, 0.04);
  --vi-shadow-md: 0 4px 10px rgba(62, 46, 30, 0.08), 0 1px 3px rgba(62, 46, 30, 0.05);
  --vi-shadow-lg: 0 12px 26px rgba(62, 46, 30, 0.10), 0 4px 8px rgba(62, 46, 30, 0.05);
  --vi-shadow-xl: 0 24px 48px rgba(62, 46, 30, 0.14);

  /* --- Shape / motion --------------------------------------- */
  --vi-r-sm: 6px;
  --vi-r-md: 9px;
  --vi-r-lg: 13px;
  --vi-r-xl: 18px;
  --vi-r-pill: 999px;

  --vi-t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --vi-t-base: 180ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ==========================================================
     BOOTSTRAP 5.3 BRIDGE
     Retints every stock Bootstrap component + utility.
     ========================================================== */
  --bs-primary:   #b08344;
  --bs-secondary: #6b5f52;
  --bs-success:   #3f6b4f;
  --bs-danger:    #a63d40;
  --bs-warning:   #96691a;
  --bs-info:      #45688a;
  --bs-light:     #f4efe7;
  --bs-dark:      #2e2620;

  --bs-primary-rgb:   176, 131, 68;
  --bs-secondary-rgb: 107, 95, 82;
  --bs-success-rgb:   63, 107, 79;
  --bs-danger-rgb:    166, 61, 64;
  --bs-warning-rgb:   150, 105, 26;
  --bs-info-rgb:      69, 104, 138;
  --bs-light-rgb:     244, 239, 231;
  --bs-dark-rgb:      46, 38, 32;

  --bs-body-bg:         #fbf8f3;
  --bs-body-color:      #2e2620;
  --bs-body-color-rgb:  46, 38, 32;
  --bs-emphasis-color:  #1c1713;
  --bs-secondary-color: rgba(46, 38, 32, 0.68);
  --bs-secondary-bg:    #f4efe7;
  --bs-tertiary-bg:     #f8f4ed;
  --bs-tertiary-color:  rgba(46, 38, 32, 0.52);

  --bs-border-color:             #e6ded1;
  --bs-border-color-translucent: rgba(46, 38, 32, 0.11);

  --bs-link-color:       #96702f;
  --bs-link-color-rgb:   150, 112, 47;
  --bs-link-hover-color: #7c5c25;

  --bs-border-radius:    var(--vi-r-md);
  --bs-border-radius-sm: var(--vi-r-sm);
  --bs-border-radius-lg: var(--vi-r-lg);
  --bs-border-radius-xl: var(--vi-r-xl);

  --bs-font-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                        Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ==========================================================
     LEGACY ALIASES — do not remove.
     index.php and pages/*.php reference these inline. Both
     naming conventions found in the codebase are covered
     (--primary-main AND --primary-color).
     ========================================================== */
  --primary-main:    #b08344;
  --primary-dark:    #866031;
  --primary-light:   #c79c60;
  --primary-lighter: #f6efe3;
  --primary-color:   #b08344;

  --secondary-main:  #45688a;
  --secondary-dark:  #35516d;
  --secondary-light: #6c8dab;
  --secondary-color: #45688a;

  --accent-gold:   #c9a227;
  --accent-coral:  #c4655f;
  --accent-orange: #c07f33;

  --success:       #3f6b4f;
  --success-light: #e8f1ea;
  --success-dark:  #2f5a3e;
  --success-color: #3f6b4f;

  --warning:       #96691a;
  --warning-light: #fbf1da;
  --warning-dark:  #6b4a12;
  --warning-color: #96691a;

  --danger:        #a63d40;
  --danger-light:  #fbeceb;
  --danger-dark:   #8a2f33;
  --danger-color:  #a63d40;

  --info:          #45688a;
  --info-light:    #e9f0f6;
  --info-dark:     #35516d;
  --info-color:    #45688a;

  --neutral-50:  #fbf8f3;
  --neutral-100: #f4efe7;
  --neutral-200: #e6ded1;
  --neutral-300: #d5c9b8;
  --neutral-400: #b3a795;
  --neutral-500: #948779;
  --neutral-600: #6b5f52;
  --neutral-700: #4d4339;
  --neutral-800: #3a3128;
  --neutral-900: #2e2620;

  --gradient-primary:   linear-gradient(135deg, #b08344 0%, #8a6533 100%);
  --gradient-secondary: linear-gradient(135deg, #5a7fa3 0%, #3a5875 100%);
  --gradient-warm:      linear-gradient(135deg, #c9a227 0%, #b08344 100%);
  --gradient-cool:      linear-gradient(135deg, #45688a 0%, #2e4a68 100%);

  --shadow-sm:  var(--vi-shadow-sm);
  --shadow-md:  var(--vi-shadow-md);
  --shadow-lg:  var(--vi-shadow-lg);
  --shadow-xl:  var(--vi-shadow-xl);
  --shadow-2xl: var(--vi-shadow-xl);

  --radius-sm:   var(--vi-r-sm);
  --radius-md:   var(--vi-r-md);
  --radius-lg:   var(--vi-r-lg);
  --radius-xl:   var(--vi-r-xl);
  --radius-2xl:  var(--vi-r-xl);
  --radius-full: var(--vi-r-pill);

  --transition-fast: var(--vi-t-fast);
  --transition-base: var(--vi-t-base);
  --transition-slow: 260ms cubic-bezier(0.4, 0, 0.2, 1);

  /* NOTE: --spacing-* is intentionally NOT defined here.
     responsive-compact.css owns it and loads after this file. */
}

/* ============================================================
   2. TOKENS — DARK
   Applies on OS preference, or when the root sets
   data-theme="dark". data-theme="light" always forces light.
   Only the tokens change; no component rule is duplicated.
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --vi-brass:        #cda05e;
    --vi-brass-hover:  #dbb075;
    --vi-brass-active: #e3bd8a;
    --vi-brass-soft:   #3a2f1e;
    --vi-brass-ring:   rgba(205, 160, 94, 0.34);

    --vi-clay:         #d97b7d;
    --vi-clay-hover:   #e59193;
    --vi-clay-soft:    #3d2224;

    --vi-forest:       #7fb392;
    --vi-forest-hover: #93c2a3;
    --vi-forest-soft:  #1f3227;

    --vi-ochre:        #d9a748;
    --vi-ochre-hover:  #e5b862;
    --vi-ochre-soft:   #3a2e17;

    --vi-slate:        #8bafd1;
    --vi-slate-hover:  #a2c0dd;
    --vi-slate-soft:   #1e2b38;

    --vi-ground:    #17140f;
    --vi-surface:   #201c16;
    --vi-sunken:    #2a251d;
    --vi-line:      #383127;
    --vi-line-soft: #2e2820;

    --vi-text:     #f0e9df;
    --vi-text-mid: #bdb2a3;
    --vi-text-dim: #8d8274;

    --vi-on-accent: #17140f;

    /* Dark-mode semantic colours are light pastels, so text sitting on
       them must be dark ink, not white. */
    --vi-on-semantic: #17140f;

    --vi-sidebar-bg:          #120f0b;
    --vi-sidebar-text:        rgba(240, 233, 223, 0.74);
    --vi-sidebar-text-strong: #f0e9df;
    --vi-sidebar-icon:        rgba(240, 233, 223, 0.50);
    --vi-sidebar-hover-bg:    rgba(255, 255, 255, 0.07);
    --vi-sidebar-line:        rgba(255, 255, 255, 0.08);
    --vi-sidebar-well:        rgba(255, 255, 255, 0.05);

    --vi-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.36);
    --vi-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.44), 0 1px 2px rgba(0, 0, 0, 0.30);
    --vi-shadow-md: 0 4px 10px rgba(0, 0, 0, 0.48), 0 1px 3px rgba(0, 0, 0, 0.34);
    --vi-shadow-lg: 0 12px 26px rgba(0, 0, 0, 0.54), 0 4px 8px rgba(0, 0, 0, 0.36);
    --vi-shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.62);

    --bs-primary:   #cda05e;
    --bs-secondary: #bdb2a3;
    --bs-success:   #7fb392;
    --bs-danger:    #d97b7d;
    --bs-warning:   #d9a748;
    --bs-info:      #8bafd1;
    --bs-light:     #2a251d;
    --bs-dark:      #f0e9df;

    --bs-primary-rgb:   205, 160, 94;
    --bs-secondary-rgb: 189, 178, 163;
    --bs-success-rgb:   127, 179, 146;
    --bs-danger-rgb:    217, 123, 125;
    --bs-warning-rgb:   217, 167, 72;
    --bs-info-rgb:      139, 175, 209;
    --bs-light-rgb:     42, 37, 29;
    --bs-dark-rgb:      240, 233, 223;

    --bs-body-bg:         #17140f;
    --bs-body-color:      #f0e9df;
    --bs-body-color-rgb:  240, 233, 223;
    --bs-emphasis-color:  #ffffff;
    --bs-secondary-color: rgba(240, 233, 223, 0.70);
    --bs-secondary-bg:    #2a251d;
    --bs-tertiary-bg:     #221e18;
    --bs-tertiary-color:  rgba(240, 233, 223, 0.52);

    --bs-border-color:             #383127;
    --bs-border-color-translucent: rgba(240, 233, 223, 0.14);

    --bs-link-color:       #dbb075;
    --bs-link-color-rgb:   219, 176, 117;
    --bs-link-hover-color: #e8c89a;

    --primary-main:    #cda05e;
    --primary-dark:    #e3bd8a;
    --primary-light:   #dbb075;
    --primary-lighter: #3a2f1e;
    --primary-color:   #cda05e;

    --secondary-main:  #8bafd1;
    --secondary-dark:  #a2c0dd;
    --secondary-light: #a2c0dd;
    --secondary-color: #8bafd1;

    --success:       #7fb392;
    --success-light: #1f3227;
    --success-dark:  #93c2a3;
    --success-color: #7fb392;

    --warning:       #d9a748;
    --warning-light: #3a2e17;
    --warning-dark:  #e5b862;
    --warning-color: #d9a748;

    --danger:        #d97b7d;
    --danger-light:  #3d2224;
    --danger-dark:   #e59193;
    --danger-color:  #d97b7d;

    --info:          #8bafd1;
    --info-light:    #1e2b38;
    --info-dark:     #a2c0dd;
    --info-color:    #8bafd1;

    --neutral-50:  #17140f;
    --neutral-100: #221e18;
    --neutral-200: #383127;
    --neutral-300: #4a4136;
    --neutral-400: #6d6355;
    --neutral-500: #8d8274;
    --neutral-600: #bdb2a3;
    --neutral-700: #d6cdc0;
    --neutral-800: #e6dfd4;
    --neutral-900: #f0e9df;

    --gradient-primary:   linear-gradient(135deg, #cda05e 0%, #a67c3d 100%);
    --gradient-secondary: linear-gradient(135deg, #8bafd1 0%, #5a7fa3 100%);
    --gradient-warm:      linear-gradient(135deg, #e0bb63 0%, #cda05e 100%);
    --gradient-cool:      linear-gradient(135deg, #8bafd1 0%, #4a6b8c 100%);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --vi-brass:        #cda05e;
  --vi-brass-hover:  #dbb075;
  --vi-brass-active: #e3bd8a;
  --vi-brass-soft:   #3a2f1e;
  --vi-brass-ring:   rgba(205, 160, 94, 0.34);

  --vi-clay:         #d97b7d;
  --vi-clay-hover:   #e59193;
  --vi-clay-soft:    #3d2224;

  --vi-forest:       #7fb392;
  --vi-forest-hover: #93c2a3;
  --vi-forest-soft:  #1f3227;

  --vi-ochre:        #d9a748;
  --vi-ochre-hover:  #e5b862;
  --vi-ochre-soft:   #3a2e17;

  --vi-slate:        #8bafd1;
  --vi-slate-hover:  #a2c0dd;
  --vi-slate-soft:   #1e2b38;

  --vi-ground:    #17140f;
  --vi-surface:   #201c16;
  --vi-sunken:    #2a251d;
  --vi-line:      #383127;
  --vi-line-soft: #2e2820;

  --vi-text:     #f0e9df;
  --vi-text-mid: #bdb2a3;
  --vi-text-dim: #8d8274;

  --vi-on-accent: #17140f;

  /* Dark-mode semantic colours are light pastels, so text sitting on
     them must be dark ink, not white. */
  --vi-on-semantic: #17140f;

  --vi-sidebar-bg:          #120f0b;
  --vi-sidebar-text:        rgba(240, 233, 223, 0.74);
  --vi-sidebar-text-strong: #f0e9df;
  --vi-sidebar-icon:        rgba(240, 233, 223, 0.50);
  --vi-sidebar-hover-bg:    rgba(255, 255, 255, 0.07);
  --vi-sidebar-line:        rgba(255, 255, 255, 0.08);
  --vi-sidebar-well:        rgba(255, 255, 255, 0.05);

  --vi-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.36);
  --vi-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.44), 0 1px 2px rgba(0, 0, 0, 0.30);
  --vi-shadow-md: 0 4px 10px rgba(0, 0, 0, 0.48), 0 1px 3px rgba(0, 0, 0, 0.34);
  --vi-shadow-lg: 0 12px 26px rgba(0, 0, 0, 0.54), 0 4px 8px rgba(0, 0, 0, 0.36);
  --vi-shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.62);

  --bs-primary:   #cda05e;
  --bs-secondary: #bdb2a3;
  --bs-success:   #7fb392;
  --bs-danger:    #d97b7d;
  --bs-warning:   #d9a748;
  --bs-info:      #8bafd1;
  --bs-light:     #2a251d;
  --bs-dark:      #f0e9df;

  --bs-primary-rgb:   205, 160, 94;
  --bs-secondary-rgb: 189, 178, 163;
  --bs-success-rgb:   127, 179, 146;
  --bs-danger-rgb:    217, 123, 125;
  --bs-warning-rgb:   217, 167, 72;
  --bs-info-rgb:      139, 175, 209;
  --bs-light-rgb:     42, 37, 29;
  --bs-dark-rgb:      240, 233, 223;

  --bs-body-bg:         #17140f;
  --bs-body-color:      #f0e9df;
  --bs-body-color-rgb:  240, 233, 223;
  --bs-emphasis-color:  #ffffff;
  --bs-secondary-color: rgba(240, 233, 223, 0.70);
  --bs-secondary-bg:    #2a251d;
  --bs-tertiary-bg:     #221e18;
  --bs-tertiary-color:  rgba(240, 233, 223, 0.52);

  --bs-border-color:             #383127;
  --bs-border-color-translucent: rgba(240, 233, 223, 0.14);

  --bs-link-color:       #dbb075;
  --bs-link-color-rgb:   219, 176, 117;
  --bs-link-hover-color: #e8c89a;

  --primary-main:    #cda05e;
  --primary-dark:    #e3bd8a;
  --primary-light:   #dbb075;
  --primary-lighter: #3a2f1e;
  --primary-color:   #cda05e;

  --secondary-main:  #8bafd1;
  --secondary-dark:  #a2c0dd;
  --secondary-light: #a2c0dd;
  --secondary-color: #8bafd1;

  --success:       #7fb392;
  --success-light: #1f3227;
  --success-dark:  #93c2a3;
  --success-color: #7fb392;

  --warning:       #d9a748;
  --warning-light: #3a2e17;
  --warning-dark:  #e5b862;
  --warning-color: #d9a748;

  --danger:        #d97b7d;
  --danger-light:  #3d2224;
  --danger-dark:   #e59193;
  --danger-color:  #d97b7d;

  --info:          #8bafd1;
  --info-light:    #1e2b38;
  --info-dark:     #a2c0dd;
  --info-color:    #8bafd1;

  --neutral-50:  #17140f;
  --neutral-100: #221e18;
  --neutral-200: #383127;
  --neutral-300: #4a4136;
  --neutral-400: #6d6355;
  --neutral-500: #8d8274;
  --neutral-600: #bdb2a3;
  --neutral-700: #d6cdc0;
  --neutral-800: #e6dfd4;
  --neutral-900: #f0e9df;

  --gradient-primary:   linear-gradient(135deg, #cda05e 0%, #a67c3d 100%);
  --gradient-secondary: linear-gradient(135deg, #8bafd1 0%, #5a7fa3 100%);
  --gradient-warm:      linear-gradient(135deg, #e0bb63 0%, #cda05e 100%);
  --gradient-cool:      linear-gradient(135deg, #8bafd1 0%, #4a6b8c 100%);
}

/* ============================================================
   3. BASE
   ============================================================ */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--bs-font-sans-serif);
  background-color: var(--vi-ground);
  color: var(--vi-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--vi-text);
  font-weight: 650;
  letter-spacing: -0.011em;
  line-height: 1.25;
}

p { color: var(--vi-text-mid); }

a { color: var(--bs-link-color); text-decoration: none; transition: color var(--vi-t-fast); }
a:hover { color: var(--bs-link-hover-color); text-decoration: underline; text-underline-offset: 2px; }

hr { border-color: var(--vi-line); opacity: 1; }

/* Money, counts, dates, IDs line up in columns. Matters on every
   report and booking table in this app. */
.table td, .table th,
.stat-value, .stat-card .h4, .stat-card .h3,
[class*="amount"], [class*="price"], [class*="total"],
[class*="income"], [class*="revenue"], [class*="balance"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --- Focus: visible for keyboard, quiet for mouse ----------- */
:focus-visible {
  outline: 2px solid var(--vi-brass);
  outline-offset: 2px;
  border-radius: var(--vi-r-sm);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--vi-brass-ring); color: var(--vi-text); }

/* --- Scrollbars -------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--vi-line) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--vi-line);
  border-radius: var(--vi-r-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--vi-text-dim); background-clip: content-box; }

/* ============================================================
   4. BUTTONS
   Driven through Bootstrap 5.3's --bs-btn-* variables so that
   sizes, spinners, disabled states and .btn-group all keep
   working exactly as documented.
   ============================================================ */

.btn {
  --bs-btn-font-weight: 550;
  --bs-btn-border-radius: var(--vi-r-md);
  letter-spacing: -0.005em;
  transition: background-color var(--vi-t-fast),
              border-color var(--vi-t-fast),
              color var(--vi-t-fast),
              box-shadow var(--vi-t-fast);
}

.btn:active { transform: translateY(0.5px); }

.btn-primary {
  --bs-btn-bg: var(--vi-brass);
  --bs-btn-border-color: var(--vi-brass);
  --bs-btn-color: var(--vi-on-accent);
  --bs-btn-hover-bg: var(--vi-brass-hover);
  --bs-btn-hover-border-color: var(--vi-brass-hover);
  --bs-btn-hover-color: var(--vi-on-accent);
  --bs-btn-active-bg: var(--vi-brass-active);
  --bs-btn-active-border-color: var(--vi-brass-active);
  --bs-btn-active-color: var(--vi-on-accent);
  --bs-btn-disabled-bg: var(--vi-brass);
  --bs-btn-disabled-border-color: var(--vi-brass);
  --bs-btn-disabled-color: var(--vi-on-accent);
  box-shadow: var(--vi-shadow-xs);
}

.btn-success {
  --bs-btn-bg: var(--vi-forest);
  --bs-btn-border-color: var(--vi-forest);
  --bs-btn-color: var(--vi-on-accent);
  --bs-btn-hover-bg: var(--vi-forest-hover);
  --bs-btn-hover-border-color: var(--vi-forest-hover);
  --bs-btn-hover-color: var(--vi-on-accent);
  --bs-btn-active-bg: var(--vi-forest-hover);
  --bs-btn-active-border-color: var(--vi-forest-hover);
  --bs-btn-disabled-bg: var(--vi-forest);
  --bs-btn-disabled-border-color: var(--vi-forest);
}

.btn-danger {
  --bs-btn-bg: var(--vi-clay);
  --bs-btn-border-color: var(--vi-clay);
  --bs-btn-color: var(--vi-on-accent);
  --bs-btn-hover-bg: var(--vi-clay-hover);
  --bs-btn-hover-border-color: var(--vi-clay-hover);
  --bs-btn-hover-color: var(--vi-on-accent);
  --bs-btn-active-bg: var(--vi-clay-hover);
  --bs-btn-active-border-color: var(--vi-clay-hover);
  --bs-btn-disabled-bg: var(--vi-clay);
  --bs-btn-disabled-border-color: var(--vi-clay);
}

.btn-warning {
  --bs-btn-bg: var(--vi-ochre);
  --bs-btn-border-color: var(--vi-ochre);
  --bs-btn-color: #ffffff;
  --bs-btn-hover-bg: var(--vi-ochre-hover);
  --bs-btn-hover-border-color: var(--vi-ochre-hover);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: var(--vi-ochre-hover);
  --bs-btn-active-border-color: var(--vi-ochre-hover);
  --bs-btn-active-color: #ffffff;
  --bs-btn-disabled-bg: var(--vi-ochre);
  --bs-btn-disabled-border-color: var(--vi-ochre);
  --bs-btn-disabled-color: #ffffff;
}

.btn-info {
  --bs-btn-bg: var(--vi-slate);
  --bs-btn-border-color: var(--vi-slate);
  --bs-btn-color: #ffffff;
  --bs-btn-hover-bg: var(--vi-slate-hover);
  --bs-btn-hover-border-color: var(--vi-slate-hover);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: var(--vi-slate-hover);
  --bs-btn-active-border-color: var(--vi-slate-hover);
  --bs-btn-active-color: #ffffff;
  --bs-btn-disabled-bg: var(--vi-slate);
  --bs-btn-disabled-border-color: var(--vi-slate);
  --bs-btn-disabled-color: #ffffff;
}

.btn-secondary {
  --bs-btn-bg: var(--vi-sunken);
  --bs-btn-border-color: var(--vi-line);
  --bs-btn-color: var(--vi-text);
  --bs-btn-hover-bg: var(--vi-line-soft);
  --bs-btn-hover-border-color: var(--vi-line);
  --bs-btn-hover-color: var(--vi-text);
  --bs-btn-active-bg: var(--vi-line);
  --bs-btn-active-border-color: var(--vi-line);
  --bs-btn-active-color: var(--vi-text);
  --bs-btn-disabled-bg: var(--vi-sunken);
  --bs-btn-disabled-border-color: var(--vi-line);
  --bs-btn-disabled-color: var(--vi-text-dim);
}

.btn-light {
  --bs-btn-bg: var(--vi-surface);
  --bs-btn-border-color: var(--vi-line);
  --bs-btn-color: var(--vi-text);
  --bs-btn-hover-bg: var(--vi-sunken);
  --bs-btn-hover-border-color: var(--vi-line);
  --bs-btn-hover-color: var(--vi-text);
}

.btn-dark {
  --bs-btn-bg: var(--vi-text);
  --bs-btn-border-color: var(--vi-text);
  --bs-btn-color: var(--vi-surface);
  --bs-btn-hover-bg: #1c1713;
  --bs-btn-hover-border-color: #1c1713;
  --bs-btn-hover-color: var(--vi-surface);
}

/* Outline variants */
.btn-outline-primary {
  --bs-btn-color: var(--vi-brass);
  --bs-btn-border-color: var(--vi-brass);
  --bs-btn-hover-bg: var(--vi-brass);
  --bs-btn-hover-border-color: var(--vi-brass);
  --bs-btn-hover-color: var(--vi-on-accent);
  --bs-btn-active-bg: var(--vi-brass-active);
  --bs-btn-active-border-color: var(--vi-brass-active);
  --bs-btn-active-color: var(--vi-on-accent);
  --bs-btn-disabled-color: var(--vi-brass);
  --bs-btn-disabled-border-color: var(--vi-brass);
}

.btn-outline-secondary {
  --bs-btn-color: var(--vi-text-mid);
  --bs-btn-border-color: var(--vi-line);
  --bs-btn-hover-bg: var(--vi-sunken);
  --bs-btn-hover-border-color: var(--vi-text-dim);
  --bs-btn-hover-color: var(--vi-text);
  --bs-btn-active-bg: var(--vi-line-soft);
  --bs-btn-active-border-color: var(--vi-text-dim);
  --bs-btn-active-color: var(--vi-text);
  --bs-btn-disabled-color: var(--vi-text-dim);
  --bs-btn-disabled-border-color: var(--vi-line);
}

.btn-outline-success {
  --bs-btn-color: var(--vi-forest);
  --bs-btn-border-color: var(--vi-forest);
  --bs-btn-hover-bg: var(--vi-forest);
  --bs-btn-hover-border-color: var(--vi-forest);
  --bs-btn-hover-color: var(--vi-on-accent);
  --bs-btn-active-bg: var(--vi-forest-hover);
  --bs-btn-active-border-color: var(--vi-forest-hover);
  --bs-btn-disabled-color: var(--vi-forest);
  --bs-btn-disabled-border-color: var(--vi-forest);
}

.btn-outline-danger {
  --bs-btn-color: var(--vi-clay);
  --bs-btn-border-color: var(--vi-clay);
  --bs-btn-hover-bg: var(--vi-clay);
  --bs-btn-hover-border-color: var(--vi-clay);
  --bs-btn-hover-color: var(--vi-on-accent);
  --bs-btn-active-bg: var(--vi-clay-hover);
  --bs-btn-active-border-color: var(--vi-clay-hover);
  --bs-btn-disabled-color: var(--vi-clay);
  --bs-btn-disabled-border-color: var(--vi-clay);
}

.btn-outline-warning {
  --bs-btn-color: var(--vi-ochre);
  --bs-btn-border-color: var(--vi-ochre);
  --bs-btn-hover-bg: var(--vi-ochre);
  --bs-btn-hover-border-color: var(--vi-ochre);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: var(--vi-ochre-hover);
  --bs-btn-active-border-color: var(--vi-ochre-hover);
  --bs-btn-disabled-color: var(--vi-ochre);
  --bs-btn-disabled-border-color: var(--vi-ochre);
}

.btn-outline-info {
  --bs-btn-color: var(--vi-slate);
  --bs-btn-border-color: var(--vi-slate);
  --bs-btn-hover-bg: var(--vi-slate);
  --bs-btn-hover-border-color: var(--vi-slate);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: var(--vi-slate-hover);
  --bs-btn-active-border-color: var(--vi-slate-hover);
  --bs-btn-disabled-color: var(--vi-slate);
  --bs-btn-disabled-border-color: var(--vi-slate);
}

.btn-link {
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-hover-color: var(--bs-link-hover-color);
  --bs-btn-font-weight: 550;
}

/* ============================================================
   5. FORMS
   ============================================================ */

.form-label {
  font-weight: 550;
  color: var(--vi-text);
  letter-spacing: -0.003em;
}

.form-control,
.form-select {
  background-color: var(--vi-surface);
  border: 1px solid var(--vi-line);
  border-radius: var(--vi-r-md);
  color: var(--vi-text);
  transition: border-color var(--vi-t-fast), box-shadow var(--vi-t-fast);
}

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) { border-color: var(--vi-text-dim); }

.form-control:focus,
.form-select:focus {
  background-color: var(--vi-surface);
  border-color: var(--vi-brass);
  box-shadow: 0 0 0 3px var(--vi-brass-ring);
  color: var(--vi-text);
  outline: none;
}

.form-control::placeholder { color: var(--vi-text-dim); opacity: 1; }

.form-control:disabled, .form-select:disabled,
.form-control[readonly] {
  background-color: var(--vi-sunken);
  color: var(--vi-text-mid);
  cursor: not-allowed;
}

.form-control.is-invalid, .form-select.is-invalid { border-color: var(--vi-clay); }
.form-control.is-invalid:focus, .form-select.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(166, 61, 64, 0.22);
}
.form-control.is-valid, .form-select.is-valid { border-color: var(--vi-forest); }
.invalid-feedback { color: var(--vi-clay); }
.valid-feedback { color: var(--vi-forest); }

.input-group-text {
  background-color: var(--vi-sunken);
  border: 1px solid var(--vi-line);
  color: var(--vi-text-mid);
  font-weight: 550;
}

.form-check-input {
  border-color: var(--vi-line);
  background-color: var(--vi-surface);
}
.form-check-input:checked {
  background-color: var(--vi-brass);
  border-color: var(--vi-brass);
}
.form-check-input:focus {
  border-color: var(--vi-brass);
  box-shadow: 0 0 0 3px var(--vi-brass-ring);
}

.form-text { color: var(--vi-text-dim); }

/* ============================================================
   6. CARDS
   ============================================================ */

.card {
  --bs-card-bg: var(--vi-surface);
  --bs-card-border-color: var(--vi-line);
  --bs-card-border-radius: var(--vi-r-lg);
  --bs-card-inner-border-radius: calc(var(--vi-r-lg) - 1px);
  --bs-card-cap-bg: transparent;
  --bs-card-color: var(--vi-text);
  border: 1px solid var(--vi-line);
  box-shadow: var(--vi-shadow-sm);
  /* No translateY on hover: cards sit in dense dashboards and
     tables here, and the jump made scanning them unpleasant. */
  transition: box-shadow var(--vi-t-base), border-color var(--vi-t-base);
}

.card:hover {
  box-shadow: var(--vi-shadow-md);
  border-color: var(--vi-line);
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--vi-line);
  color: var(--vi-text);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.card-footer {
  background: var(--vi-sunken);
  border-top: 1px solid var(--vi-line);
  color: var(--vi-text-mid);
}

.card-title { color: var(--vi-text); font-weight: 620; }
.card-text  { color: var(--vi-text-mid); }

/* Coloured card headers keep working (bg-primary/-info/... on
   .card-header is used throughout index.php). The Bootstrap
   bridge above already retints them; just fix the text colour. */
.card-header.bg-primary,
.card-header.bg-success,
.card-header.bg-danger,
.card-header.bg-info,
.card-header.bg-dark { border-bottom: none; }

.card-header.bg-primary, .card-header.bg-primary * { color: var(--vi-on-accent); }
.card-header.bg-success, .card-header.bg-success * { color: var(--vi-on-accent); }
.card-header.bg-danger,  .card-header.bg-danger  * { color: var(--vi-on-accent); }
.card-header.bg-warning, .card-header.bg-warning * { color: #ffffff; }
.card-header.bg-info,    .card-header.bg-info    * { color: #ffffff; }

/* --- Stat card --------------------------------------------- */
.stat-card {
  position: relative;
  background: var(--vi-surface);
  border: 1px solid var(--vi-line);
  border-radius: var(--vi-r-lg);
  box-shadow: var(--vi-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--vi-t-base);
}

/* Brass rule along the top edge rather than a heavy left border */
.stat-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--vi-brass);
}
.stat-card.success::before { background: var(--vi-forest); }
.stat-card.warning::before { background: var(--vi-ochre); }
.stat-card.danger::before  { background: var(--vi-clay); }
.stat-card.info::before    { background: var(--vi-slate); }

.stat-card:hover { box-shadow: var(--vi-shadow-md); }

.stat-value {
  font-weight: 680;
  color: var(--vi-text);
  letter-spacing: -0.022em;
  line-height: 1.15;
}

.stat-label {
  color: var(--vi-text-dim);
  font-weight: 560;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  font-size: 0.72em;
}

/* Legacy hero card in index.php */
.booking-detail-card {
  background: var(--gradient-primary);
  color: #ffffff;
  border-radius: var(--vi-r-lg);
  box-shadow: var(--vi-shadow-md);
}
.booking-detail-card * { color: #ffffff; }

/* ============================================================
   7. TABLES
   This is a reporting app — tables are the main surface.
   ============================================================ */

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--vi-text);
  --bs-table-border-color: var(--vi-line-soft);
  --bs-table-striped-bg: var(--vi-sunken);
  --bs-table-striped-color: var(--vi-text);
  --bs-table-hover-bg: var(--vi-brass-soft);
  --bs-table-hover-color: var(--vi-text);
  --bs-table-active-bg: var(--vi-brass-soft);
  border-color: var(--vi-line-soft);
  margin-bottom: 0;
}

.table > thead > tr > th {
  background: var(--vi-sunken);
  color: var(--vi-text-mid);
  font-weight: 620;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.74em;
  border-bottom: 1px solid var(--vi-line);
  vertical-align: middle;
}

/* Keep headers on one line ONLY where the table can actually scroll.
   8 of this app's 42 tables are not wrapped in .table-responsive, and
   forcing nowrap on those pushed the whole page into horizontal
   overflow on narrow screens. Unwrapped tables wrap their headers
   instead, which is ugly but never breaks the layout. */
.table-responsive > .table > thead > tr > th,
.table-sticky > thead > tr > th {
  white-space: nowrap;
}

.table > tbody > tr > td {
  border-bottom: 1px solid var(--vi-line-soft);
  color: var(--vi-text);
  vertical-align: middle;
}

.table > tbody > tr:last-child > td { border-bottom: none; }
.table > tbody > tr { transition: background-color var(--vi-t-fast); }

/* Sticky header for long report tables inside a scroll box */
.table-responsive > .table > thead > tr > th,
.table-sticky > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Right-align money columns when marked up as such */
.table .text-end, .table .num { font-variant-numeric: tabular-nums; }

.table-responsive { border-radius: var(--vi-r-lg); }

/* ============================================================
   8. BADGES & STATUS PILLS
   ============================================================ */

.badge {
  --bs-badge-border-radius: var(--vi-r-pill);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--vi-r-pill);
}

/* ------------------------------------------------------------------
   Text on Bootstrap's solid semantic surfaces.

   Bootstrap 5.3 hard-codes `color: #fff` on .badge, and .text-white is
   used throughout this app. In dark mode the semantic colours become
   light pastels (so that .text-success etc. read against the dark
   ground), which turns them into LIGHT backgrounds still carrying
   WHITE text -- measured as low as 2.04:1, effectively illegible.

   --vi-on-semantic is white in light mode (no visual change) and dark
   ink in dark mode. Descendants are not blanket-targeted, so buttons
   sitting inside a coloured panel keep their own colours; only
   .text-white is pulled back into line.
   ------------------------------------------------------------------ */
/* Applies in BOTH modes. Bootstrap sets no text colour on .bg-* at
   all, so in light mode `<div class="bg-primary">` was rendering dark
   body text on a saturated brass ground (~2.2:1) unless the markup
   happened to also carry .text-white. */
.bg-primary,
.bg-secondary,
.bg-success,
.bg-danger,
.bg-warning,
.bg-info,
.bg-dark {
  color: var(--vi-on-semantic);
}

/* .text-white nested inside one of those surfaces would otherwise keep
   forcing white over a light dark-mode pastel. */
[data-theme="dark"] .bg-primary   .text-white,
[data-theme="dark"] .bg-secondary .text-white,
[data-theme="dark"] .bg-success   .text-white,
[data-theme="dark"] .bg-danger    .text-white,
[data-theme="dark"] .bg-warning   .text-white,
[data-theme="dark"] .bg-info      .text-white,
[data-theme="dark"] .bg-dark      .text-white {
  color: var(--vi-on-semantic);
}

/* .bg-light is the one that stays dark in dark mode, so it keeps
   ordinary body text rather than the flipped ink. */
[data-theme="dark"] .bg-light { color: var(--vi-text); }

/* Soft-filled status pills. Used by .status-badge markup and
   also readable if applied to .badge directly. */
.status-badge,
.badge-soft {
  display: inline-block;
  border-radius: var(--vi-r-pill);
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}

.status-pending,
.badge-warning   { background: var(--vi-ochre-soft);  color: var(--warning-dark); border-color: rgba(181,129,31,0.22); }
.status-confirmed,
.badge-success   { background: var(--vi-forest-soft); color: var(--success-dark); border-color: rgba(63,107,79,0.22); }
.status-cancelled,
.badge-danger    { background: var(--vi-clay-soft);   color: var(--danger-dark);  border-color: rgba(166,61,64,0.22); }
.status-completed,
.badge-info      { background: var(--vi-slate-soft);  color: var(--info-dark);    border-color: rgba(69,104,138,0.22); }
.badge-primary   { background: var(--vi-brass-soft);  color: var(--primary-dark); border-color: rgba(176,131,68,0.22); }
.badge-secondary { background: var(--vi-sunken);      color: var(--vi-text-mid);  border-color: var(--vi-line); }

/* Extra booking states this system uses */
.status-paid      { background: var(--vi-forest-soft); color: var(--success-dark); }
.status-partial   { background: var(--vi-ochre-soft);  color: var(--warning-dark); }
.status-refunded  { background: var(--vi-slate-soft);  color: var(--info-dark); }
.status-failed    { background: var(--vi-clay-soft);   color: var(--danger-dark); }
.status-check_in  { background: var(--vi-brass-soft);  color: var(--primary-dark); }
.status-check_out { background: var(--vi-sunken);      color: var(--vi-text-mid); }

/* ============================================================
   9. ALERTS
   ============================================================ */

.alert {
  border: 1px solid transparent;
  border-left-width: 3px;
  border-radius: var(--vi-r-md);
}

.alert-primary { background: var(--vi-brass-soft);  color: var(--primary-dark); border-color: rgba(176,131,68,0.25); border-left-color: var(--vi-brass); }
.alert-success { background: var(--vi-forest-soft); color: var(--success-dark); border-color: rgba(63,107,79,0.25);  border-left-color: var(--vi-forest); }
.alert-warning { background: var(--vi-ochre-soft);  color: var(--warning-dark); border-color: rgba(181,129,31,0.25); border-left-color: var(--vi-ochre); }
.alert-danger  { background: var(--vi-clay-soft);   color: var(--danger-dark);  border-color: rgba(166,61,64,0.25);  border-left-color: var(--vi-clay); }
.alert-info    { background: var(--vi-slate-soft);  color: var(--info-dark);    border-color: rgba(69,104,138,0.25); border-left-color: var(--vi-slate); }
.alert-secondary,
.alert-light   { background: var(--vi-sunken);      color: var(--vi-text-mid);  border-color: var(--vi-line);        border-left-color: var(--vi-text-dim); }

/* ============================================================
   10. NAVIGATION — sidebar, navbar, tabs
   responsive-compact.css owns sidebar sizing (it uses
   !important); this file supplies colour and state only.
   ============================================================ */

.sidebar {
  background: var(--vi-sidebar-bg);
  border-right: 1px solid var(--vi-sidebar-line);
  color: var(--vi-sidebar-text-strong);
}

.sidebar .nav-link {
  color: var(--vi-sidebar-text);
  border-radius: var(--vi-r-md);
  font-weight: 540;
  transition: background-color var(--vi-t-fast), color var(--vi-t-fast);
}

.sidebar .nav-link i,
.sidebar .nav-link .fas,
.sidebar .nav-link .far { color: var(--vi-sidebar-icon); transition: color var(--vi-t-fast); }

.sidebar .nav-link:hover {
  background: var(--vi-sidebar-hover-bg);
  color: var(--vi-sidebar-text-strong);
}
.sidebar .nav-link:hover i,
.sidebar .nav-link:hover .fas { color: var(--vi-sidebar-text-strong); }

/* Active item carries the accent, so it follows the colour picker. */
.sidebar .nav-link.active {
  background: var(--vi-brass);
  color: var(--vi-on-accent);
  font-weight: 620;
}
.sidebar .nav-link.active i,
.sidebar .nav-link.active .fas { color: var(--vi-on-accent); }

.sidebar .user-info {
  background: var(--vi-sidebar-well);
  border: 1px solid var(--vi-sidebar-line);
  border-radius: var(--vi-r-md);
  color: var(--vi-sidebar-text);
}

.sidebar .text-muted,
.sidebar small { color: var(--vi-sidebar-icon) !important; }

.villa-header { border-bottom: 1px solid var(--vi-sidebar-line); }
.villa-title  { color: var(--vi-sidebar-text-strong); font-weight: 680; letter-spacing: -0.015em; }
.villa-logo   { border-radius: var(--vi-r-md); object-fit: cover; }

/* Generic nav-link (outside sidebar) */
.nav-link {
  --bs-nav-link-color: var(--vi-text-mid);
  --bs-nav-link-hover-color: var(--vi-text);
  color: var(--vi-text-mid);
}

.navbar {
  background: var(--vi-surface);
  border-bottom: 1px solid var(--vi-line);
  box-shadow: var(--vi-shadow-xs);
}
.navbar-brand { color: var(--vi-text); font-weight: 680; letter-spacing: -0.015em; }

.nav-tabs {
  --bs-nav-tabs-border-color: var(--vi-line);
  --bs-nav-tabs-link-active-bg: var(--vi-surface);
  --bs-nav-tabs-link-active-color: var(--vi-text);
  --bs-nav-tabs-link-active-border-color: var(--vi-line) var(--vi-line) var(--vi-surface);
  --bs-nav-tabs-link-hover-border-color: var(--vi-line-soft);
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--vi-brass);
  --bs-nav-pills-link-active-color: var(--vi-on-accent);
  --bs-nav-pills-border-radius: var(--vi-r-md);
}

/* ============================================================
   11. MODALS, DROPDOWNS, POPOVERS
   ============================================================ */

.modal-content {
  --bs-modal-bg: var(--vi-surface);
  --bs-modal-color: var(--vi-text);
  --bs-modal-border-color: var(--vi-line);
  --bs-modal-border-radius: var(--vi-r-lg);
  border: 1px solid var(--vi-line);
  box-shadow: var(--vi-shadow-xl);
}

.modal-header {
  background: var(--vi-surface);
  border-bottom: 1px solid var(--vi-line);
  color: var(--vi-text);
}
.modal-title { font-weight: 640; letter-spacing: -0.01em; }

.modal-body   { color: var(--vi-text); }
.modal-footer { background: var(--vi-sunken); border-top: 1px solid var(--vi-line); }

.modal-backdrop.show { background-color: #2e2620; opacity: 0.42; }

.dropdown-menu {
  --bs-dropdown-bg: var(--vi-surface);
  --bs-dropdown-border-color: var(--vi-line);
  --bs-dropdown-border-radius: var(--vi-r-md);
  --bs-dropdown-link-color: var(--vi-text);
  --bs-dropdown-link-hover-bg: var(--vi-sunken);
  --bs-dropdown-link-hover-color: var(--vi-text);
  --bs-dropdown-link-active-bg: var(--vi-brass-soft);
  --bs-dropdown-link-active-color: var(--primary-dark);
  --bs-dropdown-divider-bg: var(--vi-line);
  box-shadow: var(--vi-shadow-lg);
}

.list-group {
  --bs-list-group-bg: var(--vi-surface);
  --bs-list-group-color: var(--vi-text);
  --bs-list-group-border-color: var(--vi-line);
  --bs-list-group-border-radius: var(--vi-r-md);
  --bs-list-group-action-hover-bg: var(--vi-sunken);
  --bs-list-group-action-hover-color: var(--vi-text);
  --bs-list-group-active-bg: var(--vi-brass);
  --bs-list-group-active-border-color: var(--vi-brass);
  --bs-list-group-active-color: var(--vi-on-accent);
}

.tooltip-inner {
  background: var(--vi-text);
  color: var(--vi-surface);
  border-radius: var(--vi-r-sm);
  font-weight: 520;
}

/* ============================================================
   12. PAGINATION, PROGRESS, SPINNERS
   ============================================================ */

.pagination {
  --bs-pagination-bg: var(--vi-surface);
  --bs-pagination-color: var(--vi-text-mid);
  --bs-pagination-border-color: var(--vi-line);
  --bs-pagination-border-radius: var(--vi-r-md);
  --bs-pagination-hover-bg: var(--vi-sunken);
  --bs-pagination-hover-color: var(--vi-text);
  --bs-pagination-hover-border-color: var(--vi-line);
  --bs-pagination-focus-bg: var(--vi-sunken);
  --bs-pagination-focus-box-shadow: 0 0 0 3px var(--vi-brass-ring);
  --bs-pagination-active-bg: var(--vi-brass);
  --bs-pagination-active-border-color: var(--vi-brass);
  --bs-pagination-active-color: var(--vi-on-accent);
  --bs-pagination-disabled-bg: var(--vi-sunken);
  --bs-pagination-disabled-color: var(--vi-text-dim);
  --bs-pagination-disabled-border-color: var(--vi-line);
}

.progress {
  --bs-progress-bg: var(--vi-sunken);
  --bs-progress-border-radius: var(--vi-r-pill);
  --bs-progress-bar-bg: var(--vi-brass);
}

.spinner-border, .spinner-grow { color: var(--vi-brass); }

/* ============================================================
   13. MISC APP SURFACES
   ============================================================ */

/* Calendar grid in index.php */
.calendar-container {
  background: var(--vi-surface);
  border: 1px solid var(--vi-line);
  border-radius: var(--vi-r-lg);
  box-shadow: var(--vi-shadow-sm);
}

.calendar-day {
  border: 1px solid var(--vi-line-soft);
  transition: background-color var(--vi-t-fast);
}
.calendar-day:hover      { background-color: var(--vi-sunken); }
.calendar-day.has-booking{ background-color: var(--vi-brass-soft); }
.calendar-day.selected   { background-color: var(--vi-brass); color: var(--vi-on-accent); }

.booking-indicator {
  background: var(--vi-clay);
  color: #ffffff;
  border-radius: var(--vi-r-pill);
  font-weight: 620;
}

.room-card {
  background: var(--vi-surface);
  border: 1px solid var(--vi-line);
  border-radius: var(--vi-r-lg);
  box-shadow: var(--vi-shadow-sm);
  transition: box-shadow var(--vi-t-base), border-color var(--vi-t-base);
}
.room-card:hover { box-shadow: var(--vi-shadow-md); border-color: var(--vi-brass); }

/* Customer search dropdowns (index.php inline styles target these) */
#searchResults,
.customer-suggestions-dropdown {
  background: var(--vi-surface);
  border: 1px solid var(--vi-line);
  border-radius: var(--vi-r-md);
  box-shadow: var(--vi-shadow-lg);
}
#searchResults .list-group-item:hover,
.customer-suggestion-item:hover { background-color: var(--vi-brass-soft); }
.customer-suggestion-item { border-bottom: 1px solid var(--vi-line-soft); }

/* ============================================================
   14. ANIMATION
   ============================================================ */

@keyframes fadeIn      { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInUp   { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes slideInDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes pulse       { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes shimmer     { 0% { background-position: -600px 0; } 100% { background-position: 600px 0; } }

.fade-in       { animation: fadeIn var(--vi-t-base) both; }
.slide-in-up   { animation: slideInUp var(--transition-slow) both; }
.slide-in-down { animation: slideInDown var(--transition-slow) both; }
.pulse         { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* Skeleton placeholder for tables/cards while fetching */
.skeleton {
  background: linear-gradient(90deg,
    var(--vi-sunken) 0%, var(--vi-line-soft) 50%, var(--vi-sunken) 100%);
  background-size: 600px 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--vi-r-sm);
  color: transparent !important;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   15. PRINT — reports and booking confirmations get printed
   ============================================================ */

@media print {
  :root { --vi-ground: #fff; --vi-surface: #fff; --vi-sunken: #fff; }

  body { background: #fff !important; color: #000 !important; }

  .sidebar, .navbar, .btn, .pagination,
  .modal, .modal-backdrop, .no-print { display: none !important; }

  .card, .stat-card, .table-responsive {
    box-shadow: none !important;
    border: 1px solid #999 !important;
    break-inside: avoid;
  }

  .table > thead > tr > th {
    background: #eee !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  a[href]::after { content: ""; }
  tr, img { break-inside: avoid; }
  thead { display: table-header-group; }
}