/* Shared report layer — the .reports-* design system every report page is built from:
   design tokens, page header, filter bar, cards, the switch, the KPI row, the column chart, and
   the data grid.

   FQ-44: this file is DELIBERATELY NOT a .razor.css. Blazor CSS isolation rewrites every
   selector in a scoped sheet to `.reports-card[b-hash]`, which reaches that one component and
   nothing else - so two report pages sharing this layer meant two copies of it, and the third
   consumer (the reports index, which wants only .reports-busy) would have made a third. The
   copies had already drifted apart. One non-isolated sheet is the fix: each page keeps its own
   rules (.gs-* for Guest Summary, and each new report's equivalent) isolated per component, and
   takes the shared layer from here.

   Three consequences worth knowing before you edit:

   1. Selectors here are plain single-class (0,1,0), so any page's scoped rule outranks them
      automatically - that is the intended override mechanism, no !important needed.
   2. Load order matters against Bootstrap. `.table > :not(caption) > * > *` ties with
      `.reports-grid td` on specificity, so this sheet must stay linked AFTER bootstrap.min.css
      in App.razor or the grid's cell padding and --bs-table-bg silently revert to Bootstrap's.
   3. THERE IS A FOURTH CONSUMER AND IT NEVER OPTED IN. Daily Summary
      (Floqque.Blazor.App.Client/Pages/Reports/DailySummary.razor.css) still carries its own full
      copy of the .reports-* layer and was deliberately left unmigrated, because FQ-46 deletes
      that page. Being unmigrated does not make it insulated: it renders inside .reports and uses
      these class names, so this sheet reaches it.

      Point 1 protects it only where it DECLARES the property. A scoped rule wins its own
      property and has no opinion on any other, so every property that file leaves undeclared
      falls through to here. Editing this file therefore changes how Daily Summary looks, quietly.
      That drift is ACCEPTED, not unnoticed - it is written down here rather than patched.

      What actually reaches it today, verified against both files:

        .reports-grid { min-width: 100% }
            The sharpest one, and the reason this note exists. It does NOT override that file's
            `width: auto` - they are DIFFERENT properties. The scoped rule wins its own battle and
            still loses the outcome: the "compact, content-width grid" its own comment describes
            now stretches the full width, and nothing in either file looks wrong.
        .reports-grid { font-size: 0.85rem }
            It declares no font-size on the grid at all.
        .reports-grid thead th { border-bottom: 2px solid #ced4da }
            A rule under every header cell, where it had one only on .reports-group-head.
        .reports-grid tbody td { border-bottom: 1px solid var(--rep-border) }
            Row separators where it had none. Bootstrap 5.3.3 sets border-bottom-WIDTH on table
            cells and never a border-style, so nothing was drawn there before.
        .reports-note { max-width: 90ch }
            Its footnote paragraph is now measure-capped instead of running the full width.
        @media (max-width: 719.98px) .reports-card-head { flex-wrap: wrap }
            It declares no flex-wrap on the card head.

      Reaching it but changing nothing, listed so the next reader does not have to re-derive it:
      `thead th { font-weight: 700 }` is already the UA default for <th> (Bootstrap's reboot sets
      only text-align on it); the --st-* and --heat* tokens are referenced by nothing on that
      page; the .reports-switch resets land on a switch that is not inside a card head, and its
      `margin-left: auto` loses to that file's `margin: 0` shorthand, which is a real override;
      the `.reports-switch input` rules land on a 0x0 transparent input; every tbody/tfoot `th`
      rule fails to match, because that page's body and footer rows are all <td>; and
      .reports-row-empty's colour here is the same value it already had.

      NOT reaching it, contrary to what the selector suggests: the mobile
      `.reports-cards { grid-template-columns: 1fr }`. A media query adds no specificity, so that
      file's own grid-template-columns outranks it at every width. */

.reports {
    --rep-radius: 14px;
    --rep-border: #e5e7eb;
    --rep-text: #111827;
    --rep-muted: #6b7280;
    --rep-primary: #2563eb;
    --rep-primary-hover: #1d4ed8;
    --rep-card-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);

    /* Status / outcome tones */
    --st-good: #16a34a;
    --st-warn: #d97706;
    --st-bad: #dc2626;
    --st-info: #2563eb;
    --st-neutral: #9ca3af;

    /* Heat ramp: five intensity steps plus an explicit empty step. --heat0 is a distinct token
       rather than "no background" because a bucket with nothing in it and the quietest bucket that
       had something in it must not look the same — step 1 is reserved for "at least one", however
       small against the peak. Declared on .reports rather than on the one panel that heat-maps
       anything so a second heatmap inherits the same ramp instead of forking it. */
    --heat0: #f3f4f6;
    --heat1: #dbeafe;
    --heat2: #bfdbfe;
    --heat3: #93c5fd;
    --heat4: #60a5fa;
    --heat5: #2563eb;

    color: var(--rep-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding-bottom: 2rem;
}

/* ---- Header ---- */
.reports-header {
    margin-bottom: 1rem;
}

.reports-title {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
}

/* ---- Filter bar: segmented date-range control + actions ---- */
.reports-filters {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.reports-range {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 0.3rem 0.75rem;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.reports-range:focus-within {
    border-color: var(--rep-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.reports-range-field {
    display: flex;
    flex-direction: column;
    margin: 0;
    cursor: pointer;
}

.reports-range-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--rep-muted);
    line-height: 1;
    margin-bottom: 0.1rem;
}

.reports-range-field input[type="date"] {
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--rep-text);
    font-variant-numeric: tabular-nums;
    font-family: inherit;
}

.reports-range-sep {
    color: #9ca3af;
    font-size: 0.8rem;
    padding: 0 0.85rem;
    align-self: center;
}

.reports-actions {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.reports-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border-radius: 10px;
    padding: 0.5rem 1.15rem;
    font-size: 0.92rem;
    font-weight: 600;
    font-family: inherit;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
    white-space: nowrap;
}

.reports-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.reports-btn--primary {
    background: var(--rep-primary);
    color: #fff;
}

.reports-btn--primary:hover:not(:disabled) {
    background: var(--rep-primary-hover);
}

/* ---- States ---- */
.reports-busy {
    display: flex;
    justify-content: center;
    padding: 2.5rem 0;
}

.reports-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--rep-muted);
    background: #fafbfc;
    border: 1px dashed var(--rep-border);
    border-radius: var(--rep-radius);
}

/* ---- Headline KPIs: the tile row between the filter bar and the cards ---- */
.reports-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.9rem;
    margin-bottom: 1.1rem;
}

.reports-kpi {
    border: 1px solid var(--rep-border);
    border-radius: var(--rep-radius);
    background: #fff;
    box-shadow: var(--rep-card-shadow);
    padding: 0.9rem 1rem;
}

.reports-kpi-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rep-muted);
}

.reports-kpi-value {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.reports-kpi-sub {
    font-size: 0.78rem;
    color: var(--rep-muted);
    line-height: 1.3;
}

/* ---- Cards ---- */
.reports-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0.9rem;
}

.reports-card {
    border: 1px solid var(--rep-border);
    border-radius: var(--rep-radius);
    padding: 1rem 1.1rem 0.85rem;
    background-color: #fff;
    box-shadow: var(--rep-card-shadow);
}

.reports-card-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rep-muted);
    margin-bottom: 0.6rem;
}

/* Tinted icon chips give each card a colour identity at a glance. */
.reports-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 8px;
    font-size: 0.78rem;
}

.reports-card-icon--outcome {
    background: #eff6ff;
    color: var(--rep-primary);
}

.reports-card-icon--quote {
    background: #fffbeb;
    color: #b45309;
}

.reports-card-icon--channel {
    background: #ecfdf5;
    color: #047857;
}

.reports-card-hero {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.55rem;
}

.reports-card-figure {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--rep-text);
    font-variant-numeric: tabular-nums;
}

.reports-card-figure-label {
    font-size: 0.82rem;
    color: var(--rep-muted);
}

.reports-card-foot,
.reports-card-empty {
    font-size: 0.76rem;
    color: #868e96;
    margin-top: 0.5rem;
    line-height: 1.35;
}

.reports-card-empty {
    margin-top: 0.25rem;
}

.reports-note {
    font-size: 0.8rem;
    color: var(--rep-muted);
    margin: 1rem 0 0;
    max-width: 90ch;
}

/* ---- Switch: the card-head control that reveals a chart's table twin ----
   margin-left: auto parks it at the far edge of the head, opposite the title. The head's
   uppercase letter-spacing is unset here - it is set on .reports-card-head for the title and
   would otherwise be inherited by the switch's own label, which is sentence case. */
.reports-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    cursor: pointer;
    user-select: none;
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.8rem;
}

/* The native control still exists and still takes focus - it is only made transparent, never
   display: none or zero-sized. Both of those visually-hidden tricks cost more than they look:
   a zero-box input is not a click target for anything driving the page from outside (Playwright
   refuses to check it), and display: none drops it out of the tab order and off screen readers
   entirely. Stretched over the whole label instead, so the control IS the hit area it appears
   to be, and the label text and track are what you see through it. */
.reports-switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.reports-switch-track {
    position: relative;
    flex: none;
    width: 2.2rem;
    height: 1.2rem;
    border-radius: 999px;
    background: #d1d5db;
    transition: background-color 0.15s ease;
}

.reports-switch-track::after {
    content: "";
    position: absolute;
    top: 0.13rem;
    left: 0.14rem;
    width: 0.94rem;
    height: 0.94rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease;
}

.reports-switch input:checked + .reports-switch-track {
    background: var(--rep-primary);
}

.reports-switch input:checked + .reports-switch-track::after {
    transform: translateX(1rem);
}

/* Focus ring on the track, since the input it belongs to is invisible. :focus-visible so a
   mouse click doesn't leave a ring behind. */
.reports-switch input:focus-visible + .reports-switch-track {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

/* ---- Column charts: the bar plot inside a card ----

   Geometry note, and the reason this is built the way it is: the value label above each bar sits
   in its OWN grid row, always rendered whether or not the column has a figure to show. The bar
   itself is a percentage of .reports-col-track, which has an explicit height - so a 100% bar
   exactly fills its track and stops there. The label physically cannot ride up over the card's
   hero or summary line, because the space it needs was reserved before the bar was drawn. The
   alternative (absolutely positioning the label at the bar's height) overflows the plot at full
   height, which is exactly the collision this layout exists to prevent. Reserve the headroom;
   never clip the label. FQ-42 landed on this after trying it the other way round.

   Series colours are deliberately NOT here. A segment's fill encodes one report's own semantics
   (bookings vs waitlist; parties checked in vs minutes waited), so each page keeps its own
   --{series} modifier in its own scoped sheet and applies it alongside .reports-col-seg.

   Naming, worth knowing before you add to this block: Daily Summary's table already uses
   .reports-col-date / -wait / -service / -quoted / -quote for TABLE columns. Those are separate
   class tokens and none of them is matched by anything here, but the .reports-col-* prefix now
   carries two meanings in one namespace - check that grid before coining a new -col- name. */
.reports-cols {
    display: grid;
    /* Tick-to-tick gutter. A page drawing more than one bar per tick widens it - see
       .reports-cols in WaitTimeSummary.razor.css. */
    gap: 0.35rem;
    align-items: end;
    margin-top: 0.35rem;
}

.reports-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
}

/* The reserved headroom row. Fixed height, always present. */
.reports-col-value {
    height: 1.05rem;
    line-height: 1.05rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--rep-muted);
    text-align: center;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    white-space: nowrap;
}

.reports-col-track {
    height: 6.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(to top, #f3f4f6 1px, transparent 1px);
    border-radius: 4px 4px 0 0;
}

.reports-col-seg {
    display: block;
    width: 100%;
    min-height: 2px;
}

/* Round only the topmost segment of a stack, so the join between two stacked series stays square
   and the stack reads as one bar. A single-segment column is its own first child, so it gets the
   cap from the same rule. */
.reports-col-track > .reports-col-seg:first-child {
    border-radius: 4px 4px 0 0;
}

.reports-col-label {
    margin-top: 0.3rem;
    font-size: 0.7rem;
    color: var(--rep-muted);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Data grid: the table twin of a chart ----
   --bs-table-bg transparent lets our own row tints show through Bootstrap's box-shadow
   background mechanism. */
.reports-grid {
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    min-width: 100%;
    margin-bottom: 0;
    --bs-table-bg: transparent;
}

.reports-grid th,
.reports-grid td {
    white-space: nowrap;
    vertical-align: middle;
    padding: 0.35rem 0.85rem;
}

.reports-grid thead th {
    color: #495057;
    font-size: 0.78rem;
    font-weight: 700;
    border-bottom: 2px solid #ced4da;
}

.reports-grid tbody th {
    font-weight: 600;
}

.reports-grid tbody td,
.reports-grid tbody th {
    border-bottom: 1px solid var(--rep-border);
}

/* A month with no activity is still a row - dimmed, not hidden, so the axis stays whole. */
.reports-grid tbody tr.reports-row-empty th,
.reports-grid tbody tr.reports-row-empty td {
    color: #c2c7cd;
}

.reports-grid tbody tr:hover th,
.reports-grid tbody tr:hover td {
    background-color: #f1f3f5;
}

.reports-grid tfoot .reports-totals th,
.reports-grid tfoot .reports-totals td {
    border-top: 2px solid #ced4da;
    font-weight: 600;
    background-color: #f6f8fa;
}

/* ---- Mobile ---- */
@media (max-width: 719.98px) {
    .reports-filters {
        flex-direction: column;
    }

    .reports-range {
        width: 100%;
        justify-content: space-between;
    }

    .reports-range-field {
        flex: 1 1 0;
    }

    /* 16px stops iOS from zooming the page when a date field gets focus. */
    .reports-range-field input[type="date"] {
        font-size: 16px;
        width: 100%;
    }

    .reports-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .reports-cards {
        grid-template-columns: 1fr;
    }

    .reports-card {
        padding: 0.85rem 0.9rem 0.75rem;
    }

    /* The switch wraps onto its own line rather than squeezing the card title. */
    .reports-card-head {
        flex-wrap: wrap;
    }

    .reports-switch {
        margin-left: 0;
    }

    .reports-col-track {
        height: 5rem;
    }

    .reports-col-label,
    .reports-col-value {
        font-size: 0.62rem;
    }

    .reports-grid th,
    .reports-grid td {
        padding: 0.32rem 0.6rem;
    }
}