/* site css */
@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    overflow-anchor: none; /* prevent browser scroll-anchoring jumps during chart SVG updates */
    height: 100%;
}

#app {
    height: 100%;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100vw - 2rem);
    min-width: 300px;
    z-index: 99999;
    display: none;
    background: #3e2a0e;
    color: #fff;
    border-radius: 10px;
    border-left: 4px solid #f37d36;
    box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.25);
    animation: pf-toast-in 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes pf-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(0.97); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0)     scale(1);    }
}

.blazor-error-content {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 0.875rem 0.875rem 1.25rem;
}

.blazor-error-icon {
    width: 1.35rem;
    height: 1.35rem;
    flex-shrink: 0;
    color: #f5ae45;
}

.blazor-error-msg {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-family: Arial, 'Helvetica Neue', sans-serif;
}

.blazor-error-msg strong {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
}

.blazor-error-msg span {
    font-size: 0.8rem;
    opacity: 0.75;
    line-height: 1.3;
}

.blazor-error-reload {
    background: #f37d36;
    color: #fff;
    font-weight: 600;
    padding: 0.375rem 1rem;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.82rem;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: Arial, 'Helvetica Neue', sans-serif;
    transition: background 0.15s;
}

.blazor-error-reload:hover { background: #be4d06; color: #fff; }

.blazor-error-dismiss {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem;
    flex-shrink: 0;
    color: #fff;
    opacity: 0.55;
    text-decoration: none;
    border-radius: 5px;
    transition: opacity 0.15s, background 0.15s;
}

.blazor-error-dismiss svg { width: 1.1rem; height: 1.1rem; }

.blazor-error-dismiss:hover { opacity: 1; background: rgba(255,255,255,0.12); }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1.25rem;
    color: white;
    border-radius: 4px;
}

.blazor-error-boundary::after {
    content: "An error has occurred in this section."
}

#pf-update-banner {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100vw - 2rem);
    min-width: 300px;
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 0.875rem 0.875rem 1.25rem;
    background: #1a3d0a;
    color: #fff;
    border-radius: 10px;
    border-left: 4px solid #6BBF42;
    box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.25);
    font-family: Arial, 'Helvetica Neue', sans-serif;
    animation: pf-toast-in 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.pf-update-icon {
    width: 1.35rem;
    height: 1.35rem;
    flex-shrink: 0;
    color: #6BBF42;
}

.pf-update-msg {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.pf-update-msg strong { font-size: 0.9rem; font-weight: 600; line-height: 1.3; }
.pf-update-msg span   { font-size: 0.8rem; opacity: 0.75; line-height: 1.3; }

.pf-update-reload {
    background: #6BBF42;
    color: #fff;
    font-weight: 600;
    padding: 0.375rem 1rem;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.82rem;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: Arial, 'Helvetica Neue', sans-serif;
    transition: background 0.15s;
}

.pf-update-reload:hover { background: #4a9a28; color: #fff; }

.pf-update-dismiss {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem;
    flex-shrink: 0;
    color: #fff;
    opacity: 0.55;
    border-radius: 5px;
    transition: opacity 0.15s, background 0.15s;
}

.pf-update-dismiss svg { width: 1.1rem; height: 1.1rem; }

.pf-update-dismiss:hover { opacity: 1; background: rgba(255,255,255,0.12); }

/* ====================================================================
   Planting Forward — Earth & Forest Theme
   ==================================================================== */

:root {
    --mud-palette-primary-hover: rgba(var(--mud-palette-primary-rgb), 0.15);
}

/* Forest background scene.
   Painted on a fixed, full-viewport pseudo-element instead of `background-attachment: fixed`
   on <body>. Mobile/WebKit browsers handle `background-attachment: fixed` poorly — the image
   slides vertically and re-fills as the address bar/toolbar collapses while scrolling (exactly
   the "slides then fills in small/medium mode" jank). A fixed ::before pinned to the layout
   viewport stays rock-steady on every browser. z-index:-1 keeps it behind the transparent app. */
body {
    background-color: #1e6fa8;
}
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: url('/images/forest-bg.svg');
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* Layout and main content transparent so forest shows through */
.mud-layout,
.mud-main-content {
    background: transparent !important;
}

/* Authenticated page card — wraps @Body only when logged in, keeping login page clean.
   min-height fills the viewport so the bottom gap equals the top gap:
     64px  = MudBlazor AppBar height
     1rem  = MudContainer mt-4 (top gap from appbar to card)
     0.25rem = card margin-top
     1.25rem = matching bottom gap (margin-bottom below) */
.pf-page-card {
    background-color: rgba(255, 255, 255, 0.90);
    border-radius: 12px;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.16);
    padding: 1.5rem 1.75rem 0.75rem;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
    min-height: calc(100dvh - 64px - 1.5rem);
}

/* Fixed-height grid pages hug the pager:
   A card-table data grid (Organizations, Logs, Inventory season view) already
   pins its own height to the viewport via Height="calc(100dvh - 270px)", so the
   card does not need the tall min-height too — that overshoot is what leaves the
   strip of dead whitespace below the pager. When such a grid is present, let the
   card shrink to its content so the pager sits just above the card bottom, the
   same way the tabbed Clients page already does. Bottom padding is trimmed to 2px
   so the pager doesn't push a few stray pixels below the viewport edge. */
.pf-page-card:has(.pf-viewport-grid) {
    min-height: 0;
    padding-bottom: 2px;
}

/* ── Fill-remaining-height data grid ─────────────────────────────────
   (helper removed; grid pages now hug the pager via the :has() rule above) */

/* Cards and surfaces: slightly transparent white */
.mud-paper:not(.mud-appbar):not(.mud-drawer):not(.mud-menu-list):not(.mud-popover) {
    background-color: rgba(255, 255, 255, 0.90) !important;
}

/* Dropdown/select/autocomplete popovers: fully opaque so they don't bleed the forest background */
.mud-popover {
    background-color: #ffffff !important;
}

/* Drawer: warm cream, matching earth tone */
.mud-drawer {
    background-color: rgba(247, 240, 228, 0.98) !important;
    border-right: 1px solid rgba(100, 65, 20, 0.18) !important;
}
.mud-drawer-header {
    border-bottom: 1px solid rgba(100, 65, 20, 0.12);
}
.pf-nav-section {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(100, 65, 20, 0.5);
    padding: 14px 16px 3px;
    margin-top: 2px;
}
.pf-nav-section:first-child {
    padding-top: 8px;
}

/* Login password field: overlaid eye-toggle button on right */
.pf-password-field .mud-input-slot { padding-right: 44px !important; }

/* Season / filter selects — white bg for visibility over forest */
.pf-season-select .mud-input { background-color: white !important; border-radius: 4px; }

/* AppBar season selector — white text to match AppBar theme */
/* min-width is set via inline Style computed from longest season name */
.pf-appbar-season { max-width: fit-content; max-width: calc-size(fit-content, size + 30px); min-width: 200px!important; margin: 0 !important; color: white !important; }
/* White text on all internal text/input elements at all breakpoints.
   The top-level color:white cascades to most children; the explicit selectors
   below add !important to beat any MudBlazor breakpoint-specific overrides. */
.pf-appbar-season .mud-select-input,
.pf-appbar-season .mud-input-root,
.pf-appbar-season .mud-input-slot,
.pf-appbar-season .mud-input-slot *,
.pf-appbar-season input {
    color: white !important;
    -webkit-text-fill-color: white !important; /* Safari iOS overrides color on inputs; this wins */
}
/* Arrow and adornment button white */
.pf-appbar-season .mud-svg-icon { color: white !important; }
.pf-appbar-season .mud-input-adornment button { color: white !important; }
/* Outlined variant border and label in AppBar */
.pf-appbar-season .mud-input-outlined-border { border-color: rgba(255,255,255,0.55) !important; }
.pf-appbar-season:hover .mud-input-outlined-border { border-color: rgba(255,255,255,0.85) !important; }
.pf-appbar-season .mud-input-label { color: rgba(255,255,255,0.7) !important; }
.pf-appbar-season .mud-input-label-outlined { background: transparent; }
/* Prevent overflow on the text display but do NOT apply to input-root (would clip arrow sibling) */
.pf-appbar-season .mud-input-slot > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* AppBar user name — white text */
.pf-appbar-user { color: white; font-size: 0.875rem; white-space: nowrap; }

/* Page-level season selector — used in page headers (not AppBar). Normal color scheme. */
/* min-width is set via inline Style computed from longest season name; no max-width cap so it never truncates. */
.pf-page-season { margin: 0 !important; }
.pf-page-season .mud-input-slot > * { white-space: nowrap; }

/* Mobile compact season trigger button (xs only) */
.pf-season-mobile-btn { text-transform: none !important; font-size: 0.8rem !important; min-width: 0 !important; max-width: 148px; height: 32px !important; }
.pf-season-mobile-btn .mud-button-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Archived season ───────────────────────────────────────────── */

/* Chip used in page headers and dropdowns */
.pf-chip-archived {
    background: #78909c !important;
    color: white !important;
    font-size: 0.68rem !important;
    height: 20px !important;
}
.pf-chip-archived .mud-chip-content { padding: 0 8px !important; }

/* Chip used inside the AppBar (matches AppBar tone) */
.pf-chip-archived-appbar {
    background: rgba(255,255,255,0.18) !important;
    color: rgba(255,255,255,0.9) !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    font-size: 0.68rem !important;
    height: 20px !important;
}
.pf-chip-archived-appbar .mud-chip-content { padding: 0 8px !important; }

/* Page card — desaturated warm grey when archived */
.pf-page-card.pf-archived {
    background-color: rgba(210, 210, 206, 0.94) !important;
}
.pf-page-card.pf-archived .mud-paper:not(.mud-appbar):not(.mud-drawer):not(.mud-menu-list) {
    background-color: rgba(215, 215, 212, 0.92) !important;
}

/* Data grid muted colors when archived */
.pf-page-card.pf-archived .mud-table-root {
    background: rgba(212, 212, 209, 0.95) !important;
}
.pf-page-card.pf-archived .mud-table-head .mud-table-cell {
    background: rgba(255, 255, 255, 0.95) !important;
    color: rgba(60, 60, 58, 0.9) !important;
}
.pf-page-card.pf-archived .mud-table-body .mud-table-row:hover td {
    background: rgba(204, 204, 201, 0.9) !important;
}
.pf-page-card.pf-archived .mud-table-body .mud-table-cell {
    color: rgba(70, 70, 68, 0.9) !important;
}
.pf-page-card.pf-archived .mud-chip:not(.pf-chip-archived):not(.pf-chip-archived-appbar) {
    filter: saturate(0.35) brightness(1.05) !important;
}
.pf-page-card.pf-archived .mud-table-pagination {
    background: rgba(208, 208, 205, 0.97) !important;
    color: rgba(70, 70, 68, 0.85) !important;
}
.pf-page-card.pf-archived .mud-tabs-tabbar {
    background: rgba(255, 255, 255, 0.97) !important;
}
.pf-page-card.pf-archived .mud-tab-active {
    color: rgba(50, 50, 48, 1) !important;
}
/* Selects/inputs inside tab panels should look normal, not muted */
.pf-page-card.pf-archived .mud-tabs-panels .mud-input-root,
.pf-page-card.pf-archived .mud-tabs-panels .mud-select-input { color: inherit !important; }
.pf-page-card.pf-archived .mud-tabs-panels .mud-input-outlined-border { border-color: rgba(0,0,0,0.23) !important; }
.pf-page-card.pf-archived .mud-tabs-panels .mud-input-label { color: rgba(0,0,0,0.6) !important; }

/* ── Archived season — WASM Dashboard surfaces ─────────────────────────
   The WASM Dashboard draws its KPI cards/chips/deck panels with bespoke pf-kpi-* surfaces
   (not .mud-paper), so the generic pf-archived rules above don't reach them. When the viewed
   season is archived, the dashboard content wrapper gets .pf-dash-archived, which mutes those
   white surfaces to a desaturated warm grey so the page visually reads as an inactive season. */
.pf-dash-archived .pf-kpi-card,
.pf-dash-archived .pf-kpi-chip {
    background-color: rgba(214, 214, 210, 0.92) !important;
}
.pf-dash-archived .pf-kpi-deck-panel,
.pf-dash-archived .pf-orgtype-accordion,
.pf-dash-archived .pf-enr-deck-panel {
    background-color: rgba(218, 218, 214, 0.97) !important;
}
/* Desaturate the colourful bars/sparklines/badges so nothing pops as "live" */
.pf-dash-archived .pf-kpi-card,
.pf-dash-archived .pf-kpi-chip,
.pf-dash-archived .pf-kpi-deck-panel,
.pf-dash-archived .pf-orgtype-accordion,
.pf-dash-archived .pf-enr-deck-panel {
    filter: saturate(0.72);
}
/* The shared Order Trends card IS a .mud-paper, so mute it the same way the page-card rules do */
.pf-dash-archived .mud-paper:not(.mud-appbar):not(.mud-drawer):not(.mud-menu-list) {
    background-color: rgba(215, 215, 212, 0.92) !important;
}

/* ── Archived season — WASM Delivery Planner surfaces ───────────────────────
   The Delivery Planner renders directly on the page (no .pf-page-card chrome), so the generic
   .pf-page-card.pf-archived rules don't reach it. When the viewed season is archived the tabs are
   wrapped in .pf-delivery-archived, which mutes the truck/holding/summary cards, the Locations grid,
   and the colourful per-truck accents to a desaturated warm grey so the page reads as inactive. */
.pf-delivery-archived .mud-paper:not(.mud-appbar):not(.mud-drawer):not(.mud-menu-list) {
    background-color: rgba(215, 215, 212, 0.92) !important;
}
.pf-delivery-archived .mud-tabs-tabbar {
    background: rgba(255, 255, 255, 0.97) !important;
}
.pf-delivery-archived .mud-tab-active {
    color: rgba(50, 50, 48, 1) !important;
}
/* Locations data grid muted to match the archived page-card grid treatment */
.pf-delivery-archived .mud-table-root {
    background: rgba(212, 212, 209, 0.95) !important;
}
.pf-delivery-archived .mud-table-head .mud-table-cell {
    background: rgba(255, 255, 255, 0.95) !important;
    color: rgba(60, 60, 58, 0.9) !important;
}
.pf-delivery-archived .mud-table-body .mud-table-cell {
    color: rgba(70, 70, 68, 0.9) !important;
}
.pf-delivery-archived .mud-table-pagination {
    background: rgba(208, 208, 205, 0.97) !important;
    color: rgba(70, 70, 68, 0.85) !important;
}
/* Selects/inputs inside the tab panels stay legible (not muted) so editing still reads clearly */
.pf-delivery-archived .mud-tabs-panels .mud-input-root,
.pf-delivery-archived .mud-tabs-panels .mud-select-input { color: inherit !important; }
/* Desaturate the colourful truck accents, mode chips, and capacity badges so nothing pops as "live" */
.pf-delivery-archived .pf-truck-head,
.pf-delivery-archived .pf-truck-grid,
.pf-delivery-archived .pf-truck-mode-chip,
.pf-delivery-archived .pf-dropzone,
.pf-delivery-archived .mud-chip:not(.pf-chip-archived):not(.pf-chip-archived-appbar) {
    filter: saturate(0.4) brightness(1.02);
}

/* ── WASM Dashboard header — keep title + season + refresh on one line ──
   The season selector shrinks (with ellipsis) before anything wraps, so the
   refresh button never drops below or off the right edge. The live-data
   timestamp lives on the compact .pf-dash-meta row below, not in this row. */
.pf-dash-header { flex-wrap: nowrap; }
.pf-dash-header .pf-dash-season {
    width: fit-content;
    width: calc-size(fit-content, size + 30px);
    max-width: fit-content;
    max-width: calc-size(fit-content, size + 30px);
    min-width: 0;
    flex-shrink: 1;
}
.pf-dash-header .pf-dash-season .mud-input-slot > * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Live-data timestamp sits on its own short, right-aligned row just under the
   header so the widened season selector can't push the refresh button off-screen.
   Pulled up tight against the header and kept compact so it adds minimal height. */
.pf-dash-meta {
    margin-top: -6px;
    min-height: 0;
    line-height: 1;
}
.pf-dash-meta .mud-typography-caption { font-size: 0.72rem; }
@media (max-width: 700px) {
    .pf-dash-header { gap: 6px !important; }
    /* Title scales down so it stops dominating the compact row */
    .pf-dash-header .mud-typography-h5 { font-size: 1.3rem; }
    .pf-dash-header .pf-dash-season { max-width: fit-content; max-width: calc-size(fit-content, size + 30px); }
}
@media (max-width: 480px) {
    .pf-dash-header { gap: 4px !important; }
    .pf-dash-header .mud-typography-h5 { font-size: 1.1rem; }
    /* Drop the extra ml-2 so spacing is one even gap, and give the value a touch
       more room with a smaller slot font so "Year 2025" isn't clipped. */
    .pf-dash-header .pf-dash-season {
        max-width: fit-content;
        max-width: calc-size(fit-content, size + 30px);
        margin-left: 0 !important;
    }
    .pf-dash-header .pf-dash-season .mud-input-slot { font-size: 0.82rem; }
    /* Tighten the live-time caption on its meta row */
    .pf-dash-meta .mud-typography-caption { font-size: 0.68rem; }
    .pf-dash-header .mud-icon-button { padding: 6px; }
}

/* Standard page-header season selector: consistent min-width across all pages
   so the selector never renders narrower than the widest short season name. */
.pf-season-select {
    min-width: 180px;
    width: fit-content;
    width: calc-size(fit-content, size + 30px);
    max-width: fit-content;
    max-width: calc-size(fit-content, size + 30px);
    flex: 0 0 auto;
}
.pf-season-select .mud-input-slot > * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Vertical divider between title and season selector */
.pf-appbar-divider {
    display: inline-block;
    width: 1px;
    height: 22px;
    background: rgba(255,255,255,0.3);
    margin: 0 10px;
    flex-shrink: 0;
    align-self: center;
}

/* Breathing room between start adornment icon and input text */
.mud-input-adornment-start { padding-right: 8px; }
.mud-input > input.mud-input-root-outlined.mud-input-root-adorned-start { padding-left: 10px; }

/* Align the input slot to the end (bottom) so header search fields sit flush with
   adjacent icon buttons. Scoped to .pf-header-search to avoid touching login/form fields. */
.mud-input-control.pf-header-search > .mud-input-control-input-container { align-items: end; }

/* Float MudBlazor's outlined label when the browser autofills the input.
   Normally MudBlazor adds mud-shrink via JS when the input has a value, but
   autofill bypasses that. :has() detects the autofilled sibling and applies
   the same transform MudBlazor uses for its floated/shrunk state. */
.mud-input-outlined:has(input:-webkit-autofill) .mud-input-label,
.mud-input-outlined:has(input:autofill) .mud-input-label {
    top: 0 !important;
    transform: translateY(-50%) scale(0.75) !important;
}

/* Outlined input labels: prevent wrapping. Background is intentionally none so
   the label blends with its container rather than showing a white rectangle. */
.mud-input-label-outlined {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 24px);
    background: none;
    padding: 0 4px;
    margin-left: -4px;
}

/* ====================================================================
   End Forest Theme
   ==================================================================== */

/* ====================================================================
   Full-page loading overlay — shared by WASM bootstrap (index.html)
   and the OrderForm initial data fetch.
   Uses the same forest background as the app so both states look
   identical regardless of which project renders them.
   ==================================================================== */

.pf-page-loader {
    position:        fixed;
    inset:           0;
    z-index:         9000;
    display:         flex;
    justify-content: center;
    align-items:     center;
    background:      url('/images/forest-bg.svg') center bottom / cover no-repeat #1e6fa8;
}

.pf-page-loader-arc {
    width:     56px;
    height:    56px;
    animation: pf-page-loader-spin 0.9s linear infinite;
}

@keyframes pf-page-loader-spin {
    to { transform: rotate(360deg); }
}

/* ====================================================================
   End Full-page loading overlay
   ==================================================================== */

/* ====================================================================
   Tree-Growing Loading Spinner  (PfTreeSpinner)

   Animation timeline — 4-second loop:
     0 –  5 %  everything invisible (reset gap)
     5 – 25 %  trunk draws upward via stroke-dashoffset
    25 – 44 %  main branches extend (left then right, slight stagger)
    33 – 50 %  upper branches extend
    40 – 53 %  secondary tips + top shoot
    52 – 80 %  leaf clusters bloom with spring overshoot (staggered)
    80 – 84 %  full tree held
    84 – 93 %  everything fades out
    93 –100 %  invisible (gap before next loop)
   ==================================================================== */

/* ── Boot-loader frosted panel (wraps spinner + label + percent) ─────── */
/* Lives only in index.html; keeps the loader readable against the
   forest-bg without obscuring it entirely. */
.pf-boot-panel {
    background:              rgba(255, 255, 255, 0.82);
    backdrop-filter:         blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius:           18px;
    box-shadow:              0 8px 40px rgba(0, 0, 0, 0.22),
                             0 2px 8px  rgba(0, 0, 0, 0.12);
    padding:                 20px 36px 22px;
}

/* Dark label text — overrides white inline style used on the forest bg */
.pf-boot-label {
    color: rgba(50, 80, 40, 0.80) !important;
}

/* Percentage counter below the label */
.pf-boot-pct {
    font-size:      1.35rem;
    font-weight:    700;
    color:          rgba(50, 80, 40, 0.70);
    letter-spacing: 0.04em;
    text-align:     center;
    margin-top:     -4px;
    user-select:    none;
}

/* ── Container ─────────────────────────────────────────────────────── */
.pf-tree-spinner {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         28px 0 20px;
    min-height:      188px;
    gap:             10px;
}

.pf-tree-spinner-fullpage {
    position:                fixed;
    inset:                   0;
    z-index:                 9000;
    background:              rgba(255, 255, 255, 0.92);
    backdrop-filter:         blur(6px);
    -webkit-backdrop-filter: blur(6px);
    min-height:              unset;
    padding:                 0;
}

/* ── SVG canvas ────────────────────────────────────────────────────── */
.pf-tree-svg {
    width:    92px;
    height:   112px;
    overflow: visible;
}

/* ── Ground shadow ──────────────────────────────────────────────────── */
.pf-stk-shadow {
    fill: rgba(0, 0, 0, 0.14);
    animation: pf-stk-shadow 2.5s ease-in-out infinite;
}
@keyframes pf-stk-shadow {
    0%,  4%  { opacity: 0; }
    20%       { opacity: 1; }
    84%       { opacity: 1; }
    93%       { opacity: 0; }
    100%      { opacity: 0; }
}

/* ── Trunk ──────────────────────────────────────────────────────────── */
/* Line (0,5)→(0,−90), length=95.
   stroke-dashoffset 95→0 draws the line from ground upward.           */
.pf-stk-trunk {
    stroke-dasharray:  95;
    stroke-dashoffset: 95;
    animation: pf-stk-trunk 2.5s ease-in-out infinite;
}
@keyframes pf-stk-trunk {
    0%,  4% { stroke-dashoffset: 95; opacity: 0; }
    5%       { stroke-dashoffset: 95; opacity: 1; }
    25%      { stroke-dashoffset: 0;  opacity: 1; }
    84%      { stroke-dashoffset: 0;  opacity: 1; }
    93%      { stroke-dashoffset: 0;  opacity: 0; }
    100%     { stroke-dashoffset: 95; opacity: 0; }
}

/* ── Left main branch  (0,−55)→(−45,−88), length≈56 ────────────────── */
.pf-stk-bll {
    stroke-dasharray:  56;
    stroke-dashoffset: 56;
    animation: pf-stk-bll 2.5s ease-in-out infinite;
}
@keyframes pf-stk-bll {
    0%,  24% { stroke-dashoffset: 56; opacity: 0; }
    25%       { stroke-dashoffset: 56; opacity: 1; }
    41%       { stroke-dashoffset: 0;  opacity: 1; }
    84%       { stroke-dashoffset: 0;  opacity: 1; }
    93%       { stroke-dashoffset: 0;  opacity: 0; }
    100%      { stroke-dashoffset: 56; opacity: 0; }
}

/* ── Right main branch  (0,−55)→(45,−88), length≈56 ────────────────── */
.pf-stk-blr {
    stroke-dasharray:  56;
    stroke-dashoffset: 56;
    animation: pf-stk-blr 2.5s ease-in-out infinite;
}
@keyframes pf-stk-blr {
    0%,  27% { stroke-dashoffset: 56; opacity: 0; }
    28%       { stroke-dashoffset: 56; opacity: 1; }
    44%       { stroke-dashoffset: 0;  opacity: 1; }
    84%       { stroke-dashoffset: 0;  opacity: 1; }
    93%       { stroke-dashoffset: 0;  opacity: 0; }
    100%      { stroke-dashoffset: 56; opacity: 0; }
}

/* ── Upper-left branch  (0,−78)→(−28,−108), length≈41 ─────────────── */
.pf-stk-bul {
    stroke-dasharray:  41;
    stroke-dashoffset: 41;
    animation: pf-stk-bul 2.5s ease-in-out infinite;
}
@keyframes pf-stk-bul {
    0%,  33% { stroke-dashoffset: 41; opacity: 0; }
    34%       { stroke-dashoffset: 41; opacity: 1; }
    48%       { stroke-dashoffset: 0;  opacity: 1; }
    84%       { stroke-dashoffset: 0;  opacity: 1; }
    93%       { stroke-dashoffset: 0;  opacity: 0; }
    100%      { stroke-dashoffset: 41; opacity: 0; }
}

/* ── Upper-right branch  (0,−78)→(28,−108), length≈41 ─────────────── */
.pf-stk-bur {
    stroke-dasharray:  41;
    stroke-dashoffset: 41;
    animation: pf-stk-bur 2.5s ease-in-out infinite;
}
@keyframes pf-stk-bur {
    0%,  35% { stroke-dashoffset: 41; opacity: 0; }
    36%       { stroke-dashoffset: 41; opacity: 1; }
    50%       { stroke-dashoffset: 0;  opacity: 1; }
    84%       { stroke-dashoffset: 0;  opacity: 1; }
    93%       { stroke-dashoffset: 0;  opacity: 0; }
    100%      { stroke-dashoffset: 41; opacity: 0; }
}

/* ── Secondary-left tip  (−45,−88)→(−58,−110), length≈26 ───────────── */
.pf-stk-bll2 {
    stroke-dasharray:  26;
    stroke-dashoffset: 26;
    animation: pf-stk-bll2 2.5s ease-in-out infinite;
}
@keyframes pf-stk-bll2 {
    0%,  40% { stroke-dashoffset: 26; opacity: 0; }
    41%       { stroke-dashoffset: 26; opacity: 1; }
    52%       { stroke-dashoffset: 0;  opacity: 1; }
    84%       { stroke-dashoffset: 0;  opacity: 1; }
    93%       { stroke-dashoffset: 0;  opacity: 0; }
    100%      { stroke-dashoffset: 26; opacity: 0; }
}

/* ── Secondary-right tip  (45,−88)→(58,−110), length≈26 ────────────── */
.pf-stk-blr2 {
    stroke-dasharray:  26;
    stroke-dashoffset: 26;
    animation: pf-stk-blr2 2.5s ease-in-out infinite;
}
@keyframes pf-stk-blr2 {
    0%,  42% { stroke-dashoffset: 26; opacity: 0; }
    43%       { stroke-dashoffset: 26; opacity: 1; }
    54%       { stroke-dashoffset: 0;  opacity: 1; }
    84%       { stroke-dashoffset: 0;  opacity: 1; }
    93%       { stroke-dashoffset: 0;  opacity: 0; }
    100%      { stroke-dashoffset: 26; opacity: 0; }
}

/* ── Top shoot  (0,−90)→(0,−110), length=20 ─────────────────────────── */
.pf-stk-top {
    stroke-dasharray:  20;
    stroke-dashoffset: 20;
    animation: pf-stk-top 2.5s ease-in-out infinite;
}
@keyframes pf-stk-top {
    0%,  38% { stroke-dashoffset: 20; opacity: 0; }
    39%       { stroke-dashoffset: 20; opacity: 1; }
    51%       { stroke-dashoffset: 0;  opacity: 1; }
    84%       { stroke-dashoffset: 0;  opacity: 1; }
    93%       { stroke-dashoffset: 0;  opacity: 0; }
    100%      { stroke-dashoffset: 20; opacity: 0; }
}

/* ── Leaf clusters ──────────────────────────────────────────────────── */
/* transform-box:fill-box makes transform-origin relative to each
   circle's own bounding box so every leaf blooms from its own center. */
/* The 3-keyframe overshoot pattern (scale 0 → 1.18 → 1.0) gives each
   cluster a natural "spring pop" feel as the canopy bursts into life.  */
.pf-leaf {
    transform-box:    fill-box;
    transform-origin: center;
}

/* Cluster 1 — center base of canopy (blooms first) */
.pf-leaf-1 { animation: pf-leaf-1 2.5s ease-out infinite; }
@keyframes pf-leaf-1 {
    0%,  52% { transform: scale(0);    opacity: 0;    }
    64%       { transform: scale(1.18); opacity: 0.92; }
    72%       { transform: scale(1);    opacity: 0.92; }
    84%       { transform: scale(1);    opacity: 0.92; }
    93%       { transform: scale(0.5);  opacity: 0;    }
    100%      { transform: scale(0);    opacity: 0;    }
}

/* Cluster 2 — left wing */
.pf-leaf-2 { animation: pf-leaf-2 2.5s ease-out infinite; }
@keyframes pf-leaf-2 {
    0%,  55% { transform: scale(0);    opacity: 0;    }
    67%       { transform: scale(1.18); opacity: 0.92; }
    74%       { transform: scale(1);    opacity: 0.92; }
    84%       { transform: scale(1);    opacity: 0.92; }
    93%       { transform: scale(0.5);  opacity: 0;    }
    100%      { transform: scale(0);    opacity: 0;    }
}

/* Cluster 3 — right wing */
.pf-leaf-3 { animation: pf-leaf-3 2.5s ease-out infinite; }
@keyframes pf-leaf-3 {
    0%,  57% { transform: scale(0);    opacity: 0;    }
    69%       { transform: scale(1.18); opacity: 0.92; }
    76%       { transform: scale(1);    opacity: 0.92; }
    84%       { transform: scale(1);    opacity: 0.92; }
    93%       { transform: scale(0.5);  opacity: 0;    }
    100%      { transform: scale(0);    opacity: 0;    }
}

/* Cluster 4 — upper left */
.pf-leaf-4 { animation: pf-leaf-4 2.5s ease-out infinite; }
@keyframes pf-leaf-4 {
    0%,  61% { transform: scale(0);    opacity: 0;    }
    72%       { transform: scale(1.15); opacity: 0.90; }
    78%       { transform: scale(1);    opacity: 0.90; }
    84%       { transform: scale(1);    opacity: 0.90; }
    93%       { transform: scale(0.5);  opacity: 0;    }
    100%      { transform: scale(0);    opacity: 0;    }
}

/* Cluster 5 — upper right */
.pf-leaf-5 { animation: pf-leaf-5 2.5s ease-out infinite; }
@keyframes pf-leaf-5 {
    0%,  63% { transform: scale(0);    opacity: 0;    }
    74%       { transform: scale(1.15); opacity: 0.90; }
    79%       { transform: scale(1);    opacity: 0.90; }
    84%       { transform: scale(1);    opacity: 0.90; }
    93%       { transform: scale(0.5);  opacity: 0;    }
    100%      { transform: scale(0);    opacity: 0;    }
}

/* Cluster 6 — crown sparkle (blooms last) */
.pf-leaf-6 { animation: pf-leaf-6 2.5s ease-out infinite; }
@keyframes pf-leaf-6 {
    0%,  67% { transform: scale(0);    opacity: 0;    }
    77%       { transform: scale(1.20); opacity: 0.94; }
    82%       { transform: scale(1);    opacity: 0.94; }
    84%       { transform: scale(1);    opacity: 0.94; }
    93%       { transform: scale(0.5);  opacity: 0;    }
    100%      { transform: scale(0);    opacity: 0;    }
}

/* ── Optional text label ─────────────────────────────────────────────── */
.pf-tree-spinner-label {
    font-size:      0.72rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color:          var(--mud-palette-text-secondary, #777);
    opacity:        0.68;
    user-select:    none;
}

/* ====================================================================
   End Tree-Growing Loading Spinner
   ==================================================================== */

/* PfRichTextEditor sets --pf-rte-min-height on its wrapper; size the editing
   area from it so the MinHeight parameter actually takes effect. */
.ql-container .ql-editor {
    min-height: var(--pf-rte-min-height, 120px);
}

/* HR divider blot — styled in both the editor and on the rendered form */
.ql-editor hr, .pf-rich-text hr {
    border: none;
    border-top: 2px solid #c8d8c8;
    margin: 0.75rem 0;
    display: block;
}

/* Quill editor — remove double border when wrapped in our own bordered div */
.ql-container.ql-snow {
    border: none;
}
.ql-toolbar.ql-snow {
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid rgba(0,0,0,0.12);
    /* Quill 2 uses display:flex on the toolbar; ensure groups wrap to a new row
       rather than overflowing or being clipped when the dialog is narrow. */
    display: flex;
    flex-wrap: wrap;
    row-gap: 2px;
    position: relative;
    z-index: 2;
}
/* Picker dropdowns must stack above the editor area */
.ql-snow .ql-picker-options {
    z-index: 10;
}

/* Quill font-family picker — register the two non-default families */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before  { content: "Serif";     font-family: Georgia, serif; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before { content: "Monospace"; font-family: monospace; }
/* Default (no value) label */
.ql-snow .ql-picker.ql-font .ql-picker-label:not([data-value])::before,
.ql-snow .ql-picker.ql-font .ql-picker-item:not([data-value])::before     { content: "Sans-serif"; }
/* Apply fonts to editor content */
.ql-font-serif     { font-family: Georgia, 'Times New Roman', serif; }
.ql-font-monospace { font-family: 'Courier New', Courier, monospace; }
/* Code block styling inside the editor and in rendered output */
.ql-editor pre.ql-syntax, .pf-rich-text pre {
    background: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.6rem 0.9rem;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.875rem;
    overflow-x: auto;
    white-space: pre;
}
/* Inline code in rendered output */
.pf-rich-text code {
    background: #f4f4f4;
    border-radius: 3px;
    padding: 0.1em 0.35em;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.875em;
}

/* Shared Quill HTML output — bullets indented past surrounding text */
.pf-rich-text p { margin: 0 0 0.4rem; padding: 0; }
.pf-rich-text ul, .pf-rich-text ol { margin: 0.25rem 0 0.4rem; padding-left: 2.25rem; }
.pf-rich-text li { margin-bottom: 0.2rem; }
.pf-rich-text li::marker { color: #333; }
/* Quill v2 serializes both bullet and ordered lists as <ol> with a data-list attribute.
   Outside .ql-editor we must replicate the marker logic with native list-style-type. */
.pf-rich-text ol:has(> li[data-list]) { list-style-type: none; padding-left: 0; }
.pf-rich-text ol > li[data-list] { padding-left: 2.25rem; }
.pf-rich-text ol > li[data-list="bullet"] { list-style-type: disc; }
.pf-rich-text ol > li[data-list="ordered"] { list-style-type: decimal; }
.pf-rich-text .ql-ui { display: none; }

/* Order form — kept for specificity, inherits from pf-rich-text */
.pf-order-details { margin: 0.5rem 0 1rem; color: #333; line-height: 1.7; }

/* ====================================================================
   Dashboard Stat Cards
   ==================================================================== */

.pf-stat-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pf-stat-value {
    font-weight: 700;
    line-height: 1.1;
}

.pf-stat-label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Dashboard tabs — shrink text on mobile so all 4 fit */
.pf-dash-tabs .mud-tab {
    min-width: 0;
    padding: 8px 10px;
}

@media (max-width: 600px) {
    /* Hide tab label text, keep icons only */
    .pf-dash-tabs .mud-tab-text {
        display: none;
    }

    /* Tighter stat cards on phone */
    .pf-stat-card {
        padding: 0.6rem 0.75rem !important;
    }

    .pf-stat-value {
        font-size: 1.4rem !important;
    }
}

/* ====================================================================
   Mobile Responsive Fixes
   ==================================================================== */

/* ── Prevent text selection from bleeding behind open KPI decks and modals ── */

/* Desktop: no overflow:hidden on <html> — the deck panel handles its own scroll
   containment via overscroll-behavior:contain on the scroll-list. Applying
   overflow:hidden to <html> caused a ~17px scrollbar-removal reflow that
   flickered the layout every time a KPI deck opened. */

/* Wrapper class applied when _openKpiCard != null — non-selectable + backdrop. */
.pf-kpi-mobile-backdrop {
    -webkit-user-select: none;
    user-select: none;
}

/* Semi-transparent backdrop — mobile only. On desktop the drop is a small
   absolute popup; no backdrop needed. z-index 499 keeps it below deck panels (500). */
@media (max-width: 959px) {
    .pf-kpi-mobile-backdrop::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.38);
        z-index: 499;
        pointer-events: auto;
    }
}

/* Desktop: suppress text selection across the entire KPI grid while any
   drop or overlay panel is rendered (they're @if-rendered, not hidden). */
@media (min-width: 960px) {
    .pf-kpi-grid:has(.pf-kpi-drop),
    .pf-kpi-grid:has(.pf-kpi-overlay) {
        -webkit-user-select: none;
        user-select: none;
    }
}

/* ── KPI drop panel: dynamic viewport-capped height ─────────────────
   The panel is a flex column so the header and footer stay fixed while
   the scroll wrap fills the remaining space. max-height keeps the whole
   panel from ever running off the bottom of the screen.
   ~370 px = app-bar (64) + page margin (16) + KPI card row (120) + gap (4)
   + panel padding + header/footer + breathing room. */
@media (min-width: 960px) {
    .pf-kpi-drop .pf-kpi-deck-panel {
        max-height:      calc(100dvh - 370px);
        box-sizing:      border-box;
        display:         flex;
        flex-direction:  column;
        overflow:        hidden;
    }

    /* Scroll wrap grows to fill whatever height is left after header + footer */
    .pf-kpi-drop .pf-kpi-deck-panel > .pf-deck-scroll-wrap {
        flex:       1;
        min-height: 0;
        overflow:   hidden;
    }

    /* Ensure the list is explicitly scrollable on desktop too */
    .pf-kpi-drop .pf-kpi-deck-panel > .pf-deck-scroll-wrap > .pf-kpi-scroll-list {
        overflow-y: auto;
    }
}

/* On short-height desktop/laptop screens the 370 px offset would leave almost
   nothing; use a smaller offset so panels stay usable. */
@media (min-width: 960px) and (max-height: 700px) {
    .pf-kpi-drop .pf-kpi-deck-panel {
        max-height: calc(100dvh - 220px);
    }
}

/* ── Order deck: solo view on short screens (height < 850 px) ────────
   When the order detail deck is open and the viewport is short, hide the
   accordion so the deck gets the full bottom-sheet / drop area to itself.
   The user returns to the accordion by closing (backdrop tap / click-outside)
   and reopening the Orders KPI card. */
@media (max-height: 849px) {
    .pf-kpi-drop:has(.pf-enr-deck-panel--orders) .pf-orgtype-accordion {
        display: none;
    }

    /* Deck fills the full width of the drop area */
    .pf-kpi-drop .pf-enr-deck-panel--orders {
        width:     100%;
        max-width: none;
    }
}

/* Page content behind any open MudDialog should not be text-selectable.
   MudBlazor portals dialogs to body level, so .pf-page-card is not an
   ancestor of .mud-dialog — this rule safely targets only the content behind. */
body:has(.mud-dialog) .pf-page-card {
    -webkit-user-select: none;
    user-select: none;
}

/* Prevent page-level horizontal scroll — only tables scroll */
body {
    overflow-x: hidden;
}

/* Page card: do NOT clip overflow here.
   - body { overflow-x: hidden } already prevents horizontal scrolling.
   - Clipping here breaks position:fixed children (quick-actions bar) on iOS Safari
     and clips absolutely-positioned KPI drops on all browsers. */
.pf-page-card {
    overflow-x: visible;
}

/* Data tables scroll horizontally inside their container */
.mud-table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    /* negative margin trick so the scrollable area reaches the card edge */
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

/* Pager row: scroll horizontally rather than pushing the card (and page) wider */
.mud-table-pagination {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mud-table-cell {
    min-width: 0;
}

/* ── Icon-only Add buttons (text hidden via d-none on mobile) ──── */
/* On desktop these are normal filled buttons. On mobile (d-none hides the
   label span) we collapse them to a square to remove the excess padding. */
@media (max-width: 600px) {
    .pf-add-btn {
        min-width: 36px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .pf-add-btn .mud-button-icon-start {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

/* ── Icon-only MudButton (no text, all screen sizes) ─────────── */
.pf-btn-icon-only {
    min-width: 36px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}
.pf-btn-icon-only .mud-button-icon-start {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* ── Virtual scroll sortable column header ────────────────────── */
.pf-th-sort {
    cursor: pointer;
    user-select: none;
}
.pf-th-sort:hover {
    color: var(--mud-palette-primary);
}

/* ── Programs expansion panel title ───────────────────────────── */
.pf-prog-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 4px;
    flex-wrap: wrap;
    min-width: 0;
}

.pf-prog-info {
    display: flex;
    align-items: center;
    gap: 4px 6px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.pf-prog-name {
    font-size: 0.925rem;
    font-weight: 500;
    flex-shrink: 1;
    min-width: 0;
}

.pf-prog-count {
    font-size: 0.75rem;
    color: var(--mud-palette-success);
    white-space: nowrap;
}

.pf-prog-actions {
    display: inline-flex;
    gap: 0;
    flex-shrink: 0;
}

/* ── Icon-only button clusters (table actions, form link, etc.) ── */
.pf-icon-cluster {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

/* ── Raw HTML editor (email shell template, etc.) ─────────────────── */
.pf-raw-html-editor {
    font-family: "Courier New", Courier, monospace;
    font-size: 0.82rem;
}

/* Force icon buttons inside table cells to be square with tight padding */
.mud-table td .mud-icon-button {
    padding: 4px !important;
    min-width: unset !important;
    width: 32px !important;
    height: 32px !important;
}

/* ── Tab header touch scrolling ───────────────────────────────── */
/* JS in site.js handles snap-to-tab after scroll settles */
.mud-tabs-scroll-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.mud-tabs-scroll-container::-webkit-scrollbar {
    display: none;
}

/* ── App bar title ─────────────────────────────────────────────── */
.pf-app-title {
    white-space: pre-wrap;
    overflow: hidden;
    text-overflow: unset;
    flex-shrink: 1;
    min-width: 0;
}

/* ── Orders cancelled row tint ────────────────────────────────── */
.pf-row-cancelled {
    background-color: rgba(211, 47, 47, 0.05) !important;
}

/* ── Orders filter bar ─────────────────────────────────────────── */
.pf-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: center;
}

.pf-filter-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
}

@media (max-width: 600px) {
    /* Tighter page card on phones */
    .pf-page-card {
        padding: 0.75rem 0.75rem;
        margin-bottom: 1rem;
    }

    /* Shrink app title font so it fits beside icon + account button */
    .pf-app-title {
        font-size: 1rem !important;
    }

    /* Keep icon button groups on a single line inside table action cells */
    .mud-table-cell > span {
        display: inline-flex;
    }

    /* Reduce input field min-width so they don't force overflow */
    .mud-input-control {
        min-width: 0;
    }

    /* Order form submit button: full width on phone */
    .pf-submit-btn {
        width: 100%;
    }

    /* Filter chip groups can each wrap to the next line as a unit */
    .pf-filter-bar {
        gap: 4px 8px;
    }
}

/* ── Drawer navigation padding ─────────────────────────────────────────────── */
/* On iOS Safari the temporary drawer's content wrapper resets padding more
   aggressively than Chrome does. Target every likely ancestor/variant so at
   least one rule wins regardless of how MudBlazor nests the elements at runtime. */
.mud-drawer          .mud-nav-link,
.mud-drawer-content  .mud-nav-link,
.mud-drawer-container .mud-nav-link { padding-left: 16px !important; }

/* Belt-and-suspenders: push the icon and text children left directly,
   in case the <a> padding is still being zeroed on Safari. */
.mud-drawer .mud-nav-link-icon-wrapper { padding-left: 0 !important; margin-left: 0 !important; }
.mud-drawer .mud-nav-link-text         { padding-left: 0 !important; }

/* Negative inventory rows — force white text on all cells and their descendants.
   Needs specificity above 0,4,0 to beat the pf-archived rule that uses !important at the same level. */
.pf-page-card .mud-table-body tr.pf-inventory-negative td.mud-table-cell,
.pf-page-card .mud-table-body tr.pf-inventory-negative td.mud-table-cell * {
    color: white !important;
    font-weight: bold !important;
}

/* Notification badge — pull tight to the bell icon corner */
.pf-notification-badge {
    top: 4px !important;
    left: 22px !important;
}

/* ── Floating admin speed-dial (Clients page) ─────────────────────────
   Bottom-left corner control that replaces the old bottom-centered pill
   (which overlapped the centered pager). A single FAB toggles a stacked,
   upward-springing column of labelled group buttons whose menus open to
   the right of the rail. Pinned to the left gutter so it clears the pager. */
.pf-admin-speeddial {
    position:       fixed;
    left:           24px;
    bottom:         24px;
    z-index:        1200;
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            10px;
    /* Slide in step with the drawer's open/close animation (see drawer-state rule below). */
    transition:     left 225ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Action column: collapsed by default (hidden + lifted), springs up when open. */
.pf-admin-speeddial-actions {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            8px;
    opacity:        0;
    visibility:     hidden;
    transform:      translateY(12px) scale(0.96);
    transform-origin: bottom left;
    transition:     opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    pointer-events: none;
}
.pf-admin-speeddial-open .pf-admin-speeddial-actions {
    opacity:        1;
    visibility:     visible;
    transform:      none;
    pointer-events: auto;
}

/* Each group button: pill-shaped, elevated, full label on the rail. */
.pf-admin-speeddial-btn {
    border-radius: 22px !important;
    box-shadow:    0 2px 10px rgba(0,0,0,0.16), 0 1px 3px rgba(0,0,0,0.10) !important;
    text-transform: none !important;
    min-width:     132px;
    justify-content: flex-start !important;
    background:    rgba(255,255,255,0.98) !important;
    backdrop-filter: blur(8px);
}
.pf-admin-speeddial-btn-text {
    display: inline;
}

/* The toggle FAB itself — gentle rotate on the icon when opening. */
.pf-admin-speeddial-fab {
    box-shadow: 0 4px 16px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.12) !important;
}

/* Compact: drop the group labels to icon-only buttons on narrow viewports. */
@media (max-width: 680px) {
    .pf-admin-speeddial {
        left:   16px;
        bottom: 16px;
    }
    .pf-admin-speeddial-btn {
        min-width: 0;
    }
    .pf-admin-speeddial-btn-text {
        display: none;
    }
    .pf-admin-speeddial-btn .mud-button-icon-start {
        margin-right: 0 !important;
    }
}

/* Desktop: the responsive nav drawer (md+) docks open on the left and pushes the page
   content right. The speed-dial is position:fixed, so it can't inherit that shift — drive
   its offset from the drawer's open/close state class on the MudLayout root so it slides
   WITH the drawer. When the drawer is closed it returns to the base left gutter (no offset),
   instead of staying stranded in the middle. Uses MudBlazor's own --mud-drawer-width-left
   so it always matches the actual drawer width, and transitions to match the drawer's slide. */
.mud-drawer-open-responsive-md-left .pf-admin-speeddial {
    left: calc(var(--mud-drawer-width-left, 270px) + 24px);
}

/* ── Popularity score flyout (MudMenu popover) ──────────────────────── */
/* In MudBlazor 8 the popover renders as a single element that carries
   mud-popover, mud-paper, mud-elevation-X AND the PopoverClass all at once
   (not as parent/child). Use a combined selector, not a descendant selector. */
/* Species selector dropdown on the public order form — fully opaque white.
   Target every class combination MudBlazor 8 may apply to the popover element. */
.pf-species-popover,
.mud-popover.pf-species-popover,
.mud-paper.pf-species-popover {
    background:       #ffffff !important;
    background-color: #ffffff !important;
    opacity:          1       !important;
    /* override any MudBlazor palette CSS variables used for paper/surface colour */
    --mud-palette-surface:    #ffffff;
    --mud-palette-background: #ffffff;
}
.pf-species-popover .mud-list,
.pf-species-popover .mud-select-popover {
    background:       #ffffff !important;
    background-color: #ffffff !important;
}

.mud-popover.pf-score-flyout {
    border-radius:    16px !important;
    background-color: #ffffff !important;
    opacity:          1     !important;
    box-shadow:       0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08) !important;
    overflow:         hidden !important;   /* clips child content to rounded corners */
}

/* Inventory mobile ⋮ overflow menu: MudBlazor anchors the popover at the button's
   bottom-right, which can run past the viewport edge on narrow screens. Nudge it left
   and cap its width so the menu stays fully on-screen. */
@media (max-width: 959.98px) {
    .mud-popover.pf-inv-overflow-popover {
        max-width:  calc(100vw - 24px) !important;
        transform:  translateX(-12px) !important;
    }
    /* Pull the ⋮ button ~10px left so it reads as more centered in its gutter. Uses a
       transform so only the painted button shifts — the flex row layout is unaffected. */
    .pf-inv-overflow-btn {
        transform: translateX(-10px);
    }
}

/* Form Link column: visible on desktop, hidden on mobile */
.pf-col-formlink {
    display: table-cell !important;
}

@media (max-width: 599.98px) {
    .pf-col-formlink {
        display: none !important;
    }
}

/* ── Print ──────────────────────────────────────────────────────────────────── */
@media print {
    .mud-appbar,
    .mud-drawer,
    .mud-snackbar-location-container,
    .pf-no-print { display: none !important; }
    .mud-main-content { margin-left: 0 !important; }
    .mud-paper { box-shadow: none !important; border: 1px solid #ddd !important; }
}

/* ====================================================================
   Dashboard — Card-Based Layout
   ==================================================================== */

/* ── Base card: hover lift ─────────────────────────────────────────── */
.pf-dash-card {
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.pf-dash-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.13) !important;
    transform: translateY(-2px);
}

/* ── Card header: title left, controls right ───────────────────────── */
.pf-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
}

/* ── Order Trends: neutral segmented control (Day/Week/Month) ─────── */
/* Lighter, gray treatment so the grouping selector reads as a secondary
   axis control while the blue Orders/Trees/Cumulative group draws the eye
   as the primary metric selector. */
.pf-seg-neutral .mud-button-outlined {
    border-color: rgba(0, 0, 0, 0.18);
    color: var(--mud-palette-text-secondary);
}
.pf-seg-neutral .mud-button-filled-default {
    background-color: rgba(0, 0, 0, 0.11);
    color: var(--mud-palette-text-primary);
    box-shadow: none;
}
.pf-seg-neutral .mud-button-filled-default:hover {
    background-color: rgba(0, 0, 0, 0.17);
    box-shadow: none;
}

/* ── KPI entrance animation ────────────────────────────────────────── */
@keyframes pf-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── KPI value live-update animation ───────────────────────────────── */
/* Fires whenever the element is created (initial load) or recreated    */
/* by Blazor's @key directive when the displayed number changes.         */
@keyframes pf-value-pop {
    0%   { opacity: 0.35; transform: scale(0.96) translateY(-2px); }
    100% { opacity: 1;    transform: scale(1)    translateY(0); }
}

/* ── KPI card ──────────────────────────────────────────────────────── */
.pf-kpi-card {
    background-color: rgba(255,255,255,0.92);
    border-radius: 8px;
    border-left: 4px solid var(--kpi-border, #2196F3);
    padding: 14px 16px 13px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    animation: pf-fade-up 0.35s ease both;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.pf-kpi-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.13);
    transform: translateY(-2px);
}

.pf-kpi-icon { margin-bottom: 2px; }

.pf-kpi-value {
    display: inline-block;   /* required for transform to work on span */
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--mud-palette-text-primary);
    animation: pf-value-pop 0.28s ease both;
}

.pf-kpi-label {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
}

.pf-kpi-subtitle {
    font-size: 0.70rem;
    color: var(--mud-palette-text-disabled);
    margin-top: 0;
    white-space: nowrap;
}

/* ── Delta badges ──────────────────────────────────────────────────── */
/* Shared base — use .pf-delta alone or combined with a variant */
.pf-delta,
.pf-delta-up,
.pf-delta-down {
    font-size: 0.74rem;
    font-weight: 600;
    border-radius: 4px;
    padding: 1px 5px;
    display: inline-block;
    width: fit-content;
}

.pf-delta-up {
    color: #2e7d32;
    background: rgba(46,125,50,0.10);
}

.pf-delta-down {
    color: #c62828;
    background: rgba(198,40,40,0.10);
}

/* ── Inline spark/progress bar ─────────────────────────────────────── */
.pf-spark-bar-track {
    height: 6px;
    background: rgba(0,0,0,0.08);
    border-radius: 3px;
    overflow: hidden;
    min-width: 60px;
}

.pf-spark-bar-fill {
    height: 100%;
    background: #4CAF50;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.pf-spark-bar-fill.pf-spark-bar-neg {
    background: #c62828;
}

/* ── Mobile KPI adjustments ────────────────────────────────────────── */
@media (max-width: 600px) {
    .pf-kpi-value  { font-size: 1.4rem; }
    .pf-kpi-card   { padding: 12px 14px 11px; }
    .pf-kpi-label  { font-size: 0.72rem; }
    .pf-chip-value { font-size: 1.25rem; }
    .pf-chip-label { font-size: 0.68rem; }
    .pf-kpi-chip   { min-width: 88px; padding: 9px 11px 8px; }
    /* Prevent text-selection on tap for KPI cards and chips */
    .pf-kpi-card, .pf-kpi-chip {
        -webkit-user-select: none;
        user-select: none;
    }
}
/* ── KPI Tier 1 — primary cards ────────────────────────────────────── */

/* Grid row: stretch so all 4 cards fill the tallest one's height */
.pf-kpi-grid.mud-grid { align-items: stretch !important; }
.pf-kpi-grid .mud-grid-item { display: flex; flex-direction: column; }

.pf-kpi-primary {
    min-height: 150px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
}

/* SVG sparkline strip */
.pf-kpi-sparksvg {
    display: block;
    width: 100%;
    height: 36px;
    overflow: visible;
}

/* Status breakdown bar (3-segment: submitted / pending / cancelled) */
.pf-kpi-status-bar {
    display: flex;
    height: 5px;
    border-radius: 3px;
    overflow: hidden;
    gap: 1px;
    margin-top: 4px;
}
.pf-kpi-status-bar > span {
    border-radius: 3px;
}

/* Legend row below the status bar */
.pf-kpi-status-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
}
.pf-kpi-status-legend > span {
    display: flex;
    align-items: center;
    gap: 3px;
}
.pf-kpi-status-legend > span::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--legend-color, #ccc);
    flex-shrink: 0;
}

/* Small pill badge (avg trees/client, zero-order warnings) */
.pf-kpi-badge-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.70rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

/* Trees KPI card-face alert list — cap at ~3 rows (0.74rem × 1.55 line-height)
   then scroll, so the depletion list never expands the KPI card height. */
.pf-kpi-trees-alert {
    max-height: calc(0.74rem * 1.55 * 3);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.15) transparent;
}
.pf-kpi-trees-alert::-webkit-scrollbar { width: 4px; }
.pf-kpi-trees-alert::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; }

/* ── KPI Tier 2 — metric chips ──────────────────────────────────────── */
.pf-kpi-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pf-kpi-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 11px 14px 10px;
    border-radius: 8px;
    border-top: 3px solid var(--chip-accent, #bbb);
    background: rgba(255,255,255,0.88);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    text-decoration: none;
    color: inherit;
    min-width: 100px;
    flex: 1 1 100px;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    -webkit-user-select: none;
    user-select: none;
}
.pf-kpi-chip:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.14);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}

.pf-chip-value {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
}

.pf-chip-label {
    font-size: 0.70rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
    margin-top: 3px;
    line-height: 1.3;
}

/* Visual sequence of the tier-2 chips, set with `order` so the markup keeps its original source
   order. This pairs related metrics on a row (with the 2-column grid below): Oak Mix · then
   Avg Trees/Order + Avg Email Score · then Delivery + Fencing · then Unlinked/Merge · Season
   Progress. The two double-wide chips (Oak, Unlinked/Merge) start their own row, so each single
   pair shares the row between them. */
.pf-chip-oak      { order: 0; }
.pf-chip-avgtrees { order: 1; }
.pf-chip-score    { order: 2; }
.pf-chip-delivery { order: 3; }
.pf-chip-fencing  { order: 4; }
.pf-chip-dq       { order: 5; }
.pf-chip-prog     { order: 6; }

/* Medium screens: a fixed 2-column grid so the ordered pairs above each land on one row. (auto-fill
   would pick 3–4 columns by width and break the pairings — Avg Trees/Order and Avg Email Score would
   no longer sit together.) The two double-wide chips span both columns; with the order above, every
   row fills exactly with no holes. */
@media (min-width: 601px) and (max-width: 959px) {
    .pf-kpi-chips {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .pf-kpi-chip.pf-chip-oak,
    .pf-kpi-chip.pf-chip-dq {
        grid-column: span 2;
    }
}

@media (max-width: 600px) {
    .pf-kpi-chip  { min-width: 80px; padding: 6px 10px; }
    .pf-chip-value { font-size: 1.1rem; }
    .pf-kpi-chips { gap: 6px; }
    /* Two of the chips can't share a phone-width row without their content colliding: the Oak Mix
       chip (donut sits beside the stat) and the data-quality chip (two metric columns). Give them
       the full row so neither squishes. */
    .pf-kpi-chip.pf-chip-oak,
    .pf-kpi-chip.pf-chip-dq {
        flex-basis: 100%;
    }
}

/* The Oak Mix chip (donut beside the stat) and the data-quality chip (Unlinked | Merge, two
   metrics side by side) both clip if forced into a single-chip width. On large/flex screens give
   each two chips' worth of basis so they grow wider than their single-stat neighbours. The 601–959px
   grid mode and mobile handle the same two chips via grid-column:span 2 / flex-basis:100% above. */
@media (min-width: 960px) {
    .pf-kpi-chip.pf-chip-dq {
        min-width: 190px;
        flex: 2 1 190px;
    }
    .pf-kpi-chip.pf-chip-oak {
        min-width: 230px;
        flex: 2 1 230px;
    }
}

/* Non-navigating chip (stat display only) */
.pf-kpi-chip.pf-chip-static {
    cursor: default;
}
.pf-kpi-chip.pf-chip-static:hover {
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    transform: none;
}
.pf-kpi-chip.pf-chip-popup {
    cursor: pointer;
    position: relative;
}
/* When the flyout is open the drop panel extends the chip's hover area downward over
   the chart. Disabling the translateY prevents the animated hover lift from oscillating
   as the mouse moves through the flyout region. */
.pf-kpi-chip.pf-chip-popup:has(.pf-kpi-drop):hover {
    transform: none;
}
/* On mobile the drop becomes position:fixed, which uses the nearest transformed
   ancestor as its containing block. If the chip has transform:translateY(-2px) active
   (from a touch-triggered hover) the drop anchors to the chip instead of the viewport,
   producing a brief "dropdown flash" before snapping to the bottom sheet. Killing the
   transform and its transition the instant the drop renders prevents this entirely. */
@media (max-width: 959px) {
    .pf-kpi-chip.pf-chip-popup:has(.pf-kpi-drop) {
        transform: none;
        transition: none;
    }
}

/* Oak donut popup */
.pf-oak-popup {
    position: fixed;
    bottom: 80px;
    left: 16px;
    z-index: 500;
    background: rgba(255,255,255,0.98);
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.16);
    padding: 12px 16px;
    min-width: 180px;
    white-space: nowrap;
}
.pf-oak-popup-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    margin-top: 6px;
}
.pf-oak-popup-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}

/* ── Org Type breakdown cards ───────────────────────────────────────── */
.pf-orgtype-card {
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    background: rgba(255,255,255,0.95);
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    height: 100%;
    position: relative;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.pf-orgtype-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.13);
    transform: translateY(-2px);
}

.pf-orgtype-overlay {
    position: absolute;
    top: calc(100% + 8px);
    /* left/right set by inline style based on card index */
    min-width: 320px;
    max-width: min(1100px, calc(var(--vw, 1vw) * 92));
    max-height: calc(var(--vh, 1vh) * 72);
    overflow-y: auto;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10);
    padding: 14px 16px;
    z-index: 300;
    animation: pf-fade-up 0.18s ease both;
}

/* Enrollment sub-cards inside the overlay */
.pf-enr-subcards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pf-enr-subcard {
    background: rgba(246,248,250,0.9);
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 8px;
    padding: 10px 12px;
    min-width: 240px;
    flex: 1 1 240px;
    max-width: calc(50% - 5px);
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .pf-enr-subcard { min-width: 0; max-width: 100%; flex: 1 1 100%; }
}

/* KPI card flyout overlay — used by Clients, Oak %, Avg Trees/Order cards */
.pf-kpi-overlay {
    position: absolute;
    top: calc(100% + 6px);
    min-width: 300px;
    max-width: min(1100px, calc(var(--vw, 1vw) * 92));
    max-height: calc(var(--vh, 1vh) * 75);
    overflow-y: auto;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10);
    padding: 14px 16px;
    box-sizing: border-box;
    z-index: 400;
    animation: pf-fade-up 0.18s ease both;
}

/* ── KPI deck inner panel (Trees / Clients / Enrollments) ─────────── */
/* box-sizing keeps the inline padding (14px 16px) inside the panel width.
   Without it, the small-mode `width: 100%` override below adds 32px of
   horizontal (and the footer 28px of vertical) padding on top of the full
   width, pushing the deck card past the bottom-sheet's right/bottom edges. */
.pf-kpi-deck-panel {
    width: min(420px, calc(100vw - 32px));
    box-sizing: border-box;
}

/* ── Scrollable list inside KPI deck panels ──────────────────────── */
/* max-height caps the list directly — no flex height-chain needed.
   The panel and wrap are plain block containers; the list itself scrolls. */
.pf-kpi-scroll-list {
    max-height: min(calc(100dvh - 300px), 450px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 10px;
    padding-bottom: 20px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.15) transparent;
}
.pf-kpi-scroll-list::-webkit-scrollbar { width: 4px; }
.pf-kpi-scroll-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; }

/* ── Naked KPI drop — Orders / Trees (no backing card) ────────────── */
/* Positions the org-type list + enrollment deck as a flex row below the KPI card. */
.pf-kpi-drop {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 500;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: flex-start;
    animation: pf-fade-up 0.18s ease both;
    max-width: calc(100vw - 16px);
    overscroll-behavior: contain;
}

/* Right-anchored variant — deck opens to the LEFT of the org-type list (for center/right KPI cards) */
.pf-kpi-drop.pf-drop-right {
    left: auto;
    right: 0;
    flex-direction: row-reverse;
}

/* ── Slide-open utility (CSS grid trick: 0fr → 1fr, no JS needed) ─── */
/* Wrap toggle content in:  <div class="pf-slide [pf-slide-open]"><div>…</div></div>
   The inner div gets overflow:hidden so it clips at 0fr during the transition.
   Do NOT put overflow-y:auto directly on the inner div — add it on a grandchild.  */
.pf-slide {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.pf-slide.pf-slide-open {
    grid-template-rows: 1fr;
}
.pf-slide > * {
    overflow: hidden;
    min-height: 0;
}

/* ── Deck panel title header (shared by all 4 KPI drop panels) ───────── */
.pf-kpi-deck-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--mud-palette-text-secondary);
    padding-bottom: 9px;
    margin-bottom: 10px;
    border-bottom: 2px solid color-mix(in srgb, var(--deck-accent, #9e9e9e) 20%, transparent);
}

/* Accordion has no side padding of its own — give the header some breathing room */
.pf-orgtype-accordion .pf-kpi-deck-header {
    padding-left: 14px;
    padding-top: 12px;
}

/* ── Orders KPI org-type accordion ──────────────────────────────────── */
.pf-orgtype-accordion {
    background: rgba(255,255,255,0.97);
    border-radius: 12px;
    box-shadow: 0 6px 28px rgba(0,0,0,0.15), 0 1px 6px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.06);
    width: 430px;
    max-width: calc(100vw - 16px);
    max-height: min(calc(100dvh - 160px), 600px);
    overflow-y: hidden;  /* desktop: slide scrolls; mobile override below sets auto */
    overflow-x: hidden;
    overscroll-behavior: contain;
    animation: pf-fade-up 0.18s ease both;
}

/* Desktop: cap the expanded slide content and scroll it rather than the accordion panel.
   dvh = dynamic viewport height (accounts for browser chrome changes; ≈ vh on desktop).
   760px ≈ app-bar + page chrome + KPI card row + drop offset + accordion header rows. */
@media (min-width: 960px) {
    .pf-orgtype-accordion .pf-slide.pf-slide-open > * {
        max-height: calc(100dvh - 760px);
        overflow-y: auto;
    }
}

.pf-orgtype-row {
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.pf-orgtype-row:last-child {
    border-bottom: none;
}

.pf-orgtype-row-hdr {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.12s ease;
    user-select: none;
}

.pf-orgtype-row-hdr:hover {
    background: rgba(0,0,0,0.025);
}

.pf-orgtype-row-open > .pf-orgtype-row-hdr {
    background: rgba(0,0,0,0.02);
}

/* ── Scroll-fade wrapper — shows bottom gradient hint when list overflows ── */
/* Scrolling is set per-context: deck panels use flex-grow, accordion uses its own overflow. */
.pf-deck-scroll-wrap {
    position: relative;
}
.pf-deck-scroll-wrap::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 44px;
    background: linear-gradient(transparent 0%, rgba(255,255,255,0.7) 40%, white 85%);
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.2s ease;
}
/* Hide the fade once the user has scrolled to the bottom */
.pf-deck-scroll-wrap.pf-at-bottom::after {
    opacity: 0;
}
/* Accordion variant: the accordion itself scrolls; the wrap is a transparent pass-through. */
.pf-orgtype-accordion .pf-deck-scroll-wrap {
    overflow-y: visible;
    height: auto;
}
/* Accordion variant: slightly transparent white background */
.pf-orgtype-accordion .pf-deck-scroll-wrap::after {
    background: linear-gradient(transparent 0%, rgba(255,255,255,0.65) 40%, rgba(255,255,255,0.97) 85%);
}

/* Archived season: the deck/accordion surfaces are muted warm grey (see .pf-dash-archived
   rules above), so the scroll-fade must blend into that grey instead of white. */
.pf-dash-archived .pf-deck-scroll-wrap::after {
    background: linear-gradient(transparent 0%, rgba(218,218,214,0.7) 40%, rgb(218,218,214) 85%);
}
.pf-dash-archived .pf-orgtype-accordion .pf-deck-scroll-wrap::after {
    background: linear-gradient(transparent 0%, rgba(218,218,214,0.65) 40%, rgba(218,218,214,0.97) 85%);
}

.pf-orgtype-enr-list {
    max-height: 270px;
    overflow-y: auto;
    border-top: 1px solid rgba(0,0,0,0.05);
    padding: 4px 0 20px;   /* bottom pad keeps last item above the fade */
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.15) transparent;
}

.pf-orgtype-enr-list::-webkit-scrollbar { width: 4px; }
.pf-orgtype-enr-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; }

/* Suppress the enr-list's own scroll inside the accordion — the accordion scrolls as a unit,
   preventing a double scrollbar on any screen size. */
.pf-orgtype-accordion .pf-orgtype-enr-list {
    max-height: none;
    overflow-y: visible;
}

.pf-orgtype-enr-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 8px 14px;
    transition: background 0.1s ease;
}

.pf-orgtype-enr-item:hover {
    background: rgba(0,0,0,0.025);
}

/* ── Enrollment deck panel (right column) ─────────────────────────── */
.pf-enr-deck-panel {
    background: rgba(255,255,255,0.97);
    border-radius: 12px;
    box-shadow: 0 6px 28px rgba(0,0,0,0.15), 0 1px 6px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.06);
    width: 520px;
    max-width: calc(100vw - 196px); /* viewport − org list min-width − gap − margins */
    overflow: hidden;
    animation: pf-fade-up 0.18s ease both;
}

.pf-enr-deck-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px 8px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    gap: 8px;
    min-width: 0;
}

/* Viewport clips the off-page slides horizontally; height = slide content height */
.pf-enr-deck-viewport {
    overflow: hidden;
}

.pf-enr-deck-track {
    display: flex;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* Each slide: 2-column grid of enrollment sub-cards */
.pf-enr-deck-slide {
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px 12px;
    align-content: start;
    align-items: start;       /* sub-cards only as tall as their content */
    box-sizing: border-box;
}

/* Sub-cards inside the grid slide: full-column, no flex sizing */
.pf-enr-deck-slide .pf-enr-subcard {
    min-width: 0;
    max-width: none;
    flex: none;
    width: 100%;
}

/* Single-item detail panels (client / enrollment / inventory KPI deck) */
.pf-enr-deck-panel--single {
    width: 300px;
}

/* Orders-enrollment detail deck — slightly wider to accommodate client name + date on one line */
.pf-enr-deck-panel--orders {
    width: 340px;
}

.pf-enr-deck-panel--single .pf-enr-deck-slide {
    grid-template-columns: 1fr;
}

/* Species / detail row hover inside deck subcards */
.pf-enr-detail-row {
    border-radius: 3px;
    transition: background 0.1s;
}

.pf-enr-detail-row:hover {
    background: rgba(0,0,0,0.04);
}

/* Scroll-list row hover in KPI flyout panels */
.pf-kpi-list-row {
    border-radius: 4px;
    transition: background 0.1s;
}

.pf-kpi-list-row:hover {
    background: rgba(0,0,0,0.04);
}

/* ── Mobile / tablet (< MudBlazor md breakpoint): KPI drop = bottom sheet ── */
/* On narrow screens the absolute-positioned drop can't fit beside the narrow
   KPI card, so we switch to a viewport-anchored bottom sheet instead.         */

@keyframes pf-slide-up-sheet {
    from { transform: translateY(100%); opacity: 0.6; }
    to   { transform: translateY(0);    opacity: 1; }
}

@media (max-width: 959px) {
    /* Prevent text-selection on tap across all KPI interactive surfaces */
    .pf-kpi-card, .pf-kpi-chip,
    .pf-kpi-drop, .pf-kpi-overlay,
    .pf-orgtype-accordion {
        -webkit-user-select: none;
        user-select: none;
    }

    /* Backdrop already defined globally — no duplicate needed here */

    /* Override absolute positioning — become a fixed bottom sheet */
    .pf-kpi-drop,
    .pf-kpi-drop.pf-drop-right,
    .pf-kpi-overlay {
        position: fixed;
        bottom: 0;
        left: 0 !important;
        right: 0 !important;
        top: auto;
        z-index: 500;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        max-height: calc(var(--vh, 1vh) * 85);
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        border-radius: 20px 20px 0 0;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.22);
        padding: 20px 16px 32px;
        gap: 12px;
        animation: pf-slide-up-sheet 0.28s cubic-bezier(0.32, 0.72, 0, 1) both;
    }

    /* Drag-handle pill */
    .pf-kpi-drop::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: rgba(0, 0, 0, 0.18);
        border-radius: 2px;
        margin: -8px auto 6px;
        flex-shrink: 0;
    }

    /* Org-type accordion: full width inside the bottom sheet; scrolls within the sheet */
    .pf-orgtype-accordion {
        width: 100%;
        max-width: 100%;
        max-height: calc(100vh - 200px);
        overflow-y: auto;
        overflow-x: visible;
        border-radius: 10px;
    }

    /* Cap expanded accordion rows so the list + context both fit in the sheet. */
    .pf-orgtype-accordion .pf-slide.pf-slide-open {
        max-height: calc(100dvh - 673px);
        overflow-y: hidden;
    }

    /* Deck panels: full width inside the bottom sheet. */
    .pf-kpi-deck-panel {
        width: 100%;
    }

    /* Keep the list as the scroll container on mobile too, so the deck header stays
       fixed above it. max-height is sized to fit inside the bottom sheet:
       84vh sheet cap minus ~200px for padding (52) + drag handle (20) +
       deck panel header (42) + panel padding (28) + footer (35) + breathing room. */
    .pf-kpi-drop .pf-kpi-scroll-list {
        max-height: calc(var(--vh, 1vh) * 72 - 388px);
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 0;
    }
    .pf-orgtype-enr-list {
        max-height: none;
        overflow-y: visible;
    }

    .pf-orgtype-row-hdr {
        gap: 5px;
        padding: 9px 12px;
    }

    /* Overlay (Oak% / Avg): reset inline-style positioning */
    .pf-kpi-overlay {
        right: 0 !important;
        left: 0 !important;
        min-width: 0;
        max-width: 100%;
        max-height: calc(var(--vh, 1vh) * 72);
        overflow-y: auto;
        padding: 20px 16px 32px;
    }

    /* Enrollment / client deck panel: full width */
    .pf-enr-deck-panel {
        width: 100%;
        max-width: none;
        border-radius: 12px;
        flex-shrink: 0;
    }

    /* When a detail deck is open, cap the list so both panels fit in the sheet */
    .pf-kpi-drop:has(.pf-enr-deck-panel) .pf-kpi-deck-panel {
        max-height: 39vh;
        overflow: hidden;
    }

    .pf-kpi-drop:has(.pf-enr-deck-panel) .pf-kpi-deck-panel .pf-kpi-scroll-list {
        max-height: calc(38vh - 80px);
    }

    /* Orders deck open: cap accordion to half the drop height. */
    .pf-kpi-drop:has(.pf-enr-deck-panel--orders) .pf-orgtype-accordion {
        max-height: calc(var(--vh, 1vh) * 42.5 - 39px);
    }

    /* Clip accordion scroll only when an org-type row is expanded with an enrollment selected. */
    .pf-kpi-drop:has(.pf-enr-deck-panel--orders) .pf-orgtype-accordion:has(.pf-orgtype-row-open) {
        overflow-y: hidden;
    }
    .pf-kpi-drop:has(.pf-enr-deck-panel--orders) .pf-enr-deck-panel--orders {
        max-height: calc(var(--vh, 1vh) * 42.5 - 24px);
        overflow: hidden;
    }

    /* 2 columns on tablet */
    .pf-enr-deck-slide {
        grid-template-columns: 1fr 1fr;
    }
}

/* Medium (tablet) bottom sheets: taller decks than the phone defaults above —
   the sheet may grow to 90% of the viewport and the inner scroll areas are
   capped far less aggressively, so KPI deck lists show more rows at once. */
@media (min-width: 600px) and (max-width: 959px) {
    .pf-kpi-drop,
    .pf-kpi-drop.pf-drop-right,
    .pf-kpi-overlay {
        max-height: calc(var(--vh, 1vh) * 90);
    }
    .pf-kpi-drop .pf-kpi-scroll-list {
        max-height: calc(var(--vh, 1vh) * 90 - 280px);
    }
    .pf-orgtype-accordion .pf-slide.pf-slide-open {
        max-height: calc(var(--vh, 1vh) * 90 - 430px);
    }
    .pf-kpi-drop:has(.pf-enr-deck-panel) .pf-kpi-deck-panel {
        max-height: 48vh;
    }
    .pf-kpi-drop:has(.pf-enr-deck-panel) .pf-kpi-deck-panel .pf-kpi-scroll-list {
        max-height: calc(47vh - 80px);
    }
    .pf-kpi-drop:has(.pf-enr-deck-panel--orders) .pf-orgtype-accordion {
        max-height: calc(var(--vh, 1vh) * 50 - 39px);
    }
    .pf-kpi-drop:has(.pf-enr-deck-panel--orders) .pf-enr-deck-panel--orders {
        max-height: calc(var(--vh, 1vh) * 50 - 24px);
    }
}

/* Single column on phone */
@media (max-width: 599px) {
    .pf-enr-deck-slide {
        grid-template-columns: 1fr;
    }
}

/* ── Inventory sparkline CSS-hover tooltip ───────────────────────────────────
   Pure CSS approach: tooltip content is rendered in the DOM but hidden until
   the host is hovered. No JS hover events → no flicker possible.           */
.pf-spark-host {
    position: relative;
    flex: 1;
    min-width: 0;
}
.pf-spark-htip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(33,33,33,0.95);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    font-size: 0.78rem;
    line-height: 1.7;
}
.pf-spark-htip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(33,33,33,0.95);
}
.pf-spark-host:hover .pf-spark-htip {
    display: block;
}

/* ── GrapesJS host container ──────────────────────────────────────── */
/* Ensure the editor fills its host div and doesn't overflow the dialog */
.pf-grapes-host {
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 4px;
    overflow: hidden;
}
.pf-grapes-host .gjs-editor {
    height: 100% !important;
}
/* Keep GrapesJS floating panels (color picker, etc.) inside the dialog */
.pf-grapes-host .gjs-pn-panel,
.pf-grapes-host .gjs-toolbar {
    z-index: 10 !important;
}
/* Slightly tighter block-manager labels */
.pf-grapes-host .gjs-block__media svg {
    width: 28px;
    height: 28px;
}

/* ── Email template shell editor ──────────────────────────────────── */
.pf-raw-html-editor textarea {
    font-family: "Consolas", "Cascadia Code", "Fira Mono", monospace !important;
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
}

/* ── Email template edit dialog — allow Quill link tooltip to overflow ─
   mud-paper clips overflow to achieve rounded corners, which clips the
   absolutely-positioned Quill link-edit flyout. Override just this dialog. */
.pf-template-edit-dialog.mud-dialog,
.pf-template-edit-dialog .mud-dialog-content {
    overflow: visible !important;
}

/* ====================================================================
   End Dashboard Card Layout
   ==================================================================== */

/* ====================================================================
   Client Card List  (mobile Clients page)
   ==================================================================== */

/* Mobile column-filter row above the cards */
.pf-mobile-col-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.pf-mobile-col-filters > * { flex: 1 1 140px; min-width: 0; }

/* Card container */
.pf-client-card-list { display: flex; flex-direction: column; }

/* Individual client card */
.pf-client-card {
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.15s;
}
.pf-client-card.pf-client-card-open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
    margin-bottom: 0;
}
.pf-client-card:active { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }

.pf-client-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}
.pf-client-card-name { font-weight: 600; font-size: 0.95rem; line-height: 1.3; flex: 1; min-width: 0; }
.pf-client-card-org {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}
.pf-client-card-contact { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.pf-client-card-contact-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    word-break: break-all;
}
.pf-client-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}
.pf-client-card-actions { display: flex; justify-content: flex-end; margin-top: 4px; }

/* Expanded detail panel below a card */
.pf-client-card-detail {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    overflow-x: auto;
}

/* Mobile pagination row */
.pf-client-card-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 8px;
}

/* ====================================================================
   End Client Card List
   ==================================================================== */

/* ====================================================================
   Order History Cards  (inside ClientDetailPanel — both mobile & desktop)
   ==================================================================== */

/* Season group */
.pf-season-group { margin-bottom: 12px; }
.pf-season-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 2px;
    cursor: pointer;
    user-select: none;
    border-bottom: 2px solid rgba(0, 0, 0, 0.07);
    margin-bottom: 7px;
}
.pf-season-header:hover { opacity: 0.8; }
.pf-season-name {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-primary);
    opacity: 0.65;
}
.pf-season-summary {
    font-size: 0.73rem;
    color: var(--mud-palette-text-secondary);
}

/* Order card stack */
.pf-season-orders { display: flex; flex-direction: column; gap: 5px; }

/* Individual order card */
.pf-order-card {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    background: white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.pf-order-card.pf-order-card-open {
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.pf-order-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    cursor: pointer;
    transition: background 0.12s;
}
.pf-order-card-header:hover { background: rgba(0, 0, 0, 0.025); }
.pf-order-card-title { flex: 1 1 auto; min-width: 0; }
.pf-order-card-org { font-size: 0.85rem; font-weight: 500; line-height: 1.3; }
.pf-order-card-meta {
    font-size: 0.74rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 1px;
    line-height: 1.4;
}
.pf-order-card-badges {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Expanded detail inside an order card */
.pf-order-card-detail {
    background: rgba(0, 0, 0, 0.025);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding: 10px 14px 12px;
}
.pf-order-detail-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin-bottom: 10px;
}
.pf-order-detail-field { display: flex; flex-direction: column; }
.pf-order-detail-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 1px;
}
.pf-order-detail-value { font-size: 0.82rem; line-height: 1.4; }

/* ── Client order history season accordion ──────────────────────────────── */
.pf-order-history-panels .mud-expand-panel {
    border: 1px solid var(--mud-palette-divider) !important;
    border-radius: 6px !important;
    margin-bottom: 6px !important;
    box-shadow: none !important;
}
.pf-order-history-panels .mud-expand-panel-header {
    padding: 8px 12px !important;
    min-height: 40px !important;
}
.pf-order-history-panels .mud-expand-panel-content {
    padding: 0 10px 8px !important;
}

/* Line-item chips */
.pf-line-items { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.pf-line-item-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 0.78rem;
    line-height: 1.3;
}
.pf-line-item-qty {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
}

/* ====================================================================
   End Order History Cards
   ==================================================================== */

/* ====================================================================
   Order Row Cards  (mobile Orders page)
   ==================================================================== */
.pf-order-row-card {
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.15s;
}
.pf-order-row-card.pf-order-row-card-open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
    margin-bottom: 0;
}
.pf-order-row-card:active { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }

.pf-order-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.pf-order-row-id {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}
.pf-order-row-customer {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.9rem;
    margin-bottom: 2px;
}
.pf-order-row-date {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}
.pf-order-row-contact {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 6px;
    word-break: break-all;
}
.pf-order-row-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}
.pf-order-row-org {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    flex: 1 1 auto;
    min-width: 0;
}

/* Dimmed line-item chip variant */
.pf-line-item-chip-dimmed { opacity: 0.45; }

/* ====================================================================
   End Order Row Cards
   ==================================================================== */

/* ====================================================================
   Log Entry Cards  (mobile Logs page)
   ==================================================================== */
.pf-log-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.05);
    padding: 11px 14px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.pf-log-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.pf-log-card-time {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    flex: 1;
    white-space: nowrap;
}
.pf-log-card-type {
    font-family: monospace;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    word-break: break-all;
}
.pf-log-card-message {
    font-size: 0.85rem;
    line-height: 1.4;
    word-break: break-word;
}
.pf-log-card-sub {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    word-break: break-all;
}
.pf-log-card-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 2px;
}
/* ====================================================================
   End Log Entry Cards
   ==================================================================== */

/* ====================================================================
   Desktop card-row table  (.pf-card-table on the MudTable Class param)
   ==================================================================== */

/* ── Table chrome ───────────────────────────────────────────────────── */
.pf-card-table {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
/* Kill MudBlazor's default container shadow / border */
.pf-card-table .mud-table-container,
.pf-card-table .mud-paper {
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}
/* Row spacing via border-collapse:separate gives the card-table row gap */
.pf-card-table table {
    border-collapse: separate !important;
    border-spacing: 0 5px !important;
    background: transparent !important;
}
/* Column resize: th must not clip its absolutely-positioned .mud-resizer handle */
.pf-card-table .mud-table-head th,
.mud-data-grid .mud-table-head th {
    overflow: visible !important;
    position: relative;
}
/* MudBlazor 9.5 ships .mud-resizer without a height — it collapses to 0px and is unclickable.
   Fix: fill the full th height so the drag handle actually has a hit area. */
.mud-data-grid .mud-table-cell .mud-resizer {
    height: 100% !important;
}

/* Small mode: MudDataGrid switches .pf-card-table to its stacked "card" layout
   when Breakpoint="Breakpoint.Sm" (default, ≤960px). Long values — org names,
   the /order/<slug> link, inherited-date text — have no width cap and run past
   the card edge. Let each stacked cell wrap and break long values. */
@media (max-width: 959.98px) {
    /* Each stacked cell: allow the value to drop below the label and shrink. */
    .pf-card-table .mud-table-cell {
        flex-wrap: wrap;
        gap: 2px 12px;
        min-width: 0;
    }
    /* The label (::before) keeps its size; everything after it may shrink and wrap. */
    .pf-card-table .mud-table-cell > * {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    /* Inline spans set to nowrap (slug link, date range) must wrap in the narrow card. */
    .pf-card-table .mud-table-cell [style*="nowrap"] {
        white-space: normal !important;
    }
}

/* Medium mode: tables with Breakpoint="Breakpoint.Md" stack into cards at ≤1280px.
   ALL rules below are scoped to .mud-md-table so that Sm-breakpoint tables
   (Inventory, Orders, Clients, etc.) which remain in desktop layout at 960–1280px
   are completely unaffected. */
@media (max-width: 1279.98px) {
    /* Clip horizontal overflow in modal sections (Programs enrollment panels). */
    .pf-modal-section {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Same overflow/wrap fixes as Sm mode but scoped to Md-breakpoint tables only. */
    .pf-card-table.mud-md-table .mud-table-cell {
        flex-wrap: wrap;
        gap: 2px 12px;
        min-width: 0;
    }
    .pf-card-table.mud-md-table .mud-table-cell > * {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .pf-card-table.mud-md-table .mud-table-cell [style*="nowrap"] {
        white-space: normal !important;
    }

    /* ── mud-md-table card polish ───────────────────────────────────────
       Restyle the stacked rows to match PF's design language. */

    /* Top/bottom corner rounding for stacked layout (overrides desktop left/right) */
    .pf-card-table.mud-md-table .mud-table-body tr td:first-child {
        border-radius: 8px 8px 0 0 !important;
    }
    .pf-card-table.mud-md-table .mud-table-body tr td:last-child {
        border-radius: 0 0 8px 8px !important;
    }

    /* Thin divider between each field row inside a card */
    .pf-card-table.mud-md-table .mud-table-body tr td + td {
        border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
    }

    /* Comfortable padding per row */
    .pf-card-table.mud-md-table .mud-table-cell {
        padding: 8px 14px !important;
        align-items: center;
    }

    /* Label (::before): PF field-label style — tiny uppercase, muted, fixed-width column */
    .pf-card-table.mud-md-table .mud-table-cell::before {
        font-size:      0.63rem !important;
        font-weight:    700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.07em !important;
        color:          var(--mud-palette-text-secondary) !important;
        flex-shrink:    0;
        min-width:      110px;
        align-self:     center;
        padding-right:       12px !important;
        padding-inline-end:  12px !important;
    }

    /* Actions footer cell (last td, empty label): right-align buttons, faint tinted bg */
    .pf-card-table.mud-md-table .mud-table-body tr td:last-child {
        justify-content: flex-end !important;
        padding:    4px 10px !important;
        background: rgba(0, 0, 0, 0.018);
        border-top: 1px solid rgba(0, 0, 0, 0.07) !important;
    }
}

/* ── Header overline style ──────────────────────────────────────────── */
.pf-card-table .mud-table-head th {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding-bottom: 6px;
    background: transparent;
}

/* ── Body row card look ─────────────────────────────────────────────── */
.pf-card-table .mud-table-body tr {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.045);
    transition: box-shadow 0.15s, background 0.1s;
}
.pf-card-table .mud-table-body tr:hover {
    background: #fafbff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(0, 0, 0, 0.07);
}
/* First + last cell rounding */
.pf-card-table .mud-table-body tr td:first-child {
    border-radius: 8px 0 0 8px;
}
.pf-card-table .mud-table-body tr td:last-child {
    border-radius: 0 8px 8px 0;
}
/* Kill zebra striping and default hover from Dense/Striped/Hover params */
.pf-card-table .mud-table-body tr.mud-table-row-selected,
.pf-card-table .mud-table-body tr:nth-child(odd),
.pf-card-table .mud-table-body tr:nth-child(even) {
    background: #fff;
}
.pf-card-table .mud-table-body tr:nth-child(odd):hover,
.pf-card-table .mud-table-body tr:nth-child(even):hover {
    background: #fafbff;
}

/* ── Status accent — colored left border ───────────────────────────── */
.pf-card-table .pf-status-row-submitted td:first-child {
    border-left: 3px solid var(--mud-palette-success) !important;
    border-radius: 8px 0 0 8px;
}
.pf-card-table .pf-status-row-converted td:first-child {
    border-left: 3px solid var(--mud-palette-warning) !important;
    border-radius: 8px 0 0 8px;
}
.pf-card-table .pf-status-row-cancelled td:first-child {
    border-left: 3px solid var(--mud-palette-error) !important;
    border-radius: 8px 0 0 8px;
}
.pf-card-table .pf-status-row-cancelled {
    opacity: 0.62;
}

/* ── Column filter menu body (shared OrdersGrid per-column FilterTemplates) ──
   MudDataGrid renders each column's <FilterTemplate> inside a popover. Give the
   inputs a sensible minimum width so the multi-selects and date pickers aren't
   cramped, and add a little breathing room around the popover content. */
.pf-col-filter {
    min-width: 220px;
    padding: 8px;
}

/* ── PfFilterShell — structured filter popover (label + clear button) ──────── */
.pf-filter-shell {
    min-width: 220px;
    padding: 6px 8px 10px;
}

.pf-filter-shell-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    min-height: 20px;
}

.pf-filter-shell-label {
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mud-palette-text-secondary);
    line-height: 1;
}

.pf-filter-shell-clear.mud-button-text {
    min-width: 0 !important;
    padding: 0 4px !important;
    height: 18px !important;
    font-size: 0.66rem !important;
    line-height: 1 !important;
}

/* ── PfFilterOps — operator chip row inside PfFilterShell ────────────── */
.pf-filter-ops {
    display: flex;
    flex-wrap: nowrap;
    gap: 3px;
    margin-bottom: 4px;
}

.pf-filter-ops .mud-chip {
    height: 26px !important;
    min-height: 0 !important;
    padding: 0 9px !important;
    font-size: 0.82rem !important;
    font-family: var(--mud-typography-body2-family, monospace) !important;
    border-radius: 6px !important;
}

/* ── Active-filter indicator ──────────────────────────────────────────
   Header chip (driven by MudDataGrid.FilterDefinitions) plus an accent on
   the in-header column-options/filter button so the filtered column itself
   reads as "active". The chip is the primary, unambiguous signal. */
.pf-filter-active-chip {
    height: 26px !important;
    font-weight: 600;
    letter-spacing: 0.01em;
    animation: pf-filter-chip-in 0.18s ease-out;
}

@keyframes pf-filter-chip-in {
    from { opacity: 0; transform: translateY(-2px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}

/* Highlight the column header's options button while a filter is applied.
   MudBlazor 9.x marks the active filter affordance with .mud-active and/or
   renders a filled funnel; accent both so the cue survives minor markup shifts. */
.mud-data-grid .mud-table-head .mud-button-root.mud-active,
.mud-data-grid .mud-table-head .mud-icon-button.mud-active {
    color: var(--mud-palette-primary) !important;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.12) !important;
}
.mud-data-grid .mud-table-head .mud-button-root.mud-active .mud-icon-button-label,
.mud-data-grid .mud-table-head .mud-icon-button.mud-active .mud-icon-button-label {
    color: var(--mud-palette-primary) !important;
}

/* ── Tighten pager whitespace on fixed-header card grids ──────────────
   With FixedHeader + a fixed Height the grid reserves its full height, so
   short result sets leave a gap before the pager. Pull the pager snug to
   the table body and trim its vertical padding so the grid hugs the pager
   and the page hugs the bottom of the card. */
.pf-card-table .mud-table-pagination {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    margin-top: 4px;
    min-height: 44px;
}
.pf-card-table .mud-table-pagination .mud-table-pagination-actions,
.pf-card-table .mud-table-pagination .mud-table-page-number-information,
.pf-card-table .mud-table-pagination .mud-select {
    margin-top: 0;
    margin-bottom: 0;
}

/* ── Expanded child / detail row ────────────────────────────────────── */
.pf-card-table .mud-table-body tr.pf-child-row {
    background: rgba(0, 0, 0, 0.018);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.pf-card-table .mud-table-body tr.pf-child-row:hover {
    background: rgba(0, 0, 0, 0.018);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.pf-card-table .mud-table-body tr.pf-child-row td:first-child {
    border-radius: 0 0 0 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}
.pf-card-table .mud-table-body tr.pf-child-row td:last-child {
    border-radius: 0 0 8px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}
.pf-card-table .mud-table-body tr.pf-child-row td {
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Hidden state: suppress all visual chrome so the 0-height row is invisible */
.pf-card-table .mud-table-body tr.pf-child-row.pf-child-row-hidden {
    background: transparent;
    box-shadow: none;
}
.pf-card-table .mud-table-body tr.pf-child-row.pf-child-row-hidden td,
.pf-card-table .mud-table-body tr.pf-child-row.pf-child-row-hidden td:first-child,
.pf-card-table .mud-table-body tr.pf-child-row.pf-child-row-hidden td:last-child {
    border-top: none !important;
    border-radius: 0;
    padding: 0 !important;
}

/* ====================================================================
   End Desktop card-row table
   ==================================================================== */

/* ====================================================================
   Dialog / modal polish
   ==================================================================== */

/* ── Status band (first element inside DialogContent) ───────────────── */
.pf-dialog-status-band {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 14px;
    font-size: 0.82rem;
    border-left: 4px solid transparent;
}
.pf-dialog-status-submitted {
    background: rgba(76, 175, 80, 0.08);
    border-left-color: var(--mud-palette-success);
}
.pf-dialog-status-cancelled {
    background: rgba(244, 67, 54, 0.07);
    border-left-color: var(--mud-palette-error);
    opacity: 0.85;
}
.pf-dialog-status-converted {
    background: rgba(255, 152, 0, 0.09);
    border-left-color: var(--mud-palette-warning);
}
.pf-dialog-status-meta {
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
}
.pf-dialog-status-reason {
    font-style: italic;
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
    flex: 1 1 auto;
}

/* ── Labeled field grid ─────────────────────────────────────────────── */
.pf-modal-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-bottom: 4px;
}
.pf-modal-field {
    flex: 1 1 140px;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pf-modal-field-wide {
    flex: 1 1 100%;
}
/* Shared base for all field/section labels inside dialogs and edit panels */
.pf-field-label,
.pf-modal-field-label,
.pf-modal-section-label,
.pf-edit-section-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--mud-palette-text-secondary);
}

.pf-modal-field-value {
    font-size: 0.875rem;
    line-height: 1.4;
}
.pf-modal-field-value a {
    color: inherit;
}
.pf-modal-field-sub {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* ── Section dividers inside dialog ─────────────────────────────────── */
.pf-modal-section {
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    padding-top: 12px;
    margin-top: 12px;
}
.pf-modal-section-label {
    margin-bottom: 8px;
}

/* ── Client section panels (EditClientDialog) ───────────────────────── */
.pf-edit-section {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 10px 12px 12px;
    background: rgba(0, 0, 0, 0.015);
}
.pf-edit-section-label {
    margin-bottom: 8px;
}

/* ====================================================================
   End Dialog / modal polish
   ==================================================================== */

/* ====================================================================
   Additional row-status variants
   ==================================================================== */

/* Active (e.g. current season) — green left border */
.pf-card-table .pf-status-row-active td:first-child {
    border-left: 3px solid var(--mud-palette-success) !important;
    border-radius: 8px 0 0 8px;
}

/* Archived — subtle grey left border */
.pf-card-table .pf-status-row-archived td:first-child {
    border-left: 3px solid rgba(0, 0, 0, 0.2) !important;
    border-radius: 8px 0 0 8px;
}
.pf-card-table .pf-status-row-archived {
    opacity: 0.7;
}

/* Inactive (e.g. disabled user) — dimmed */
.pf-card-table .pf-status-row-inactive {
    opacity: 0.52;
}

/* ====================================================================
   End Additional row-status variants
   ==================================================================== */

/* ====================================================================
   Mobile bottom-deck dialogs  (xs / sm — max 959 px)
   Targets Z Fold 7 closed (≈ 390 px) and open (≈ 720 px).
   On desktop (≥ 960 px) MudBlazor's default centered dialog is kept.
   ==================================================================== */
@media (max-width: 959px) {

    /* Slide-up entrance — overrides MudBlazor's default scale-in */
    @keyframes pf-deck-enter {
        from { transform: translateY(40px); opacity: 0.5; }
        to   { transform: translateY(0);    opacity: 1;   }
    }

    /* Pull the dialog container to the bottom edge */
    .mud-dialog-container {
        align-items:     flex-end  !important;
        justify-content: center    !important;
        padding:         0         !important;
    }

    /* Full-width deck: rounded top corners, flush bottom, height-capped */
    .mud-dialog {
        width:         100%    !important;
        max-width:     100vw   !important;
        margin:        0       !important;
        border-radius: 20px 20px 0 0 !important;
        /* dvh tracks the real visible area (URL bar shown/hidden) */
        max-height: 90vh;
        max-height: 90dvh;
        display:    flex;
        flex-direction: column;
        /* Slide-up entrance */
        animation: pf-deck-enter 0.24s cubic-bezier(0.34, 1.1, 0.64, 1) !important;
    }

    /* Drag-handle pill — visually cues the sheet is swipeable */
    .mud-dialog::before {
        content:       '';
        display:       block;
        width:         40px;
        height:        4px;
        background:    rgba(0, 0, 0, 0.14);
        border-radius: 2px;
        margin:        10px auto 2px;
        flex-shrink:   0;
    }

    /* Title bar fixed at top of sheet */
    .mud-dialog .mud-dialog-title {
        flex-shrink: 0;
    }

    /* Content scrolls inside the capped height */
    .mud-dialog .mud-dialog-content {
        flex:                     1 1 auto;
        overflow-y:               auto    !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Actions bar pinned at the bottom of the sheet */
    .mud-dialog .mud-dialog-actions {
        flex-shrink:  0;
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

}
/* ====================================================================
   End Mobile bottom-deck dialogs
   ==================================================================== */

/* Client quick-view: accordion owns its own scroll; block double-scrollbar.
   Placed after the @media block above so it wins the !important cascade at
   equal specificity when both rules match on mobile. */
.mud-dialog .pf-client-dialog {
    overflow:       hidden  !important;
    display:        flex    !important;
    flex-direction: column  !important;
    min-height:     0;
}

/* ====================================================================
   Species detail panel (Inventory expand row)
   ==================================================================== */
.pf-species-detail {
    display:     flex;
    gap:         20px;
    align-items: flex-start;
    flex-wrap:   wrap;
    padding-top: 4px;
}

.pf-species-detail-image {
    flex:        0 0 auto;
}

.pf-species-detail-image img {
    width:         200px;
    max-height:    200px;
    object-fit:    contain;
    border-radius: 8px;
    box-shadow:    0 2px 8px rgba(0,0,0,0.10);
    background:    #ffffff;
}

.pf-species-detail-desc {
    flex:         1 1 260px;
    font-size:    0.83rem;
    line-height:  1.55;
    color:        rgba(0,0,0,0.78);
}

/* ── Quill v2 read-only list rendering ─────────────────────────────────────
   Use rem (not em) for ul/ol and li indentation so the visual indent matches
   the live Quill editor (1.5em @ 16px = 24px) regardless of the component's
   reduced base font-size (0.81rem in pf-card-desc, 0.83rem in detail-desc).
   Old Quill v1 HTML (<ul><li> without data-list) loses its native bullet because
   Quill v2 CSS sets li { list-style-type: none } — we restore it via disc.   */

.pf-species-detail-desc .ql-editor ul,
.pf-species-detail-desc .ql-editor ol {
    padding-left: 1.5rem;
}

/* Restore disc bullet for old Quill v1 <ul><li> content (no data-list attr) */
.pf-species-detail-desc .ql-editor ul > li:not([data-list]) {
    list-style-type: disc;
}

.pf-species-detail-desc .ql-editor li {
    padding-left: 1.5rem;
    margin-bottom: 3px;
}

/* Card description (mobile accordion) */
.pf-card-desc {
    font-size:   0.81rem;
    line-height: 1.5;
    color:       rgba(0,0,0,0.76);
}

.pf-card-desc .ql-editor ul,
.pf-card-desc .ql-editor ol {
    padding-left: 1.5rem;
}

/* Restore disc bullet for old Quill v1 <ul><li> content (no data-list attr) */
.pf-card-desc .ql-editor ul > li:not([data-list]) {
    list-style-type: disc;
}

.pf-card-desc .ql-editor li {
    padding-left: 1.5rem;
    margin-bottom: 2px;
}

/* Mobile — stack image above description */
@media (max-width: 599px) {
    .pf-species-detail-image img {
        width:      100%;
        max-height: 180px;
    }
    .pf-species-detail {
        flex-direction: column;
    }
}
/* ====================================================================
   End Species detail panel
   ==================================================================== */

/* Touch-swipe scrolling for tab bars on mobile */
.mud-tabs-toolbar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.mud-tabs-toolbar::-webkit-scrollbar {
    display: none;
}
/* Restore tab panel top-padding previously applied via the removed PanelClass attribute */
.pf-clients-tabs .mud-tab-panel { padding-top: 0.75rem; }
.pf-help-tabs    .mud-tab-panel { padding-top: 1rem; }

/* ══════════════════════════════════════════════════════════════════════════
   Mid-range responsive (tablet / small laptop: 960 px – 1399 px)

   MudBlazor switches from mobile-card layout to the desktop table at 960 px,
   but the desktop tables are designed for ≥ 1400 px and don't fit comfortably
   in the gap between those two breakpoints.  The rules below bridge that gap
   without touching the mobile (< 960 px) or full-desktop (≥ 1400 px) layouts.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 960px) and (max-width: 1399px) {

    /* ── 1. Page card: recover ~28 px on each side for tables ─────────── */
    .pf-page-card {
        padding: 1rem 0.875rem;
    }

    /* ── 2. Table cells: tighter horizontal padding (Dense is already on,
            but these shave another 4–6 px per column = 40–60 px total) ── */
    .mud-table td.mud-table-cell {
        padding-left:  8px !important;
        padding-right: 8px !important;
    }
    .mud-table th.mud-table-cell {
        padding-left:  8px !important;
        padding-right: 8px !important;
    }

    /* ── 3. Icon buttons inside table cells: 4 px smaller each ────────── */
    .mud-table td .mud-icon-button {
        width:  28px !important;
        height: 28px !important;
    }

    /* ── 4. Slightly smaller chip labels inside table rows ─────────────── */
    .mud-table td .mud-chip { font-size: 0.70rem !important; }

    /* ── 5. Column-visibility utility ─────────────────────────────────── */
    /* Tag both the <MudTh> and every <MudTd> for a column with
       class="pf-col-md-hide" to suppress that column at this breakpoint.
       HTML automatically adjusts colspan cells that exceed the visible
       column count, so child/expansion rows remain full-width.            */
    .pf-col-md-hide {
        display: none !important;
    }
}
/* ══════════════════════════════════════════════════════════════════════════
   End mid-range responsive
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   Modern AppBar + Drawer (Header & Navigation refresh)
   ══════════════════════════════════════════════════════════════════════════ */

/* AppBar — translucent dark surface with blur and a subtle bottom accent.
   Sits above the forest background and reads as a polished glass header. */
.pf-appbar.mud-appbar {
    background: linear-gradient(180deg, rgba(62, 42, 14, 0.92) 0%, rgba(46, 31, 10, 0.92) 100%) !important;
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid rgba(243, 125, 54, 0.35);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

/* DEV badge — dark red pill next to the app title */
.pf-dev-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 4px;
    background: #8b1a1a;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.6;
    flex-shrink: 0;
    user-select: none;
}

.pf-appbar-menu-btn { margin-right: 4px; }

/* Brand block: logo tile + title */
.pf-appbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: 4px;
    margin-right: 12px;
    min-width: 0;
    flex-shrink: 1;
}

.pf-appbar-logo {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(243, 125, 54, 0.18), rgba(63, 157, 67, 0.18));
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.pf-appbar-logo img { width: 26px; height: 26px; display: block; }

.pf-app-title {
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.1;
}

/* Right-side action strip: equal gap, all children vertically centred */
.pf-appbar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Connection-state indicator: stretch to match icon-button height (40 px) */
.pf-conn-indicator {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 6px;
}

/* User chip on the right side of the AppBar */
.pf-appbar-user-chip {
    gap: 8px;
    padding: 4px 6px 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: background-color 120ms ease, border-color 120ms ease;
}
.pf-appbar-user-chip:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.2);
}
.pf-appbar-avatar.mud-avatar {
    background: linear-gradient(135deg, #f37d36, #be4d06) !important;
    color: #ffffff !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    width: 28px !important;
    height: 28px !important;
}

/* ── Notification bell dropdown ────────────────────────────────── */
.pf-bell-popover {
    width: 360px;
    max-width: 92vw;
}
/* Clickable bell wrapper: keeps the 40px round hit-area of an icon button while letting the badge
   anchor to the icon's corner (not the button's padded corner). */
.pf-bell-activator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    color: inherit;
    transition: background-color 120ms ease;
}
.pf-bell-activator:hover {
    background-color: rgba(255, 255, 255, 0.12);
}
.pf-bell-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 4px;
}
.pf-bell-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    padding: 22px 16px;
}
.pf-bell-list {
    max-height: 60vh;
    overflow-y: auto;
}
.pf-bell-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid rgba(100, 65, 20, 0.08);
    transition: background-color 120ms ease;
}
.pf-bell-item:hover {
    background: rgba(243, 125, 54, 0.08);
}
.pf-bell-item:last-child {
    border-bottom: none;
}
.pf-bell-item-icon {
    margin-top: 2px;
    flex: 0 0 auto;
}
.pf-bell-item-body {
    flex: 1 1 auto;
    min-width: 0;
}
.pf-bell-item-title {
    font-weight: 600;
    word-break: break-word;
}
.pf-bell-item-text {
    color: var(--mud-palette-text-secondary);
    display: block;
    word-break: break-word;
}
.pf-bell-item-details {
    margin: 4px 0 0;
    padding-left: 18px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
}
.pf-bell-item-dismiss {
    flex: 0 0 auto;
    opacity: 0.6;
}
.pf-bell-item:hover .pf-bell-item-dismiss {
    opacity: 1;
}

/* ── Modern Drawer ─────────────────────────────────────────────── */

.pf-drawer.mud-drawer {
    background: linear-gradient(180deg, rgba(252, 247, 238, 0.98) 0%, rgba(244, 235, 219, 0.98) 100%) !important;
    border-right: 1px solid rgba(100, 65, 20, 0.15) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12) !important;
    overflow: hidden;
    overscroll-behavior: contain;
}
/* MudBlazor's .mud-drawer-content is already display:flex / flex-direction:column / height:100%;
   override its overflow so only pf-nav-scroll scrolls. */
.pf-drawer .mud-drawer-content {
    overflow: hidden;
}

.pf-drawer-header.mud-drawer-header {
    padding: 14px 16px 12px !important;
    border-bottom: 1px solid rgba(100, 65, 20, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
}

.pf-drawer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.pf-drawer-logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f37d36, #be4d06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(190, 77, 6, 0.25);
}
.pf-drawer-logo img { width: 26px; height: 26px; display: block; filter: brightness(0) invert(1); }
.pf-drawer-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.pf-drawer-title { font-weight: 700 !important; color: #3e2a0e; letter-spacing: 0.01em; }
.pf-drawer-subtitle { color: rgba(100, 65, 20, 0.65) !important; font-size: 0.7rem !important; text-transform: uppercase; letter-spacing: 0.08em; }

/* Season selector wrapper inside the drawer — horizontal breathing room */
.pf-drawer-season {
    padding-left: 10px;
    padding-right: 10px;
}

/* Nav menu layout: header + footer fixed, nav items scroll.
   pf-nav-menu fills the remaining height of mud-drawer-content (flex child);
   pf-nav-scroll is the only scroll container; pf-nav-footer is pinned at bottom. */
.pf-nav-menu.mud-navmenu {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    padding: 8px 10px 0 !important;
}
.pf-nav-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Section labels */
.pf-drawer .pf-nav-section {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(100, 65, 20, 0.55);
    padding: 14px 12px 4px;
    margin-top: 2px;
}
.pf-drawer .pf-nav-section:first-child { padding-top: 6px; }

/* Pill-style nav links with left accent indicator on active */
.pf-drawer .mud-nav-link {
    position: relative;
    border-radius: 10px !important;
    margin: 1px 4px;
    padding: 4px 12px !important;
    color: #4a3418 !important;
    font-weight: 500;
    font-size: 0.85rem;
    align-items: center;
    transition: background-color 120ms ease, color 120ms ease, transform 120ms ease;
}
.pf-drawer .mud-nav-link .mud-nav-link-icon {
    color: rgba(100, 65, 20, 0.65);
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
    transition: color 120ms ease;
}
.pf-drawer .mud-nav-link .mud-nav-link-icon-wrapper {
    margin-right: 8px !important;
    min-width: unset !important;
}
.pf-drawer .mud-nav-link:hover {
    background-color: rgba(243, 125, 54, 0.10) !important;
    color: #3e2a0e !important;
}
.pf-drawer .mud-nav-link:hover .mud-nav-link-icon { color: #f37d36; }

.pf-drawer .mud-nav-link.active {
    background-color: rgba(243, 125, 54, 0.16) !important;
    color: #be4d06 !important;
    font-weight: 600;
}
.pf-drawer .mud-nav-link.active .mud-nav-link-icon { color: #f37d36 !important; }
.pf-drawer .mud-nav-link.active::before {
    content: "";
    position: absolute;
    left: -4px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, #f37d36, #be4d06);
    box-shadow: 0 0 8px rgba(243, 125, 54, 0.45);
}

/* Drawer footer — pinned at bottom by flex layout, never scrolls */
.pf-nav-footer {
    flex: 0 0 auto;
    padding: 12px 14px;
    margin: 0 8px 5px;
    border: 1px solid rgba(100, 65, 20, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.45);
    box-shadow: 0 2px 8px rgba(100, 65, 20, 0.08);
}
.pf-nav-footer-line {
    display: block;
    line-height: 1.6;
    color: rgba(100, 65, 20, 0.7) !important;
}
.pf-nav-footer-fineprint {
    display: block;
    font-size: 0.65rem !important;
    opacity: 0.65;
    margin-top: 2px;
    color: rgba(100, 65, 20, 0.7) !important;
}

/* Tighten title further on very narrow screens (icon + title + avatar must fit) */
@media (max-width: 380px) {
    .pf-appbar-logo { width: 32px; height: 32px; }
    .pf-appbar-logo img { width: 22px; height: 22px; }
    .pf-app-title { font-size: 0.95rem !important; }
}

/* ── Mobile drawer (sm and below) ─────────────────────────────────
   Standard modern off-canvas pattern: near-full-width panel, larger
   touch targets, identity block at the top, scrim covers everything
   else, swipe/tap-outside closes. MudDrawer's Temporary variant already
   provides the overlay + outside-click-to-close behavior. */
@media (max-width: 599.98px) {
    /* NOTE: Do NOT override .pf-drawer width or transform here — MudDrawer's
       Temporary variant computes its slide-in/out translateX from the width
       value passed via the Width parameter. Overriding width in CSS leaves the
       panel partially visible and prevents it from closing. */

    /* A stronger scrim reads better on small screens */
    .mud-overlay-drawer { background: rgba(0, 0, 0, 0.45) !important; }

    /* Bigger header so the close button has comfortable thumb reach */
    .pf-drawer-header.mud-drawer-header {
        padding: 12px 14px 10px !important;
    }
    .pf-drawer-logo { width: 40px; height: 40px; }
    .pf-drawer-logo img { width: 26px; height: 26px; }

    /* Identity block sits just below the header (mobile-only) */
    .pf-drawer-user {
        align-items: center;
        gap: 10px;
        padding: 8px 14px 10px;
        border-bottom: 1px solid rgba(100, 65, 20, 0.12);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
    }
    .pf-drawer-avatar.mud-avatar {
        background: linear-gradient(135deg, #f37d36, #be4d06) !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        flex-shrink: 0;
    }
    .pf-drawer-user-text {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;
        line-height: 1.2;
    }
    .pf-drawer-user-name {
        font-weight: 600;
        color: #3e2a0e;
        font-size: 0.92rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .pf-drawer-user-role {
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: rgba(100, 65, 20, 0.6);
    }
    .pf-drawer-signout.mud-icon-button {
        color: rgba(100, 65, 20, 0.75) !important;
        flex-shrink: 0;
    }
    .pf-drawer-signout.mud-icon-button:hover {
        color: #be4d06 !important;
        background: rgba(243, 125, 54, 0.12) !important;
    }

    .pf-drawer-close.mud-icon-button {
        color: rgba(100, 65, 20, 0.7) !important;
    }
    .pf-drawer-close.mud-icon-button:hover {
        color: #be4d06 !important;
        background: rgba(243, 125, 54, 0.12) !important;
    }

    /* Roomier season selector wrapper on mobile */
    .pf-drawer-season {
        padding: 8px 14px 10px !important;
        border-bottom: 1px solid rgba(100, 65, 20, 0.12) !important;
    }


    /* Compact, comfortable nav links on mobile */
    .pf-drawer .mud-nav-link {
        padding: 5px 12px !important;
        font-size: 0.88rem;
        margin: 1px 4px;
        line-height: 1.2;
    }
    .pf-drawer .mud-nav-link .mud-nav-link-icon-wrapper {
        margin-right: 8px !important;
    }
    .pf-drawer .pf-nav-section {
        padding: 10px 12px 2px;
        font-size: 0.62rem;
    }

    /* Footer compactness on small screens */
    .pf-nav-footer { padding: 8px 14px; margin: 0 6px 5px; }
    .pf-nav-footer-line { font-size: 0.68rem !important; line-height: 1.4; }
    .pf-nav-footer-fineprint { font-size: 0.6rem !important; margin-top: 1px; }
}

/* Desktop: hide the mobile-only close button & identity block (d-flex defaults
   they get from MudBlazor utility classes are already correct, but be defensive). */
@media (min-width: 600px) {
    .pf-drawer-user, .pf-drawer-close { display: none !important; }
}

/* ── Collapsible nav section buttons (colored banner style) ─────────────────── */
.pf-nav-section-btn {
    display: flex;
    align-items: center;
    width: 100%;
    border: none;
    cursor: pointer;
    padding: 7px 10px 7px 12px;
    margin: 6px 0 2px;
    border-radius: 10px;
    gap: 8px;
    text-align: left;
    color: #fff;
    transition: filter 120ms ease;
}
.pf-nav-section-btn:first-child { margin-top: 2px; }
.pf-nav-section-btn:hover { filter: brightness(1.1); }

/* Per-section accent colors */
.pf-nav-section-season    { background: #5b8fd6; }
.pf-nav-section-analytics { background: #4ea868; }
.pf-nav-section-contacts  { background: #7c6db8; }
.pf-nav-section-field     { background: #3b8f80; }
.pf-nav-section-admin     { background: #d95b4a; }

.pf-nav-section-btn .pf-nav-section-icon {
    font-size: 18px !important;
    color: rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
}
.pf-nav-section-btn .pf-nav-section-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    color: #fff;
    flex: 1;
}
.pf-nav-section-btn .pf-nav-section-chevron {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.7);
    font-size: 18px !important;
    flex-shrink: 0;
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.pf-nav-section-chevron-collapsed {
    transform: rotate(-90deg);
}

/* Season pill on colored header */
.pf-nav-season-pill {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    color: #5b8fd6;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 10px;
    padding: 1px 7px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Mobile tweaks for section buttons */
@media (max-width: 599.98px) {
    .pf-nav-section-btn { padding: 7px 10px 7px 12px; margin: 4px 0 2px; }
    .pf-nav-section-btn:first-child { margin-top: 2px; }
}

/* ── Mini rail (icon-only) mode ─────────────────────────────────────── */

/* Nav items are wrapped in <MudTooltip> (for the collapsed-mode labels). MudTooltip
   always renders a .mud-tooltip-root wrapper that defaults to display:inline-block,
   which would collapse the full-width nav rows and break icon centering. Force every
   tooltip wrapper inside the drawer to behave as a transparent full-width block so the
   button / nav-link inside lays out exactly as it did before the wrapper existed. */
.pf-drawer .pf-nav-scroll .mud-tooltip-root {
    display: block !important;
    width: 100%;
}

/* Animate the width change when toggling mini/full */
.pf-drawer.mud-drawer {
    transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Collapse the drawer to icon-rail width. The docked drawer is position:fixed and normally
   sizes itself from var(--mud-drawer-width-left) (270px), so we override the width directly
   for the mini state; the content margin is pulled in to match just below. */
.pf-drawer.pf-drawer-mini.mud-drawer {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
}

/* Expand the main content when the mini rail is active. MudBlazor's docked drawer is
   position:fixed and offsets the content via margin-left: <full drawer width> (270px) on
   the sibling .mud-main-content. Shrinking only the drawer leaves a dead gap, so we also
   pull that margin in to the rail width. The drawer is the immediate previous sibling of
   .mud-main-content, so a sibling combinator keyed off the (reliably re-rendered) mini
   class drives this with no JS. The transition animates the content both ways. */
.mud-main-content {
    transition: margin-left 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.pf-drawer.pf-drawer-mini ~ .mud-main-content {
    margin-left: 56px !important;
}

/* Section header: hide label + chevron, center the remaining icon */
.pf-drawer.pf-drawer-mini .pf-nav-section-label,
.pf-drawer.pf-drawer-mini .pf-nav-section-chevron {
    display: none;
}
.pf-drawer.pf-drawer-mini .pf-nav-section-btn {
    justify-content: center;
    align-items: center;
    padding: 7px 0;
    gap: 0;
}
.pf-drawer.pf-drawer-mini .pf-nav-section-btn .pf-nav-section-icon {
    margin: 0 auto;
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
}

/* Nav links: hide the label so only the icon shows, centered in the rail. MudBlazor wraps
   the label in .mud-nav-link-text which carries a margin-inline-start:12px — display:none
   removes both the text and that margin (font-size:0 alone leaves the margin and shoves the
   icon ~6px off-centre). font-size:0 is kept as a guard for any version that renders the
   label as a bare text node instead. */
.pf-drawer.pf-drawer-mini .mud-nav-link .mud-nav-link-text {
    display: none !important;
}
.pf-drawer.pf-drawer-mini .mud-nav-link {
    font-size: 0 !important;
    justify-content: center;
    padding: 8px !important;
    margin: 2px auto;
    width: calc(100% - 8px);
}
.pf-drawer.pf-drawer-mini .mud-nav-link .mud-nav-link-icon {
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
}

/* Active left-bar accent stays but shift it to be visible in the narrow rail */
.pf-drawer.pf-drawer-mini .mud-nav-link.active::before {
    left: 0;
    top: 6px;
    bottom: 6px;
}

/* Force all section slide panels open (overrides grid-template-rows: 0fr) */
.pf-drawer.pf-drawer-mini .pf-slide {
    grid-template-rows: 1fr !important;
    transition: none;
}
.pf-drawer.pf-drawer-mini .pf-slide > * {
    opacity: 1 !important;
    transition: none;
}

/* Tighten nav menu padding in mini mode */
.pf-drawer.pf-drawer-mini .pf-nav-menu.mud-navmenu {
    padding: 4px 2px 0 !important;
}

/* Hide version footer in mini mode — no room */
.pf-drawer.pf-drawer-mini .pf-nav-footer {
    display: none;
}

/* MudBlazor 9.5 only provides height/top for DrawerVariant.Responsive with
   ClipMode.Docked (mud-drawer-clipped-docked). Our drawer uses ClipMode.Always
   (mud-drawer-clipped-always), which has no height rule for the Responsive variant
   on small/medium screens — only the Temporary variant gets it. Without an explicit
   height the drawer auto-sizes to content, the footer lands below the visible area,
   and overflow:hidden clips it. This makes the height chain explicit on small/medium. */
@media (max-width: 959.98px) {
    .pf-drawer.mud-drawer {
        top: var(--mud-appbar-height);
        height: calc(100% - var(--mud-appbar-height));
    }
}

/* Make the AppBar brand block a navigation link */
a.pf-appbar-brand {
    text-decoration: none;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 120ms ease;
    padding: 2px 6px 2px 2px;
}
a.pf-appbar-brand:hover { background: rgba(255, 255, 255, 0.10); }
a.pf-appbar-brand .pf-app-title { color: white !important; }

/* AppBar refinements on small screens — tighter padding so brand + actions fit */
@media (max-width: 599.98px) {
    .pf-appbar.mud-appbar {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    .pf-appbar-brand { gap: 8px; margin-left: 2px; margin-right: 4px; }
    /* A subtle background behind the hamburger so it feels like an obvious tap target */
    .pf-appbar-menu-btn.mud-icon-button {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
    }
    .pf-appbar-menu-btn.mud-icon-button:hover {
        background: rgba(255, 255, 255, 0.16);
    }
}

/* ── Issues page: inline body rendering (Quill HTML + Markdig Markdown) ─────────────── */
.pf-issue-body-html { line-height: 1.6; }
.pf-issue-body-html p { margin: 0 0 0.5em; }
.pf-issue-body-html ul, .pf-issue-body-html ol { margin: 0 0 0.5em; padding-left: 1.5em; }
.pf-issue-body-html h1, .pf-issue-body-html h2, .pf-issue-body-html h3 { margin: 0.75em 0 0.25em; font-weight: 600; }
.pf-issue-body-html blockquote { border-left: 3px solid #ccc; margin: 0 0 0.5em; padding-left: 0.75em; color: #555; }
/* Markdown-specific extras */
.pf-issue-body-md code { background: rgba(0,0,0,0.06); border-radius: 3px; padding: 1px 4px; font-size: 0.85em; font-family: monospace; }
.pf-issue-body-md pre { background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.1); border-radius: 4px; padding: 10px 12px; overflow-x: auto; margin: 0 0 0.75em; }
.pf-issue-body-md pre code { background: none; padding: 0; font-size: 0.8rem; }
.pf-issue-body-md table { border-collapse: collapse; margin-bottom: 0.75em; font-size: 0.875rem; }
.pf-issue-body-md th, .pf-issue-body-md td { border: 1px solid rgba(0,0,0,0.15); padding: 4px 10px; }
.pf-issue-body-md th { background: rgba(0,0,0,0.04); font-weight: 600; }
.pf-issue-body-md hr { border: none; border-top: 1px solid rgba(0,0,0,0.12); margin: 0.75em 0; }

/* ── Address autocomplete component (PfAddressAutocomplete) ──────────────────────────── */
.pf-addr-wrap { position: relative; width: 100%; }

.pf-addr-label {
    display: block;
    font-size: 0.75rem;
    color: rgba(0,0,0,0.6);
    margin-bottom: 3px;
}
.pf-addr-label--error { color: #f44336; }

.pf-addr-input {
    width: 100%;
    padding: 9px 14px;
    border: 1px solid rgba(0,0,0,0.23);
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
    color: inherit;
    background: transparent;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s, border-width 0.05s;
}
.pf-addr-input:hover:not(:focus) { border-color: rgba(0,0,0,0.87); }
.pf-addr-input:focus {
    border: 2px solid #5a9e3a;
    padding: 8px 13px;
}
.pf-addr-input--error { border-color: #f44336 !important; }

.pf-addr-error {
    font-size: 0.75rem;
    color: #f44336;
    margin-top: 3px;
    padding-left: 14px;
}

.pf-addr-dropdown {
    /* position, top, left, width, z-index, display set by JS (portaled to <body>) */
    background: #fff;
    border: 1px solid rgba(0,0,0,0.18);
    border-top: none;
    border-radius: 0 0 4px 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    max-height: 260px;
    overflow-y: auto;
}
.pf-addr-dropdown li {
    padding: 9px 14px;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1.35;
    border-bottom: 1px solid #f2f2f2;
    color: #333;
}
.pf-addr-dropdown li:last-child { border-bottom: none; }

.pf-addr-result {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    background: #f5f8f5;
    border: 1px solid #c8d8c8;
    border-radius: 4px;
}
.pf-addr-result-lines {
    flex: 1;
    font-size: 0.88rem;
    line-height: 1.55;
    color: #2a2a2a;
}
.pf-addr-clear {
    background: none;
    border: none;
    color: #5a9e3a;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0;
    white-space: nowrap;
    text-decoration: underline;
    flex-shrink: 0;
    font-family: inherit;
}
.pf-addr-clear:hover { color: #3b7a1e; }

/* ── Feedback dialog: override MudBlazor's default max-height cap in full-screen mode ── */
/* Quill uses min-height (not flex-grow) so we size it with calc(100vh - fixed-chrome).     */
/* The fixed chrome is: dialog padding + title bar + type chips + title field +             */
/* description label + quill toolbar + stack gaps + actions bar ≈ 440px.                   */
.pf-feedback-expanded .mud-dialog-content {
    max-height: none;
    overflow-y: auto;
}

/* ====================================================================
   Dropdown / Popover / Accordion — Opaque Backgrounds & Animations
   ==================================================================== */

/* ── Fully opaque dropdown / popover backgrounds ───────────────────── */
/* Without these, the semi-transparent page card bleeds through into
   MudSelect, MudMenu, and autocomplete popovers over the forest bg.
   Exclude tooltip-containing popovers so MudTooltip keeps its dark look. */
.mud-popover:not(.mud-tooltip):not(:has(.mud-tooltip)),
.mud-popover:not(.mud-tooltip):not(:has(.mud-tooltip)) .mud-list,
.mud-menu-list {
    background-color: #ffffff !important;
}

/* ── MudTooltip: explicit dark style (overrides palette variable resolution) */
.mud-tooltip.mud-tooltip-default {
    background-color: #424242 !important;
    color: #ffffff !important;
}

/* ── Spring pop-in for all MudBlazor popovers ──────────────────────── */
/* MudBlazor 8 adds .mud-popover-open when a popover becomes visible.  */
@keyframes pf-popover-in {
    from { opacity: 0; transform: scale(0.92) translateY(-8px); }
    70%  { transform: scale(1.02) translateY(1px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.mud-popover-open {
    animation: pf-popover-in 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── MudExpansionPanel (accordion) — animate content in ────────────── */
@keyframes pf-panel-content-in {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mud-expand-panel-content-expanded {
    animation: pf-panel-content-in 0.22s ease both;
}

/* Smooth header state transitions */
.mud-expand-panel-header {
    transition: background-color 0.18s ease, color 0.15s ease !important;
}

/* ── pf-slide (CSS-grid accordion) — add opacity cross-fade ───────── */
/* Children start invisible (they're already height-0 when closed).
   Slight delay on the open transition lets the grid expand first.     */
.pf-slide > * {
    opacity: 0;
    transition: opacity 0.16s ease 0s;
}
.pf-slide.pf-slide-open > * {
    opacity: 1;
    transition: opacity 0.2s ease 0.06s;
}

/* ── KPI flyouts / drops / overlays — bouncier spring entrance ─────── */
@keyframes pf-fade-up-spring {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.pf-kpi-drop,
.pf-kpi-overlay,
.pf-orgtype-overlay,
.pf-orgtype-accordion,
.pf-enr-deck-panel,
.pf-oak-popup {
    animation: pf-fade-up-spring 0.3s cubic-bezier(0.34, 1.4, 0.64, 1) both !important;
}

/* Score flyout uses the same spring */
.mud-popover.pf-score-flyout {
    animation: pf-fade-up-spring 0.24s cubic-bezier(0.34, 1.4, 0.64, 1) both !important;
}

/* ── Mobile bottom-sheet entrance — spring overshoot ───────────────── */
@keyframes pf-slide-up-sheet-spring {
    from { transform: translateY(100%); opacity: 0.5; }
    to   { transform: translateY(0);    opacity: 1; }
}

@media (max-width: 959px) {
    .pf-kpi-drop,
    .pf-kpi-drop.pf-drop-right,
    .pf-kpi-overlay {
        animation: pf-slide-up-sheet-spring 0.34s cubic-bezier(0.34, 1.2, 0.64, 1) both !important;
    }
}

/* ── pf-slide timing tweak — slightly bouncier easing ──────────────── */
/* Overrides the existing 0.22s linear-ish cubic on grid-template-rows */
.pf-slide {
    transition: grid-template-rows 0.26s cubic-bezier(0.34, 1.2, 0.64, 1);
}

/* ====================================================================
   End Dropdown / Popover / Accordion Animations
   ==================================================================== */

/* ── MudDatePicker popover width fix ─────────────────────────────────
   MudBlazor copies the host input's min-width onto the calendar paper
   as an inline style, clipping the calendar grid. !important is needed
   to override an inline style from the framework.                      */
.mud-picker-popover-paper {
    min-width: min-content !important;
}


/* ════════════════════════════════════════════════════════════════════
   Global interaction polish (issue #57)
   Consistent motion + button elevation across the admin app.
   ════════════════════════════════════════════════════════════════════ */

/* Filled buttons: visible resting shadow, lift on hover, settle on press. */
.mud-button-root.mud-button-filled {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
}
.mud-button-root.mud-button-filled:hover:not(.mud-disabled) {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22), 0 2px 4px rgba(0, 0, 0, 0.14);
    transform: translateY(-1px);
}
.mud-button-root.mud-button-filled:active:not(.mud-disabled) {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
    transform: translateY(0);
}

/* Outlined buttons: gain a soft shadow on hover so affordance matches filled. */
.mud-button-root.mud-button-outlined {
    transition: box-shadow 0.18s ease, background-color 0.18s ease;
}
.mud-button-root.mud-button-outlined:hover:not(.mud-disabled) {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Icon buttons & chips: uniform quick transitions (MudBlazor defaults vary). */
.mud-icon-button,
.mud-chip {
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

/* Cards: uniform shadow/transform easing so every hover lift feels the same. */
.pf-page-card,
.pf-order-row-card,
.pf-client-card,
.pf-dash-card,
.pf-kpi-card,
.pf-orgtype-card {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Desktop dialog entrance: gentle fade-up matching the popover spring.
   (Mobile bottom-deck dialogs override this with their own !important anim.) */
@keyframes pf-dialog-in {
    from { opacity: 0; transform: translateY(10px) scale(0.99); }
    to   { opacity: 1; transform: none; }
}
.mud-dialog {
    animation: pf-dialog-in 0.22s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

/* Accessibility: respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
    .mud-button-root,
    .mud-icon-button,
    .mud-chip,
    .mud-dialog,
    .pf-page-card, .pf-order-row-card, .pf-client-card,
    .pf-dash-card, .pf-kpi-card, .pf-orgtype-card {
        transition: none !important;
        animation: none !important;
    }
}

/* ── Season admin card KPI pills ───────────────────────────────────────── */
.pf-season-kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 10px;
    background: var(--mud-palette-background-grey);
    border-radius: 6px;
    min-width: 60px;
}
.pf-season-kpi-accent {
    background: rgba(var(--mud-palette-success-rgb, 76, 175, 80), 0.08);
    border: 1px solid rgba(var(--mud-palette-success-rgb, 76, 175, 80), 0.2);
}
.pf-season-kpi-val {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
}
.pf-season-kpi-lbl {
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
}

/* ── Season card status accents (standalone div, not in .pf-card-table) ─ */
.pf-status-row-active.mud-paper  { border-left: 3px solid var(--mud-palette-success); }
.pf-status-row-archived.mud-paper { opacity: 0.75; }

/* ── Season bar legend labels ───────────────────────────────────────────── */
.pf-season-bar-lbl { font-size: 0.7rem; }

/* -- Delivery Planner --------------------------------------------------------------------------
   Layout + map styling for /admin/app/delivery (DeliveryView). The map host has an explicit
   height so the Google Maps canvas (absolutely sized by the API) has somewhere to render. */
.pf-delivery-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.pf-delivery-map-wrap {
    position: relative;
    height: clamp(320px, 42vh, 520px);
    border-radius: 8px;
    overflow: hidden;
}
.pf-delivery-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.pf-delivery-map-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}
.pf-delivery-map-empty-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 28px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.pf-delivery-detailbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.pf-truck-filter {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.pf-truck-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    background: var(--mud-palette-background-grey);
}

/* Full-truck cue: tint the manifest header amber when the truck is at/over capacity so dispatchers
   can spot maxed-out loads at a glance. The colored left border (truck color) is preserved. */
.pf-truck-head.pf-truck-full {
    background: rgba(237, 108, 2, 0.16);
}

.pf-truck-cap-full {
    color: var(--mud-palette-warning-darken, #c75200);
    font-weight: 600;
}

/* The truck-level Main Facility / Direct / Mixed mode chip now lives at the top of the right-hand action
   column (above the edit/delete buttons), so it no longer needs to push itself right within the title. */
.pf-truck-mode-chip {
    flex: 0 0 auto;
}

/* Right-hand header column: the mode chip sits on top, the edit/delete icon buttons beneath it, both
   right-aligned so the chip lines up above the delete button (matching the design). */
.pf-truck-head-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex: 0 0 auto;
}
.pf-truck-head-btns {
    display: flex;
    align-items: center;
}

/* Second header line: the truck's delivery day (and optional time window), left-aligned under "Truck N". */
.pf-truck-schedule-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.pf-plan-body { margin-top: 4px; }

@media (max-width: 600px) {
    .pf-delivery-map-wrap { height: 320px; }
}

/* -- Per-truck route map (one independent Google Map inside each manifest card) ----------------- */
.pf-truck-map-wrap {
    position: relative;
    height: clamp(220px, 28vh, 340px);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
}
.pf-truck-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
@media (max-width: 600px) {
    .pf-truck-map-wrap { height: 220px; }
}

/* -- Truck load diagram (vertical trailer schematic in each manifest card) --------------------- */
.pf-truck-loadrow {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 14px;
    min-height: 132px;
    /* Grow to fill the blade's stretched height so the cargo bay below soaks up the extra space and
       all trucks in a row end at the same bottom edge. */
    flex: 1 1 auto;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.pf-loaddiagram {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pf-loaddiagram-caption {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

.pf-loaddiagram-truck {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 56px;
}

.pf-loaddiagram-cab {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px 4px 4px 8px;
}

.pf-loaddiagram-bay {
    display: flex;
    flex: 1 1 auto;
    gap: 3px;
    padding: 3px;
    border-top: 2px solid var(--mud-palette-lines-default);
    border-bottom: 2px solid var(--mud-palette-lines-default);
    background:
        repeating-linear-gradient(
            45deg,
            var(--mud-palette-background-grey),
            var(--mud-palette-background-grey) 6px,
            transparent 6px,
            transparent 12px);
    overflow: hidden;
}

.pf-loaddiagram-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    padding: 4px 2px;
    border: 1px solid;
    border-radius: 4px;
    overflow: hidden;
    text-align: center;
}

.pf-loaddiagram-cell-stop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.pf-loaddiagram-cell-trees {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.pf-loaddiagram-cell-split {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-warning);
}

.pf-loaddiagram-doors {
    flex: 0 0 6px;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: none;
    border-radius: 0 6px 6px 0;
    background: repeating-linear-gradient(
        var(--mud-palette-text-secondary),
        var(--mud-palette-text-secondary) 4px,
        transparent 4px,
        transparent 8px);
}

.pf-loaddiagram-ends {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    color: var(--mud-palette-text-disabled);
}

/* -- Fixed-grid top-down trailer schematic (9x90x3 style) -------------------------------------- */
.pf-loadgrid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

.pf-loadgrid-caption {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

.pf-loadgrid-truck {
    display: flex;
    align-items: stretch;
    width: 100%;
    /* Taller trailer so the 9-high grid reads clearly. */
    min-height: 150px;
}

/* Cab/tractor sits at the TOP of the vertical trailer (full-width bar). */
.pf-loadgrid-cab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 3px 8px;
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px 8px 4px 4px;
}

/* Small persistent end labels naming the cab (front) and rear doors (back) so the trailer orientation
   is obvious without hovering, satisfying the "show which end is the cab vs the loading doors" need. */
.pf-loadgrid-end-label {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.pf-loadgrid-bay {
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    gap: 0;
    padding: 3px;
    border-top: 2px solid var(--mud-palette-lines-default);
    border-bottom: 2px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    overflow: hidden;
}

/* One solid shipment block = one enrollment. Filled blocks carry the truck color with a
   clear separating border so adjacent shipments read as distinct, contiguous regions. */
.pf-loadgrid-seg {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 14px;
    min-height: 0;
    border: 2px solid transparent;
    border-radius: 3px;
    transition: filter 0.08s ease;
}

.pf-loadgrid-seg + .pf-loadgrid-seg { margin-left: 2px; }

.pf-loadgrid-seg-filled {
    cursor: pointer;
    /* Clear border around each shipment, drawn over the solid truck-color fill. */
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);
}

.pf-loadgrid-seg-empty {
    border: 1px dashed var(--mud-palette-lines-default);
    background:
        repeating-linear-gradient(
            45deg,
            var(--mud-palette-background-grey),
            var(--mud-palette-background-grey) 6px,
            transparent 6px,
            transparent 12px) !important;
}

/* Hover (or hovering the block) emphasizes the whole shipment. */
.pf-loadgrid-seg-hot {
    filter: brightness(0.9) saturate(1.15);
    z-index: 1;
}

.pf-loadgrid-seg-num {
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

/* Rear doors sit at the BOTTOM of the vertical trailer (full-width bar, horizontal stripes), labeled so
   the back of the truck is obvious. */
.pf-loadgrid-doors {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    border: 1px solid var(--mud-palette-lines-default);
    border-top: none;
    border-radius: 0 0 6px 6px;
    background: repeating-linear-gradient(
        to right,
        var(--mud-palette-text-secondary),
        var(--mud-palette-text-secondary) 4px,
        transparent 4px,
        transparent 8px);
}
/* The doors label sits on the striped bar; a translucent chip keeps it readable over the stripes. */
.pf-loadgrid-end-label-doors {
    padding: 1px 6px;
    border-radius: 7px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}

.pf-loadgrid-ends {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    color: var(--mud-palette-text-disabled);
}

/* Hover flyout naming the hovered stop's enrollment. */
.pf-loadgrid-flyout {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid;
    border-radius: 8px;
    background: var(--mud-palette-surface);
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
    font-size: 0.8rem;
}

.pf-loadgrid-flyout-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    color: #fff;
    font-weight: 700;
    line-height: 1;
}

.pf-loadgrid-flyout-label { font-weight: 600; }
.pf-loadgrid-flyout-trees { color: var(--mud-palette-text-secondary); }
.pf-loadgrid-flyout-day {
    margin-left: auto;
    color: var(--mud-palette-secondary);
    font-weight: 600;
}

/* -- Drag-and-drop manifest / holding area ----------------------------------------------------- */
.pf-dropcontainer { display: block; }

/* Trucks render as vertical blades laid side-by-side (like Trello/Azure blades): each truck is a
   narrow, tall trailer standing on end, and the blades wrap to new rows as the viewport narrows. */
.pf-truck-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    /* Stretch every blade in a row to the tallest one's height so all trucks line up, regardless of
       how many shipments each carries. The extra height is absorbed by each trailer's cargo bay. */
    align-items: stretch;
}

/* Each blade is a fixed, narrow width so shipments read as a stacked top→bottom load. The blade is a
   flex column so its cargo bay can grow to fill the row's shared (stretched) height. */
.pf-truck-grid > * {
    flex: 0 0 320px;
    width: 320px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
}

.pf-dropzone {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    min-height: 48px;
}

/* The truck cargo bay IS a drop zone: shipment blocks stacked nose(top)→rear(bottom) as draggable
   items. Remaining height shows as striped empty trailer. The whole bay accepts drops. */
.pf-dropzone-trailer {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 3px;
    padding: 6px;
    /* Tall drop target — the vertical cargo bay stays full-size even with no shipments, and grows to
       fill the blade's stretched height so every truck in a row ends at the same bottom edge. */
    flex: 1 1 auto;
    min-height: 340px;
    /* Dashed border around the whole cargo bay so the droppable area is always visible. */
    border: 2px dashed var(--mud-palette-lines-default);
    border-radius: 6px;
    background:
        repeating-linear-gradient(
            45deg,
            var(--mud-palette-background-grey),
            var(--mud-palette-background-grey) 7px,
            transparent 7px,
            transparent 14px);
    overflow: hidden;
}

/* Every shipment block fills the full width of the cargo bay. MudDropZone wraps each item in a
   .mud-drop-item, and each shipment card is itself wrapped in a MudTooltip root element; force those
   wrappers (and the cards inside) to stretch so all shipments span the trailer regardless of tree
   count or content length. */
.pf-dropzone-trailer .mud-drop-item {
    display: block;
    width: 100%;
    box-sizing: border-box;
}
/* MudTooltip renders a content-sized inline wrapper around each card; stretch only that outermost
   wrapper (the direct child of the drop item) to the full bay width so the card inside can fill it.
   Using the direct-child combinator avoids matching the nested tooltips around the program badge,
   hard-date chip, etc., which must stay compact. */
.pf-dropzone-trailer .mud-drop-item > .mud-tooltip-root {
    display: block !important;
    width: 100%;
}
.pf-dropzone-trailer .mud-drop-item .pf-seg-card {
    width: 100%;
}

/* Empty-trailer hint (only shown when the bay holds no shipment blocks). */
.pf-dropzone-trailer:not(:has(.pf-seg-card))::after {
    content: "Drop shipments here";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mud-palette-text-disabled);
    pointer-events: none;
}

.pf-dropzone-holding {
    min-height: 64px;
    background:
        repeating-linear-gradient(
            45deg,
            var(--mud-palette-background-grey),
            var(--mud-palette-background-grey) 8px,
            transparent 8px,
            transparent 16px);
    border-radius: 6px;
    margin: 8px 12px 12px;
}

.pf-holding { border-style: dashed; }

/* MudBlazor drop-zone affordances while dragging. */
.mud-drop-zone.pf-dropzone.mud-drop-zone-drag-block-active,
.mud-drop-zone.pf-dropzone-holding.mud-drop-zone-drag-block-active,
.mud-drop-zone.pf-dropzone-trailer.mud-drop-zone-drag-block-active {
    outline: 2px dashed var(--mud-palette-primary);
    outline-offset: -4px;
    background-color: var(--mud-palette-primary-hover);
}

/* Draggable stop card (used in the holding area as a horizontal chip). */
.pf-stop-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    cursor: grab;
    user-select: none;
}
.pf-stop-card:active { cursor: grabbing; }
.pf-stop-card.mud-drop-item-dragging { opacity: 0.6; }

/* Trailer shipment block: one enrollment, solid truck-color fill, bordered, draggable.
   In the vertical bay, HEIGHT is proportional to tree count via inline flex-grow; min-height
   keeps each block legible and full-width keeps the org name readable. */
.pf-seg-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    flex: 1 1 0;
    width: 100%;
    min-height: 48px;
    padding: 6px 8px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);
    color: #fff;
    cursor: grab;
    user-select: none;
    overflow: hidden;
}
.pf-seg-card:active { cursor: grabbing; }
.pf-seg-card.mud-drop-item-dragging { opacity: 0.55; }

.pf-seg-card-top {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.pf-seg-card-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.32);
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    flex: 0 0 auto;
}
.pf-seg-card-name {
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    min-width: 0;
    /* Keep the load number + name anchored left; the program badge and any trailing controls are
       pushed to the right edge so badges line up consistently regardless of name length. */
    margin-right: auto;
}
.pf-seg-card-sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    opacity: 0.95;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Split-shipment affordance: small circular icon button overlaid on the colored block.
   Implemented as a plain <button> (not a MudIconButton) with a native title tooltip, so the floating
   popover and ripple feedback loop that made the old MudTooltip-wrapped button flicker are gone. */
.pf-seg-card-iconbtn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 0, 0, 0.22);
    cursor: pointer;
    transition: background 120ms ease;
}
/* Group the manual split-off button next to the capacity-split button with a small gap. */
.pf-seg-card-iconbtn-splitoff { margin-left: 2px; }
.pf-seg-card-iconbtn:hover { background: rgba(0, 0, 0, 0.38); }
.pf-seg-card-iconbtn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 1px;
}
/* Keep the glyph centered/sized within the smaller circular button. */
.pf-seg-card-iconbtn .mud-icon-root { font-size: 1rem; }

/* Inline trees-per-piece editor sitting on the colored block. */
.pf-seg-card-edit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pf-seg-trees-input {
    width: 52px;
    padding: 1px 4px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.28);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: right;
    cursor: text;
}
.pf-seg-trees-input:focus {
    outline: none;
    border-color: #fff;
    background: rgba(0, 0, 0, 0.42);
}

/* Split-shipment badge: makes split pieces obvious at a glance (sits next to the 1a/1b name). */
.pf-seg-split {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    padding: 0 5px 0 3px;
    height: 16px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.32);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
}
.pf-seg-split .mud-icon-root { font-size: 0.85rem; }

/* Interactive variant of the split badge: clicking it rejoins the shipment's pieces on this truck,
   so it reads as a button (pointer cursor, subtle hover/focus lift) rather than a static label. */
.pf-seg-split-action {
    cursor: pointer;
    transition: background 120ms ease;
}
.pf-seg-split-action:hover { background: rgba(0, 0, 0, 0.48); }
.pf-seg-split-action:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 1px;
}

/* Program shorthand badge on a shipment block (e.g. "ROW"): identifies the program at a glance
   next to the org name. Styled as a light pill so it reads as metadata, not an action. */
.pf-seg-prog {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0 6px;
    height: 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    color: rgba(0, 0, 0, 0.78);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
    text-shadow: none;
    white-space: nowrap;
}

/* Program-colored variant: the badge background is the program's shared color (matching the dashboard /
   reports / programs page). Sits on the truck-colored card, so a thin white ring + light shadow keeps it
   legible against any truck color, and white text reads on the saturated program palette. */
.pf-seg-prog-colored {
    color: #fff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 1px 2px rgba(0, 0, 0, 0.35);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* Hard delivery-date chip on a shipment block: the truck must run on this date. */
.pf-seg-hard-date {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 1px 6px 1px 4px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.92);
    color: rgba(0, 0, 0, 0.82);
    font-size: 0.64rem;
    font-weight: 800;
    line-height: 1.2;
    text-shadow: none;
}
.pf-seg-hard-date .mud-icon-root { font-size: 0.9rem; }

/* When the hard date conflicts with the truck's day, paint the chip red so it can't be missed. */
.pf-seg-hard-date-bad {
    background: var(--mud-palette-error);
    color: #fff;
}

/* Clickable hard-date chip: signals it can be edited and lifts slightly on hover. */
.pf-seg-hard-date-edit {
    cursor: pointer;
    transition: filter 0.12s ease, box-shadow 0.12s ease;
}
.pf-seg-hard-date-edit:hover {
    filter: brightness(0.94);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
}
.pf-seg-hard-date-edit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}

/* Empty-state "Set date" chip: dashed, translucent so it reads as an add affordance, not a value. */
.pf-seg-hard-date-empty {
    background: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.95);
    border: 1px dashed rgba(255, 255, 255, 0.7);
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.pf-seg-hard-date-empty:hover {
    background: rgba(255, 255, 255, 0.28);
    filter: none;
}

/* Per-stop conflict flag (warning triangle next to the name). */
.pf-seg-conflict-flag {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    color: #fff;
}
.pf-seg-conflict-flag .mud-icon-root {
    font-size: 1rem;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* The whole block when it can't legally ride this truck: a pulsing red ring around the colored card. */
.pf-seg-card.pf-seg-conflict {
    box-shadow: 0 0 0 2px var(--mud-palette-error), 0 0 0 4px rgba(0, 0, 0, 0.28);
    animation: pf-seg-conflict-pulse 1.6s ease-in-out infinite;
}
@keyframes pf-seg-conflict-pulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--mud-palette-error), 0 0 0 4px rgba(0, 0, 0, 0.28); }
    50%      { box-shadow: 0 0 0 3px var(--mud-palette-error), 0 0 6px 5px rgba(211, 47, 47, 0.55); }
}

/* Two-line address cell in the Locations grid: street on top, city/state/zip beneath in muted text. */
.pf-addr-cell {
    line-height: 1.25;
}
.pf-addr-cell-sub {
    color: var(--mud-palette-text-secondary);
    font-size: 0.82em;
}

.pf-stop-load {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    color: #fff;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    flex: 0 0 auto;
}

.pf-stop-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}
.pf-stop-label {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pf-stop-sub {
    font-size: 0.74rem;
    color: var(--mud-palette-text-secondary);
}

/* Holding area lays the shipment blocks out as a wrapping row of fixed-ish chips rather than
   stretching them edge-to-edge like a trailer. */
.pf-dropzone-holdwrap {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 6px;
}
.pf-dropzone-holdwrap .pf-seg-card {
    flex: 0 0 auto;
    min-width: 150px;
    max-width: 220px;
    min-height: 44px;
}

/* Rich MudTooltip body for a shipment block. */
.pf-seg-tip {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    font-size: 0.78rem;
    line-height: 1.25;
}
.pf-seg-tip strong { font-size: 0.84rem; }