/* dashboards.css: Home and Analytics dashboards. Tokens from notes/tokens.md "Dashboards". */
.dash { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--canvas); }
.dbar, .hbar { flex: none; height: 59px; display: flex; align-items: center; gap: 10px; padding: 12px; background: #eef1f9; position: relative; z-index: 5; }
.dash.scrolled .dbar, .dash.scrolled .hbar { box-shadow: 0 3px 6px rgba(30, 40, 80, .12); }
.dbar-fill { flex: 1; }
.dpick { position: relative; display: flex; height: 34px; }
.dpick-f, .dpick-d { display: inline-flex; align-items: center; gap: 8px; height: 34px; background: #fff; border: 1px solid var(--line-in); font-size: 14px; color: var(--ink); white-space: nowrap; }
.dpick-f { width: 56px; padding: 0 9px 0 12px; border-radius: 6px 0 0 6px; justify-content: space-between; }
.dpick-d { padding: 0 12px; border-radius: 0 6px 6px 0; border-left: 0; max-width: 340px; }
.dpick-n { overflow: hidden; text-overflow: ellipsis; }
.dpick-st { display: grid; color: var(--ink); }
.dcar { display: grid; color: #7d8496; }
.dpick-f.on .dcar, .dpick-d.on .dcar, .hsel.on .dcar { transform: rotate(180deg); }
.dbar-ib { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; color: var(--ink); flex: none; }
.dbar-ib:hover { background: var(--hover); }
.dbar-ref { color: #4a5bd9; border-radius: 50%; }
.dbar-users { display: inline-flex; align-items: center; gap: 6px; height: 21px; padding: 0 8px; background: #fff; border: 1px solid var(--line-in); border-radius: 3px; font-size: 13px; color: var(--ink); white-space: nowrap; }
.dbar-side { margin-left: -2px; }
.spin .ic { animation: d-spin .7s linear; }
@keyframes d-spin { to { transform: rotate(360deg); } }
.ddrop { position: absolute; z-index: 40; top: 38px; background: #fff; border: 1px solid #ced0e1; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); padding: 5px; }
.dfold { left: 0; width: 248px; }
.dsw { left: 56px; width: 380px; }
.ddrop-sep { height: 1px; background: var(--line); margin: 5px 4px; }
.dfold-i, .dsw-i, .dsw-f { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 6px 10px; border-radius: 6px; font-size: 14px; color: var(--ink); text-align: left; }
.dfold-i:hover, .dfold-i.on, .dsw-i:hover, .dsw-f:hover { background: var(--menu-h); }
.dsw-i.on { background: var(--menu-h); font-weight: 600; color: var(--ink-h); }
.dsw-ck { width: 16px; flex: none; display: grid; color: var(--ink); }
.dsw-n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsw-st { display: grid; color: var(--ink); margin-right: 8px; }
.dsw-s { display: flex; align-items: center; gap: 6px; height: 34px; margin: 4px 4px 4px; padding: 0 9px; border: 1px solid var(--brand); border-radius: 6px; box-shadow: 0 0 6px rgba(76, 94, 253, .5); color: var(--ink-3); }
.dsw-s input { border: 0; outline: 0; width: 100%; font-size: 14px; }
.dsw-l { max-height: 260px; overflow-y: auto; scrollbar-width: thin; }
.dsw-f { gap: 10px; color: var(--ink); }
.dsw-f .ic { color: var(--ink); }

.dgrid-s { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 12px 24px; }
.dgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 110px; gap: 12px; }
.dt { grid-column: var(--x) / span var(--w); grid-row: var(--y) / span var(--h); min-width: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid transparent; border-radius: 8px; overflow: hidden; }
.dt-h { flex: none; display: flex; align-items: center; gap: 8px; padding: 20px 20px 10px; }
.dt-h h3 { margin: 0; flex: 1; min-width: 0; font-weight: 700; font-size: 15px; line-height: 19px; letter-spacing: .2px; color: var(--ink-h); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pre .dt-h { padding-top: 26px; }
.kpi2 .dt-h { padding: 18px 20px 6px; }
.kpi2 .dt-h h3 { font-weight: 600; letter-spacing: .1px; color: var(--ink-h); }
/* The tile tools take their slot on the right even when hidden, so titles truncate early (stills 327, 560, 563). */
.dt-h { padding-right: 78px; }
.dt-tools { position: absolute; top: 18px; right: 12px; }
.dt-tools { display: none; gap: 4px; flex: none; }
.dt:hover .dt-tools { display: flex; }
.kpi2 .dt-tools, .kpi .dt-tools { position: absolute; right: 10px; }
.dt { position: relative; }
.dt-tb { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; color: var(--ink); }
.dt-tb:hover { background: var(--hover); }
.dt-b { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.dk { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 20px 20px; position: relative; }
.dk-v { display: flex; align-items: center; gap: 10px; margin-top: 4px; white-space: nowrap; }
.dk-v b { font-weight: 700; font-size: 19px; color: var(--ink); }
.pre.kpi .dk { padding-bottom: 54px; }
.dk-d { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 14px; }
.dk-d.ok { color: var(--ok); } .dk-d.bad { color: var(--bad); }
.dk-d.sm { font-weight: 400; font-size: 13px; margin-left: 4px; }
.dk-rel { position: absolute; left: 20px; right: 10px; bottom: 20px; font-size: 14px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk2 { padding: 16px 20px 0; font-weight: 700; font-size: 19px; color: var(--ink); white-space: nowrap; }
.de { flex: 1; display: grid; place-items: center; align-content: center; gap: 14px; padding: 0 20px 20px; }
.de p { margin: 0; font-size: 14px; color: var(--ink-empty); text-align: center; }
.de-big { padding-bottom: 40px; }
.dch { flex: 1; min-height: 0; padding: 0 14px 14px; display: flex; }
.dc { width: 100%; height: 100%; display: block; overflow: visible; }
.scrolly .dch { display: block; overflow-y: auto; scrollbar-width: thin; }
.scrolly .dc { height: auto; }
.dc text { font-family: inherit; }
.dc-grid { stroke: #cfd3dc; stroke-dasharray: 5 4; stroke-width: 1; }
.dc-grid[data-base] { stroke-dasharray: none; stroke: #c3c8d4; }
.dc-axis { stroke: #c3c8d4; stroke-width: 1; }
.dc-tick { font-size: 11px; fill: #555; }
.dc-val { font-size: 12px; fill: #313949; }
.dc-lab { font-size: 13px; fill: #313949; }
.dc-sub { font-size: 15px; fill: #313949; }
.dc-big { font-size: 15px; fill: #313949; }
.dc-rate { font-size: 14px; font-weight: 600; fill: #313949; }
.dc-title { font-size: 15px; font-weight: 600; fill: #3b3f48; }
.dc-bar rect:hover { filter: brightness(.94); }
.dt-foot { flex: none; margin: -6px 20px 14px; font-size: 14px; color: var(--ink-2); }
.dt-foot a { color: var(--brand); }

.dtbl-w { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; }
.dtbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.dtbl th { position: sticky; top: 0; background: #fff; font-weight: 500; color: var(--ink-h); text-align: left; padding: 8px 10px 8px 20px; border-bottom: 2px solid #d9e0eb; border-top: 1px solid #eef1f7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.dtbl td { padding: 11px 10px 10px 20px; border-bottom: 1px solid #eef1f7; color: var(--ink); white-space: nowrap; }
.dtbl .r { text-align: right; padding-right: 20px; }
.dtbl tr.tot td { font-weight: 600; color: var(--ink-h); }
.dtbl .mut { color: #8a96b6; }
.dtbl .ell { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.dtbl.fixed { table-layout: fixed; }
.dtbl.fixed td, .dtbl.fixed th { overflow: hidden; text-overflow: ellipsis; max-width: none; }
.dtbl.fixed td.r { padding-left: 4px; }
.dtbl .numc { display: flex; min-width: 0; overflow: hidden; }
.dtbl .numc .num { flex: none; }
.dtbl .numc .ell { flex: 0 1 auto; min-width: 0; }
.dtbl-note { margin: 8px 20px; font-size: 13px; color: var(--ink-empty); }
.pre .dtbl th:first-child, .pre .dtbl td:first-child { padding-left: 20px; }
.ch .dch-fun { flex: none; height: 340px; }
.ch .dch-fun + .dtbl-w { flex: 1; }
.ch .dch-fun + .dtbl-w th { white-space: normal; text-align: center; background: #f5f7fb; }
.fun-cr { flex: none; margin: 8px 20px 14px; font-weight: 600; font-size: 14px; color: var(--ink-h); }
.fun-cr span { font-weight: 400; color: var(--ink-2); margin-left: 6px; font-size: 13px; }

.perf { flex: 1; min-height: 0; overflow: auto; padding: 0 20px 12px; }
.perf table { border-collapse: collapse; min-width: 330px; width: 100%; font-size: 14px; }
.perf thead th { font-weight: 400; font-size: 15px; padding: 10px 6px 18px; border-bottom: 2px solid #b8c3f3; width: 110px; }
.perf tbody th { font-weight: 400; text-align: center; padding: 18px 8px; width: 110px; }
.perf td { text-align: center; padding: 18px 6px; border-left: 1px solid #d6dbe6; white-space: nowrap; }
.perf tbody tr:nth-child(even) { background: #f8f9fd; }

.sf { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 16px 0; }
.sf-n { display: flex; flex-direction: column; align-items: center; min-width: 44px; max-width: 72px; }
.sf-n b { font-weight: 600; font-size: 19px; color: var(--ink-h); }
.sf-n span { font-size: 14px; line-height: 16px; color: #7f8db3; text-align: center; word-break: break-all; }
.sf-a { position: relative; flex: none; height: 40px; padding: 0 16px 0 8px; display: grid; place-items: center; font-size: 14px; color: var(--ink); background: #eef0f6; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); }
.sf-cr { margin: auto 0 18px; text-align: center; font-size: 14px; color: var(--ink); }
.sf-cr b { font-weight: 600; }

/* Home */
.hbar { height: 62px; gap: 12px; }
.hbar-av { width: 56px; height: 46px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.hbar h2 { margin: 0 0 0 4px; font-weight: 600; font-size: 19px; color: var(--ink-h); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hsel-w { position: relative; }
.hsel { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; width: 200px; height: 34px; padding: 0 12px; background: #fff; border: 1px solid var(--line-in); border-radius: 6px; font-size: 14px; }
.hsel span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hsel-d { right: 0; width: 200px; }
.hsel-cust { color: var(--brand); justify-content: space-between; }
.hsel-tri { transform: rotate(-90deg); color: var(--brand); display: grid; }
.home-t .dt-h { padding-bottom: 6px; }
.ht-sort { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; height: 26px; margin: 0 0 8px 8px; padding: 0 8px; border-radius: 6px; font-size: 14px; }
.ht-sort:hover { background: var(--hover); }
.ht-w { flex: 1; min-height: 0; overflow: auto; border-top: 1px solid #e2e6ef; scrollbar-width: thin; }
.ht { width: 100%; border-collapse: collapse; font-size: 14px; }
.ht th { font-weight: 400; text-align: left; padding: 8px 10px; height: 35px; border-bottom: 1px solid #d9e0eb; color: var(--ink-h); white-space: nowrap; }
.ht th + th:not(.hcol) { border-left: 1px solid #e2e6ef; }
.ht .hs { width: 96px; }
.ht .hcol { width: 40px; border-left: 1px solid #e2e6ef; }
.ht .hcol button { display: grid; place-items: center; width: 24px; height: 24px; color: var(--ink); }
.ht td { padding: 10px; border-bottom: 1px solid #edf0f4; vertical-align: top; line-height: 20px; }
.ht td.r, .ht th.r { text-align: right; }
.ht .v-link { color: var(--ink); }
.ht .v-link:hover { color: var(--brand); }
.ht-empty { margin: 24px 0; text-align: center; font-size: 14px; color: var(--ink-empty); }
.ht-f { flex: none; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-top: 1px solid #e2e6ef; font-size: 14px; }
.ht-f b { font-weight: 600; font-size: 13px; margin-left: 4px; }
.ht-pg { display: flex; align-items: center; gap: 10px; }
.ht-pg i { font-style: normal; font-weight: 400; color: var(--ink-2); }
.ht-pg button { display: grid; color: #c3c8d6; }

@media (max-width: 1100px) {
  .dbar .dbar-add, .dbar .dbar-side { display: none; }
}
@media (max-width: 760px) {
  .dbar, .hbar { height: auto; flex-wrap: wrap; gap: 8px; padding: 8px; }
  .dpick { flex: 1 1 100%; min-width: 0; }
  .dpick-d { flex: 1; min-width: 0; max-width: none; }
  .dsw { left: 0; right: 0; width: auto; }
  .dbar .dbar-new { padding: 8px 10px; font-size: 13px; }
  .dbar-users { order: 2; }
  .hbar-av { width: 40px; height: 36px; }
  .hbar-av svg { width: 30px; height: 30px; }
  .hbar h2 { font-size: 17px; flex: 1 1 auto; min-width: 0; }
  .hbar .dbar-fill { display: none; }
  .hsel-w { flex: 1; }
  .hsel { width: 100%; }
  .dgrid-s { padding: 8px 8px 20px; }
  .dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 8px; }
  .dt { grid-column: 1 / -1; grid-row: auto; min-height: calc(var(--h) * 110px + (var(--h) - 1) * 12px); max-height: 560px; }
  .dt.kpi2 { grid-column: span 1; min-height: 96px; }
  .dt.kpi { grid-column: span 1; min-height: 170px; }
  .dt.kpi .dt-h { padding: 16px 14px 6px; }
  .dt.kpi .dk { padding: 0 14px 40px; }
  .dt.kpi .dk-rel { left: 14px; bottom: 14px; font-size: 13px; }
  .dt.kpi .dk-v { flex-wrap: wrap; gap: 4px 8px; }
  .dt.kpi .dk-v b { font-size: 17px; }
  .kpi2 .dt-h { padding: 14px 14px 4px; }
  .kpi2 .dt-h h3 { font-size: 14px; }
  .dk2 { padding: 4px 14px 14px; font-size: 17px; }
  .dt-h { padding: 16px 14px 8px; }
  .dch { padding: 0 6px 10px; min-height: 260px; }
  .dt.ch:not(.kpi) { min-height: 330px; }
  .dtbl th, .dtbl td { padding-left: 12px; }
  .dt-tools { display: flex; }
  .dt-h { padding-right: 70px; }
  .kpi2 .dt-tools, .kpi .dt-tools { display: none; }
  .ht .hs { width: 12px; }
}