/* ==========================================================================
   HHC — CONSOLE PAGES
   ==========================================================================

   Hand-written styles for custom Filament page views in this project.

   --------------------------------------------------------------------------
   WHY THIS FILE HAS TO EXIST — read before adding a class to a page
   --------------------------------------------------------------------------

   Tailwind utilities DO NOT WORK in a Filament panel Blade view. This is the
   single most expensive thing to get wrong on this screen, and it was got wrong
   twice.

   `public/css/filament/filament/app.css` is a PRE-BUILT Tailwind bundle that
   Filament ships. It contains only the utilities Filament's own views use.
   This project does not run a Tailwind build over `resources/views`, so a class
   like `py-3` or `gap-6` written into a panel page matches nothing at all: it is
   not overridden, it is simply absent, and the element falls back to the browser's
   own default (which for a table cell is 1px of padding).

   Measured on the onboarding-link page with Chrome, before this file existed:

       th pad=1px/1px/1px/1px     ← the user-agent default
       td pad=1px/1px/1px/1px
       .fi-section-content        display:block, gap:normal

   Every `px-4 py-3`, `gap-6` and `grid-cols-2` in that view was inert. The screen
   was not mis-styled so much as UNSTYLED, which is why it read as cramped in some
   places and loose in others: the spacing was never applied at all.

   The lesson generalises, and it is why the project's own rule E46 exists: a
   rendered string is not a rendered pixel. `assertSee('px-4')` passes happily
   against a class the browser ignores.

   --------------------------------------------------------------------------
   THE RULES FOR THIS FILE
   --------------------------------------------------------------------------

     · Plain CSS with explicit values. No preprocessor, no build step, so nothing
       here can silently fail to compile.
     · Every length comes from `tokens.css` (`--hhc-space-*`), which mirrors the
       Flutter spacing scale one-for-one, so this page sits on the same 4px grid as
       every other surface.
     · Class names are SEMANTIC (`hhc-section__body`), not visual (`py-3`). A name
       that describes the role survives a redesign; a name that describes the
       padding does not.
     · Scoped under `.hhc-page`. Nothing here can leak into a Filament page that
       does not opt in.

   Loaded from `AppServiceProvider::registerPageStyles()`, after the panel theme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   THE PAGE SHELL
   -------------------------------------------------------------------------- */

.hhc-page {
    display: flex;
    flex-direction: column;
    gap: var(--hhc-space-6);          /* 24 — between distinct sections */
    width: 100%;
    max-width: 56rem;                 /* a form-shaped page; a table sets its own */
    margin-inline: auto;
}

/* --------------------------------------------------------------------------
   SECTIONS
   --------------------------------------------------------------------------
   Filament's `<x-filament::section>` already draws the card, its border and its
   header spacing. We only take over the BODY, because that is where our own
   content lives and where Filament's default had no vertical rhythm.
   -------------------------------------------------------------------------- */

.hhc-page .fi-section-content {
    display: flex;
    flex-direction: column;
    gap: var(--hhc-space-4);          /* 16 — between blocks inside one card */
}

.hhc-page .fi-section-content > * {
    margin: 0;                        /* the gap owns spacing, not stray margins */
}

/* A stack of related items: label/value pairs, checklist rows, paragraphs. */
.hhc-stack {
    display: flex;
    flex-direction: column;
    gap: var(--hhc-space-3);          /* 12 — between rows inside a group */
}

.hhc-stack--tight {
    gap: var(--hhc-space-2);          /* 8 */
}

/* Two columns on a wide screen, one on a narrow one. No utility class, because
   the utility class does not exist here. */
.hhc-columns {
    display: grid;
    gap: var(--hhc-space-4);
    grid-template-columns: 1fr;
    /* `start`, not the default `stretch`.
       Measured: with `stretch`, the short panel ("All answered") grew to the tall
       panel's height and carried ~90px of dead space at the bottom — the page looked
       padded wrong when the real fault was one stretched grid item. Each panel should
       be exactly as tall as what it holds. */
    align-items: start;
}

@media (min-width: 640px) {
    .hhc-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --------------------------------------------------------------------------
   PANELS — the tinted boxes inside a card
   -------------------------------------------------------------------------- */

.hhc-panel {
    padding: var(--hhc-space-4);
    border-radius: var(--hhc-radius-md);
    background-color: var(--hhc-surface-alt);
    border: 1px solid transparent;
}

/* A panel that is a direct child of the columns grid sizes to its own content.
   Declared on the panel as well as the grid, because either alone can be overridden
   by the other's default. */
.hhc-columns > .hhc-panel {
    align-self: start;
}

.hhc-panel--plain {
    background-color: transparent;
    border-color: var(--hhc-outline);
}

.hhc-panel--warning {
    background-color: var(--hhc-warning-container);
}

.hhc-panel--danger {
    background-color: var(--hhc-danger-container);
}

.hhc-panel--ok {
    background-color: var(--hhc-success-container);
}

/* --------------------------------------------------------------------------
   TYPE
   -------------------------------------------------------------------------- */

.hhc-label {
    font-size: 0.6875rem;             /* 11px */
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--hhc-ink-subtle);
}

.hhc-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--hhc-ink);
}

.hhc-text {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--hhc-ink-muted);
}

.hhc-text--strong {
    font-weight: 600;
    color: var(--hhc-ink);
}

.hhc-help {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--hhc-ink-subtle);
}

.hhc-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   COLOUR — the four meanings from docs/DESIGN-SYSTEM.md §2
   -------------------------------------------------------------------------- */

.hhc-ok    { color: var(--hhc-success); }
.hhc-warn  { color: var(--hhc-warning); }
.hhc-bad   { color: var(--hhc-danger); }
.hhc-muted { color: var(--hhc-ink-subtle); }

.hhc-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   CHECKLIST — one row per owed item, with its own state
   -------------------------------------------------------------------------- */

.hhc-check {
    display: flex;
    align-items: flex-start;
    gap: var(--hhc-space-2);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--hhc-ink);
}

.hhc-check__note {
    font-size: 0.8125rem;
    color: var(--hhc-ink-subtle);
}

/* --------------------------------------------------------------------------
   BADGES
   -------------------------------------------------------------------------- */

.hhc-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem var(--hhc-space-2);
    border-radius: var(--hhc-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    background-color: var(--hhc-neutral-container);
    color: var(--hhc-ink-muted);
}

.hhc-badge--ok   { background-color: var(--hhc-success-container); color: var(--hhc-success); }
.hhc-badge--warn { background-color: var(--hhc-warning-container); color: var(--hhc-warning); }
.hhc-badge--bad  { background-color: var(--hhc-danger-container);  color: var(--hhc-danger); }

/* --------------------------------------------------------------------------
   TABLE
   --------------------------------------------------------------------------
   THIS IS THE FIX FOR THE CRAMPED HISTORY LIST. The cells previously measured
   1px of padding, because `px-4 py-3` does nothing here. The browser now gets
   real numbers.
   -------------------------------------------------------------------------- */

.hhc-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--hhc-outline);
    border-radius: var(--hhc-radius-md);
}

.hhc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    text-align: left;
}

.hhc-table thead th {
    padding: var(--hhc-space-3) var(--hhc-space-4);
    /* Lightened from `--hhc-surface-alt`: against this card's own white the alt tone
       read as a heavy dark band and competed with the section heading above it. A
       header row is a LABEL, not a banner. */
    background-color: color-mix(in oklab, var(--hhc-surface-alt) 55%, #fff);
    border-bottom: 1px solid var(--hhc-outline);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--hhc-ink-subtle);
    white-space: nowrap;
}

.hhc-table tbody td {
    padding: var(--hhc-space-3) var(--hhc-space-4);
    vertical-align: top;
    color: var(--hhc-ink-muted);
}

.hhc-table tbody tr + tr td {
    border-top: 1px solid var(--hhc-outline);
}

/* Zebra, so the eye keeps its place travelling back to the first column. */
.hhc-table tbody tr:nth-child(even) td {
    background-color: color-mix(in oklab, var(--hhc-surface-alt) 45%, transparent);
}

.hhc-table__primary {
    display: block;
    font-weight: 600;
    color: var(--hhc-ink);
}

.hhc-table__ref {
    display: block;
    margin-top: 0.125rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    color: var(--hhc-ink-subtle);
}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */

.hhc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hhc-space-3);
}

/* A link styled as a quiet button — for "continue without" paths. */
.hhc-button-quiet {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--hhc-space-3) var(--hhc-space-4);
    border: 1px solid var(--hhc-outline);
    border-radius: var(--hhc-radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--hhc-ink);
    text-decoration: none;
    background-color: var(--hhc-surface);
}

/* --------------------------------------------------------------------------
   THE LINK FIELD
   -------------------------------------------------------------------------- */

.hhc-link-row {
    display: flex;
    flex-direction: column;
    gap: var(--hhc-space-2);
}

@media (min-width: 640px) {
    .hhc-link-row {
        flex-direction: row;
        align-items: center;
    }
}

.hhc-link-input {
    width: 100%;
    padding: var(--hhc-space-2) var(--hhc-space-3);
    border: 1px solid var(--hhc-outline);
    border-radius: var(--hhc-radius-md);
    background-color: var(--hhc-surface-alt);
    color: var(--hhc-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   QR BLOCK
   --------------------------------------------------------------------------
   The QR arrives as an inline SVG whose own width/height attributes are in
   pixels. Sizing the wrapper and letting the SVG fill it keeps it crisp at any
   density, and a fixed square keeps the module grid square — a stretched QR is
   one many scanners refuse.
   -------------------------------------------------------------------------- */

.hhc-qr {
    width: 13rem;
    height: 13rem;
}

.hhc-qr > svg {
    width: 100%;
    height: 100%;
    display: block;
}