/* Charts and reports. Series colours validated (dataviz validator) on both surfaces. */

:root {
  --chart-1: #5B21E0;   /* income / main series */
  --chart-2: #D06A12;   /* expenses / comparison */
  --chart-grid: #E7E5EE;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --chart-1: #9D7BF5; --chart-2: #D9782A; --chart-grid: #2C2C34; }
}
:root[data-theme="dark"] { --chart-1: #9D7BF5; --chart-2: #D9782A; --chart-grid: #2C2C34; }

.chart { position: relative; margin: 0; }
.chart svg { display: block; overflow: visible; }
.chart__grid, .chart__axis { stroke: var(--chart-grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart__axis { stroke: var(--c-border-strong); }
.chart__tick { fill: var(--c-text-subtle); font-size: 12px; font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.chart__hit { fill: transparent; cursor: default; }
.chart__hit[data-on] { fill: var(--c-text); fill-opacity: .05; }
.chart__legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-block-end: var(--sp-3); font-size: var(--fs-sm); color: var(--c-text-muted); }
.chart__legend span, .chart__tip span { display: inline-flex; align-items: center; gap: 6px; }
.chart__legend i, .chart__tip i { inline-size: 10px; block-size: 10px; border-radius: 3px; flex-shrink: 0; }
.chart__tip {
  position: absolute; inset-block-start: 0; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; gap: 2px; min-inline-size: 150px;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md);
  background: var(--c-surface-inverse); color: var(--c-text-inverse); font-size: var(--fs-xs);
  box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
}
.chart__tip b { font-variant-numeric: tabular-nums; }
.chart-box { min-block-size: 240px; }

.period-bar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sp-3); margin-block-end: var(--sp-4); }
.period-bar .field { margin: 0; flex: 1 1 140px; max-inline-size: 220px; }
.chips a.chip { text-decoration: none; }
.chips a.chip:not([aria-pressed="true"]) { color: inherit; }
.period-bar .chips { flex: 1 1 100%; }
.report-actions { display: flex; gap: var(--sp-2); margin-inline-start: auto; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); margin-block-end: var(--sp-4); }
.stat { padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-lg); background: var(--c-surface); display: flex; flex-direction: column; gap: var(--sp-1); }
.stat__label { color: var(--c-text-muted); font-size: var(--fs-sm); }
.stat__value { font-size: var(--fs-xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.stat__value small { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-text-muted); margin-inline-start: 4px; }
.stat__meta { font-size: var(--fs-xs); color: var(--c-text-subtle); }
.stat--hero { background: var(--c-hero-bg); color: var(--c-hero-fg); }
.stat--hero .stat__label, .stat--hero .stat__meta, .stat--hero .stat__value small { color: var(--c-hero-muted); }


.dash-alerts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-2); }
.dash-alert { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--radius-lg); background: var(--c-surface-2); color: inherit; text-decoration: none; }
.dash-alert:hover { background: var(--c-primary-softer); }
.dash-alert__icon { display: grid; place-items: center; inline-size: 38px; block-size: 38px; border-radius: 50%; flex-shrink: 0; }
.dash-alert__icon--danger { background: var(--c-danger-soft); color: var(--c-danger); }
.dash-alert__icon--warning { background: var(--c-warning-soft); color: var(--c-warning); }
.dash-alert__icon--info { background: var(--c-info-soft); color: var(--c-info); }
.dash-alert__text { display: flex; flex-direction: column; min-inline-size: 0; }
.dash-alert__text strong { font-variant-numeric: tabular-nums; }

@media print {
  .print-subtitle { margin-block: -2mm 4mm; color: #444; font-size: 10pt; }
  .print-table .print-total td { background: #F4F0FE !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Dashboard: day navigator */
.day-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-block-end: var(--sp-5); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-xl); background: var(--c-surface); }
.day-nav__label { display: flex; flex-direction: column; align-items: center; min-inline-size: 170px; line-height: 1.3; }
.day-nav__pick { margin-inline-start: auto; }
.day-nav__pick .field { margin: 0; flex-direction: row; align-items: center; gap: var(--sp-2); }
.day-nav__pick .field__label { white-space: nowrap; margin: 0; font-size: var(--fs-sm); color: var(--c-text-muted); }
.day-nav__pick .date-field { inline-size: 190px; }
@media (max-width: 599px) {
  .day-nav__label { flex: 1; min-inline-size: 0; }
  .day-nav__pick { margin-inline-start: 0; flex: 1 1 100%; }
  .day-nav__pick .date-field { inline-size: auto; flex: 1; }
}

/* Dashboard: day's invoices */
.count-badge { display: inline-grid; place-items: center; min-inline-size: 24px; block-size: 24px; padding-inline: 6px; margin-inline-start: var(--sp-1); border-radius: var(--radius-pill); background: var(--c-danger); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-bold); vertical-align: middle; font-variant-numeric: tabular-nums; }
.inv-list { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.inv-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3); border-radius: var(--radius-lg); background: var(--c-surface-2); }
.inv-row--new { border-inline-start: 3px solid var(--c-danger); }
.inv-row__main { flex: 1 1 160px; min-inline-size: 0; display: flex; flex-direction: column; gap: 2px; }
.inv-row__end { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.sys-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sys-list .list__item { background: rgb(127 127 127 / 12%); }
.dash-cards-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-2) var(--sp-4); }
.today-filter { inline-size: auto; min-inline-size: 150px; }
.progress--success .progress__bar { background: var(--c-success); }
.progress--warning .progress__bar { background: var(--c-warning); }
.progress--danger .progress__bar { background: var(--c-danger); }
.sys-list .cloud-usage { grid-column: 1 / -1; align-items: flex-start; }
.cloud-usage .list__main { gap: 4px; }
.cloud-usage .progress { display: block; margin-block: 2px; }
.card--inverse .cloud-usage .progress { background: rgb(127 127 127 / 30%); }
.cloud-usage .progress__bar { display: block; min-inline-size: 4px; }