/* ============================================================
   nightsea.css — "Night Sea" portal theme (2026-10-06)
   Loads AFTER portal.css (+ v5-theme.css where present).
   Pure CSS overrides: no markup/JS changes. Remove this <link>
   (and swap sea-bg.js back to three-bg.js) to revert.
   Design notes: /root/design-work/alves-portal/DESIGN.md
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Hanken+Grotesk:wght@300..700&display=swap');

html:root{
  /* surfaces */
  --bg:#070d16;
  --bg-elev:#0a121c;
  --card:rgba(10,18,28,.90);
  --card-solid:#0a121c;
  --field:#0f1a27;
  --border:rgba(150,180,210,.12);
  --border2:rgba(150,180,210,.20);
  --line-strong:#2d4157;
  /* text */
  --text:#ece8df;
  --muted:#9fb0c2;
  --dim:#7a8ea3;
  --v5-text:#ece8df;
  --v5-muted:#9fb0c2;
  --v5-white:#f4f0e7;
  /* the one accent: harbor sodium lamp */
  --lamp:#f2b25c;
  --lamp-hover:#f6bf72;
  --lamp-press:#dd9a43;
  --lamp-ink:#1d1307;
  --lamp-dim:rgba(242,178,92,.10);
  --lamp-line:rgba(242,178,92,.34);
  /* legacy tokens remapped — semantic meaning kept, neon removed */
  --neon-blue:#8cbbdc;                     /* moonlit water blue: info / in-progress */
  --neon-blue-dim:rgba(140,187,220,.10);
  --neon-blue-border:rgba(140,187,220,.32);
  --neon-green:#8fd6a8;                    /* success / open / positive */
  --neon-green-dim:rgba(143,214,168,.10);
  --neon-green-border:rgba(143,214,168,.34);
  --neon-purple:#ad9fe6;
  --green:#8fd6a8;
  --red:#ff8a7a;
  --amber:#e7b968;
  --glow-green:0 0 0 transparent;
  --glow-blue:0 0 0 transparent;
  --r:14px;--r-sm:10px;
  --display:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --body:'Hanken Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:dark;
}

/* ---------- Base ---------- */
html{background:var(--bg) !important}
body{
  font-family:var(--body) !important;
  color:var(--text);
  background:transparent !important;
  caret-color:var(--lamp);
}
::selection{background:rgba(242,178,92,.30);color:#fff}
a{text-underline-offset:.2em}
:focus-visible{outline:2px solid var(--lamp) !important;outline-offset:2px}

/* background stack: sea canvas (z -3) → page dimmer → content */
#bg-layer{background:transparent !important}
#bg-layer video,#bg-layer img{display:none}
#bg-overlay{background:linear-gradient(180deg,rgba(7,13,22,.08),rgba(7,13,22,.25)) !important;background-size:auto !important}
.main{background:linear-gradient(180deg,rgba(7,13,22,.12) 0%,rgba(7,13,22,.38) 100%) !important}

/* ---------- Type ---------- */
.sidebar-logo,.sidebar-logo span,
.page-header h1,.topbar-title,.card-title,.stat-n,
h1,h2{font-family:var(--display) !important;font-optical-sizing:auto}
.sidebar nav a,.sidebar-user,.btn,th,td,.badge,label,.form-row label,
input,select,textarea,.chat-input,.msg,.thread-msg,#bottom-nav nav a,
.toast-success,.toast-error,#toast,.sidebar-section,.stat-l,p,li,button{font-family:var(--body) !important}
h1,h2,h3,.font-bold{color:var(--v5-white)}
.page-header h1{font-weight:750;letter-spacing:-.03em;font-size:clamp(24px,2.6vw,32px);line-height:1.08}
.page-header p{color:var(--muted)}
.topbar-title{font-weight:700;letter-spacing:-.02em;color:var(--v5-white) !important;font-size:1.02rem}
.text-muted{color:var(--muted) !important}
td,.stat-n,.badge,input,.tabular{font-variant-numeric:tabular-nums}

/* ---------- Sidebar ---------- */
.sidebar{
  background:rgba(8,14,22,.97) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  border-right:1px solid var(--border) !important;
  box-shadow:none !important;
}
.sidebar-logo{font-weight:800;letter-spacing:-.02em;color:var(--v5-white) !important}
.sidebar-logo span{font-weight:800 !important;letter-spacing:-.03em !important;font-size:1.15rem}
/* logo mark: calm lamp-lit core, no orbiting HUD rings */
.lm-ring1,.lm-ring2{display:none !important}
.lm-core{animation:none !important;filter:none !important;fill:rgba(242,178,92,.10) !important;stroke:var(--lamp) !important}
.logo-mark text{fill:var(--lamp) !important}
.sidebar-section{
  font-size:11px !important;font-weight:600 !important;letter-spacing:.06em !important;
  text-transform:none !important;color:var(--dim) !important;
  padding:1rem 1.25rem .35rem !important;
}
.sidebar nav a{
  color:var(--muted) !important;font-size:14px !important;font-weight:500 !important;
  border:0 !important;border-radius:8px !important;margin:1px .6rem !important;padding:.6rem .75rem !important;
  text-shadow:none !important;transition:background .15s,color .15s !important;
}
.sidebar nav a:hover{color:var(--text) !important;background:rgba(255,255,255,.04) !important}
.sidebar nav a.active{
  color:var(--v5-white) !important;
  background:var(--lamp-dim) !important;
  box-shadow:inset 2px 0 0 var(--lamp) !important;
  border:0 !important;text-shadow:none !important;
}
.sidebar nav a.active .nav-icon{color:var(--lamp)}
.sidebar-footer{border-top:1px solid var(--border) !important}
.sidebar-user{color:var(--muted) !important}
.sidebar-user span{color:var(--text) !important}

/* ---------- Topbar ---------- */
.topbar{
  background:rgba(7,13,22,.92) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  border-bottom:1px solid var(--border) !important;
}
.menu-toggle{border-color:var(--border2) !important;color:var(--muted) !important}
.menu-toggle:hover{color:var(--text) !important;border-color:var(--line-strong) !important}
.topbar-signout{border-color:var(--border2) !important;color:var(--muted) !important}
.topbar-signout:hover{color:var(--text) !important;border-color:var(--line-strong) !important}

/* ---------- Surfaces: solid panels, real shadows, no glass ---------- */
.card,.stat-card,.table-wrap,.chat-wrap{
  background:var(--card) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r) !important;
  box-shadow:0 1px 2px rgba(0,0,0,.30),0 18px 40px -26px rgba(0,0,0,.65) !important;
}
.card:hover,.stat-card:hover{
  transform:none !important;
  border-color:rgba(150,180,210,.22) !important;
  box-shadow:0 1px 2px rgba(0,0,0,.30),0 18px 40px -26px rgba(0,0,0,.65) !important;
}
.card-title{color:var(--v5-white) !important;font-weight:700;letter-spacing:-.015em}

/* stats: plain ink numbers, no gradient text */
.stat-card{text-align:left !important}
.stat-n{
  color:var(--v5-white) !important;background:none !important;
  -webkit-background-clip:border-box !important;background-clip:border-box !important;
  text-shadow:none !important;font-weight:700 !important;letter-spacing:-.03em !important;
  font-size:30px !important;
}
.stat-l{
  text-transform:none !important;letter-spacing:.01em !important;
  font-size:13px !important;font-weight:500 !important;color:var(--muted) !important;
}

/* ---------- Buttons ---------- */
.btn{border-radius:10px !important;letter-spacing:0 !important;transform:none !important;box-shadow:none !important}
.btn-primary{
  background:var(--lamp) !important;color:var(--lamp-ink) !important;
  border:0 !important;font-weight:700 !important;filter:none !important;
}
.btn-primary:hover{background:var(--lamp-hover) !important;box-shadow:0 8px 20px -10px rgba(242,178,92,.5) !important}
.btn-primary:active{background:var(--lamp-press) !important}
.btn-ghost{
  background:transparent !important;color:var(--text) !important;
  border:1px solid var(--border2) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
.btn-ghost:hover{background:rgba(255,255,255,.04) !important;border-color:var(--line-strong) !important;color:var(--v5-white) !important}
.btn-danger{background:rgba(255,138,122,.10) !important;color:var(--red) !important;border:1px solid rgba(255,138,122,.30) !important}
.btn-danger:hover{background:rgba(255,138,122,.18) !important}
.btn:disabled,.btn[disabled]{opacity:.55;cursor:not-allowed}

/* ---------- Tables ---------- */
thead tr{background:rgba(255,255,255,.02) !important}
th{
  font-size:12px !important;font-weight:600 !important;letter-spacing:.02em !important;
  text-transform:none !important;color:var(--muted) !important;
  border-bottom:1px solid var(--border) !important;
}
td{color:#d9dee3 !important;border-bottom:1px solid rgba(150,180,210,.07) !important}
tbody tr:hover{background:rgba(255,255,255,.03) !important}

/* ---------- Badges (semantic colors kept, glow removed) ---------- */
.badge{border-radius:6px !important;letter-spacing:.02em !important;text-transform:none !important;font-weight:600 !important;font-size:12px !important;padding:2px 8px !important}
.badge-urgent{box-shadow:none !important}
.badge-high,.badge-urgent{background:rgba(255,138,122,.12) !important;color:var(--red) !important;border-color:rgba(255,138,122,.34) !important}
.badge-medium,.badge-hold,.badge-draft{background:rgba(231,185,104,.10) !important;color:var(--amber) !important;border-color:rgba(231,185,104,.30) !important}

/* ---------- Forms ---------- */
label,.form-row label{color:#d0d6dc !important;font-size:13px !important;font-weight:600 !important;letter-spacing:0 !important}
input,select,textarea,.chat-input,.form-row input,.form-row select,.form-row textarea{
  background:var(--field) !important;
  border:1px solid var(--line-strong) !important;
  border-radius:10px !important;
  color:var(--text) !important;
  box-shadow:none !important;
}
input::placeholder,textarea::placeholder{color:#7d8fa3 !important}
input:hover,select:hover,textarea:hover{border-color:#3b536d !important}
input:focus,select:focus,textarea:focus,.chat-input:focus,
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
  border-color:var(--lamp) !important;
  box-shadow:0 0 0 3px rgba(242,178,92,.20) !important;
  outline:none !important;
}
input[type=checkbox],input[type=radio]{accent-color:var(--lamp)}
select option{background:#0a121c}

/* ---------- Chat / threads ---------- */
.msg,.thread-msg{border-radius:12px !important}
.msg-ai,.thread-ai{background:rgba(140,187,220,.07) !important;border:1px solid rgba(140,187,220,.20) !important}
.msg-client,.thread-client{background:var(--field) !important;border:1px solid var(--border2) !important}
.msg-agent,.thread-agent{background:rgba(143,214,168,.06) !important;border:1px solid rgba(143,214,168,.22) !important}
.msg-sender,.thread-sender{color:var(--muted) !important;text-transform:none !important;letter-spacing:.01em !important;font-size:12px !important}
.typing span{background:var(--muted) !important;box-shadow:none !important}

/* ---------- Toasts / empty ---------- */
#toast,.toast-success,.toast-error{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;background:var(--card-solid) !important;box-shadow:0 12px 32px rgba(0,0,0,.5) !important}
.toast-success{border-color:var(--neon-green-border) !important;color:var(--neon-green) !important}
.empty{color:var(--muted) !important}
.divider{background:none !important;border-top-color:var(--border) !important}

/* ---------- Mobile bottom nav ---------- */
#bottom-nav{
  background:rgba(8,14,22,.97) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  border-top:1px solid var(--border) !important;
}
#bottom-nav nav a{color:var(--muted) !important;text-transform:none !important;letter-spacing:0 !important;font-size:11px !important;font-weight:600 !important;text-shadow:none !important}
#bottom-nav nav a.active{color:var(--v5-white) !important}
#bottom-nav nav a.active .bn-icon{color:var(--lamp)}
#bottom-nav nav a.active::before{background:var(--lamp) !important;box-shadow:none !important;height:2px !important}

/* ---------- Scrollbars ---------- */
*{scrollbar-color:rgba(159,176,194,.28) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent !important}
::-webkit-scrollbar-thumb{background:rgba(159,176,194,.22) !important;border:2px solid transparent;background-clip:content-box !important;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:rgba(159,176,194,.38) !important;border:2px solid transparent;background-clip:content-box !important}

/* ---------- Icons ---------- */
.ic-xl{color:var(--muted) !important}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation-duration:.001ms !important}
}

/* ---------- Page-specific leftovers (hard-coded neon in page <style>) ---------- */
.th-resolution{background:rgba(143,214,168,.06) !important;border-color:rgba(143,214,168,.24) !important}
.th-resolution .th-note-label{color:var(--neon-green) !important}
.note-info{background:rgba(140,187,220,.07) !important;border-color:rgba(140,187,220,.26) !important;color:#d3e4f0 !important}
.hud-scanlines{display:none !important}
.bw-tab.active,.bw-style-btn.active{background:var(--lamp-dim) !important;color:var(--v5-white) !important;border-color:var(--lamp-line) !important}
.bw-total{background:none !important;-webkit-background-clip:border-box !important;background-clip:border-box !important;color:var(--v5-white) !important;font-family:var(--display) !important;letter-spacing:-.03em}
.bw-ew{border-left:1px solid var(--border2) !important;border:1px solid var(--border2) !important;border-radius:var(--r-sm)}
.bw-ew h4{text-transform:none !important;letter-spacing:0 !important;color:var(--v5-white) !important;font-size:.95rem !important}
.bw-cat-fill{background:var(--neon-blue) !important}