/* ============================================================
   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 ---------- */
/* login card: radius/border/shadow MOVED to crewthat-system.css §2 (auth cards
   are now unified with .invite-card / .join-card). Only the glass blur — which
   is unique to this surface — stays here. */
html:not([data-theme="light"]) .login-card {
  -webkit-backdrop-filter: var(--glass-blur-lg); backdrop-filter: var(--glass-blur-lg);
}
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 ----------
     MOVED 2026-07-20 to assets/crewthat-system.css, which is now the single
     source of truth for card surface/radius/shadow. Kept empty here rather
     than out-specified: two competing !important card definitions was the
     original defect. See crewthat-system.css §2. */

  /* ---------- 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 ----------
     MOVED 2026-07-20 to assets/crewthat-system.css §3, which owns the whole
     button system (base + primary/secondary/ghost/destructive + sizes +
     hover/active/disabled/focus). */

  /* ---------- 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 */
    /* radius jump to 14px REMOVED 2026-07-20 — cards keep one radius at every width (crewthat-system.css §2). */
    /* multi-column stat grids collapse to 2-up */
    .stats, .kpis, .stat-grid { grid-template-columns: 1fr 1fr !important; }
  }
}