/* pixxsuite.com/dashboard/ — the user dashboard. Every class is dash-… (the shared .sel/.seg are reused as-is).
   Chart colours: categorical slots 1–2 of the dataviz reference palette, dark steps (the hub is dark), validated on
   the card surface #171826: CVD ΔE 26.8, normal 31.8, both ≥ 3:1. Text never wears a series colour. */
.dash-page {
  --dash-s1: #3987e5; --dash-s2: #d95926;
  --dash-grid: rgba(255,255,255,.07); --dash-track: rgba(255,255,255,.05);
  max-width: 1120px; margin: 0 auto; padding: calc(28px + var(--safe-t, 0px)) 20px 48px; box-sizing: border-box;
}
.dash-page h1 { margin: 0; font-size: clamp(26px, 3vw, 34px); letter-spacing: -.02em; }
.dash-page h2 { margin: 0; font-size: clamp(20px, 2vw, 24px); letter-spacing: -.01em; }
.dash-page h3 { margin: 0; font-size: 15px; }
.dash-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.dash-hero p { margin: 4px 0 0; }
.dash-jump { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 14px; }
.dash-jump a { color: var(--muted) !important; text-decoration: none; font-size: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.dash-jump a:hover { color: var(--text) !important; background: rgba(255,255,255,.08); }

.dash-section { margin-top: clamp(28px, 4vw, 44px); scroll-margin-top: 80px; }
.dash-shead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.dash-explain { margin: 0 0 12px; max-width: 760px; }
.dash-card { padding: clamp(14px, 2vw, 20px); border-radius: 18px; background: linear-gradient(180deg, rgba(28,41,64,.55), rgba(20,21,32,.85)); border: 1px solid var(--line2); box-sizing: border-box; min-width: 0; }
.dash-card + .dash-card, .dash-card + .dash-two, .dash-tiles + .dash-card { margin-top: 12px; }
.dash-two > .dash-card { margin-top: 0; }
.dash-two { display: grid; align-items: start; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.dash-signin { max-width: 620px; margin: 30px auto; }
.dash-signin p { margin: 10px 0 16px; }

/* tiles */
.dash-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.dash-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid var(--line); min-width: 0; }
.dash-tlabel { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.dash-tvalue { font-size: clamp(18px, 2.2vw, 24px); font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* my work */
.dash-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.pxs-app .dash-search { max-width: 280px; flex: 1 1 200px; }
.pxs-app .dash-filter, .pxs-app .dash-sort { height: 34px; }
.dash-tabs { flex-wrap: wrap; }
.dash-empty { padding: 18px 0; }
.dash-grid .mine-cards { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

/* plan + storage */
.dash-plan { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.dash-plan b { font-size: 16px; margin-right: 8px; }
.dash-plan p { margin: 4px 0 0; }
.dash-meterline { display: flex; align-items: baseline; gap: 4px; margin-bottom: 8px; }
.dash-meterline b { font-size: 18px; }
.dash-meterbar { height: 8px; border-radius: 4px; background: var(--dash-track); overflow: hidden; }
.dash-meterbar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--acc), var(--acc2)); }
.dash-meter.p80 .dash-meterbar i { background: #ffb547; } .dash-meter.p95 .dash-meterbar i { background: #ff8a3d; }
.dash-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; }
.dash-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line); }
.dash-list li:last-child { border-bottom: 0; }
.dash-lname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-largest > p { margin: 10px 0 0; }

/* charts — shared */
.dash-chead { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.dash-chead p { margin: 3px 0 0; }
.dash-legend { display: flex; gap: 14px; flex-wrap: wrap; margin: -4px 0 10px; font-size: 12px; color: var(--muted); }
.dash-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dash-key { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.dash-key.s1, .dash-bar.s1, .dash-hbar.s1 { background: var(--dash-s1); }
.dash-key.s2, .dash-bar.s2, .dash-hbar.s2 { background: var(--dash-s2); }
.dash-tip { position: fixed; z-index: 90; pointer-events: none; display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; border-radius: 9px; background: #0b0c12; border: 1px solid var(--line2, rgba(255,255,255,.12)); color: #f8fafc; font: 12px/1.35 var(--font, system-ui); box-shadow: 0 8px 24px rgba(0,0,0,.45); max-width: 260px; }
.dash-tip[hidden] { display: none; }
.dash-tip span { color: #a8b7ca; }

/* column charts (one series, or two side by side with a 2px gap) */
.dash-chart { display: flex; flex-direction: column; gap: 6px; }
.dash-plot { position: relative; height: 170px; margin-left: 38px; border-bottom: 1px solid rgba(255,255,255,.14); }
.dash-gline { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--dash-grid); }
.dash-gline em { position: absolute; right: calc(100% + 6px); top: -7px; font: 10px var(--mono, monospace); font-style: normal; color: var(--dim, #66758a); white-space: nowrap; }
.dash-cols { position: absolute; inset: 0; display: flex; align-items: stretch; gap: 2px; }
.dash-col { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; justify-content: center; cursor: default; outline: none; border-radius: 4px; }
.dash-col:hover, .dash-col:focus-visible { background: rgba(255,255,255,.05); }
.dash-col:focus-visible { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.dash-colset { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; width: 100%; }
.dash-bar { display: block; flex: 0 1 24px; max-width: 24px; min-width: 2px; border-radius: 4px 4px 0 0; }
.dash-xaxis { display: flex; gap: 2px; margin-left: 38px; font-size: 10px; color: var(--dim, #66758a); }
.dash-xaxis span { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: visible; }

/* horizontal bars: label | bar | value at the tip */
.dash-hbars { display: flex; flex-direction: column; gap: 4px; }
.dash-hrow { display: grid; grid-template-columns: minmax(90px, 150px) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 4px 6px; border-radius: 8px; outline: none; }
.dash-hrow:hover, .dash-hrow:focus-visible { background: rgba(255,255,255,.05); }
.dash-hlabel { min-width: 0; }
.dash-applabel { display: inline-flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.dash-applabel > span { display: inline-flex; flex: none; }
.dash-libmark { font-size: 15px; line-height: 1; }
.dash-htrack { height: 14px; display: flex; align-items: center; }
.dash-hbar { display: block; height: 14px; border-radius: 0 4px 4px 0; }
.dash-hval { font-size: 12px; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* table view */
.dash-tablewrap { max-height: 320px; overflow: auto; border-radius: 10px; border: 1px solid var(--line); }
.dash-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.dash-table th, .dash-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.dash-table th { position: sticky; top: 0; background: #14151f; color: var(--muted); font-weight: 600; }
.dash-table td:not(:first-child), .dash-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }

/* activity switch */
.dash-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); cursor: pointer; }
.pxs-app .dash-switch input { flex: none; display: inline-block; padding: 0; border: 0; box-sizing: border-box; min-width: 0; }
.pxs-app .dash-switch input { appearance: none; -webkit-appearance: none; width: 34px; height: 20px; border-radius: 999px; background: rgba(255,255,255,.12); position: relative; cursor: pointer; margin: 0; transition: background .15s; }
.pxs-app .dash-switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s; }
.pxs-app .dash-switch input:checked { background: var(--acc); }
.pxs-app .dash-switch input:checked::after { transform: translateX(14px); }
.dash-switch input:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

@media (max-width: 860px) {
  .dash-two { grid-template-columns: minmax(0, 1fr); }
  .dash-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .dash-page { padding-left: 16px; padding-right: 16px; }
  .dash-shead .dash-tabs { order: 3; width: 100%; }
  .dash-shead .dash-tabs button { flex: 1 1 auto; }
  .pxs-app .dash-search { max-width: none; flex-basis: 100%; }
  .pxs-app .dash-filter, .pxs-app .dash-sort { flex: 1 1 0; max-width: none; }
  .dash-hrow { grid-template-columns: minmax(80px, 110px) minmax(0, 1fr) auto; gap: 8px; }
  .dash-plot, .dash-xaxis { margin-left: 34px; }
  .dash-grid .mine-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .dash-grid .mine-actions { flex-wrap: wrap; gap: 6px; }
  .dash-grid .mine-actions .btn { font-size: 12px; padding: 0 10px; }
  .dash-hero .account-avatar { display: none; }
}
.dash-flowslot:empty { display: none; } .dash-flowslot { margin-top: 12px; } .dash-flow .dash-lname { color: var(--text) !important; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .dash-flow .dash-lname:hover { color: var(--acc2) !important; }