/* ============================================================================
   Picking Manager data grids — shared `.pm-grid` styling.

   Extracted from ScheduleView.razor.css (the Picking Schedule grid), which
   solved these problems first. That file keeps its own scoped copy because it
   layers schedule-specific tier tinting on top; everything generic lives here
   so the other nine Picking Manager grids share one definition instead of
   carrying eight near-identical scoped stylesheets.

   Global (not scoped) on purpose: `.pm-grid` lands on the MudDataGrid's own
   rendered root, which is a child component, so a scoped .razor.css would need
   ::deep in every consumer. Loaded from App.razor.

   THE HEADER-WRAPPING FIX
   -----------------------
   MudDataGrid renders each header as
       .mud-table-cell > .column-header > [.sortable-column-header, .column-options]
   and `.column-header` defaults to a horizontal flex row. The sort arrow and the
   3-dot options button then compete with the title for horizontal space, and on
   any grid wider than its container the title collapses to one character per
   line ("M/O", "T/a/r/g/e/t"). Making `.column-header` a vertical flex column
   gives the title the full cell width and drops the controls beneath it.

   Two companion pieces matter as much:
     * `.column-options` is hover-only by default, which hides the sole entry
       point to per-column filtering — pinned visible here so filtering is
       discoverable;
     * a `min-width` set in the component's Style attribute lands on the grid
       root and never reaches the table element, so grids that want a floor
       supply it via the --pm-grid-min-width custom property instead.

   WIDTH BEHAVIOUR
   ---------------
   These grids are fluid: `width: 100%` fills whatever the container gives them,
   and --pm-grid-min-width is only a FLOOR below which the horizontal scrollbar
   on the wrapping div takes over. It is deliberately NOT the sum of the columns'
   natural widths — the Picking Schedule grid pins fixed per-column widths, which
   forces a scrollbar even on a wide screen, and we don't want that here.

   Pick the floor for content comfort only, not to make every column fit: header
   titles already can't wrap (see `white-space: nowrap` on .sortable-column-header),
   so the floor exists purely to stop body cells being squeezed to a couple of
   characters per line.

   Calibrated by eye against a half-screen window on a 1920 monitor (~918px of
   container). What that exercise showed:
     * ~125px per column still wraps the content-heavy grids — picker name over two
       lines, "WHS - Shelf 4" over three, the bin "Emptied <date> <time>" block
       stacked;
     * ~150px per column holds all of those on one line.
   So Pick Jobs and Pickers (13-14 columns of avatars, multi-line locations, progress
   bars) sit at 1950px, and the lighter grids land around 120-150px per column.
   Re-check at half-screen after adding a column.

   Do NOT set ColumnResizeMode="ResizeMode.Container" on these grids. It pins
   per-column pixel widths after first render, which is what the Picking Schedule
   grid wants (fixed, spreadsheet-like) but leaves these looking fixed-width and
   unable to grow into their container.
   ============================================================================ */

.pm-grid {
    --pm-grid-header-bg: var(--mud-palette-background-grey);
    --pm-grid-header-border: var(--mud-palette-lines-default);
    --pm-grid-header-hover-bg: rgba(var(--mud-palette-primary-rgb), 0.08);
    --pm-grid-header-text: var(--mud-palette-text-primary);
    --pm-grid-row-hover-bg: rgba(var(--mud-palette-primary-rgb), 0.10);
    --pm-grid-cell-border: var(--mud-palette-lines-default);
    --pm-grid-input-bg: var(--mud-palette-surface);
}

/* --- Inner table width ----------------------------------------------------
   width: 100% => fill the container whenever there's room (the pre-MudDataGrid
   behaviour). min-width => the floor at which the wrapper's overflow-x kicks in.
   A grid that omits --pm-grid-min-width simply fills and never scrolls. */

/* Descendant selector, not `.mud-table-container > table`: MudDataGrid's wrapper
   markup differs from MudTable's, and a child selector silently matched nothing —
   which left the table shrink-wrapped instead of filling. A grid only ever
   contains its own table, so the loose selector is safe. */
.pm-grid table {
    width: 100%;
    min-width: var(--pm-grid-min-width, 0);
}

/* --- Header cell ---------------------------------------------------------- */

.pm-grid .mud-table-head .mud-table-cell {
    background-color: var(--pm-grid-header-bg);
    border-bottom: 1.5px solid var(--pm-grid-header-border);
    color: var(--pm-grid-header-text);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.15;
    text-transform: none;
    vertical-align: top;
}

.pm-grid .mud-table-head .mud-table-cell:hover {
    background-color: var(--pm-grid-header-hover-bg);
}

/* Stack title above the sort/filter controls — see THE HEADER-WRAPPING FIX. */
.pm-grid .mud-table-cell .column-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
    justify-content: flex-start;
    width: 100%;
}

/* Titles in this app are short ("MO", "Target WC", "JobBox Status"), so keep
   them on one line now that they own the full cell width. Long titles still
   wrap on whole words rather than mid-character. */
.pm-grid .mud-table-cell .column-header .sortable-column-header {
    align-items: center;
    color: var(--pm-grid-header-text);
    display: flex;
    font-weight: 600;
    gap: 4px;
    white-space: nowrap;
    width: 100%;
    word-break: normal;
}

/* Sort indicator: dim until the column is actually sorted. */
.pm-grid .mud-table-cell .sort-direction-icon {
    font-size: 0.9rem;
    margin-left: auto;
    opacity: 0.5;
    transition: opacity 120ms ease;
}

.pm-grid .mud-table-cell .sort-direction-icon.mud-direction-asc,
.pm-grid .mud-table-cell .sort-direction-icon.mud-direction-desc {
    color: var(--pm-grid-header-text);
    opacity: 1;
}

/* Per-column sort + options buttons: pinned visible (MudBlazor reveals them on
   hover only, which makes column filtering undiscoverable). */
.pm-grid .mud-table-cell .column-header .column-options {
    align-items: center;
    align-self: stretch;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2px;
    justify-content: flex-end;
    margin-top: 1px;
    max-width: 100%;
    opacity: 1 !important;
    visibility: visible !important;
}

.pm-grid .mud-table-cell .column-header .column-options .mud-button-root,
.pm-grid .mud-table-cell .column-header .column-options .mud-icon-button {
    opacity: 0.6;
    transition: opacity 120ms ease, background-color 120ms ease;
}

.pm-grid .mud-table-cell:hover .column-header .column-options .mud-button-root,
.pm-grid .mud-table-cell:hover .column-header .column-options .mud-icon-button,
.pm-grid .mud-table-cell .column-header .column-options .mud-button-root:hover,
.pm-grid .mud-table-cell .column-header .column-options .mud-icon-button:hover {
    opacity: 1;
}

/* Inline filter TextField (Simple filter mode) — compact, cell-like. */
.pm-grid .mud-table-head .mud-input-control {
    margin-top: 0;
}

.pm-grid .mud-table-head .mud-input-control .mud-input.mud-input-text {
    background-color: var(--pm-grid-input-bg);
    font-size: 0.72rem;
    font-weight: 400;
    margin-top: 2px;
    min-height: 22px;
}

.pm-grid .mud-table-head .mud-input-control .mud-input.mud-input-text input {
    padding: 2px 6px;
}

.pm-grid .mud-table-head .mud-input-control .mud-input.mud-input-text > .mud-input-adornment {
    height: 22px;
}

.pm-grid .mud-table-head .mud-input-control .mud-input-label {
    display: none;
}

/* --- Body rows + cells ---------------------------------------------------- */

.pm-grid .mud-table-body .mud-table-row .mud-table-cell {
    border-bottom: 1px solid var(--pm-grid-cell-border);
}

.pm-grid.mud-table-bordered .mud-table-cell {
    border-right: 1px solid var(--pm-grid-cell-border);
}

.pm-grid .mud-table-body .mud-table-row:hover > .mud-table-cell {
    background-color: var(--pm-grid-row-hover-bg) !important;
}

/* Body cells wrap on words rather than being forced onto one line, so long
   item numbers and descriptions stay readable without stretching the grid.
   Unlike the Picking Schedule grid these tables are NOT centre-aligned — they
   carry freeform text (descriptions, group names, picker names) that reads
   better left-aligned. Individual columns opt into centring with `pm-col-center`
   on their CellClass. */
.pm-grid .mud-table-body .mud-table-cell {
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
}

.pm-grid .mud-table-cell.pm-col-center {
    text-align: center;
}

.pm-grid .mud-table-cell.pm-col-center .d-flex {
    justify-content: center;
}

.pm-grid .mud-table-cell.pm-col-right {
    text-align: right;
}

/* Em-dash placeholder for empty values — muted so it reads as "no data". */
.pm-grid .pm-dash {
    color: var(--mud-palette-text-disabled);
    font-size: 1rem;
    line-height: 1;
}

/* ─── Print: the .pm-print-root subtree only, on 8.5 x 11 ────────────────────
   Goal: paper looks like the SCREEN (colored bars, avatars, status pills).

   Isolation: js/print.js tags the target's ancestor chain with .pm-print-keep
   just before window.print(); everything off-chain is display:none'd. The
   target stays in NORMAL FLOW so content taller than one page paginates.
   (Two rejected approaches, kept for the record: enumerating app-shell
   selectors — they matched nothing, the shell is custom markup; and
   visibility+position:absolute — absolutely-positioned boxes do not paginate,
   which truncated the picker list at one page.)

   Width: ancestors keep their SCREEN pixel widths (flex/scroll geometry from a
   ~1900px viewport), which made Chrome shrink-to-fit the page (tiny) AND still
   clip the grid's right columns. Every chain element is therefore forced to
   width:auto so the print layout derives from the PAGE width, and the row grid
   is re-templated to fit ~7.5in. */
@media print {
    @page {
        /* Landscape: ~10in of printable width vs 7.5 portrait — the bars get far
           more horizontal resolution, which is the whole point of the visual.
           EXPLICIT dimensions (11in 8.5in) rather than the `landscape` keyword:
           with the keyword, Chrome pairs the landscape page box with the print
           dialog's default Portrait layout and emits pages that open rotated 90°
           in every viewer. Explicit width x height sidesteps that rotation logic:
           Chrome's built-in "Save as PDF" destination then emits true wide
           (792x612) pages under EITHER layout setting (verified via headless
           printToPDF both ways).
           CAVEAT that cannot be fixed from CSS: printing to a DRIVER destination
           ("Microsoft Print to PDF", physical printers) takes orientation from
           the driver's Layout setting, which defaults to Portrait and yields
           sideways content on portrait pages. Users must pick Layout=Landscape
           there once (Chrome remembers it per destination), or use the built-in
           Save as PDF destination. */
        size: 11in 8.5in;
        margin: 0.5in;
    }

    /* ── Paper is always LIGHT, whatever the screen theme ────────────────────
       In dark mode the printout was unreadable two ways: the anti-FOUC rule
       (html[data-theme=dark] body { color:#E7EEF4 }) left near-white body text
       on white paper, and MudThemeProvider's dark palette flowed into every
       var() the card consumes (near-white names/headers, dark-variant bar hues).
       Pin the exact LIGHT-theme values here (harvested from the running app) so
       print output is identical from either screen theme. !important is required:
       the provider's <style> lives in <body> and would otherwise win the cascade. */
    :root {
        --mud-palette-primary: rgba(0,118,173,1) !important;
        --mud-palette-primary-lighten: rgb(0,146,214) !important;
        --mud-palette-secondary: rgba(44,62,80,1) !important;
        --mud-palette-secondary-lighten: rgb(58,82,105) !important;
        --mud-palette-info: rgba(2,136,209,1) !important;
        --mud-palette-info-lighten: rgb(2,158,242) !important;
        --mud-palette-warning: rgba(245,166,35,1) !important;
        --mud-palette-warning-lighten: rgb(246,179,70) !important;
        --mud-palette-success: rgba(25,135,84,1) !important;
        --mud-palette-success-lighten: rgb(30,164,101) !important;
        --mud-palette-text-primary: rgba(22,32,42,1) !important;
        --mud-palette-text-secondary: rgba(91,107,122,1) !important;
        --mud-palette-text-disabled: rgba(22,32,42,0.38) !important;
        --mud-palette-divider: rgba(221,228,234,1) !important;
        --mud-palette-lines-default: rgba(221,228,234,1) !important;
        --mud-palette-surface: rgba(255,255,255,1) !important;
        --mud-palette-background: rgba(245,247,250,1) !important;
        --mud-palette-action-default-hover: rgba(91,107,122,0.06) !important;
    }

    html, body {
        width: auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        background: #fff !important;
        /* Beats html[data-theme=dark] body { color:#E7EEF4 } from the anti-FOUC style. */
        color: #16202A !important;
    }

    /* 1. Hide everything off the ancestor chain. */
    body > *:not(.pm-print-keep) {
        display: none !important;
    }
    .pm-print-keep > *:not(.pm-print-keep):not(.pm-print-root) {
        display: none !important;
    }

    /* 2. Chain elements are pure carriers: strip box + sizing so nothing
       inherits the on-screen viewport geometry or clips/offsets the target. */
    .pm-print-keep {
        display: block !important;
        position: static !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
        float: none !important;
    }

    /* 3. The printed card. Stays in flow (paginates); fills the page width. */
    .pm-print-root {
        position: static !important;
        width: auto !important;
        max-height: none !important;
        overflow: visible !important;
        margin: 0 !important;
        box-shadow: none !important;
        border: 0 !important;
        background: #fff !important;
    }

    /* Unclip descendants WITHOUT touching height — a blanket height:auto here
       once flattened the fixed-height bars (.pk-bar-track/.pk-bar) to 1px. */
    .pm-print-root * {
        max-height: none !important;
        overflow: visible !important;
    }

    /* 4. Paper must paint like the screen: bar gradients and chip fills are
       backgrounds, which browsers drop unless color-adjust is forced. */
    .pm-print-root,
    .pm-print-root * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Bar tracks are the one surface whose palette var can be transparent-ish
       on paper — give the rail a concrete light fill so short bars still show
       their track, exactly like the screen's grey rail. */
    .pm-print-root .pk-bar-track {
        background-color: #e9ecef !important;
    }

    /* ── Keep the bars VECTOR so they print sharp ─────────────────────────────
       Chrome's print pipeline rasterizes elements that use gradients, box-shadow
       or text-shadow into ~96dpi bitmaps — which is why the bars and their value
       text looked fuzzy in the PDF. Solid fills, no shadows, and plain text all
       stay vector and are crisp at any zoom. The gradients are a subtle
       left-to-right lightening on screen; on paper the base hue reads the same. */
    .pm-print-root .pk-bar {
        background-image: none !important;   /* gradient layer -> raster; drop it */
        box-shadow: none !important;         /* inset highlight -> raster; drop it */
    }
    .pm-print-root .pk-bar-pieces    { background-color: rgba(0,118,173,1) !important; }
    .pm-print-root .pk-bar-hours     { background-color: rgba(44,62,80,1) !important; }
    .pm-print-root .pk-bar-rate      { background-color: rgba(2,136,209,1) !important; }
    .pm-print-root .pk-bar-expedites { background-color: rgba(245,166,35,1) !important; }
    .pm-print-root .pk-bar-exp-rate  { background-color: rgba(25,135,84,1) !important; }
    .pm-print-root .pk-bar-earned    { background-color: #e91e63 !important; }
    .pm-print-root .pk-bar-eh-rate   { background-color: #ad1457 !important; }

    /* Value labels: the screen's white-text + multi-layer halo rasterizes the
       glyphs. Swap to dark vector text on a small solid white pill — readable on
       any bar colour AND on the bare rail, and razor sharp. */
    /* Label sits at the BAR'S TIP rather than anchored to the track's right edge:
       the track becomes a flex row, the label drops out of absolute positioning and
       flows immediately after the fill. The fill keeps its inline width:% as its
       flex-basis but may SHRINK (flex-shrink) when fill + label would exceed the
       track, so the label can never spill into the neighbouring column. */
    .pm-print-root .pk-bar-track {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    .pm-print-root .pk-bar {
        flex: 0 1 auto;
    }

    .pm-print-root .pk-bar-value-overlay {
        position: static !important;
        transform: none !important;
        flex: 0 0 auto;
        margin-left: 4px;
        color: #16202A !important;
        text-shadow: none !important;
        /* Semi-transparent so the bar stays visible behind/beside the label. An
           rgba FILL is still a vector paint in the PDF (unlike the `opacity`
           property, which can rasterize), so the text stays crisp. */
        background: rgba(255, 255, 255, 0.65) !important;
        border: 1px solid rgba(22, 32, 42, 0.25);
        border-radius: 9px;
        padding: 0 6px;
        line-height: 1.35;
    }
    .pm-print-root .pk-bar-unit {
        opacity: 1 !important;               /* opacity layers can rasterize text */
        color: #5b6b7a !important;
    }

    /* ── Status timeline strip (under the Active hrs bar) ─────────────────────
       Screen fills are palette vars (theme-dependent) — pin concrete light-mode
       hues so paper is identical from either theme, mirroring the .pk-bar-*
       overrides above. Fills are already solid (no gradients/shadows) so the
       strip stays vector. The rail gets a hairline border: on paper the shared
       scale extent must be visible even where no segment lands, and the pale
       rail alone can drop out on low-ink printers. NOTE: .pk-tl-track must NOT
       inherit the .pk-bar-track flex/label print overrides — segments are
       absolutely positioned, so keep it a plain positioned box. */
    .pm-print-root .pk-tl-track {
        display: block !important;
        position: relative !important;
        height: 6px !important;
        background-color: #eef1f4 !important;
        border: 0.5pt solid #c4cdd5 !important;
    }
    .pm-print-root .pk-tl-active { background-color: rgba(25, 135, 84, 1) !important; }
    .pm-print-root .pk-tl-idle   { background-color: rgba(2, 136, 209, 1) !important; }
    .pm-print-root .pk-tl-paused { background-color: rgba(245, 166, 35, 1) !important; }

    /* Hour gridlines + timestamp axis: solid concrete grays (translucent screen
       values can drop out on low-ink printers). rgba at full alpha stays vector. */
    .pm-print-root .pk-tl-tick {
        background-color: rgba(90, 100, 110, 1) !important;
    }
    .pm-print-root .pk-tl-axis-label {
        color: #555 !important;
        font-size: 6pt !important;
    }

    /* Legend + header scale print in plain dark text; keep them small so the
       leaderboard rows own the page. */
    .pm-print-root .pk-tl-legend {
        color: #444 !important;
        font-size: 7pt !important;
    }
    .pm-print-root .pk-tl-scale {
        color: #444 !important;
        font-size: 6.5pt !important;
    }

    /* 5. Fit the 5-column grid to ~7.5in of printable width: slimmer name
       column and tighter gaps than the 1900px-screen template, same structure. */
    .pm-print-root .pk-row {
        grid-template-columns: minmax(220px, 1.1fr) repeat(4, 2fr) !important;
        column-gap: 12px !important;
        break-inside: avoid;
    }

    /* The live status pill is meaningless on paper (it's "right now" state, and
       the printout may be a past date anyway) and at page width it was clipping
       into fragments — hide it outright per Production Control. */
    .pm-print-root .pk-status-pill {
        display: none !important;
    }

    /* Name cell still gets less room than on screen (~200px vs ~260px): allow the
       role icon to wrap under the name rather than clip, and let long names wrap
       instead of ellipsizing. */
    .pm-print-root .pk-cell-name {
        flex-wrap: wrap;
        row-gap: 2px;
    }
    .pm-print-root .pk-name-text {
        white-space: normal;
    }
    .pm-print-root .pk-leaderboard,
    .pm-print-root .pk-row {
        width: auto !important;
        min-width: 0 !important;
    }

    /* ── Intraday chart (below the leaderboard) ──────────────────────────────
       The canvas is a raster, unlike everything else on this page. Two things
       are needed to make it print well:
       1. SIZE. The canvas carries width/height attributes sized for the screen
          box. Constrain it to the printable width and let the height follow, so
          it scales down rather than overflowing the page. It renders at >=2x
          devicePixelRatio (see StratusChart.razor.js), so the downscale is
          sharp. NOTE the height:auto here is scoped to the CANVAS only — the
          blanket rule at the top of this block deliberately avoids height:auto
          because it once flattened the CSS bars to 1px.
       2. COLOUR. Chart.js bakes text/gridline colours into the canvas when the
          chart is constructed, so the light-palette :root pin above cannot
          reach an already-painted chart. StratusChart.razor.js rebuilds every
          live chart in print colours on `beforeprint` and restores after. */
    .pm-print-root .stratus-chart canvas {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Keep the chart with its heading rather than splitting it across pages. */
    .pm-print-root .pk-series-section {
        break-inside: avoid;
        border-top: 1px solid #c4cdd5 !important;
    }

    /* The PNG-download button is chrome, not content. */
    .pm-print-root .stratus-chart-header {
        display: none !important;
    }

    /* 6. Interactive controls have no meaning on paper. */
    .pm-no-print {
        display: none !important;
    }

    /* Hover panels live under MudBlazor's popover provider, which is off the
       .pm-print-keep ancestor chain and therefore already hidden by rule 1.
       This is belt-and-braces in case a provider is ever moved inside the chain. */
    .mud-popover-provider,
    .pk-hover-popover {
        display: none !important;
    }
}