/* Showbound CRM · Midnight and Gold, floor theme */
:root{
  --bg:#0A101C; --raised:#0F1726; --raised-2:#131D2F; --sunk:#070C16; --ink:#EEF0F3; --ink-2:#C9CED8; --muted:#9AA3B4; --faint:#737D90;
  --line:#1C2638; --line-2:#2A3650; --control:#3A4864;
  --gold:#D4AF37; --gold-2:#E8C55A; --gold-wash:rgba(212,175,55,.13); --gold-line:rgba(212,175,55,.5); --on-gold:#0B1220;
  --ok:#3CCB91; --ok-wash:rgba(60,203,145,.12); --bad:#F7768E; --bad-wash:rgba(247,118,142,.12); --warn:#E5A65A; --warn-wash:rgba(229,166,90,.12);
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; background:var(--bg); color:var(--ink); font:14px/1.55 var(--sans); -webkit-font-smoothing:antialiased; }
h1,h2,h3,p{ margin:0; }
a{ color:var(--gold-2); }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:3px; }
.muted{ color:var(--muted); } .faint{ color:var(--faint); } .nowrap{ white-space:nowrap; } .mono{ font-family:var(--mono); font-size:13px; }
.num{ font-variant-numeric:tabular-nums; } .r, td.r, th.r{ text-align:right; } .right{ text-align:right; }
.sp{ flex:1; }
.boot,.loading{ padding:48px; color:var(--muted); }

/* buttons: square corners, no pills */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; height:36px; padding:0 14px; border-radius:4px; border:1px solid var(--line-2); background:var(--raised-2); color:var(--ink); font-weight:600; font-size:13.5px; text-decoration:none; white-space:nowrap; transition:background-color .12s, border-color .12s; }
.btn:hover{ border-color:var(--control); }
.btn.primary{ background:var(--gold); border-color:var(--gold); color:var(--on-gold); }
.btn.primary:hover{ background:var(--gold-2); }
.btn.ghost{ background:transparent; border-color:transparent; color:var(--muted); }
.btn.ghost:hover{ color:var(--ink); background:rgba(255,255,255,.04); }
.btn.danger{ background:transparent; border-color:rgba(247,118,142,.45); color:var(--bad); }
.btn.sm{ height:30px; padding:0 10px; font-size:12.5px; }
.btn.wide{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

.tag{ display:inline-flex; align-items:center; height:22px; padding:0 7px; border-radius:3px; font-size:12px; font-weight:600; background:rgba(255,255,255,.06); color:var(--ink-2); white-space:nowrap; vertical-align:middle; }
.tag.ok{ background:var(--ok-wash); color:var(--ok); } .tag.bad{ background:var(--bad-wash); color:var(--bad); }
.tag.warn{ background:var(--warn-wash); color:var(--warn); } .tag.gold{ background:var(--gold-wash); color:var(--gold-2); }
.tag.line{ background:transparent; box-shadow:inset 0 0 0 1px var(--line-2); color:var(--muted); }

/* sign-in */
.center{ min-height:100vh; display:grid; place-items:center; padding:24px 16px; background:radial-gradient(800px 400px at 50% -10%, rgba(212,175,55,.08), transparent), var(--bg); }
.authcard{ width:min(420px, 100%); background:var(--raised); border:1px solid var(--line); border-radius:10px; padding:32px; display:grid; gap:14px; }
.authcard .brand{ font-weight:800; letter-spacing:-.02em; color:var(--gold-2); font-size:15px; }
.authcard h1{ font-size:24px; font-weight:800; letter-spacing:-.02em; }
.authlinks{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:13px; }
.err{ color:var(--bad); font-size:13px; min-height:0; } .err:empty{ display:none; }

/* shell */
.shell{ display:grid; grid-template-columns:232px minmax(0,1fr); min-height:100vh; }
.rail{ position:sticky; top:0; height:100vh; background:var(--sunk); border-right:1px solid var(--line); display:flex; flex-direction:column; padding:20px 14px; gap:18px; }
.rail .brand{ font-weight:800; font-size:18px; letter-spacing:-.03em; color:var(--ink); text-decoration:none; padding:0 8px; }
.rail nav{ display:grid; gap:2px; }
.rail nav a{ display:flex; align-items:center; height:38px; padding:0 10px; border-radius:4px; color:var(--muted); text-decoration:none; font-weight:600; position:relative; }
.rail nav a:hover{ color:var(--ink); background:rgba(255,255,255,.035); }
.rail nav a.on{ color:var(--gold-2); background:var(--gold-wash); }
.rail nav a.on::before{ content:""; position:absolute; left:-14px; top:8px; bottom:8px; width:3px; background:var(--gold); border-radius:0 2px 2px 0; }
.rail .me{ margin-top:auto; border-top:1px solid var(--line); padding-top:14px; display:grid; gap:8px; }
.rail .who{ display:grid; padding:0 8px; } .rail .who span{ color:var(--faint); font-size:12.5px; }
.main{ min-width:0; }
.tabbar{ display:none; }
@media (max-width:860px){
  .shell{ grid-template-columns:minmax(0,1fr); } .rail{ position:static; height:auto; flex-direction:row; align-items:center; padding:12px 16px; border-right:0; border-bottom:1px solid var(--line); }
  .rail nav{ display:none; } .rail .me{ margin:0 0 0 auto; border:0; padding:0; grid-auto-flow:column; align-items:center; } .rail .who span{ display:none; }
  .phead > div{ min-width:0; } .toolbar .input.search{ width:100%; }
  .tabbar{ display:flex; position:sticky; bottom:0; z-index:5; background:var(--sunk); border-top:1px solid var(--line); overflow-x:auto; padding-bottom:env(safe-area-inset-bottom, 0px); }
  .tabbar a{ flex:1; min-width:max-content; text-align:center; padding:12px 14px; color:var(--muted); text-decoration:none; font-weight:600; font-size:13px; }
  .tabbar a.on{ color:var(--gold-2); box-shadow:inset 0 2px 0 var(--gold); }
}

/* page */
.page{ padding:28px 32px 64px; display:grid; grid-template-columns:minmax(0,1fr); gap:18px; align-content:start; max-width:1500px; }
@media (max-width:600px){ .page{ padding:20px 14px 48px; } .rail .who{ display:none; } .kpi{ padding:14px; } }
.back{ color:var(--muted); text-decoration:none; font-size:13px; width:max-content; } .back:hover{ color:var(--ink); }
.phead{ display:flex; align-items:center; gap:12px 16px; flex-wrap:wrap; }
.phead h1{ font-size:24px; font-weight:800; letter-spacing:-.025em; line-height:1.2; }
.phead p{ margin-top:4px; }
h2{ font-size:16px; font-weight:700; letter-spacing:-.01em; margin-bottom:6px; }
h3{ font-size:14px; font-weight:700; margin-bottom:10px; }
.card{ background:var(--raised); border:1px solid var(--line); border-radius:8px; min-width:0; overflow:hidden; }
.card.pad{ padding:20px 22px; display:grid; gap:10px; align-content:start; }
.cols{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
@media (max-width:1000px){ .cols{ grid-template-columns:minmax(0,1fr); } }
.note{ background:var(--raised-2); border:1px solid var(--line-2); border-radius:6px; padding:12px 14px; color:var(--ink-2); }
.note.warn{ border-color:rgba(229,166,90,.4); background:var(--warn-wash); }
.note.ok{ border-color:rgba(60,203,145,.4); background:var(--ok-wash); }
.warnt{ color:var(--warn); }
.hint{ color:var(--faint); font-size:12.5px; }
.empty{ padding:40px 20px; text-align:center; display:grid; gap:6px; color:var(--muted); }
.empty b{ color:var(--ink); font-size:15px; }

/* segments, tabs, toolbar */
.seg{ display:inline-flex; background:var(--sunk); border:1px solid var(--line); border-radius:6px; padding:3px; gap:2px; flex-wrap:wrap; }
.seg button{ height:30px; padding:0 12px; border:0; border-radius:4px; background:transparent; color:var(--muted); font-weight:600; font-size:13px; display:inline-flex; align-items:center; gap:6px; }
.seg button:hover{ color:var(--ink); }
.seg button[aria-pressed="true"]{ background:var(--gold-wash); color:var(--gold-2); box-shadow:inset 0 0 0 1px var(--gold-line); }
.seg .n{ opacity:.7; font-variant-numeric:tabular-nums; }
.tabs{ display:flex; gap:24px; border-bottom:1px solid var(--line); overflow-x:auto; }
.tabs a{ padding:10px 0; color:var(--muted); text-decoration:none; font-weight:600; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; }
.tabs a:hover{ color:var(--ink); }
.tabs a[aria-selected="true"]{ color:var(--gold-2); border-bottom-color:var(--gold); }
.toolbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.inline{ display:inline-flex; gap:8px; align-items:center; color:var(--muted); font-weight:600; }

/* forms */
.form{ display:grid; gap:12px; }
.field{ display:grid; gap:6px; font-size:12.5px; font-weight:600; color:var(--muted); }
.input, .field input, .field select, .field textarea, .inline select, .inlineform select, select[data-role]{ height:38px; border:1px solid var(--line-2); background:var(--sunk); border-radius:4px; padding:0 10px; color:var(--ink); font-size:14px; font-weight:400; width:100%; }
.field textarea{ height:auto; padding:8px 10px; resize:vertical; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--gold); outline-offset:-1px; }
.input.search{ width:min(320px, 100%); }
.check{ display:flex; gap:8px; align-items:flex-start; font-size:13px; color:var(--ink-2); }
.check input{ margin-top:2px; accent-color:var(--gold); width:16px; height:16px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:560px){ .row2{ grid-template-columns:minmax(0,1fr); } }
.actions{ display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.inlineform{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .inlineform .input, .inlineform select{ width:auto; flex:1; min-width:160px; }
.inline select{ width:auto; }

/* tables */
.tscroll{ overflow-x:auto; }
.grid{ width:100%; border-collapse:collapse; color:inherit; }
.grid th{ text-align:left; font-size:12px; font-weight:600; color:var(--faint); padding:0 14px; height:40px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--raised); position:sticky; top:0; }
.grid td{ padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
.grid th:first-child, .grid td:first-child{ padding-left:20px; } .grid th:last-child, .grid td:last-child{ padding-right:20px; }
.grid tr:last-child td{ border-bottom:0; }
.grid tr.click{ cursor:pointer; } .grid tr.click:hover td{ background:rgba(255,255,255,.03); }
.grid .sub{ color:var(--faint); font-size:12.5px; margin-top:2px; }
.grid.small td{ padding:8px 12px; font-size:13px; } .grid.small th{ height:34px; }
.grid .neg{ color:var(--bad); } .grid .pos{ color:var(--ok); }
.rule{ color:var(--bad); font-size:12.5px; display:block; max-width:280px; }

/* pace bars and KPIs */
.bar{ position:relative; height:8px; background:rgba(255,255,255,.06); border-radius:2px; }
.bar .fill{ position:absolute; inset:0 auto 0 0; background:var(--gold); border-radius:2px; }
.bar .proj{ position:absolute; top:0; bottom:0; background:repeating-linear-gradient(90deg, transparent 0 3px, var(--line-2) 3px 4px); }
.bar .tgt{ position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--ink); }
.pace{ display:grid; grid-template-columns:minmax(80px,1fr) auto; gap:10px; align-items:center; }
.pace.big{ grid-template-columns:1fr; gap:6px; }
.kpis{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.5fr; }
.kpi{ padding:16px 20px; border-right:1px solid var(--line); display:grid; gap:6px; align-content:start; }
.kpi:last-child{ border-right:0; }
.kpi .l{ font-size:12.5px; color:var(--muted); font-weight:600; }
.kpi .v{ font-size:26px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1; }
.kpi .v small{ font-size:15px; color:var(--faint); font-weight:600; }
.kpi .s{ font-size:12.5px; color:var(--faint); }
.kpi.crit .s{ color:var(--ink-2); white-space:pre-line; }
@media (max-width:900px){ .kpis{ grid-template-columns:1fr 1fr; } .kpi{ border-bottom:1px solid var(--line); } }

/* lists */
.list{ list-style:none; margin:0; padding:0; }
.list li{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.list li:last-child{ border-bottom:0; }
.hist{ list-style:none; margin:0; padding:0; }
.hist li{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; }
.hist .sub{ color:var(--faint); font-size:12.5px; }

/* overlays */
.scrim{ position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:40; }
.drawer, .modal{ position:fixed; z-index:41; background:var(--raised); border:1px solid var(--line-2); box-shadow:0 20px 50px rgba(0,0,0,.5); overflow:auto; }
.drawer{ top:0; right:0; bottom:0; width:min(560px, 100vw); border-width:0 0 0 1px; padding-bottom:env(safe-area-inset-bottom, 0px); }
.modal{ left:50%; top:10vh; transform:translateX(-50%); width:min(560px, calc(100vw - 24px)); max-height:80vh; border-radius:10px; padding:24px; display:grid; gap:12px; }
.x{ position:absolute; right:12px; top:10px; width:34px; height:34px; border:0; border-radius:4px; background:transparent; color:var(--muted); font-size:22px; line-height:1; }
.x:hover{ background:rgba(255,255,255,.06); color:var(--ink); }
.dhead{ padding:22px 24px 16px; border-bottom:1px solid var(--line); display:grid; gap:6px; padding-right:56px; }
.dhead h2{ font-size:20px; margin:0; }
.dhead .tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.dbody{ padding:18px 24px 32px; display:grid; gap:18px; }
.dsec{ border-top:1px solid var(--line); padding-top:16px; }
.rulebox{ border-radius:6px; padding:12px 14px; display:grid; gap:2px; }
.rulebox.ok{ background:var(--ok-wash); border:1px solid rgba(60,203,145,.35); } .rulebox.ok b{ color:var(--ok); }
.rulebox.bad{ background:var(--bad-wash); border:1px solid rgba(247,118,142,.35); } .rulebox.bad b{ color:var(--bad); }
.rulebox span{ color:var(--ink-2); font-size:13px; }
.kv{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:8px 12px; margin:0; }
.kv dt{ color:var(--faint); font-size:12.5px; font-weight:600; } .kv dd{ margin:0; }

.toast{ position:fixed; right:16px; bottom:16px; z-index:60; max-width:min(420px, calc(100vw - 32px)); background:var(--gold); color:var(--on-gold); font-weight:600; padding:12px 14px; border-radius:6px; box-shadow:0 12px 32px rgba(0,0,0,.4); opacity:0; transform:translateY(8px); transition:opacity .18s, transform .18s; pointer-events:none; }
.toast.on{ opacity:1; transform:none; }
.toast.bad{ background:var(--bad); color:#1a0710; }
@media (max-width:860px){ .toast{ bottom:72px; } }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }