/* Strategies tab · scoped port of docs/strategies-tab-mockup.html (generated, then hand-tuned below) */
[hidden]{display:none!important}
:root{--surface-3:#202733;--live-tint:#111A1C;--violet:#B48CE0;--rowpad:8px}
body[data-tab="strategies"] .wrap{max-width:1560px}

/* tabs (shared) */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}
.tab{font:inherit;font-size:13.5px;font-weight:500;color:var(--muted);background:none;border:0;border-bottom:2px solid transparent;padding:8px 14px 10px;cursor:pointer;white-space:nowrap}
.tab[aria-selected="true"]{color:var(--text);border-bottom-color:var(--accent)}
.tab .count{font-family:var(--mono);font-size:11px;color:var(--faint);margin-left:6px}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.tabview{display:flex;flex-direction:column;gap:20px}
#view-strategies{gap:14px}
#view-trades{gap:12px}

/* mockup base bits that were global there */
#view-strategies button{font:inherit}
#view-strategies .muted{color:var(--muted)} #view-strategies .faint{color:var(--faint)} #view-strategies .warn{color:var(--warn)}
#view-strategies h2{font-size:11.5px}
#view-strategies .dot{width:8px;height:8px;border-radius:50%;background:var(--pos);flex:none;display:inline-block;box-shadow:none}
#view-strategies .dot.off{background:var(--faint)} #view-strategies .dot.warn{background:var(--warn)} #view-strategies .dot.bad{background:var(--neg)}
#view-strategies .btn{font-size:12px;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:5px 9px;cursor:pointer;white-space:nowrap}
#view-strategies .btn:hover{border-color:var(--faint)}
#view-strategies .btn.primary{border-color:color-mix(in srgb,var(--pos) 50%,transparent);color:var(--pos)}
#view-strategies .btn.danger{border-color:color-mix(in srgb,var(--neg) 50%,transparent);color:var(--neg)}
#view-strategies .btn:disabled{opacity:.4;cursor:default}
#view-strategies :focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* summary */
#view-strategies .summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
#view-strategies .sum{background:var(--surface);padding:11px 16px;display:flex;flex-direction:column;gap:3px;text-align:left;border:0;color:inherit}
#view-strategies button.sum{cursor:pointer} #view-strategies button.sum:hover{background:var(--surface-2)}
#view-strategies .sum .l{font-size:11.5px;color:var(--muted)}
#view-strategies .sum .v{font-family:var(--mono);font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
#view-strategies .sum .s{font-size:11.5px;color:var(--faint)}
#view-strategies .allocbar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--line-soft);margin-top:3px}
#view-strategies .allocbar span{height:100%}

/* layout */
#view-strategies .shell{display:grid;grid-template-columns:232px minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:980px){#view-strategies .shell{grid-template-columns:1fr}}
#view-strategies .side{position:sticky;top:calc(12px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:6px;max-height:calc(100vh - 24px);overflow:auto;padding-right:2px}
@media (max-width:980px){#view-strategies .side{position:static;max-height:none}}
#view-strategies .side details{background:var(--surface);border:1px solid var(--line);border-radius:8px}
#view-strategies .side details>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:9px 12px;font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
#view-strategies .side details>summary::-webkit-details-marker{display:none}
#view-strategies .side details>summary::after{content:"▾";font-size:10px;color:var(--faint)}
#view-strategies .side details:not([open])>summary::after{content:"▸"}
#view-strategies .facet{padding:0 8px 8px;display:flex;flex-direction:column;gap:1px}
#view-strategies .opt{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:5px;font-size:12.5px;cursor:pointer;color:var(--text)}
#view-strategies .opt:hover{background:var(--surface-2)}
#view-strategies .opt input{accent-color:var(--accent);margin:0}
#view-strategies .opt .c{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--faint)}
#view-strategies .opt.zero{color:var(--faint)}
#view-strategies .view{all:unset;display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:5px;font-size:12.5px;cursor:pointer}
#view-strategies .view:hover{background:var(--surface-2)}
#view-strategies .view[aria-current="true"]{background:var(--surface-3);color:var(--text);box-shadow:inset 2px 0 0 var(--accent)}
#view-strategies .view .c{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--faint)}
#view-strategies .view .c.hot{color:var(--neg)}
#view-strategies .side input[type=search]{width:100%}
#view-strategies .mini{font-size:11.5px;color:var(--accent);background:none;border:0;cursor:pointer;padding:4px 6px;text-align:left}
#view-strategies .shell.nofilters{grid-template-columns:minmax(0,1fr)}#view-strategies .shell.nofilters .side{display:none}
@media (max-width:980px){#view-strategies .side.collapsed{display:none}}

/* toolbar */
#view-strategies .main{display:flex;flex-direction:column;gap:10px;min-width:0}
#view-strategies .toolbar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between}
#view-strategies .tb-left,#view-strategies .tb-right{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
#view-strategies .active{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:3px 4px 3px 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
#view-strategies .active b{font-weight:500;color:var(--muted)}
#view-strategies .active button{all:unset;cursor:pointer;width:16px;height:16px;display:grid;place-items:center;border-radius:50%;color:var(--muted)}
#view-strategies .active button:hover{background:var(--surface-3);color:var(--text)}
#view-strategies .resultcount{font-size:12.5px;color:var(--muted)}
#view-strategies .chip{font-size:12px;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}
#view-strategies .chip[aria-pressed="true"]{color:var(--text);background:var(--surface-2);border-color:var(--faint)}
#view-strategies .lbl{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
#view-strategies select,#view-strategies input[type=search]{font:inherit;font-size:12.5px;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:5px 8px}
#view-strategies .bulk{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 8%,var(--surface));border-radius:8px;font-size:12.5px}
#view-strategies .bulk b{font-family:var(--mono)}

/* table */
#view-strategies .tablewrap{overflow:auto;max-height:calc(100vh - 150px);min-height:360px;border:1px solid var(--line);border-radius:8px;background:var(--surface);overscroll-behavior:contain}
#view-strategies table{border-collapse:separate;border-spacing:0;width:100%;font-size:12.5px}
#view-strategies th,#view-strategies td{padding:var(--rowpad) 10px;text-align:left;border-bottom:1px solid var(--line-soft);white-space:nowrap;vertical-align:middle}
#view-strategies thead th{position:sticky;background:var(--surface-2);font-weight:500;color:var(--muted);font-size:11.5px;z-index:4}
#view-strategies thead tr.groups th{top:0;height:30px;font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;border-bottom:1px solid var(--line)}
#view-strategies thead tr.cols th{top:30px}
#view-strategies thead tr.groups th.g-live{color:var(--pos);background:color-mix(in srgb,var(--pos) 9%,var(--surface-2))}
#view-strategies td.live{background:var(--live-tint)}
#view-strategies thead tr.cols th.live{background:color-mix(in srgb,var(--pos) 5%,var(--surface-2))}
#view-strategies .split{border-left:2px solid color-mix(in srgb,var(--pos) 40%,var(--line))!important}
#view-strategies th button.s{all:unset;cursor:pointer;display:inline-flex;gap:4px;align-items:center}
#view-strategies th .arr{color:var(--faint);font-size:10px} #view-strategies th[aria-sort] .arr{color:var(--accent)}
#view-strategies .r{text-align:right!important}
#view-strategies .stick{position:sticky;left:0;z-index:2;background:var(--surface);box-shadow:1px 0 0 var(--line)}
#view-strategies thead th.stick{z-index:6;background:var(--surface-2)}
#view-strategies tbody tr.row:hover td{background:var(--surface-2)}
#view-strategies tbody tr.row.sel td{background:color-mix(in srgb,var(--accent) 9%,var(--surface))}
#view-strategies tbody tr.row.dim td:not(.stick)>*{opacity:.6}
#view-strategies tr.grp td{position:sticky;top:var(--hdr,62px);z-index:3;background:var(--surface-3);padding-block:7px;border-bottom:1px solid var(--line);cursor:pointer}
#view-strategies tr.grp td .g{display:flex;align-items:center;gap:10px;font-size:12.5px;position:sticky;left:10px;width:max-content}
#view-strategies tr.grp .gname{font-weight:600}
#view-strategies tr.grp .gmeta{color:var(--muted);font-size:12px}
#view-strategies .namecell{display:flex;align-items:center;gap:8px;min-width:220px;max-width:280px}
#view-strategies .namecell input{accent-color:var(--accent);margin:0}
#view-strategies .namecell i{width:8px;height:8px;border-radius:2px;flex:none}
#view-strategies .namecell .t{min-width:0}
#view-strategies .namecell b{font-weight:600;font-size:12.8px;display:block;overflow:hidden;text-overflow:ellipsis}
#view-strategies .namecell .id{display:block;font-family:var(--mono);font-size:10.5px;color:var(--faint);overflow:hidden;text-overflow:ellipsis}
#view-strategies .star{color:var(--warn);font-size:11px;margin-left:4px}
#view-strategies .exp{all:unset;cursor:pointer;width:18px;height:18px;display:grid;place-items:center;border-radius:4px;color:var(--muted);flex:none}
#view-strategies .exp:hover{background:var(--surface-3);color:var(--text)}
#view-strategies .exp svg{transition:transform .15s}
#view-strategies tr.open .exp svg{transform:rotate(90deg)}
#view-strategies .pill{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:999px;white-space:nowrap;display:inline-block}
#view-strategies .pill.live{color:var(--pos);background:color-mix(in srgb,var(--pos) 14%,transparent)}
#view-strategies .pill.dry{color:var(--warn);background:color-mix(in srgb,var(--warn) 13%,transparent)}
#view-strategies .pill.paused{color:var(--muted);background:var(--surface-3);outline:1px dashed var(--faint);outline-offset:-1px}
#view-strategies .pill.candidate{color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,transparent)}
#view-strategies .pill.alerts{color:var(--violet);background:color-mix(in srgb,var(--violet) 14%,transparent)}
#view-strategies .pill.retired{color:var(--faint);background:var(--surface-2)}
#view-strategies .health{display:inline-flex;align-items:center;gap:6px;font-size:12px}
#view-strategies .coins{display:flex;gap:3px}
#view-strategies .coin{font-family:var(--mono);font-size:10.5px;padding:1px 5px;border-radius:3px;background:var(--surface-2);border:1px solid var(--line)}
#view-strategies .fam{font-size:12px;color:var(--muted)}
#view-strategies .rule{white-space:normal;min-width:220px;max-width:300px;font-size:12px;color:var(--muted)}
#view-strategies .vs{display:flex;align-items:center;gap:6px;justify-content:flex-end}
#view-strategies .vs .track{width:46px;height:5px;background:var(--line-soft);border-radius:3px;position:relative;overflow:hidden}
#view-strategies .vs .fill{position:absolute;left:0;top:0;bottom:0;border-radius:3px}
#view-strategies .vs .tick{position:absolute;top:-2px;bottom:-2px;width:1px;background:var(--muted)}
#view-strategies .flag{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--warn)}
#view-strategies .acts{display:flex;gap:5px}

#view-strategies tr.detail td{padding:0;background:var(--ground)}
#view-strategies .detail-inner{position:sticky;left:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-block:1px solid var(--line)}
#view-strategies .detail-inner>div{background:var(--surface);padding:14px 18px;display:flex;flex-direction:column;gap:10px;white-space:normal}
#view-strategies .detail-inner>div.lv{background:var(--live-tint)}
#view-strategies dl{margin:0;display:grid;grid-template-columns:110px 1fr;gap:5px 12px;font-size:12.5px}
#view-strategies dt{color:var(--muted)} #view-strategies dd{margin:0}
#view-strategies .confirm{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px;border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);border-radius:6px;font-size:12.5px;background:color-mix(in srgb,var(--warn) 7%,transparent)}
@media (max-width:760px){#view-strategies .detail-inner{grid-template-columns:1fr}}

#view-strategies .pager{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--muted)}
#view-strategies .pager .pg{display:flex;gap:6px;align-items:center}
#view-strategies .note{font-size:12px;color:var(--faint);margin:0}
#view-strategies .toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--surface-2);border:1px solid var(--line);padding:8px 14px;border-radius:6px;font-size:12.5px;z-index:20}
#view-strategies .panel{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:28px;color:var(--muted);font-size:13px}
body.compact #view-strategies{--rowpad:5px}
body.compact #view-strategies .namecell .id{display:none}
@media (max-width:520px){#view-strategies .wrap{padding-inline:16px}}
@media (prefers-reduced-motion:reduce){#view-strategies .exp svg{transition:none}}


/* ---- additions beyond the mockup ---- */
#view-strategies table{min-width:0}
#view-strategies .acts{flex-wrap:wrap}
.modal{position:fixed;inset:0;z-index:30;background:color-mix(in srgb,#000 55%,transparent);display:grid;place-items:center;padding:16px}
.modal-card{width:min(440px,100%);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px 18px 14px;display:flex;flex-direction:column;gap:12px;box-shadow:0 10px 40px rgba(0,0,0,.4)}
.modal-card h3{margin:0;font-size:15px;font-weight:600}
.modal-card p{margin:0;font-size:13px;color:var(--muted);line-height:1.5}
.modal-acts{display:flex;justify-content:flex-end;gap:8px}
.pinrow{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.pinrow input{font:inherit;font-size:13px;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:7px 9px}
/* the global .side (LONG/SHORT label) must not leak into the sidebar */
#view-strategies .side{font-size:inherit;font-weight:inherit;text-transform:none;letter-spacing:normal}
#view-strategies th{top:auto}
#view-strategies tbody tr:hover{background:none}

.modal .btn.primary{border-color:color-mix(in srgb,var(--pos) 50%,transparent);color:var(--pos)}
.modal .btn.danger{border-color:color-mix(in srgb,var(--neg) 50%,transparent);color:var(--neg)}

/* Open-in-Supabase links */
#view-strategies .sbicon{margin-left:auto;flex:none;color:var(--faint);text-decoration:none;font-size:12px;padding:2px 5px;border-radius:4px}
#view-strategies .sbicon:hover{color:var(--accent);background:var(--surface-3)}
#view-strategies .sblink{color:var(--accent);text-decoration:none;font-size:12.5px;margin-left:6px}
#view-strategies .sblink:hover{text-decoration:underline}
#view-strategies .coins{flex-wrap:nowrap}