/* ═══ 2D analysedashboard (analyse.html) ═══════════════════════════════════
   Page-specific on top of css/style.css: the content column, cards, tables,
   charts and alert list. The sidebar, its controls and the theme menu come from
   the shared sheet.

   The status colors here (badge-a/b/c, alert warn/error, trend in/out) are read
   off the chart ramp and the semantic tokens rather than hardcoded, so they flip
   with the theme instead of staying pastel on a dark surface.
   ═════════════════════════════════════════════════════════════════════════ */

/* ─── Sidebar extras ───────────────────────────────────────────────────── */
.alert-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--danger-bg);
    border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
    border-radius: 8px;
    margin-top: 4px;
}
.alert-pill .num {
    font-size: 22px;
    font-weight: 800;
    color: var(--danger);
    line-height: 1;
}
.alert-pill .lbl {
    font-size: 11px;
    color: var(--danger);
    font-weight: 600;
}

.threshold-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-soft);
}
.threshold-row label {
    min-width: 64px;
    font-weight: 600;
}
.threshold-row input[type="number"] {
    width: 64px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 4px 8px;
    font-family: inherit;
    font-size: 12px;
    color: var(--text);
    font-weight: 700;
}
.threshold-row span {
    color: var(--text-soft);
}

/* ─── Content column ───────────────────────────────────────────────────── */
#main {
    margin-left: var(--sidebar-w);
    padding-bottom: 48px;
}

/* Page header band. The title used to be bare text on the page background,
   which read as unfinished next to the 3D page's full-bleed viewport. On its own
   surface with a bottom border it is chrome, the same role the other Boostlogix
   tools give the subnav under their top bar. */
.page-head {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 18px 28px;
    margin-bottom: 26px;
}
.page-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
    margin-bottom: 3px;
}
.page-sub {
    font-size: 12px;
    color: var(--text-soft);
}

/* Everything below the header band keeps the old side padding. */
.page-body {
    padding: 0 28px;
}

.section-hdr {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-faint);
    margin: 28px 0 14px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
}

/* ─── Cards ────────────────────────────────────────────────────────────── */
.cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 1100px) {
    .cards-grid {
        grid-template-columns: 1fr;
    }
}
/* min-width:0 is load-bearing. A grid item defaults to min-width:auto, which
   means it refuses to shrink below its content: the 560px heatmap table and the
   trend chart were widening their tracks to 605px and 1074px instead of the
   453/922 the 1fr 1fr grid asks for, so the cards came out ragged and the page
   scrolled sideways. With this, wide content clamps to the card and scrolls in
   its own container (see .heatmap-scroll) instead. */
.card {
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 22px;
    box-shadow: var(--shadow-card);
}
.card.full {
    grid-column: 1 / -1;
}
.card.third {
    grid-column: span 1;
}
.card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 3px;
}
.card-sub {
    font-size: 11px;
    color: var(--text-soft);
    margin-bottom: 16px;
}

/* Big number */
.big-num {
    font-size: 40px;
    font-weight: 800;
    color: var(--accent-text);
    line-height: 1;
}
.big-unit {
    font-size: 14px;
    color: var(--text-soft);
    font-weight: 600;
    margin-left: 2px;
}
.big-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.big-row .chip {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    background: var(--brand-light);
    color: var(--accent-text);
}

/* Occupancy bars */
.occ-row {
    margin-bottom: 10px;
}
.occ-lbl {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-soft);
    margin-bottom: 4px;
}
.occ-lbl span:last-child {
    color: var(--text);
    font-weight: 700;
}
.occ-track {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 4px;
    height: 14px;
    overflow: hidden;
}
.occ-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--brand-500);
    transition: width 0.6s;
}

/* ─── Tables ───────────────────────────────────────────────────────────── */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}
.data-table th {
    text-align: left;
    padding: 7px 10px;
    background: var(--surface-2);
    border-bottom: 2px solid var(--line);
    font-size: 10px;
    font-weight: 700;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.data-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--line);
    color: var(--text-soft);
}
.data-table td strong {
    color: var(--text);
}
.data-table tr:last-child td {
    border-bottom: none;
}
.data-table tr:hover td {
    background: var(--surface-2);
}

/* ABC badges. color-mix keeps one hue per class in both themes: the ramp entry
   is the text, and a heavily diluted copy of it is the fill — no second set of
   pastels to keep in step. */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.6;
}
.badge-a {
    color: var(--ok);
    background: color-mix(in srgb, var(--ok) 16%, transparent);
}
.badge-b {
    color: var(--chart-3);
    background: color-mix(in srgb, var(--chart-3) 18%, transparent);
}
.badge-c {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 16%, transparent);
}
.badge-ds {
    color: var(--text-faint);
    background: color-mix(in srgb, var(--text-faint) 16%, transparent);
}

/* ─── Search + sort ────────────────────────────────────────────────────── */
.search-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.search-input {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 12px;
    font-family: inherit;
    font-size: 12px;
    color: var(--text);
    outline: none;
}
.search-input:focus {
    border-color: var(--brand-500);
}
.sort-btn {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 12px;
    background: var(--surface-2);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-soft);
    cursor: pointer;
    font-family: inherit;
}
.sort-btn:hover {
    border-color: var(--brand-500);
    color: var(--accent-text);
}
.sort-btn.active {
    border-color: var(--brand-500);
    color: var(--accent-text);
    background: var(--hover);
}

/* ─── Placeholder ──────────────────────────────────────────────────────── */
.placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px;
    color: var(--text-faint);
    text-align: center;
    gap: 8px;
}
.placeholder svg {
    opacity: 0.4;
}
.placeholder p {
    font-size: 12px;
    font-weight: 600;
}
.placeholder small {
    font-size: 10px;
}

/* ─── Alerts ───────────────────────────────────────────────────────────── */
/* Capped rather than unbounded: the list is as long as the data is, which on the
   sample export is ~3300px of rows. The count is in the sidebar pill, so the card
   only has to show enough to read the pattern. */
.alert-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 520px;
    overflow-y: auto;
}
.alert-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    border-left: 3px solid;
}
.alert-item.warn {
    background: color-mix(in srgb, var(--chart-3) 14%, transparent);
    border-color: var(--chart-3);
}
.alert-item.error {
    background: var(--danger-bg);
    border-color: var(--danger);
}
.alert-icon {
    font-size: 16px;
    margin-top: 1px;
}
.alert-body {
    flex: 1;
}
.alert-body strong {
    font-size: 12px;
    color: var(--text);
    display: block;
    margin-bottom: 2px;
}
.alert-body span {
    font-size: 11px;
    color: var(--text-soft);
}

/* ─── Loading curtain ──────────────────────────────────────────────────── */
#loading {
    position: fixed;
    inset: 0;
    background: linear-gradient(120deg, var(--brand-700), var(--brand-600) 60%, var(--brand-500));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: opacity 0.5s;
}
#loading .loading-logo {
    height: 30px;
    width: auto;
    margin-bottom: 22px;
}
#loading h1 {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}
#loading p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    margin-top: 8px;
}
.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.22);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
    margin-bottom: 20px;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ─── Charts ───────────────────────────────────────────────────────────── */
.chart-wrap {
    position: relative;
    height: 220px;
}
.chart-wrap-sm {
    position: relative;
    height: 180px;
}

/* Trend chips */
.trend-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.trend-chip {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}
.trend-chip.in {
    color: var(--ok);
    background: color-mix(in srgb, var(--ok) 16%, transparent);
}
.trend-chip.out {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 16%, transparent);
}

/* ─── Heatmap grid ─────────────────────────────────────────────────────── */
.heatmap-scroll {
    overflow-x: auto;
}
.heatmap-table {
    border-collapse: separate;
    border-spacing: 2px;
    font-size: 10px;
}
.heatmap-table td {
    padding: 0;
}
.hm-lbl {
    font-size: 10px;
    color: var(--text-soft);
    font-weight: 600;
    white-space: nowrap;
    padding-right: 8px !important;
}
.hm-hlbl {
    font-size: 9px;
    color: var(--text-faint);
    text-align: center;
    padding-bottom: 3px !important;
}
.hm-cell {
    width: 28px;
    height: 20px;
    border-radius: 3px;
    text-align: center;
    line-height: 20px;
    font-size: 9px;
    font-weight: 700;
    cursor: default;
}

/* ─── Today counters ───────────────────────────────────────────────────── */
.today-row {
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
}
.today-stat {
    text-align: center;
}
.today-stat .num {
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
    color: var(--accent-text);
}
/* Put-away vs pick, the same in/out semantics the charts use. These were inline
   styles pointing at a legacy variable that no longer exists, which left the
   figures rendering in body text. */
.today-stat .num-in {
    color: var(--ok);
}
.today-stat .num-out {
    color: var(--danger);
}
.today-stat .lbl {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-soft);
    margin-top: 3px;
}