/* ============================================================================
   FABLE THEME LAYER — Sun Diego Auto Spa
   Loaded AFTER style.css as a non-destructive overlay. Elevates the existing
   gold / Rajdhani / Orbitron system into a premium finish without touching
   page markup. Safe to remove by unlinking the stylesheet.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Orbitron:wght@400;500;600;700;900&display=swap');

/* ── Refined token palette ───────────────────────────────────────────────── */
:root {
  --gold:        #9D7835;   /* the gold Walter picked */
  --gold-light:  #c2974a;
  --gold-dim:    #6f5224;
  --gold-glow:   rgba(157,120,53,.22);

  --ink:         #14110b;   /* warm near-black for headings */
  --text:        #1b1813;
  --text-muted:  #5a5448;

  --line:        #e6e0d4;   /* hairlines */
  --line-soft:   #f0ebe1;
  --paper:       #f4f1ea;   /* page background */
  --paper-2:     #efe9dd;

  --radius:      20px;
  --radius-sm:   12px;
  --shadow:      0 1px 2px rgba(20,17,11,.04), 0 12px 34px rgba(20,17,11,.08);
  --shadow-lg:   0 18px 48px rgba(20,17,11,.14);
  --glass-blur:  saturate(160%) blur(18px);
}

/* ── Page canvas: subtle warm gradient ───────────────────────────────────── */
body {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(157,120,53,.06), transparent 60%),
    linear-gradient(180deg, #f6f3ec 0%, #efeade 100%) !important;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ── Headings: tighter, premium ──────────────────────────────────────────── */
h1, h2, h3, h4 { color: var(--ink); letter-spacing: .02em; }
.topbar h1 { font-family: 'Orbitron', monospace; font-weight: 600; letter-spacing: .04em; }

/* ── Sidebar: deep graphite with gold rail ───────────────────────────────── */
.sidebar {
  /* NOTE: do NOT set position here — style.css uses sticky (desktop) /
     fixed (mobile) and this overlay loads later, so any position value
     would override both and break scrolling + the mobile drawer. */
  background: linear-gradient(180deg, #15171c 0%, #0f1116 100%) !important;
  border-right: 1px solid rgba(157,120,53,.18) !important;
}
.sidebar::after {                       /* glowing gold edge */
  content: ''; position: absolute; top: 0; right: -1px; bottom: 0; width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold-glow) 30%, var(--gold-glow) 70%, transparent);
  pointer-events: none;
}
.sidebar-logo .brand {
  font-family: 'Orbitron', monospace; letter-spacing: .12em;
  background: linear-gradient(90deg, #fff, var(--gold-light));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sidebar-section {
  color: rgba(255,255,255,.32) !important;
  letter-spacing: .22em !important;
  font-family: 'Orbitron', monospace;
  font-size: .56rem !important;
}
.sidebar-nav a { color: rgba(255,255,255,.66) !important; border-radius: 8px; transition: background .16s, color .16s, box-shadow .16s; }
.sidebar-nav a svg { opacity: .7; transition: opacity .16s; }
.sidebar-nav a:hover { background: rgba(157,120,53,.12) !important; color: #fff !important; }
.sidebar-nav a:hover svg { opacity: 1; }
.sidebar-nav a.active {
  background: linear-gradient(90deg, rgba(157,120,53,.26), rgba(157,120,53,.05)) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 var(--gold);
}
.sidebar-nav a.active svg { opacity: 1; color: var(--gold-light); }
.sidebar-footer { border-top: 1px solid rgba(255,255,255,.08) !important; }
.sidebar-footer .user-name { color: #fff; }

/* ── Cards: frosted liquid glass, soft-floating, gold top-rail ───────────── */
.card {
  background: rgba(255,255,255,.62);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.6);
  border-radius: var(--radius);
  position: relative;
  transition: box-shadow .2s, transform .2s;
}
.card::before {
  display: block !important;
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent 70%);
  border-radius: var(--radius) var(--radius) 0 0;
}
.card:hover { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.6); transform: translateY(-1px); }
.card-header h3 { color: var(--gold-dim); font-family: 'Orbitron', monospace; letter-spacing: .08em; }

/* ── Buttons: glossy gold pills ──────────────────────────────────────────── */
.btn { border-radius: 999px; transition: filter .18s, transform .12s, box-shadow .2s; }
.btn-gold {
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  color: #fff;
  box-shadow: 0 4px 14px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-gold:hover { filter: brightness(1.05); box-shadow: 0 8px 22px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-gold:active { transform: scale(.98); }
.btn-outline {
  border: 1px solid rgba(157,120,53,.5);
  color: var(--gold-dim);
  background: rgba(255,255,255,.45);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.btn-outline:hover { background: var(--gold-glow); color: var(--gold-dim); }

/* ── Forms: soft glass fields ────────────────────────────────────────────── */
.form-control {
  border-radius: var(--radius-sm);
  border-color: rgba(20,17,11,.12);
  background: rgba(255,255,255,.65);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.form-control:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow); background: #fff; }
.form-group label { color: var(--gold-dim); }

/* ── Tables ──────────────────────────────────────────────────────────────── */
thead th {
  background: linear-gradient(180deg, #faf7f1, #f5efe4);
  color: var(--gold-dim);
  border-bottom: 1px solid var(--line);
}
tbody tr { border-bottom: 1px solid var(--line-soft); }
tbody tr:hover { background: #faf6ee; }

/* ── Badges (pill) ───────────────────────────────────────────────────────── */
.badge { border-radius: 999px; letter-spacing: .1em; }

/* ── Topbar: frosted glass ───────────────────────────────────────────────── */
.topbar {
  background: rgba(246,243,236,.62);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid rgba(255,255,255,.6);
}

/* ── Stat / KPI tiles: frosted glass + soft glow ─────────────────────────── */
.stat-card, .kpi-card, .metric-card {
  position: relative; overflow: hidden;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--radius);
  background: rgba(255,255,255,.6);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.6);
}
.stat-card::after, .kpi-card::after, .metric-card::after {
  content: ''; position: absolute; right: -20px; top: -20px;
  width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle, var(--gold-glow), transparent 70%);
  pointer-events: none;
}
.stat-value, .kpi-value, .metric-value { font-family: 'Orbitron', monospace !important; color: var(--ink); }

/* ── Links ───────────────────────────────────────────────────────────────── */
a { color: var(--gold-dim); }
a:hover { color: var(--gold); }

/* ── Scrollbar polish ────────────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--gold) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(157,120,53,.45); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ── Mobile topbar brand ─────────────────────────────────────────────────── */
.mob-topbar { background: linear-gradient(180deg, #15171c, #0f1116) !important; border-bottom: 1px solid rgba(157,120,53,.2) !important; }
.mob-brand { font-family: 'Orbitron', monospace; letter-spacing: .08em; color: #fff; }