/* ============================================================
   v5-theme.css v2 — FULL PORTAL REDESIGN
   Matches the redesigned public site: Inter, glass, gradients,
   deep-blue palette, high-contrast text. Pure CSS overrides on
   top of portal.css — zero markup/JS changes. login.html does
   not load this file and keeps its own look.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#0a0f14;
  --bg-elev:#0d1420;
  --card:rgba(13,20,32,.64);
  --card-solid:#0d1522;
  --border:rgba(0,179,255,.14);
  --border2:rgba(0,240,255,.28);
  --neon-blue:#00d8ff;
  --neon-blue-dim:rgba(0,179,255,.10);
  --neon-blue-border:rgba(0,216,255,.35);
  --neon-green:#00e68c;
  --neon-green-dim:rgba(0,230,140,.10);
  --neon-green-border:rgba(0,230,140,.40);
  --v5-text:#e9f4f9;
  --v5-muted:#a8bccb;
  --v5-white:#f2f9fc;
}

/* ---------- Typography ---------- */
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif !important;
  color:var(--v5-text);
}
h1,h2,h3,.font-bold{color:var(--v5-white)}
.page-header h1{
  font-size:clamp(24px,3vw,32px);
  font-weight:800;
  letter-spacing:-.6px;
  line-height:1.1;
}
.text-muted{color:var(--v5-muted) !important;opacity:1 !important}

/* ---------- Readability dimmer over the wave ---------- */
.main{
  background:linear-gradient(180deg, rgba(10,15,20,.30) 0%, rgba(10,15,20,.55) 100%);
  min-height:100vh;
}

/* ---------- Sidebar: floating glass panel ---------- */
.sidebar{
  background:rgba(10,15,20,.62) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-right:1px solid rgba(0,179,255,.12) !important;
  box-shadow:8px 0 32px rgba(0,0,0,.25);
}
.sidebar-logo{
  font-family:'Inter',sans-serif !important;
  font-weight:800;
  letter-spacing:1px;
  color:var(--v5-white) !important;
}
.sidebar-section{
  font-size:10px !important;
  font-weight:700;
  letter-spacing:2px !important;
  text-transform:uppercase;
  color:rgba(168,188,203,.55) !important;
}
.sidebar nav a{
  font-family:'Inter',sans-serif !important;
  font-size:13.5px !important;
  font-weight:500;
  color:var(--v5-muted) !important;
  border-radius:10px !important;
  transition:all .22s ease !important;
  border:none !important;
}
.sidebar nav a:hover{
  color:var(--v5-white) !important;
  background:rgba(0,179,255,.10) !important;
}
.sidebar nav a.active{
  background:linear-gradient(135deg,rgba(0,240,255,.16),rgba(0,179,255,.12)) !important;
  color:var(--neon-blue) !important;
  border:1px solid rgba(0,216,255,.25) !important;
  box-shadow:0 0 14px rgba(0,179,255,.10);
  text-shadow:none !important;
}
.sidebar-user{color:var(--v5-muted) !important;font-size:12.5px}
.sidebar-footer{border-top:1px solid rgba(0,179,255,.10) !important}
/* animated logo mark — retint to v5 gradient family */
.lm-dot{background:linear-gradient(135deg,#00F0FF,#00B3FF) !important;box-shadow:0 0 10px rgba(0,216,255,.6) !important}
.lm-ring1,.lm-ring2{border-color:rgba(0,216,255,.35) !important}
.lm-core{background:rgba(0,179,255,.15) !important}

/* ---------- Topbar: glass strip ---------- */
.topbar{
  background:rgba(10,15,20,.55) !important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(0,179,255,.10) !important;
}
.topbar-title{
  font-family:'Inter',sans-serif !important;
  font-weight:700;
  letter-spacing:-.3px;
  color:var(--v5-white) !important;
}

/* ---------- Stat cards: glass chips with gradient values ---------- */
.stat-card{
  background:var(--card) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border) !important;
  border-radius:14px !important;
  transition:all .3s ease;
}
.stat-card:hover{
  transform:translateY(-2px);
  border-color:rgba(0,240,255,.30) !important;
  box-shadow:0 0 20px rgba(0,179,255,.10);
}
.stat-n{
  font-family:'Inter',sans-serif !important;
  font-size:26px !important;
  font-weight:800 !important;
  color:transparent !important;
  background:linear-gradient(90deg,#00F0FF,#4DEAFF);
  -webkit-background-clip:text;
  background-clip:text;
  text-shadow:none !important;
}
.stat-l{
  font-size:10.5px !important;
  font-weight:600;
  letter-spacing:1.8px !important;
  text-transform:uppercase;
  color:var(--v5-muted) !important;
}

/* ---------- Cards ---------- */
.card{
  background:var(--card) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border) !important;
  border-radius:16px !important;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card:hover{
  border-color:rgba(0,240,255,.28) !important;
  box-shadow:0 0 24px rgba(0,179,255,.09), 0 14px 36px rgba(0,0,0,.35);
}
.card-title{
  font-family:'Inter',sans-serif !important;
  font-weight:700;
  color:var(--v5-white) !important;
}

/* ---------- Buttons ---------- */
.btn{
  font-family:'Inter',sans-serif !important;
  font-weight:600;
  border-radius:11px !important;
  transition:all .25s ease !important;
  letter-spacing:.2px;
}
.btn-primary{
  background:linear-gradient(135deg,#00F0FF,#00B3FF) !important;
  color:#04121a !important;
  font-weight:700 !important;
  border:none !important;
  text-shadow:none !important;
}
.btn-primary:hover{
  box-shadow:0 0 24px rgba(0,179,255,.45);
  transform:translateY(-1px);
  filter:none !important;
}
.btn-ghost{
  background:rgba(13,17,23,.55) !important;
  border:1px solid rgba(0,179,255,.25) !important;
  color:var(--v5-text) !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.btn-ghost:hover{
  border-color:rgba(0,240,255,.5) !important;
  box-shadow:0 0 16px rgba(0,179,255,.2);
  background:rgba(0,179,255,.10) !important;
}
.btn-danger{border-radius:11px !important}

/* ---------- Tables ---------- */
.table-wrap{
  background:var(--card);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
}
th{
  font-family:'Inter',sans-serif !important;
  font-size:10.5px !important;
  font-weight:600 !important;
  letter-spacing:1.8px !important;
  text-transform:uppercase;
  color:var(--v5-muted) !important;
  border-bottom:1px solid rgba(0,179,255,.14) !important;
}
td{
  font-family:'Inter',sans-serif !important;
  color:#cfe0ec !important;
  border-bottom:1px solid rgba(0,179,255,.07) !important;
}
tbody tr{transition:background .2s}
tbody tr:hover{background:rgba(0,179,255,.05)}

/* ---------- Badges: modern pills, semantic colors preserved ---------- */
.badge{
  font-family:'Inter',sans-serif !important;
  border-radius:20px !important;
  font-weight:600 !important;
  letter-spacing:.4px;
  padding:3px 11px !important;
}

/* ---------- Forms ---------- */
label,.form-row label{
  font-family:'Inter',sans-serif !important;
  color:var(--v5-muted) !important;
  font-size:12px;
  letter-spacing:.6px;
}
input,select,textarea,.chat-input{
  font-family:'Inter',sans-serif !important;
  background:rgba(6,10,16,.55) !important;
  border:1px solid rgba(0,179,255,.18) !important;
  border-radius:10px !important;
  color:var(--v5-text) !important;
  transition:border-color .25s, box-shadow .25s;
}
input:focus,select:focus,textarea:focus,.chat-input:focus{
  border-color:rgba(0,240,255,.5) !important;
  box-shadow:0 0 14px rgba(0,179,255,.18);
  outline:none !important;
}

/* ---------- Chat / threads ---------- */
.chat-wrap{background:var(--card) !important;border:1px solid var(--border) !important;border-radius:16px !important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.msg,.thread-msg{border-radius:14px !important;font-family:'Inter',sans-serif !important}
.msg-ai,.thread-ai{border:1px solid rgba(0,216,255,.22) !important;background:rgba(0,179,255,.07) !important}
.msg-client,.thread-client{background:rgba(13,20,32,.7) !important;border:1px solid rgba(0,179,255,.10) !important}
.msg-agent,.thread-agent{border:1px solid rgba(0,230,140,.22) !important;background:rgba(0,230,140,.06) !important}
.msg-sender,.thread-sender{color:var(--v5-muted) !important;font-size:11px !important;letter-spacing:.8px}
.thread-time{color:rgba(168,188,203,.55) !important}

/* ---------- Toasts / empty states ---------- */
.toast-success,.toast-error{
  border-radius:12px !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  font-family:'Inter',sans-serif !important;
}
.empty{color:var(--v5-muted) !important}
.empty-icon{opacity:.5}
.divider{background:rgba(0,179,255,.10) !important}

/* ---------- Mobile bottom nav: cyan active state ---------- */
#bottom-nav{
  background:rgba(10,15,20,.72) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-top:1px solid rgba(0,179,255,.12) !important;
}
#bottom-nav nav a{color:var(--v5-muted) !important;font-family:'Inter',sans-serif !important}
#bottom-nav nav a.active{
  color:var(--neon-blue) !important;
  text-shadow:none !important;
}
#bottom-nav nav a.active::before{
  background:linear-gradient(90deg,#00F0FF,#00B3FF) !important;
  box-shadow:0 0 8px rgba(0,216,255,.7) !important;
}

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,179,255,.18);border-radius:6px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(0,216,255,.32);border:2px solid transparent;background-clip:content-box}