/* ============================================================
   CREWTHAT — PREMIUM APP LAYER (dashboards)
   ------------------------------------------------------------
   Visual-only depth/glass/glow for the app shell, to match the
   premium public surface. STRICT RULE: only presentation props
   (background, box-shadow, border-color, backdrop-filter, color,
   transition) — never layout (no display/position/size/flex/grid
   changes) so it cannot break a working dashboard. Scoped to dark
   theme. Consumes design-tokens.css. Loaded LAST on app pages.

   Strategy: glass (backdrop-filter) only on chrome that has few
   instances (sidebar, modal, bottom-tabs); content panels get a
   deep SOLID surface + sheen + elevation (no blur) to stay fast on
   data-dense pages.
   ============================================================ */

/* ── ONE RED everywhere ──────────────────────────────────────
   The app shell shipped a second, more-orange red (--accent #cc1f1f)
   that clashed with the marketing red (#cc1f1f / the gradient). Unify
   it so every red — login hazard stripe, links, dashboard buttons —
   matches the landing exactly. (Loads after app-shell.css → wins.) */
:root {
  --accent: #cc1f1f;
  --accent-hover: #e02222;
  --accent-dim: #7a1212;
}

html:not([data-theme="light"]) {

  /* ---------- sidebar: glass + depth ---------- */
  .sidebar {
    background: var(--glass-bg-strong) !important;
    -webkit-backdrop-filter: var(--glass-blur-lg); backdrop-filter: var(--glass-blur-lg);
    border-right: 1px solid var(--glass-border);
    box-shadow: 1px 0 0 rgba(255,255,255,0.03) inset, 24px 0 60px -30px rgba(0,0,0,0.9);
  }
  .sidebar-link { transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast); border-radius: 10px; }
  .sidebar-link:hover { background: rgba(255,255,255,0.04); }
  .sidebar-link.active, .sidebar-link[aria-current="page"] {
    background: linear-gradient(90deg, rgba(204,31,31,0.18), rgba(204,31,31,0.04));
    box-shadow: inset 2px 0 0 var(--ct-red), 0 0 24px -10px rgba(204,31,31,0.6);
  }
  .logo-mark { box-shadow: 0 0 18px -2px rgba(204,31,31,0.6); }

  /* ---------- content panels / cards: depth only (no bg override) ----------
     Deliberately NOT changing panel backgrounds: dashboards use state
     colours on panels and this layer can't be visually verified logged-in,
     so we add elevation + a hairline lit border only — never flatten. */
  .panel, .modal {
    border-color: var(--glass-border);
    box-shadow: var(--elev-2);
    transition: box-shadow var(--dur-base), border-color var(--dur-base);
  }
  .panel-header { border-bottom-color: var(--glass-border); }

  /* ---------- buttons: gradient brand + glow ---------- */
  .btn.btn-primary, .btn-primary, button.primary, .btn.primary {
    background: var(--grad-primary) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 22px -8px rgba(204,31,31,0.55);
    transition: transform var(--dur-fast), box-shadow var(--dur-base);
  }
  .btn.btn-primary:hover, .btn-primary:hover, button.primary:hover, .btn.primary:hover {
    box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, var(--glow-red); transform: translateY(-1px);
  }
  .icon-btn, .btn { transition: background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast); }
  .icon-btn:hover { box-shadow: var(--glow-soft-gold); }

  /* ---------- inputs: inset depth + premium focus ---------- */
  .field-input, .field-textarea, .search-input, select.field-input, input[type="text"], input[type="email"], input[type="password"], textarea {
    background: rgba(0,0,0,0.28) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
  }
  .field-input:focus, .field-textarea:focus, .search-input:focus,
  input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus {
    border-color: var(--ct-red) !important;
    box-shadow: var(--ring), 0 0 24px -10px rgba(204,31,31,0.7) !important;
    background: rgba(0,0,0,0.34) !important;
  }

  /* ---------- chips / filters ---------- */
  .chip, .filter-chip { transition: background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast); }
  .filter-chip.active, .chip.active { box-shadow: 0 0 18px -6px rgba(204,31,31,0.6); }

  /* ---------- mobile bottom tabs: glass ---------- */
  .bottom-tabs {
    background: var(--glass-bg-strong) !important;
    -webkit-backdrop-filter: var(--glass-blur-lg); backdrop-filter: var(--glass-blur-lg);
    border-top: 1px solid var(--glass-border);
    box-shadow: 0 -1px 0 rgba(255,255,255,0.03) inset, 0 -20px 40px -30px rgba(0,0,0,0.9);
  }
  .bottom-tab.active { color: var(--ct-red); }
  .bottom-tab.active .bottom-tab-icon { filter: drop-shadow(0 0 8px rgba(204,31,31,0.6)); }

  /* ---------- modal backdrop: deeper blur ---------- */
  .modal-backdrop { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); background: rgba(0,0,0,0.6) !important; }

  /* ---------- premium scrollbar ---------- */
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-thumb { background: linear-gradient(#2a2d33, #1a1c20); border: 2px solid #0f1013; border-radius: 999px; }
  ::-webkit-scrollbar-thumb:hover { background: linear-gradient(#3a3d44, #24262b); }
  ::selection { background: rgba(255,176,32,0.28); color: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-theme="light"]) .panel, html:not([data-theme="light"]) .btn, html:not([data-theme="light"]) .sidebar-link { transition: none !important; }
}

/* ---------- login: bring the standalone login card into the premium language ---------- */
html:not([data-theme="light"]) .login-card {
  background: var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur-lg); backdrop-filter: var(--glass-blur-lg);
  border: 1px solid var(--glass-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--elev-3) !important;
}
html:not([data-theme="light"]) .login-brand .logo-mark { box-shadow: 0 0 18px -2px rgba(204,31,31,0.6); }
html:not([data-theme="light"]) .submit-btn {
  background: var(--grad-primary) !important; border-color: transparent !important; color: #fff !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 22px -8px rgba(204,31,31,0.55) !important;
}
html:not([data-theme="light"]) .submit-btn:hover:not(:disabled) {
  background: var(--grad-primary) !important; color: #fff !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, var(--glow-red) !important; transform: translateY(-1px);
}
html:not([data-theme="light"]) .mode-toggle { background: rgba(0,0,0,0.25); }
html:not([data-theme="light"]) .mode-toggle button.active { background: var(--grad-primary) !important; color: #fff !important; }

/* ---------- dashboard refinements (visual-only) ---------- */
html:not([data-theme="light"]) .page-title,
html:not([data-theme="light"]) .content-title-group .page-title { letter-spacing:.2px; }
html:not([data-theme="light"]) .content-header { border-bottom:1px solid var(--glass-border); }
html:not([data-theme="light"]) .data-table thead th { background:rgba(255,255,255,0.02); border-bottom:1px solid var(--glass-border); position:sticky; top:0; }
html:not([data-theme="light"]) .data-table tbody tr { transition:background var(--dur-fast); }
html:not([data-theme="light"]) .data-table tbody tr:hover { background:rgba(255,255,255,0.025); }
html:not([data-theme="light"]) .chip { background:rgba(255,255,255,0.03); border:1px solid var(--glass-border); transition:border-color var(--dur-fast),box-shadow var(--dur-fast); }
html:not([data-theme="light"]) .chip:hover { border-color:var(--glass-border-hi); }
html:not([data-theme="light"]) .empty .empty-icon { filter:drop-shadow(0 0 12px rgba(204,31,31,0.35)); }
html:not([data-theme="light"]) .avatar { box-shadow:0 0 0 1px rgba(255,255,255,0.06), var(--elev-1); }

/* ---------- gradient ambient background on the app shell (match public) ---------- */
html:not([data-theme="light"]) body {
  background:
    radial-gradient(125% 85% at 50% -15%, rgba(204,31,31,0.15), transparent 55%),
    radial-gradient(100% 75% at 92% 6%, rgba(255,176,32,0.10), transparent 52%),
    radial-gradient(120% 95% at 6% 100%, rgba(58,158,232,0.07), transparent 55%),
    linear-gradient(180deg, #141621 0%, #0c0d12 55%, #0a0a0c 100%) !important;
  background-attachment: fixed !important;
}

/* ============================================================
   OVERHAUL 2026.2 — mobile-first visual refresh
   Echoes the homepage (red/gold/blue glows, glass, pill buttons,
   Bebas display, mono eyebrows). Presentation-only + safe radius/
   spacing so it can't break a working dashboard. Loaded last.
   ============================================================ */
html:not([data-theme="light"]) {

  /* ---------- cards & panels: glass surface + sheen + lift ---------- */
  .card, .panel, .surface, .tile, .stat-card, .data-card {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 42%),
      var(--ct-bg-card, #1a1a1a) !important;
    border: 1px solid var(--glass-border, rgba(255,255,255,0.08)) !important;
    border-radius: 16px !important;
    box-shadow: var(--elev-2, 0 6px 16px -6px rgba(0,0,0,.5));
    transition: transform var(--dur-base,.18s) ease, box-shadow var(--dur-base,.18s) ease, border-color var(--dur-base,.18s) ease;
  }
  .card:hover, .panel:hover, .tile:hover, .data-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--elev-3, 0 16px 40px -12px rgba(0,0,0,.7));
    border-color: var(--glass-border-hi, rgba(255,255,255,0.14)) !important;
  }

  /* ---------- topbar: glassy, sticky, hairline ---------- */
  .topbar {
    background: var(--glass-bg, rgba(22,24,29,0.55)) !important;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.08)) !important;
  }
  .page-title {
    font-family: var(--font-display, 'Bebas Neue'), sans-serif;
    letter-spacing: .03em;
  }

  /* ---------- buttons: pill, gradient primary, crisp ghost ---------- */
  .btn, button.btn, .btn-s, .u-btn {
    border-radius: 999px !important;
    transition: transform var(--dur-fast,.12s) ease, box-shadow var(--dur-base,.18s) ease, border-color var(--dur-fast,.12s) ease, background var(--dur-fast,.12s) ease;
  }
  .btn:active, .btn-s:active, .u-btn:active { transform: translateY(1px) scale(.99); }
  .btn.ghost, .btn.btn-ghost {
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid var(--glass-border-hi, rgba(255,255,255,0.14)) !important;
  }
  .btn.ghost:hover, .btn.btn-ghost:hover {
    background: rgba(255,255,255,0.05) !important;
    border-color: var(--ct-red) !important;
    box-shadow: 0 0 0 1px rgba(204,31,31,.25), 0 0 24px -12px rgba(204,31,31,.8);
  }

  /* ---------- chips / pills: rounded, lit ---------- */
  .chip, .filter-chip, .pill, .badge, .tag {
    border-radius: 999px !important;
    transition: border-color var(--dur-fast,.12s) ease, box-shadow var(--dur-fast,.12s) ease, color var(--dur-fast,.12s) ease;
  }

  /* ---------- inputs: rounder, premium ---------- */
  .field-input, .field-textarea, .search-input,
  input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], select, textarea {
    border-radius: 12px !important;
  }

  /* ---------- tables: rounded shell, sticky glass head ---------- */
  .data-table, table.u-table, table.mem {
    border-radius: 14px; overflow: hidden;
  }
  .data-table thead th, table.u-table thead th {
    background: var(--glass-bg-strong, rgba(18,20,25,0.78)) !important;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }

  /* ---------- empty states & marks get a touch of glow ---------- */
  .empty-icon, .logo-mark { filter: drop-shadow(0 0 14px rgba(204,31,31,0.4)); }
}

/* ============================================================
   Mobile-first: comfortable spacing, 44px touch targets,
   stacking, no clipped controls. Applies app-wide.
   ============================================================ */
@media (max-width: 720px) {
  html:not([data-theme="light"]) {
    .btn, button.btn, .btn-s, .u-btn, .icon-btn,
    select, .field-input, input[type="text"], input[type="email"],
    input[type="password"], input[type="search"], input[type="number"] {
      min-height: 44px;
    }
    /* keep button rows from clipping: wrap instead of overflow */
    .actions, .btn-row, .toolbar, .filters, .topbar-right, .acts, .godrow {
      flex-wrap: wrap !important;
    }
    /* data tables scroll horizontally rather than hiding columns */
    .table-wrap, .data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* roomier cards on phones */
    .card, .panel, .tile { border-radius: 14px !important; }
    /* multi-column stat grids collapse to 2-up */
    .stats, .kpis, .stat-grid { grid-template-columns: 1fr 1fr !important; }
  }
}