/* Custom styles layered on top of Tailwind.
   M1 dev uses the Tailwind Play CDN (see base.html). For staging/prod, compile
   with the Tailwind standalone CLI into app/static/css/tailwind.css and swap the
   CDN <script> for a <link> to that file. */

:root {
  --brand: #03a9a0; /* Schogini teal (overridden per-org by branding) */
}

/* ── Sophisticated polish layer (v2) ───────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(3,169,160,.06), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(108,99,255,.06), transparent 55%),
    #eef2f7;
}

/* Sidebar — deep gradient + crisp dividers */
aside {
  background: linear-gradient(180deg, #0b1220 0%, #101c30 55%, #0b1220 100%) !important;
  border-right: 1px solid rgba(255,255,255,.06);
}
aside nav a {
  border-radius: 10px;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
  color: #c2cbd9;
}
aside nav a:hover { background: rgba(255,255,255,.06) !important; color: #fff; }
/* Active item: brand-tinted with a left accent bar */
aside nav a.nav-active {
  background: color-mix(in srgb, var(--brand) 22%, transparent) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 0 var(--brand);
  font-weight: 600;
}

/* Header bar */
header {
  background: rgba(255,255,255,.85) !important;
  backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid rgba(15,23,42,.07);
}

/* Cards — softer, layered shadow + hairline border + gentle hover lift */
main .shadow {
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 28px -12px rgba(16,24,40,.14) !important;
  border: 1px solid rgba(15,23,42,.06);
}
main .rounded-lg.shadow, main .rounded-xl.shadow { border-radius: 14px; }
main .shadow:hover { box-shadow: 0 2px 4px rgba(16,24,40,.05), 0 18px 40px -14px rgba(16,24,40,.20) !important; }

/* Headings */
main h1 { font-weight: 800; letter-spacing: -.02em; color: #0f172a; }
main h2 { letter-spacing: -.01em; }

/* Tables — uppercase tracked headers + hover */
main table thead th {
  text-transform: uppercase; font-size: .68rem; letter-spacing: .06em; color: #64748b;
}
main table tbody tr { transition: background .12s ease; }
main table tbody tr:hover { background: #f8fafc; }

/* Primary (brand) buttons get a soft brand glow */
.bg-brand { box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--brand) 65%, transparent); }

/* Inline code chips */
code { background: #f1f5f9; padding: 1px 6px; border-radius: 6px; font-size: .85em; }

/* Tidy scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }