/* ============================================================================
   hl-wallet.css — HyperLiquid wallet DASHBOARD (paired with assets/js/hl-wallet.js)
   «Мостик» layout: horizontal bands (band → chart → gauges → table), NO left rail.
   Isolated from v4.css (a parallel session edits it). Reuses existing design
   tokens + components (.w3-panel/.v4-panel/.w3-ph/.v4-scroll/.v4-sort/
   .hl-sidetabs/.w3-table/.v4-mini-lnk/.hl-bdg/.w3-empty); defines only the
   new .hlw-* + positions-table bits.
   ============================================================================ */

/* fixed-viewport dashboard grid — band + view-tabs + ONE swappable content pane.
   «График» (chart, full height) and «Досье» (gauges + table) share the SAME
   "content" cell; only the active pane is shown → switching never changes the
   page height, and the chart owns the whole viewport under the band. */
.v4-wallet{
  display:grid; height:100%; gap:12px; padding:12px; box-sizing:border-box;
  grid-template-rows:auto auto minmax(0,1fr);
  grid-template-areas:"band" "wtabs" "content";
}
.v4-wallet-load{height:100%;}

/* view-tab bar (График | Досье) */
.hlw-wtabbar{display:flex; align-items:center; gap:10px; min-width:0;}

/* two panes, one cell — active one shown, the other removed from layout */
.v4-wallet [data-wpane]{display:none; grid-area:content; min-height:0;}
.v4-wallet[data-wtab="pos"] [data-wpane="pos"]{display:flex;}
.v4-wallet[data-wtab="dossier"] [data-wpane="dossier"]{display:grid;}

/* «Позиция» pane: coin chart (grows) + positions table (bounded, own scroll) — они на одной странице,
   клик по строке позиции фокусирует график выше */
/* chart box height = the token-page chart panel (.v4-ws .ws-chart) EXACTLY → visual parity;
   positions table flows below it, the whole pane scrolls if the two exceed the viewport cell
   (keeps the jump-free invariant: the shared "content" cell stays a constant height). */
.hlw-pospane{flex-direction:column; gap:12px; overflow-y:auto; overflow-x:hidden;}
.hlw-pospane > .hlw-chart{flex:0 0 auto; height:clamp(420px,56vh,600px); min-height:320px;}
.hlw-pospane > .hlw-postbl{flex:0 0 auto; min-height:0; max-height:none; display:flex; flex-direction:column;}
.hlw-postbl > .w3-ph{flex:0 0 auto;}
.hlw-postbl > .v4-scroll{flex:0 0 auto; min-height:0; overflow:visible;}
.hlw-chart-lab{font-size:.8rem; color:var(--text-2); font-weight:600;}
.hlw-golink{background:none; border:none; padding:0; font:inherit; color:var(--accent,#4477AA); cursor:pointer; text-decoration:underline; text-underline-offset:2px;}
.hlw-golink:hover{filter:brightness(1.15);}

/* «Досье» pane: DENSE dashboard grid — gauges (full width) + account chart (left) | tables (right) */
.hlw-dossier{
  gap:12px; min-height:0; overflow:hidden;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:"gauges gauges" "chart tables";
}
.hlw-dossier > .hlw-gauges{grid-area:gauges;}
.hlw-dossier > .hlw-acctchart{grid-area:chart; min-height:0;}
.hlw-dossier > .hlw-tbl{grid-area:tables; min-height:0;}

/* ---- BAND (compact identity + account value) ---- */
.hlw-band{display:flex; flex-direction:row; align-items:center; gap:16px; padding:12px 16px; flex-wrap:wrap;}
.hlw-av{width:44px; height:44px; border-radius:12px; flex:none; overflow:hidden; background:var(--surface-2);
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center;}
.hlw-av img{width:100%; height:100%; object-fit:cover;}
.hlw-bid{min-width:0; display:flex; flex-direction:column; gap:3px;}
.hlw-bid .r1{display:flex; align-items:center; gap:6px; min-width:0;}
.hlw-bid code{font-family:var(--font-mono,'Geist Mono'); font-size:.8rem; color:var(--text-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:52ch;}
.hlw-bid .ctr{display:inline-flex; width:22px; height:22px; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:var(--radius-sm,4px); color:var(--text-3); background:var(--surface-2); cursor:pointer; flex:none;}
.hlw-bid .ctr:hover{color:var(--text-1); border-color:var(--border-hover);}
.hlw-bid .ctr.ok{color:var(--up,#3DD68C);}
.hlw-bid .ctr svg{width:13px; height:13px;}   /* size the injected copy-icon svg — без этого пустой квадрат (мирр. .ws-band .ctr svg) */
.hlw-bid .r2{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.hlw-bid .r2 .nm{font-size:.86rem; color:var(--cat-hl,#4477AA); font-weight:600;}
.hlw-bspace{flex:1;}
.hlw-btot{display:flex; flex-direction:column; align-items:flex-end; gap:1px;}
.hlw-btot .v{font-family:var(--font-display,'Space Grotesk'),sans-serif; font-size:1.9rem; line-height:1;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--text-1);}
.hlw-btot .l{font-size:.62rem; letter-spacing:var(--track-caps-sm,.08em); text-transform:uppercase; color:var(--text-3);}

/* ---- CHART ---- */
.hlw-chart,.hlw-acctchart{display:flex; flex-direction:column; min-height:0; overflow:hidden;}
.hlw-charthd{gap:10px; flex-wrap:wrap; align-items:center;}
.hlw-charthd .v4-sort.right{margin-left:auto;}
.hlw-coinsel{font:inherit; font-size:.76rem; height:28px; padding:0 8px; border:1px solid var(--border);
  border-radius:var(--radius-sm,4px); background:var(--surface-2); color:var(--text-1); cursor:pointer;}
.hlw-coinsel:hover{border-color:var(--border-hover);}
.hlw-charttitle{display:flex; gap:10px; align-items:baseline; padding:6px 14px 2px; flex-wrap:wrap;}
.hlw-charttitle .lab{font-size:.66rem; letter-spacing:var(--track-caps-sm,.08em); text-transform:uppercase; color:var(--text-3);}
.hlw-charttitle .val{font-family:var(--font-display,'Space Grotesk'),sans-serif; font-size:1.35rem; font-variant-numeric:tabular-nums;}
.hlw-charttitle .chip{font-size:.68rem; color:var(--text-3); padding:1px 7px; border:1px solid var(--border);
  border-radius:var(--radius-sm,4px); background:var(--surface-2);}
.hlw-charttitle .chip b{color:var(--text-2); font-weight:600;}
.hlw-plot{flex:1; min-height:180px; position:relative;}
.hlw-chartleg{display:flex; gap:16px; padding:4px 14px 8px; flex-wrap:wrap;}
.hlw-chartleg:empty{display:none;}
.hlw-chartleg span{display:inline-flex; align-items:center; gap:6px; font-size:.68rem; color:var(--text-3);}
.hlw-chartleg .mk{width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent;}
.hlw-chartleg .ln{width:12px; height:0; border-top-width:2px; border-top-style:solid; display:inline-block;}
.hlw-chartleg .ln.dsh{border-top-style:dashed;}
.hlw-chartleg .ln.dot{border-top-style:dotted; border-top-width:2px;}

/* ---- «Позиция» coin chart = TOKEN-PAGE chart shell (.tc-head/.tc-plot/.tc-readout/volume, built
   by drawCoinChart). Scope the flex-fill + min-height the same way .v4-ws .chart-host does for the
   token page, so the plot grows and the floating OHLC readout has a positioned host. ---- */
.hlw-chart > .tc-head{margin-bottom:6px; flex:0 0 auto;}
.hlw-chart > .tc-cmp-legend{flex:0 0 auto;}
.hlw-chart > .tc-plot{flex:1 1 auto; height:auto; min-height:180px;}
.hlw-chart .tc-prov{display:flex; align-items:center; gap:8px; text-transform:none; letter-spacing:0;}
.hlw-chart .tc-prov .tc-prov-cap{display:inline-flex; align-items:center; gap:8px;}
.hlw-chart .tc-prov .tc-src{color:var(--text-3); font-size:.9em;}
.hlw-chart .hlw-chart-lab{font-size:.86rem; color:var(--text-1); font-weight:600;}

/* position-context strip under the candles (side/entry/liq/до-ликв/П·У or closed episode) + legend */
.hlw-poschips{flex:0 0 auto; display:flex; align-items:center; gap:8px 14px; flex-wrap:wrap; padding:6px 4px 2px;}
.hlw-poschips .pcx-chips{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.hlw-poschips .pcx-mark{font-family:var(--font-display,'Space Grotesk'),sans-serif; font-size:1.05rem;
  font-variant-numeric:tabular-nums; margin-right:2px;}
.hlw-poschips .chip{font-size:.68rem; color:var(--text-3); padding:1px 7px; border:1px solid var(--border);
  border-radius:var(--radius-sm,4px); background:var(--surface-2);}
.hlw-poschips .chip b{color:var(--text-2); font-weight:600;}
.hlw-poschips .pcx-leg{display:flex; gap:12px; flex-wrap:wrap; margin-left:auto;}
.hlw-poschips .pcx-leg span{display:inline-flex; align-items:center; gap:6px; font-size:.66rem; color:var(--text-3);}
.hlw-poschips .pcx-leg .pcx-legnote{opacity:.7;}
/* ring-bubble swatch matching the DEX-Visor buy/sell bubbles on the chart */
.hlw-poschips .pcx-leg .bub{display:inline-block; width:9px; height:9px; border-radius:50%; border-width:1.5px; border-style:solid; background:transparent;}
.hlw-poschips .pcx-leg .bub.buy{border-color:#3DD68C; background:rgba(61,214,140,.16);}
.hlw-poschips .pcx-leg .bub.sell{border-color:#FF9592; background:rgba(255,149,146,.16);}
.hlw-poschips .pcx-leg .mk{width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent;}
.hlw-poschips .pcx-leg .ln{width:12px; height:0; border-top-width:2px; border-top-style:solid; display:inline-block;}
.hlw-poschips .pcx-leg .ln.dsh{border-top-style:dashed;}
.hlw-poschips .pcx-leg .ln.dot{border-top-style:dotted;}

/* ---- GAUGES strip ---- */
.hlw-gauges{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; min-width:0;}
.hlw-g{background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-md,8px);
  padding:11px 14px; display:flex; flex-direction:column; gap:7px; min-width:0; justify-content:flex-start;}
.hlw-gt{font-size:.62rem; letter-spacing:var(--track-caps-sm,.08em); text-transform:uppercase; color:var(--text-3);}
.hlw-gv{font-family:var(--font-display,'Space Grotesk'),sans-serif; font-size:1.45rem; line-height:1;
  font-variant-numeric:tabular-nums; color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hlw-gv.sm{font-size:1.12rem;}
.hlw-gc{font-family:var(--font-mono,'Geist Mono'); font-size:.66rem; color:var(--text-3);
  display:flex; gap:5px; flex-wrap:wrap; align-items:baseline; margin-top:auto;}
.hlw-gc .sep{opacity:.4;}
.hlw-gc b{color:var(--text-2); font-weight:600;}
.hlw-bar{display:block; height:6px; border-radius:var(--radius-pill,999px); background:var(--surface-3); overflow:hidden;}
.hlw-bar i{display:block; height:100%; border-radius:var(--radius-pill,999px);}
.hlw-lsbar{display:flex; height:7px; border-radius:var(--radius-pill,999px); overflow:hidden; background:var(--surface-3);}
.hlw-lsbar .l{background:var(--up-fill,#30A46C);}
.hlw-lsbar .s{background:var(--down-fill,#E5484D);}

/* ---- lower tabbed table ---- */
.hlw-tbl{min-height:0; overflow:hidden;}
.hlw-tbl > .w3-ph{padding-bottom:0;}
.hlw-postable{width:100%;}
/* «Недавно закрытые» subheader inside the positions panel */
.hlw-closed-h{padding:10px 14px 4px; font-size:.66rem; letter-spacing:var(--track-caps-sm,.08em); text-transform:uppercase; color:var(--text-3); border-top:1px solid var(--border); margin-top:4px; display:flex; gap:6px; align-items:baseline;}
.hlw-closed-h b{color:var(--text-2); font-weight:600;}
.hlw-postable .tcell{display:flex; align-items:center; gap:7px; white-space:nowrap;}
.hlw-postable .tlg{width:18px; height:18px; flex:none; display:inline-flex; align-items:center; justify-content:center;}
.hlw-postable .tlg img{width:18px; height:18px; border-radius:50%;}
.hlw-postable .tlg .lg-fb{width:18px; height:18px; border-radius:50%; background:var(--surface-3); font-size:.55rem; display:flex; align-items:center; justify-content:center; color:var(--text-3);}
.hlw-postable .tsym{font-weight:600;}
.hlw-postable td.num .sub{display:block; font-size:.7rem; opacity:.72; font-weight:400;}
.hlw-postable .muted{color:var(--text-3);}
.hlw-posrow{cursor:pointer;}
.hlw-posrow:hover{background:var(--fill-hover,rgba(255,255,255,.04));}
.lev-badge{font-family:var(--font-mono,'Geist Mono'); font-size:.64rem; padding:1px 5px; border-radius:4px; background:var(--surface-3); color:var(--text-3); margin-left:2px;}
.lev-badge.long{color:var(--up,#3DD68C);}
.lev-badge.short{color:var(--down,#FF9592);}

/* ---- responsive: collapse to scroll (mirror v4.css dashboards) ---- */
@media (max-width:1180px){
  body.v4 .v4-view:has(.v4-wallet){overflow-y:auto;}
  .v4-wallet{grid-template-rows:auto auto auto; height:auto; min-height:100%;}
  .hlw-gauges{grid-template-columns:repeat(3,minmax(0,1fr));}
  /* «Позиция» flows with the page scroll: coin chart gets a DEFINITE height, positions table natural */
  .hlw-pospane{overflow:visible;}
  .hlw-pospane > .hlw-chart{flex:none; height:clamp(360px,52vh,560px);}
  .hlw-plot{min-height:260px;}
  .hlw-chart > .tc-plot{min-height:240px;}
  .hlw-pospane > .hlw-postbl{flex:none; max-height:none; overflow:visible;}
  .hlw-postbl > .v4-scroll{overflow:visible;}
  /* «Досье» collapses to a single scrolling column; account chart keeps a definite height */
  .hlw-dossier{grid-template-columns:1fr; grid-template-rows:auto auto auto;
    grid-template-areas:"gauges" "chart" "tables"; overflow:visible; min-height:0;}
  .hlw-dossier > .hlw-acctchart{height:clamp(320px,44vh,520px);}
  .hlw-tbl{min-height:0; overflow:visible;}
  .hlw-tbl .v4-scroll{overflow:visible;}
}
@media (max-width:680px){ .hlw-gauges{grid-template-columns:repeat(2,minmax(0,1fr));} .hlw-btot .v{font-size:1.6rem;} }