/* tamPrime theme — loaded last on every page, so it sets the look for the whole app. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

html:root {
  --paper:#F3F5FA; --ink:#0F172A; --ink-dim:#5B6478; --ink-mute:#8A93A6; --line:#E2E7F0; --grid:#EDF0F6; --card:#FFFFFF;
  --accent:#4F46E5; --accent-ink:#FFFFFF; --accent-2:#7C3AED;
  --in:#0EA5E9; --out:#F97316;
  --warn:#B45309; --warn-bg:#FEF3C7; --danger:#DC2626; --danger-bg:#FEE2E2; --success:#059669; --success-bg:#D1FAE5;
  --shadow: 0 1px 2px rgba(15,23,42,.05), 0 4px 16px -6px rgba(15,23,42,.10);
  --radius:16px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html:root:not([data-theme="light"]) {
    --paper:#0B1020; --ink:#E6E9F2; --ink-dim:#9AA3B8; --ink-mute:#6C7590; --line:#232B40; --grid:#1A2135; --card:#121829;
    --accent:#818CF8; --accent-ink:#0B1020; --accent-2:#A78BFA;
    --in:#38BDF8; --out:#FB923C;
    --warn:#FBBF24; --warn-bg:#3A2C0B; --danger:#F87171; --danger-bg:#3B1518; --success:#34D399; --success-bg:#0F2F25;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -10px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}

html body {
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background:
    radial-gradient(1200px 500px at 100% -10%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 60%),
    radial-gradient(900px 400px at -10% -10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%),
    var(--paper);
  background-attachment: fixed;
  letter-spacing:-0.005em;
}
h1 { font-weight:800 !important; letter-spacing:-0.02em; }
h2 { letter-spacing:-0.01em; }

/* ---- top navigation: brand + pill tabs ---- */
nav.tabs {
  position:sticky; top:8px; z-index:40;
  display:flex; align-items:center; gap:4px;
  padding:6px; margin:0 0 20px;
  background:color-mix(in srgb, var(--card) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow);
}
nav.tabs::before {
  content:"tamPrime"; flex:none;
  font-weight:800; font-size:15px; letter-spacing:-0.02em; padding:0 12px 0 10px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
nav.tabs a {
  border:none !important; margin:0 !important; border-radius:999px;
  padding:8px 14px; font-size:13.5px; font-weight:600; color:var(--ink-dim);
  transition:background .15s, color .15s;
}
nav.tabs a:hover { color:var(--ink); background:color-mix(in srgb, var(--ink) 6%, transparent); }
nav.tabs a.active {
  color:#fff; background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 4px 12px -4px color-mix(in srgb, var(--accent) 70%, transparent);
}
@media (max-width:640px) {
  nav.tabs { border-radius:14px; top:4px; }
  nav.tabs::before { display:none; }
  nav.tabs a { padding:7px 11px; font-size:13px; }
}

/* ---- surfaces ---- */
.card, .panel, .stat, .kpi, .tablewrap, .modal {
  border-radius:var(--radius) !important;
  border-color:var(--line) !important;
  box-shadow:var(--shadow);
}
.modal { box-shadow:0 30px 80px -20px rgba(15,23,42,.45) !important; }
#modalBackdrop { background:rgba(15,23,42,.45) !important; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }

/* ---- buttons ---- */
.btn { border-radius:10px !important; font-weight:600; transition:transform .08s, box-shadow .15s, background .15s, filter .15s; }
.btn:active:not(:disabled) { transform:translateY(1px); }
.btn.primary {
  background:linear-gradient(135deg, var(--accent), var(--accent-2)) !important; color:#fff !important; border:none !important;
  box-shadow:0 6px 16px -8px color-mix(in srgb, var(--accent) 80%, transparent);
}
.btn.primary:hover:not(:disabled) { filter:brightness(1.07); box-shadow:0 10px 22px -10px color-mix(in srgb, var(--accent) 90%, transparent); }
.btn.ghost { background:var(--card) !important; border:1px solid var(--line) !important; }
.btn.ghost:hover:not(:disabled) { border-color:color-mix(in srgb, var(--accent) 45%, var(--line)) !important; color:var(--accent); }
.chip { border-radius:999px; transition:background .15s, color .15s; }
.chip.active { background:linear-gradient(135deg, var(--accent), var(--accent-2)) !important; border-color:transparent !important; color:#fff !important; }

/* ---- form fields ---- */
input[type=text], input[type=search], input[type=number], input[type=date], input[type=password], select, textarea {
  border-radius:10px !important;
  transition:border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline:none !important;
  border-color:var(--accent) !important;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

/* ---- tables ---- */
th { color:var(--ink-mute) !important; font-weight:700 !important; letter-spacing:.06em !important; }
tbody tr { transition:background .12s; }
tbody tr:hover { background:color-mix(in srgb, var(--accent) 4%, transparent); }

/* ---- small things ---- */
.pill, .badge { border-radius:999px; }
.toast { border-radius:12px !important; box-shadow:0 12px 30px -10px rgba(15,23,42,.5); }
::selection { background:color-mix(in srgb, var(--accent) 25%, transparent); }
a { color:var(--accent); }
.mono, .sk, code, .num { font-family:'JetBrains Mono', ui-monospace, monospace; }

/* the clear Edit button used in tables */
.editbtn {
  display:inline-flex; align-items:center; gap:5px;
  border:1px solid color-mix(in srgb, var(--accent) 40%, var(--line)) !important;
  background:color-mix(in srgb, var(--accent) 9%, var(--card)) !important;
  color:var(--accent) !important; font-weight:700 !important; font-size:12.5px !important;
  padding:5px 11px !important; border-radius:8px !important; cursor:pointer; font-family:inherit;
}
.editbtn:hover { background:var(--accent) !important; color:#fff !important; border-color:var(--accent) !important; }

/* login page */
body.login .card { max-width:360px; padding:28px; }
body.login h1::before {
  content:"tamPrime"; display:block; font-size:24px; margin-bottom:6px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
body.login button { border-radius:10px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; }