/* =========================
   layout.css — unified + fixed
   ========================= */

/* --------- TOKENS --------- */
:root{
  /* dark baseline */
  --bg:#000000;              /* page canvas */
  --fg:#ffffff;              /* primary text */
  --muted:#9ca3af;           /* secondary text (TEXT, not background) */
  --blue:#1676d8;
  --green:#06a06b;
  --red:#c3122b;
  --border:#1a1a1a;

  /* surfaces / controls */
  --surface:#0a0a0a;         /* panel background */
  --surface-2:#000000;       /* subtle gradient end */
  --chip:#050505;            /* small tiles/badges */
  --input-bg:#0a0a0a;
  --input-ink:#ffffff;
  --btn-bg:#0a0a0a;
  --btn-ink:#ffffff;

  /* glow */
  --glow-core: rgba(40,160,255,.55);
  --glow-ring: rgba(40,160,255,.28);
  --glow-fade: rgba(0,0,0,0);

  /* cursor pos (via JS) */
  --mx: 50vw;
  --my: 50vh;

  /* aliases to match page code */
  --panel: var(--surface);
  --panel-2: var(--surface-2);
  --ink: var(--fg);
  --ink-muted: var(--muted);
  --table-border: var(--border);
  --accent-blue: var(--blue);
  --accent-green: var(--green);
  --accent-red: var(--red);
}

/* light theme — support class on html or body */
html.theme-light, body.theme-light{
  --bg:#dff0ff;
  --fg:#000000;
  --muted:#2f2f2f;
  --blue:#1a6fb8;
  --green:#147a38;
  --red:#b21d1d;
  --border:#b7d6ff;

  --surface:#eaf4ff;
  --surface-2:#dff0ff;
  --chip:#cfe8ff;

  --input-bg:#ffffff;
  --input-ink:#000000;
  --btn-bg:#cfe8ff;
  --btn-ink:#000000;

  --glow-core: rgba(40,160,255,.35);
  --glow-ring: rgba(40,160,255,.18);
  --glow-fade: rgba(223,240,255,0);

  /* keep aliases in sync */
  --panel: var(--surface);
  --panel-2: var(--surface-2);
  --ink: var(--fg);
  --ink-muted: var(--muted);
  --table-border: var(--border);
  --accent-blue: var(--blue);
  --accent-green: var(--green);
  --accent-red: var(--red);
}

/* --------- BASE --------- */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--ink);
  font-family:Segoe UI,system-ui,-apple-system,Roboto,Ubuntu,"Noto Sans",sans-serif;
}
img,svg,video{max-width:100%;height:auto}
[hidden]{display:none !important}

/* ensure no dark gutters in light mode */
html, body, .app, .content { background-color: var(--bg) !important; }

/* --------- LAYOUT GRID --------- */
.app{
  display:grid;
  grid-template-columns:260px 1fr;   /* sidebar | content */
  min-height:100vh;
}
.content{
  min-width:0;                       /* prevent grid overflow */
  display:flex; flex-direction:column;
}
.main{ padding:14px; }

/* optional centered container used by pages */
.page-center{
  width:100%; max-width:1080px; margin:0 auto;
}
@media (min-width:1600px){ .page-center{ max-width:1200px; } }
@media (max-width:980px){  .page-center{ max-width:680px; } }

/* --------- SIDEBAR --------- */
.sidebar{
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border-right:1px solid var(--border);
  padding:14px; position:relative;
}
.sb-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.sb-logo{
  width:36px;height:36px;display:grid;place-items:center;
  border:1px solid var(--border);border-radius:8px;background:var(--chip); color:var(--ink)
}
.sb-title{font-weight:700}
.sb-sub{font-size:12px;color:var(--ink-muted)}

/* nav */
.nav{list-style:none;margin:0;padding:0}
.nav a{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; margin:4px 0;
  border:1px solid var(--border); border-radius:10px;
  text-decoration:none; color:var(--ink);
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
}
.nav a:hover{border-color: var(--accent-blue); box-shadow:0 0 18px rgba(22,118,216,.18) inset}
.nav a.active{border-color: var(--accent-blue)}
.nav a::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(340px 340px at var(--mx) var(--my),
              rgba(42,163,255,.35) 0%,
              rgba(42,163,255,.16) 45%,
              rgba(0,0,0,0) 75%);
  opacity:0; transition:opacity .15s ease;
}
.nav a:hover::after{ opacity:.9; }

/* --------- HEADER --------- */
.header{
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  position:sticky; top:0; z-index:50;
}
.head-wrap{
  display:grid; grid-template-columns:auto 1fr auto auto;
  gap:12px; align-items:center; padding:12px;
}
.toggler{
  background:var(--chip); border:1px solid var(--border); color:var(--ink);
  border-radius:10px; padding:8px 10px; cursor:pointer;
}
.brand{font-weight:700; letter-spacing:.3px}

/* search in header */
.search{display:flex; gap:8px}
.search input{
  background:var(--input-bg); border:1px solid var(--border); color:var(--input-ink);
  border-radius:10px; padding:10px; min-width:260px;
}

/* --------- CARDS / FORMS / BUTTONS --------- */
.card{
  border:1px solid var(--border);
  border-radius:16px;
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  box-shadow:inset 0 0 18px rgba(255,255,255,.03);
  padding:14px;
}

.input, select.input, input.input{
  width:100%;
  background:var(--input-bg);
  color:var(--input-ink);
  border:1px solid var(--border);
  border-radius:10px;
  padding:9px 10px;
  height:38px; line-height:1.2; outline:none;
}
.input:focus, select.input:focus{
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(26,111,184,.22);
}
.input[readonly]{ opacity:.85; }

.btn{
  background:var(--btn-bg);
  color:var(--btn-ink);
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 10px;
  height:38px; cursor:pointer;
}
.btn:hover{ filter:brightness(1.06); }
.btn:disabled{ opacity:.6; cursor:not-allowed; }
.btn.blue{  border-color: var(--accent-blue); }
.btn.green{ border-color: var(--accent-green); }
.btn.red{   border-color: var(--accent-red); }
.btn-xs{ padding:6px 8px; height:auto; font-size:12px; }

/* small badges / help */
.tag{
  display:inline-block; border:1px solid var(--border);
  background:var(--chip); color:var(--ink);
  border-radius:999px; padding:3px 8px; font-size:12px;
}

/* form grid helper */
.form-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:10px}
.fg-3{grid-column:span 3}.fg-4{grid-column:span 4}.fg-6{grid-column:span 6}.fg-12{grid-column:span 12}

/* --------- TABLES --------- */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table{
  width:100%;
  border-collapse:separate; border-spacing:0;
  margin-top:8px;
}
.table th,.table td{
  border-bottom:1px solid var(--table-border);
  padding:10px; text-align:left; white-space:nowrap; vertical-align:middle;
}
.table thead th{
  position:sticky; top:0; z-index:1;
  background:var(--panel);                  /* never use --muted here */
  color:var(--ink-muted);
  text-transform:uppercase; letter-spacing:.3px; font-size:12px;
}
.table tfoot input{ text-align:right; font-weight:700; }
.table tbody tr:hover td{
  background: rgba(255,255,255,.05);        /* subtle hover for dark; still fine in light */
}
/* rounded header corners inside cards */
.table-wrap .table thead th:first-child{ border-top-left-radius:10px; }
.table-wrap .table thead th:last-child{  border-top-right-radius:10px; }

/* --------- TYPEAHEAD (inline dropdown) --------- */
.typeahead-wrap{ position:relative; }
.typeahead-list{
  position:absolute; left:0; right:0; top:100%;
  z-index:9999;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  margin-top:4px; max-height:320px; overflow:auto; display:none; padding:4px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.typeahead-head{
  display:grid; grid-template-columns: 1.6fr .9fr .9fr .9fr .7fr;
  gap:8px; padding:6px 10px; font-size:11px;
  text-transform:uppercase; color:var(--ink-muted);
  position:sticky; top:0; background:var(--panel); z-index:1;
}
.typeahead-item{
  display:grid; grid-template-columns: 1.6fr .9fr .9fr .9fr .7fr;
  gap:8px; padding:8px 10px; border-radius:8px; cursor:pointer;
}
.typeahead-item:hover, .typeahead-item.active{
  background: rgba(255,255,255,.08);
}
.typeahead-empty{ padding:8px 10px; font-size:12px; color:var(--ink-muted); }
input[type="number"].input{ text-align:right; }

/* --------- RESPONSIVE --------- */
@media (max-width:980px){
  .app{ grid-template-columns:1fr; }
  .sidebar{ position:sticky; top:0; z-index:40; }
  .head-wrap{ grid-template-columns: 1fr auto; }
  .search input{ min-width:0; width:100%; }
}

/* --------- GLOW LAYERS --------- */
.glowable{ position:relative; overflow:hidden; }
.glowable::before{
  content:""; position:absolute; inset:-20%; pointer-events:none;
  background: radial-gradient(520px 520px at var(--mx) var(--my),
              var(--glow-core) 0%,
              var(--glow-ring) 42%,
              var(--glow-fade) 70%);
  opacity:.95; mix-blend-mode:screen; transition: opacity .15s ease;
}
.sidebar.glowable::before{ opacity:.85; }
.header.glowable::before{ opacity:.9; }

.tile{ position:relative; overflow:hidden; }
.tile::before{
  content:""; position:absolute; inset:-20%; pointer-events:none;
  background: radial-gradient(420px 420px at var(--mx) var(--my),
              rgba(40,160,255,.40) 0%,
              rgba(40,160,255,.20) 45%,
              rgba(0,0,0,0) 72%);
  opacity:.9; transition:opacity .15s ease;
}
.tile:hover::before{ opacity:1; }

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .glowable::before, .tile::before, .nav a::after{ transition:none; }
}

/* optional global cursor glow overlay (tamed in light mode) */
#cursorGlow{
  position: fixed; inset: -20%; pointer-events: none; z-index: 2147483647;
  background: radial-gradient(520px 520px at var(--mx) var(--my),
              var(--glow-core) 0%,
              var(--glow-ring) 42%,
              var(--glow-fade) 70%);
  mix-blend-mode: screen; opacity: .9; transition: opacity .12s ease;
}
html.theme-light #cursorGlow,
body.theme-light #cursorGlow{
  mix-blend-mode: multiply; opacity: .25;
}