/* ============================================
   DASHBOARD
   ============================================ */

/* ─── DASHBOARD ─────────────────────────────────── */
#dashboard-view { display: none; }
.dash-year-select {
    display: flex; align-items: center; gap: 12px; margin-bottom: 24px;
}
.dash-year-select h2 { font-family: var(--font-mono); font-size: 20px; font-weight: 700; }
.dash-year-select select {
    width: auto; padding: 6px 12px; font-family: var(--font-mono);
    font-size: 14px; font-weight: 600;
}
.dash-kpis {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px; margin-bottom: 28px;
}
.kpi-card {
    background: var(--bg-1); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px;
}
.kpi-card .kpi-label {
    font-size: 12px; font-weight: 600; color: var(--text-2);
    text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 6px;
}
.kpi-card .kpi-value {
    font-family: var(--font-mono); font-size: 28px; font-weight: 700;
}
.kpi-card .kpi-sub { font-size: 12px; color: var(--text-2); margin-top: 4px; }

.dash-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.dash-card {
    background: var(--bg-1); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 24px;
}
.dash-card h3 {
    font-family: var(--font-mono); font-size: 14px; font-weight: 700;
    margin-bottom: 18px; color: var(--text-1);
}
.dash-card.full-width { grid-column: 1 / -1; }

/* Bar chart */
.bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 160px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.bar-fill {
    width: 100%; border-radius: 4px 4px 0 0;
    transition: height 0.5s ease; min-width: 8px;
    position: relative;
}
.bar-fill:hover { opacity: 0.85; }
.bar-fill .bar-tooltip {
    display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    background: var(--bg-3); color: var(--text-0); padding: 4px 8px; border-radius: 4px;
    font-size: 11px; font-family: var(--font-mono); white-space: nowrap; z-index: 10;
}
.bar-fill:hover .bar-tooltip { display: block; }
.bar-label { font-size: 11px; color: var(--text-2); font-family: var(--font-mono); }

/* Horizontal bars */
.h-bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.h-bar-label { width: 100px; font-size: 13px; color: var(--text-1); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.h-bar-track { flex: 1; height: 24px; background: var(--bg-2); border-radius: 4px; overflow: hidden; position: relative; }
.h-bar-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; display: flex; align-items: center; padding-left: 8px; }
.h-bar-val { font-size: 11px; font-family: var(--font-mono); font-weight: 600; color: var(--text-0); white-space: nowrap; }
.h-bar-right { width: 70px; text-align: right; font-size: 12px; color: var(--text-2); font-family: var(--font-mono); flex-shrink: 0; }

/* Donut chart */
.donut-wrap { display: flex; align-items: center; gap: 28px; }
.donut-svg { width: 120px; height: 120px; }
.donut-legend { display: flex; flex-direction: column; gap: 8px; }
.donut-legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.donut-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.donut-legend-val { font-family: var(--font-mono); font-weight: 600; margin-left: auto; padding-left: 12px; }

/* Day of week chart */
.dow-chart { display: flex; gap: 8px; align-items: flex-end; height: 100px; }
.dow-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.dow-fill { width: 100%; border-radius: 4px 4px 0 0; background: var(--accent); transition: height 0.5s ease; }
.dow-label { font-size: 11px; color: var(--text-2); font-family: var(--font-mono); }
.dow-val { font-size: 11px; color: var(--text-1); font-family: var(--font-mono); font-weight: 600; }


/* Revenue vs Expenses chart */
.rev-exp-chart {
    display: flex; align-items: flex-end; gap: 6px;
    height: 200px; padding-bottom: 24px; position: relative;
}
.rev-exp-col {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    height: 100%; cursor: pointer; position: relative;
    border-radius: 6px; transition: background var(--transition);
}
.rev-exp-col:hover { background: var(--bg-2); }
.rev-exp-bars {
    flex: 1; display: flex; align-items: flex-end; gap: 3px;
    width: 100%; justify-content: center; padding: 0 4px;
}
.rev-bar {
    flex: 1; max-width: 18px; background: var(--green);
    border-radius: 3px 3px 0 0; min-height: 2px; opacity: 0.85;
    transition: opacity var(--transition);
}
.exp-bar {
    flex: 1; max-width: 18px; background: var(--red);
    border-radius: 3px 3px 0 0; min-height: 2px; opacity: 0.85;
    transition: opacity var(--transition);
}
.rev-exp-col:hover .rev-bar,
.rev-exp-col:hover .exp-bar { opacity: 1; }
.rev-exp-label {
    position: absolute; bottom: -20px;
    font-size: 11px; color: var(--text-2); font-family: var(--font-mono);
}

/* Dashboard header */
.dash-header {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 20px;
}
.dash-header h2 { font-family: var(--font-mono); font-size: 20px; font-weight: 700; }
.dash-header select {
    width: auto; min-width: 90px; flex: 0 0 auto;
    padding: 7px 14px; font-family: var(--font-mono);
    font-size: 14px; font-weight: 600;
}

/* KPI grid */
.dash-kpis {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px; margin-bottom: 20px;
}

@media (max-width: 900px) {
    .rev-exp-chart { height: 160px; }
    .dash-kpis { grid-template-columns: 1fr 1fr; }
}

/* ═══ v3.17 — redesigned dashboard ════════════════════════════
   Colour roles. Checked with the data-viz validator:
   dark card #12151c — blue/orange/aqua pass every check all-pairs;
   light card #fff  — same, with aqua under 3:1, so the profit line is
   direct-labelled and the chart has a Table view.
   Heat ramps are single-hue ordinal ramps, validated per theme.        */
#dashboard-view {
    --viz-1: #3987e5; --viz-2: #d95926; --viz-3: #199e70; --viz-muted: #5b6377;
    --heat-0: #1a1e28; --heat-1: #184f95; --heat-2: #2a78d6; --heat-3: #6da7ec; --heat-4: #b7d3f6;
}
body.light #dashboard-view {
    --viz-1: #2a78d6; --viz-2: #eb6834; --viz-3: #1baf7a; --viz-muted: #a3a8b4;
    --heat-0: #eef0f3; --heat-1: #86b6ef; --heat-2: #5598e7; --heat-3: #256abf; --heat-4: #104281;
}

.dash-header { flex-wrap: wrap; }
.dash-cmp { font-size: 12px; color: var(--text-2); margin-left: auto; }

.dash-kpis.hero { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; }
@media (max-width: 1100px) { .dash-kpis.hero { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dash-kpis.hero .kpi-card { padding: 18px 20px 14px; display: flex; flex-direction: column; }
.dash-kpis.hero .kpi-value { font-size: 28px; line-height: 1.15; }
.kpi-value small { font-size: 13px; color: var(--text-2); font-weight: 500; font-family: var(--font-body); }
.kpi-sub { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.kpi-sub span:not(.dlt) { color: var(--text-2); }
.spark { width: 100%; height: 30px; margin-top: 12px; display: block; }
.dlt { font-weight: 700; font-size: 12px; }
.dlt.good { color: var(--green); } .dlt.bad { color: var(--red); } .dlt.neutral { color: var(--text-2); font-weight: 600; }

.dash-kpis.compact { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
@media (max-width: 1100px) { .dash-kpis.compact { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); } }
.dash-kpis.compact .kpi-card { padding: 12px 14px; }
.dash-kpis.compact .kpi-label { font-size: 10.5px; margin-bottom: 4px; }
.dash-kpis.compact .kpi-value { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-kpis.compact .kpi-sub { font-size: 11.5px; }

.dash-card { margin-bottom: 20px; }
.dash-grid { margin-bottom: 0; }
.dash-grid .dash-card { margin-bottom: 20px; min-width: 0; }
.dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.dash-card-head h3 { margin: 0; }
.h-note { font-family: var(--font-body); font-weight: 500; font-size: 12px; color: var(--text-2); }

.viz-box { width: 100%; min-height: 60px; }
.viz-legend { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--text-1); flex-wrap: wrap; }
.viz-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.viz-legend i.ln { height: 3px; width: 14px; border-radius: 2px; vertical-align: 3px; }
.viz-legend.small { font-size: 11.5px; }
.viz-legend .muted { color: var(--text-2); }
.viz-foot { font-size: 11px; color: var(--text-2); text-align: center; margin-top: 6px; }
.viz-empty { color: var(--text-2); font-size: 13px; padding: 18px 0; text-align: center; }

/* SVG parts — text in text colours, grid recessive */
.viz-svg { display: block; overflow: visible; }
.viz-svg text { font-family: var(--font-mono); }
.viz-axis { fill: var(--text-2); font-size: 11px; }
.viz-axis.small { font-size: 10px; }
.viz-axis.strong { fill: var(--text-0); font-weight: 700; }
.viz-label { fill: var(--text-1); font-size: 11.5px; font-weight: 600;
             paint-order: stroke; stroke: var(--bg-1); stroke-width: 4px; stroke-linejoin: round; }  /* halo over lines */
.viz-label.strong { fill: var(--text-0); font-weight: 700; }
.viz-grid { stroke: var(--border); stroke-width: 1; }
.viz-grid.zero { stroke: var(--border-light); }
.viz-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz-line.dashed { stroke-dasharray: 5 4; }
.viz-dot { stroke: var(--bg-1); stroke-width: 2; }           /* 2px surface ring */
.viz-dim { opacity: .35; }
.viz-hit { fill: transparent; cursor: pointer; }
.viz-hit.viz-hover, .viz-hit:hover { fill: var(--text-0); fill-opacity: .045; }
.viz-cross.viz-hover, .viz-cross:hover { fill: none; stroke: var(--border-light); stroke-width: 1; stroke-dasharray: 0; }

/* calendar heatmap */
.heat-box { overflow-x: auto; }
.heat { fill: var(--heat-0); }
.heat.h1 { fill: var(--heat-1); } .heat.h2 { fill: var(--heat-2); } .heat.h3 { fill: var(--heat-3); } .heat.h4 { fill: var(--heat-4); }
.heat.future { fill-opacity: .45; }
.heat.today { stroke: var(--text-0); stroke-width: 1.5; }
rect.heat.viz-hover, rect.heat:hover { stroke: var(--text-0); stroke-width: 1.5; }
.heat-key { display: inline-flex; align-items: center; gap: 3px; color: var(--text-2); }
.heat-key i.heat { display: inline-block; width: 11px; height: 11px; border-radius: 2.5px; margin: 0; background: var(--heat-0); }
.heat-key i.h1 { background: var(--heat-1); } .heat-key i.h2 { background: var(--heat-2); }
.heat-key i.h3 { background: var(--heat-3); } .heat-key i.h4 { background: var(--heat-4); }

/* horizontal bar rows */
.hb-row { display: grid; grid-template-columns: minmax(110px, 38%) 1fr 64px; gap: 12px; align-items: center;
          padding: 7px 6px; border-radius: 6px; margin: 0 -6px; }
.hb-row:hover, .hb-row.viz-hover { background: var(--bg-2); }
.hb-label { display: flex; flex-direction: column; min-width: 0; font-size: 13px; color: var(--text-0); position: relative; }
.hb-label span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.hb-label small { font-size: 11px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-label i { position: absolute; left: -2px; top: 6px; width: 0; }
.hb-track { height: 10px; background: var(--bg-2); border-radius: 0 5px 5px 0; overflow: hidden; }
.hb-fill { height: 100%; border-radius: 0 4px 4px 0; }
.hb-val { text-align: right; font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--text-0); }

/* tooltip */
.viz-tip { position: fixed; z-index: 1000; pointer-events: none; background: var(--bg-3); color: var(--text-0);
           border: 1px solid var(--border-light); border-radius: 8px; padding: 9px 11px; font-size: 12px;
           box-shadow: var(--shadow); min-width: 150px; opacity: 0; transition: opacity .1s; }
.viz-tip.show { opacity: 1; }
.viz-tip b { font-weight: 700; }
.tt-row { display: flex; align-items: center; gap: 7px; margin-top: 5px; color: var(--text-1); }
.tt-row i { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.tt-row b { margin-left: auto; padding-left: 14px; font-family: var(--font-mono); color: var(--text-0); }
.tt-sub { margin-top: 6px; color: var(--text-2); font-size: 11.5px; }

.dash-table td, .dash-table th { padding: 8px 10px; }
.dash-table .num { text-align: right; font-family: var(--font-mono); }
.dash-table tr.tot td { font-weight: 700; border-top: 2px solid var(--border-light); }

@media (max-width: 900px) {
    .dash-grid { grid-template-columns: 1fr; }
    .dash-cmp { margin-left: 0; width: 100%; }
}