/* base.css — reset, typography, CSS custom properties */

/* ── CSS Variables ── Deep navy + teal palette ── */
:root {
  /* Backgrounds — cool deep navy with subtle blue cast */
  --color-bg:         #0a1424;   /* navy-950 */
  --color-sidebar-bg: #0f1d34;   /* navy-900 */
  --color-header-bg:  #112742;   /* navy-850 */
  --color-surface:    #16243f;   /* navy-800 */
  --color-surface2:   #1f3358;   /* navy-700 */
  --color-border:     #243a62;   /* slate-blue 600 */
  --color-border2:    #1a2a48;   /* slate-blue 700 */

  /* Text */
  --color-text:       #e6edf7;   /* off-white slate */
  --color-text-muted: #94a3b8;   /* slate-400 */
  --color-text-dim:   #64748b;   /* slate-500 */

  /* Primary accent — teal (replaces indigo) */
  --color-primary:     #14b8a6;  /* teal-500 */
  --color-primary-d:   #0d9488;  /* teal-600 */
  --color-primary-l:   #2dd4bf;  /* teal-400 */
  --color-primary-bg:  rgba(20,184,166,0.16);

  /* Legacy indigo names kept as aliases so existing rules still work */
  --color-indigo:     var(--color-primary);
  --color-indigo-d:   var(--color-primary-d);
  --color-indigo-bg:  var(--color-primary-bg);

  /* Status */
  --color-green:      #10b981;   /* emerald-500 */
  --color-green-bg:   rgba(16,185,129,0.16);
  --color-amber:      #f59e0b;   /* amber-500 */
  --color-amber-bg:   rgba(245,158,11,0.16);
  --color-red:        #ef4444;   /* red-500 */
  --color-red-bg:     rgba(239,68,68,0.16);
  --color-blue:       #38bdf8;   /* sky-400 */
  --color-blue-bg:    rgba(56,189,248,0.16);
  --color-rose:       #f43f5e;   /* rose-500 */

  /* Form modal (light surface) — same calming navy header */
  --form-bg:          #ffffff;
  --form-text:        #0f172a;   /* slate-900 */
  --form-border:      #cbd5e1;   /* slate-300 */
  --form-muted:       #64748b;   /* slate-500 */
  --form-label:       #334155;   /* slate-700 */
  --form-input-bg:    #f8fafc;   /* slate-50 */
  --form-header-bg:   #0f3a5b;   /* deep teal-navy */
  --form-accent:      #0d9488;   /* teal-600 */
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
  background:
    radial-gradient(1200px 600px at 0% -10%, rgba(20,184,166,0.06), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(56,189,248,0.05), transparent 60%),
    var(--color-bg);
  background-attachment: fixed;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
table { border-collapse: collapse; }

/* ── Typography ── */
h1 { font-size: 1.5rem; font-weight: 700; }
h2 { font-size: 1.25rem; font-weight: 600; }
h3 { font-size: 1.1rem; font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; }
p { margin-bottom: 0.5rem; }
p:last-child { margin-bottom: 0; }
small { font-size: 0.8125rem; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-surface2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4b5563; }

/* ── Global error banner (inserted by layout.js) ── */
#global-error-banner {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: var(--color-red);
  color: #fff;
  padding: 10px 16px;
  font-size: 0.875rem;
  font-weight: 500;
}
#global-error-banner.visible { display: flex; align-items: center; gap: 8px; }
#global-error-banner .err-close {
  margin-left: auto; cursor: pointer; font-size: 1.1rem; opacity: 0.8;
}

/* ── Loading spinner ── */
.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Utilities ── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.text-muted  { color: var(--color-text-muted); }
.text-dim    { color: var(--color-text-dim); }
.text-sm     { font-size: 0.875rem; }
.text-xs     { font-size: 0.75rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2       { gap: 8px; }
.gap-3       { gap: 12px; }
.gap-4       { gap: 16px; }
.mt-1        { margin-top: 4px; }
.mt-2        { margin-top: 8px; }
.mt-4        { margin-top: 16px; }
.mb-1        { margin-bottom: 4px; }
.mb-2        { margin-bottom: 8px; }
.mb-4        { margin-bottom: 16px; }
.p-4         { padding: 16px; }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }