/* ==========================================================================
   Genni AI — customer dashboard
   A trading-terminal layout: dense, monospaced numbers, calm surfaces.
   ========================================================================== */

.dash{
  padding-top:var(--nav-h);
  min-height:100vh;
}
.dash__in{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(16px,2vw,24px);
  padding-block:clamp(22px,3vw,36px);
}
@media (min-width:1080px){
  .dash__in{ grid-template-columns:236px minmax(0,1fr); }
}

/* ---------- side rail --------------------------------------------------- */

.rail{ align-self:start; }
@media (min-width:1080px){ .rail{ position:sticky; top:calc(var(--nav-h) + 24px); } }

.rail__who{
  padding:18px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:linear-gradient(160deg, rgba(18,30,60,.7), rgba(8,14,30,.7));
  margin-bottom:14px;
}
.rail__avatar{
  width:42px; height:42px; margin-bottom:12px;
  display:grid; place-items:center;
  border-radius:13px;
  background:linear-gradient(140deg, var(--brand), var(--violet));
  font-weight:700; font-size:16px; color:#fff;
}
.rail__name{ font-weight:600; font-size:15px; margin:0 0 2px; }
.rail__meta{ margin:0; font-size:12px; color:var(--dim); font-family:var(--mono); }

.rail nav ul{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.rail nav a{
  display:flex; align-items:center; gap:11px;
  padding:11px 14px;
  border-radius:var(--r-sm);
  font-size:14px; color:var(--muted); text-decoration:none;
  transition:color .2s ease, background-color .2s ease;
}
.rail nav a svg{ width:16px; height:16px; flex:none; }
.rail nav a:hover{ color:var(--txt); background:rgba(122,166,255,.08); }
.rail nav a.is-active{ color:var(--brand-2); background:rgba(47,125,255,.14); }

@media (max-width:1079px){
  .rail nav ul{ grid-auto-flow:column; grid-auto-columns:max-content; overflow-x:auto; gap:6px; padding-bottom:4px; }
  .rail nav a{ white-space:nowrap; }
}

/* ---------- kpi tiles ---------------------------------------------------- */

.kpis{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 178px), 1fr));
}
.kpi{
  position:relative;
  padding:17px 19px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:linear-gradient(165deg, rgba(16,27,55,.72), rgba(7,12,26,.72));
  overflow:hidden;
}
.kpi__k{
  display:block; margin-bottom:8px;
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim);
}
.kpi__v{
  display:block;
  font-family:var(--mono); font-weight:600;
  font-size:clamp(20px,2.2vw,26px); line-height:1.15; letter-spacing:-.02em;
  color:var(--txt);
}
.kpi__d{ display:block; margin-top:6px; font-size:12px; font-family:var(--mono); }
.up  { color:var(--ok); }
.down{ color:var(--bad); }
.flat{ color:var(--muted); }
.kpi__spark{ position:absolute; right:0; bottom:0; width:96px; height:38px; opacity:.5; }

/* ---------- panels ------------------------------------------------------- */

.pane{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:linear-gradient(168deg, rgba(14,24,50,.62), rgba(6,11,24,.66));
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  overflow:hidden;
}
.pane__head{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  padding:15px 19px;
  border-bottom:1px solid var(--line);
}
.pane__head h3{ margin:0; font-size:15px; font-weight:600; letter-spacing:-.005em; }
.pane__head .sub{ font-size:12px; color:var(--dim); font-family:var(--mono); }
.pane__body{ padding:19px; }
.pane__body--flush{ padding:0; }

.dash-grid{ display:grid; gap:clamp(14px,1.8vw,20px); }
.dash-grid--2{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
@media (min-width:1180px){
  .dash-grid--wide{ grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
}

/* ---------- chart -------------------------------------------------------- */

.chart{ position:relative; width:100%; height:clamp(210px, 26vw, 300px); }
.chart canvas{ width:100%; height:100%; display:block; }
.chart__legend{
  display:flex; flex-wrap:wrap; gap:16px;
  padding:12px 19px 0;
  font-size:12px; color:var(--muted);
}
.chart__legend span{ display:inline-flex; align-items:center; gap:7px; }
.chart__legend i{ width:14px; height:2.5px; border-radius:2px; }

.range{ display:flex; gap:3px; }
.range button{
  padding:5px 11px;
  border:1px solid transparent; border-radius:var(--r-pill);
  background:transparent; color:var(--dim);
  font:600 11.5px/1 var(--mono); letter-spacing:.06em;
  cursor:pointer;
  transition:color .2s ease, background-color .2s ease, border-color .2s ease;
}
.range button:hover{ color:var(--txt); background:rgba(122,166,255,.1); }
.range button.is-on{ color:var(--brand-2); border-color:var(--line-2); background:rgba(47,125,255,.14); }

/* ---------- tables ------------------------------------------------------- */

.tbl-wrap{ overflow-x:auto; }
.tbl{
  width:100%; min-width:660px;
  border-collapse:collapse;
  font-size:13px;
}
.tbl th{
  position:sticky; top:0; z-index:1;
  padding:11px 16px;
  text-align:left;
  font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim);
  background:rgba(8,14,30,.94);
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.tbl td{
  padding:12px 16px;
  border-bottom:1px solid rgba(122,166,255,.08);
  color:var(--txt-2);
  white-space:nowrap;
}
.tbl tbody tr{ transition:background-color .18s ease; }
.tbl tbody tr:hover{ background:rgba(122,166,255,.05); }
.tbl .num{ font-family:var(--mono); text-align:right; }
.tbl .sym{ font-weight:600; color:var(--txt); letter-spacing:.02em; }
.tbl .side{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 9px; border-radius:6px;
  font-size:10.5px; font-weight:700; letter-spacing:.1em;
}
.side--buy { color:var(--ok);  background:rgba(61,220,151,.13); }
.side--sell{ color:var(--bad); background:rgba(255,96,112,.13); }

.empty{
  padding:44px 20px; text-align:center;
  color:var(--dim); font-size:14px;
}

/* ---------- status rows -------------------------------------------------- */

.kv{ display:grid; gap:0; }
.kv > div{
  display:flex; gap:16px; align-items:center; justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid rgba(122,166,255,.09);
  font-size:13.5px;
}
.kv > div:last-child{ border-bottom:0; }
.kv dt, .kv .k{ color:var(--muted); margin:0; }
.kv dd, .kv .v{ margin:0; font-family:var(--mono); color:var(--txt); text-align:right; }

.bar{
  height:6px; border-radius:4px; overflow:hidden;
  background:rgba(122,166,255,.14);
}
.bar i{
  display:block; height:100%; border-radius:4px;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
}
.bar--warn i{ background:linear-gradient(90deg, #c47a12, var(--warn)); }

/* ---------- masked credential ------------------------------------------- */

.masked{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); color:var(--dim);
  letter-spacing:.18em;
}
.masked svg{ width:13px; height:13px; color:var(--muted); }

/* ---------- allocation bars ---------------------------------------------- */

.alloc{ display:grid; gap:13px; }
.alloc__row{ display:grid; gap:6px; }
.alloc__top{ display:flex; justify-content:space-between; font-size:13px; }
.alloc__top b{ font-weight:600; color:var(--txt); }
.alloc__top span{ font-family:var(--mono); color:var(--muted); }

/* ---------- slim scrollbars inside panes -------------------------------- */

.tbl-wrap, .rail nav ul{ scrollbar-width:thin; scrollbar-color:rgba(122,166,255,.3) transparent; }
.tbl-wrap::-webkit-scrollbar, .rail nav ul::-webkit-scrollbar{ height:7px; }
.tbl-wrap::-webkit-scrollbar-track, .rail nav ul::-webkit-scrollbar-track{ background:transparent; }
.tbl-wrap::-webkit-scrollbar-thumb, .rail nav ul::-webkit-scrollbar-thumb{
  background:rgba(122,166,255,.28); border-radius:4px;
}
.tbl-wrap::-webkit-scrollbar-thumb:hover, .rail nav ul::-webkit-scrollbar-thumb:hover{
  background:rgba(122,166,255,.45);
}