/*
 * section-header.css — the collapsible page "mini-dashboard" band shared by
 * Inventory, Edit and Usage. One chrome, themed entirely through tokens.css so it
 * follows light/dark/midnight/sepia and the --root-font-size scale automatically.
 * Per-page identity is a single custom property set on the section:
 *   style="--shb-accent: var(--brand-primary)"   (orange  — Inventory)
 *   style="--shb-accent: var(--brand-secondary)" (cyan    — Edit)
 *   style="--shb-accent: var(--status-info)"     (blue    — Usage)
 *
 * Collapse behavior (the `.collapsed` class on the section AND on
 * [data-collapse-header]) is driven by the shared js/collapsible-header.js.
 */

.section-header-band {
    --shb-accent: var(--brand-primary);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    background: var(--bg-elevated);
    padding: 1.1rem 1.15rem;
    margin-bottom: 1rem;
    transition: padding 0.2s ease, background 0.2s ease;
}
/*
 * A STAFF PAGE'S BAND IS RED, AND IT IS MEANT TO BE OBVIOUS. Admin and Load
 * Testing are the two pages a customer never sees, so their band is not a
 * tinted version of the customer's chrome — it carries the staff red on its
 * frame, its surface and its title, expanded and collapsed alike.
 *
 * Marked with an attribute rather than by the accent value, because the accent
 * is a colour and this is a statement about what the page IS. The colour itself
 * is --status-staff (tokens.css), the same red the account menu reads those two
 * pages in.
 */
.section-header-band[data-staff-band],
.section-header-band[data-staff-band].collapsed {
    --shb-accent: var(--status-staff);
    /* A lighter red frame around a bright red fill, so the bar reads as red
       from across the room and the frame still shows against it. These two
       pages are locked to the product's own dark surface
       (appearance-scope.js), so the mix lands on the same base every time and
       the white words on it stay readable. */
    border: 2px solid #e06060;
    background: color-mix(in srgb, var(--status-staff) 52%, var(--bg-elevated));
}
.section-header-band[data-staff-band] .shb-title,
.section-header-band[data-staff-band] .shb-tagline {
    color: #fff;
}

.section-header-band.collapsed {
    padding: 0.4rem 1rem;
    /* Minimized: a very light per-page accent infill inside the same surround
       frame — the frame + tint read better than a flat bar. */
    background: color-mix(in srgb, var(--shb-accent) 8%, var(--bg-elevated));
    cursor: pointer; /* whole collapsed bar expands on click (shared behavior) */
}

/* Head row: expandable content on the left, collapse chevron pinned right. */
.shb-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.shb-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    flex: 1;
    min-width: 0;
}
/* Collapse folds away only the dashboard data — the title + nav + account row
 * stays put, because this band is now the app's only chrome (no top bar). */
.section-header-band.collapsed .shb-stats { display: none; }
.section-header-band.collapsed .shb-tagline { display: none; }
/* Minimized = clean bar: title + account badge only. The quick-nav tiles fold
 * away (expand to navigate), but the account badge stays put so the signed-in
 * identity is always visible — the band never hides who you are. */
.section-header-band.collapsed .shb-nav { display: none; }

/* Title block */
.shb-titles { display: flex; flex-direction: column; gap: 0.1rem; margin-right: 0.5rem; }
.shb-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* Title icon = the same Font Awesome glyph as the page's nav selector, tinted to
   the page accent (--shb-accent) so the corner mark and the quick-nav tile match.
   Fixed square box: every style's SVG (FA 512, Lucide 24, Phosphor 256, Flat 48)
   is scaled to fit the SAME 1.3rem box via preserveAspectRatio (default meet), so
   switching styles never shifts the icon's size or the title text beside it. */
.shb-title-ico { color: var(--shb-accent); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.3rem; height: 1.3rem; }
.shb-title-ico svg { width: 100%; height: 100%; display: block; }
.shb-tagline { font-size: 0.75rem; color: var(--text-muted); }

/* Stat pills — the mini-dashboard body */
.shb-stats { display: flex; flex-wrap: wrap; gap: 0.6rem; flex: 1; }
.shb-pill {
    background: var(--bg-sunken);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 0.4rem 0.75rem;
    min-width: 4.5rem;
    line-height: 1.2;
}
.shb-pill-val {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--shb-accent);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.shb-pill-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    margin-top: 0.1rem;
}
.shb-pill-sub {
    font-size: 0.65rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    min-height: 0.8rem;
}
.shb-pill-sub:empty { display: none; }

/* Storage meters — circular gauge: red arc = used, green = remaining, % in centre. */
.shb-meters { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.shb-meter {
    background: var(--bg-sunken);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 0.4rem 0.6rem;
    min-width: 8.5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.55rem;
}
/* A class that sets `display` outranks the browser's own [hidden] rule. */
.shb-meter[hidden] { display: none; }
.shb-meter-ring {
    --pct: 0;
    width: 42px; height: 42px; flex-shrink: 0;
    border-radius: 50%;
    background: conic-gradient(var(--status-error) calc(var(--pct) * 1%), var(--status-success) 0);
    display: flex; align-items: center; justify-content: center;
    position: relative;
    transition: background 0.4s ease;
}
.shb-meter-ring::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--bg-sunken); }
.shb-meter-ring-pct { position: relative; z-index: 1; font-size: 0.6rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.shb-meter-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.shb-meter-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); font-weight: 600; }
.shb-meter-val { font-size: 0.72rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.shb-meter-sub { font-size: 0.62rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.shb-meter-sub:empty { display: none; }

/* No AI trigger inside the band. Every page's band carried one and none does
   now — the Edit page's Workbench is a panel with its own strip and its own
   tab, and the other bands lost theirs with the meters they sat beside. Rules
   describing a control nothing renders are how a sheet stops describing the
   page. */

/* Right-aligned action cluster — the quick-nav tiles, grouped after the
 * data pills. Lives in .shb-main so it collapses WITH the band (minimized band is
 * just the banner). */
.shb-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    flex-shrink: 0;
}

/* Quick-nav tile cluster — small equal-width square tiles (icon over label), the
 * old drop-zone look shrunk. Sits in the band's action cluster; the current page's
 * tile is .active (accent). Per-page accent comes from --shb-accent on .shb-nav.
 * Selectors are scoped under .shb-nav to keep specificity self-contained. */
.shb-nav {
    display: flex;
    align-items: stretch;
    gap: 0.35rem;
    flex-shrink: 0;
}
.shb-nav .shb-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;                 /* label sits 3px off the icon */
    width: 58px;
    height: 50px;
    box-sizing: border-box;
    padding: 4px;
    border: 1px solid transparent;   /* no hard outline — subtle by default */
    border-radius: 10px;
    background: var(--bg-sunken);
    color: var(--text-secondary);
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.shb-nav .shb-nav-btn .shb-nav-ico { font-size: 1.1rem; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; }
/* Nav icons are inline SVG whose style is user-selectable (js/nav-icons.js):
   solid/duotone use fill=currentColor, outline uses stroke=currentColor, flat
   carries its own fills — so each SVG self-declares fill; we only size here
   (height-based, width auto) to keep every set's viewBox aspect ratio undistorted. */
.shb-nav .shb-nav-btn .shb-nav-ico svg { width: 100%; height: 100%; display: block; }
.shb-nav .shb-nav-btn .shb-nav-label { white-space: nowrap; }
/* Colorized quick-nav: each destination carries its signature accent so the row
   reads as a color-coded map — Inventory=orange, Edit=cyan, Usage=blue — and the
   top-left page title uses the same icon+accent. fill=currentColor picks these
   up; the active/greyed tile keeps the tint but dims via .active opacity. */
.shb-nav .shb-nav-btn[href="inventory.html"] .shb-nav-ico { color: var(--brand-primary); }
.shb-nav .shb-nav-btn[href="edit.html"] .shb-nav-ico { color: var(--brand-secondary); }
.shb-nav .shb-nav-btn[href="usage.html"] .shb-nav-ico { color: var(--status-info); }
.shb-nav .shb-nav-btn:hover { background: var(--bg-overlay); color: var(--text-primary); transform: translateY(-1px); }
/* Active page: same tile, just accent-colored label + a thin underline — no fill,
 * no outline. Subtle. */
/* Current page — greyed + disabled, so the nav reads "you are here" without
   competing for attention (the active tile is the one page you can't navigate to). */
.shb-nav .shb-nav-btn.active {
    color: var(--text-muted);
    background: transparent;
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}
.shb-nav .shb-nav-btn.active:hover { background: transparent; transform: none; }

/* Legacy collapsed-banner title — retired now the real title stays visible in both
 * states; the span is kept in markup but never shown. */

/* Account menu folded into the band (the app's only chrome now). Reuses the
 * shared .user-menu / .user-menu-button styles; this just seats it in the row and
 * keeps the email from stretching the header. */
.shb-account { display: flex; align-items: center; }
.shb-account .user-menu-button { max-width: 12rem; }
.shb-account .user-menu-button #user-email-display {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 9rem; display: inline-block; vertical-align: middle;
}

/* Collapse chevron */
.header-collapse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--bg-sunken);
    border: 1px solid var(--border-soft);
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.header-collapse-btn:hover { background: var(--bg-overlay); color: var(--text-primary); border-color: var(--border-default); }
.header-collapse-btn .collapse-arrow {
    display: inline-block;
    transition: transform 0.3s, color 0.3s;
    color: var(--text-muted);
}
.section-header-band.collapsed .header-collapse-btn .collapse-arrow {
    transform: rotate(180deg);
    color: var(--shb-accent);
}