/* Design tokens pulled from Platform-Web (mig/integration branch), .dark theme in
   src/index.css — same product, so this page reads as part of the same dashboard
   rather than a foreign-looking export. Font is their exact stack (Inter). Chart
   accent reuses --chart-1; --bar-past is a derived muted step of the same hue
   (their token set has no "de-emphasis" pair, since this is the first bar chart
   built outside the app's own chart library). */
:root {
    --bg: #11161d;              /* --background */
    --card: #171f28;            /* --card */
    --card-border: rgba(151, 166, 180, 0.18);   /* --border */
    --ink: #ecf0f2;             /* --foreground */
    --ink-2: #96a2ad;           /* --muted-foreground */
    --good: #34d399;            /* --success */
    --bad: #f17769;             /* --danger */
    --bar-now: #3cc3b3;         /* --chart-1, current-month accent */
    --bar-past: #1f5f57;        /* derived: --chart-1 stepped toward --card */
    --grid-line: rgba(151, 166, 180, 0.14);
    --baseline: rgba(151, 166, 180, 0.32);
    --chip-bg: #1d2630;         /* --muted */
    --radius-card: 14px;
    --font-sans: "Inter", "Inter Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #000;           /* pure black backdrop so any letterboxed edge
                                    (panel aspect != 800:936) reads as "off",
                                    not as a mismatched grey */
    font-family: var(--font-sans);
    overflow: hidden;
}

/* Fills the viewport, centers the fixed-design-size stage, and scales it as one
   vector unit — this is what keeps every bar, line and glyph sharp regardless of
   the physical panel's real pixel count, unlike a raster PNG stretched by the
   display hardware. */
#viewport {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#stage {
    width: 800px;
    height: 936px;
    background: var(--bg);
    background-image:
        radial-gradient(circle at top left, rgba(77, 145, 201, 0.10), transparent 26%),
        radial-gradient(circle at top right, rgba(60, 195, 179, 0.08), transparent 22%);
    flex: none;
    transform-origin: center center;
}

#grid {
    width: 100%;
    height: 100%;
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 8px;
}

/* ---- card ------------------------------------------------------------- */

.tile {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    padding: 8px 10px 6px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.tile-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex: none;
}

.tile-title {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tile-uom {
    font-size: 9.5px;
    color: var(--ink-2);
    flex: none;
    padding-left: 6px;
}

.tile-hero-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex: none;
    margin-top: 2px;
}

.tile-hero {
    font-size: 26px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.01em;
}

.tile-hero-side {
    text-align: right;
    flex: none;
    padding-top: 1px;
}

.tile-delta {
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}
.tile-delta.good { color: var(--good); }
.tile-delta.bad { color: var(--bad); }

.tile-target-top {
    font-size: 9.5px;
    color: var(--ink-2);
    margin-top: 2px;
    white-space: nowrap;
}

.tile-meta {
    font-size: 9.5px;
    color: var(--ink-2);
    flex: none;
    margin-top: 1px;
}
.tile-meta.ytd-label {
    font-weight: 700;
    color: var(--ink-2);
    margin-top: 3px;
}

/* ---- bar chart ---------------------------------------------------------- */

.chart {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* real dead-space buffer above the plot — mirrors the ~21px gap the Python
       renderer left above its axes box, so a label that sits near axis-top
       (target close to a bar's value, common when a KPI is near target) has
       somewhere to float without touching the meta text above it. */
    margin-top: 16px;
}

.plot {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.plot-cols {
    /* left gutter so January's bar doesn't collide with the y-axis tick text
       (no right gutter needed — the on-chart target text was dropped, see
       app.js). Mirrors bos_render.py's own left-axis offset. */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 10%;
    width: 89%;
    display: flex;
    align-items: flex-end;
}

.plot-col {
    flex: 1 1 0;
    position: relative;
    height: 100%;
}

.bar {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 62%;
    max-width: 26px;
    transform: translateX(-50%);
    border-radius: 4px 4px 0 0;
    background: var(--bar-past);
}
.bar.now { background: var(--bar-now); }
.bar.neg { border-radius: 0 0 4px 4px; }

.bar-value {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-2);
    white-space: nowrap;
    background: var(--card);
    padding: 0 2px;
}
.bar-value.now { color: var(--ink); }
.bar-value.raised { margin-bottom: 15px; }
.bar-value.neg { margin-top: 1px; }

.gridline {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--grid-line);
}

.tick-label {
    position: absolute;
    left: 0;
    font-size: 11px;
    color: var(--ink-2);
    transform: translateY(-50%);
    background: var(--card);
    padding-right: 4px;
}
.tick-label.tick-top { transform: translateY(-100%); }
.tick-label.tick-bottom { transform: translateY(0); }

.target-line {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 2px dashed var(--ink-2);
    opacity: 0.85;
}

.baseline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 2px solid var(--baseline);
}

.plot-months {
    display: flex;
    margin-top: 4px;
    margin-left: 10%;      /* matches .plot-cols' left gutter, so labels sit
                              directly under their own bars, not spread full-width */
    width: 89%;
    flex: none;
}
.plot-months span {
    flex: 1 1 0;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-2);
}

/* ---- zero-state ---------------------------------------------------------- */

.zero-wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-top: 6px;
}

.zero-check {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--good);
    flex: none;
}
.zero-check.notclean { color: var(--ink-2); }

.zero-chips {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    flex: 1 1 auto;
    min-height: 0;
}

.zero-chip {
    flex: 1 1 0;
    background: var(--chip-bg);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
}
.zero-chip .v {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}
.zero-chip .m {
    font-size: 10px;
    color: var(--ink-2);
}

.zero-footer {
    font-size: 10.5px;
    color: var(--ink-2);
    margin-top: 6px;
    flex: none;
}