/* 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 */
}

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 */
body {
    background-color: #1e6fa8;
    background-image: url('/images/forest-bg.svg');
    background-size: cover;
    background-position: bottom center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* 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 */
.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;
    margin-top: 0.25rem;
    margin-bottom: 2rem;
}

/* Cards and surfaces: slightly transparent white */
.mud-paper:not(.mud-appbar):not(.mud-drawer):not(.mud-menu-list) {
    background-color: rgba(255, 255, 255, 0.90) !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;
}

/* 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: 240px; 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; }

/* 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)
   ==================================================================== */

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

.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
   ==================================================================== */

/* 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;
}

.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: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    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 quick-actions bar (Clients page) ────────────────── */
/* Centered pill anchored to the bottom of the viewport so it never
   overlaps table content; menus open upward (AnchorOrigin TopCenter). */
.pf-quick-actions-bar {
    position:        fixed;
    bottom:          16px;
    left:            50%;
    transform:       translateX(-50%);
    z-index:         1200;
    display:         flex;
    align-items:     center;
    gap:             8px;
    padding:         8px 16px;
    background:      rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    border-radius:   28px;
    box-shadow:      0 4px 24px rgba(0,0,0,0.14), 0 1px 4px rgba(0,0,0,0.08);
    white-space:     nowrap;
    border:          1px solid rgba(0,0,0,0.07);
    max-width:       calc(100vw - 24px);
}

.pf-quick-actions-label {
    font-size:      0.68rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--mud-palette-text-secondary);
    margin-right:   4px;
    flex-shrink:    0;
}

.pf-btn-text {
    display: inline;
}

/* Medium: icon-only buttons, keep "ADMIN" label */
@media (min-width: 681px) and (max-width: 959px) {
    .pf-btn-text {
        display: none;
    }
    .pf-quick-actions-bar .mud-button {
        min-width: 0;
        padding:   4px 6px;
    }
    .pf-quick-actions-bar .mud-button-icon-start {
        margin-right: 0 !important;
    }
    .pf-quick-actions-bar .mud-button-icon-end {
        margin-left: 2px !important;
    }
}

/* Small: icon-only buttons, hide "ADMIN" label too */
@media (max-width: 680px) {
    .pf-quick-actions-bar {
        gap:     4px;
        padding: 6px 10px;
    }
    .pf-btn-text,
    .pf-quick-actions-label {
        display: none;
    }
    .pf-quick-actions-bar .mud-button {
        min-width: 0;
        padding:   4px 5px;
    }
    .pf-quick-actions-bar .mud-button-label {
        gap: 0;
    }
    .pf-quick-actions-bar .mud-button-icon-start {
        margin-right: 0 !important;
    }
    .pf-quick-actions-bar .mud-button-icon-end {
        margin-left: 0 !important;
    }
    .pf-admin-menu-popover {
        left:      50% !important;
        transform: translateX(-50%) !important;
    }
}

/* ── 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 */
}

/* 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;
}

/* ── 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;
}

/* Medium screens: switch to CSS Grid so every cell is exactly 1/N of the row.
   A lone chip on the last row is automatically the same width as chips in the
   row above — flex-grow cannot achieve this because it doesn't know N.
   auto-fill + minmax(200px, 1fr) picks the column count from available width:
   ~670px → 3 cols (3+3+1), ~900px → 4 cols (4+3). */
@media (min-width: 601px) and (max-width: 959px) {
    .pf-kpi-chips {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

@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; }
    /* Swap Unlinked/Merge (4th) with Email Score (6th) on mobile */
    .pf-chip-score { order: 1; }
    .pf-chip-dq    { order: 2; }
    .pf-chip-prog  { order: 3; }
}

/* 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;
    z-index: 400;
    animation: pf-fade-up 0.18s ease both;
}

/* ── KPI deck inner panel (Trees / Clients / Enrollments) ─────────── */
.pf-kpi-deck-panel {
    width: min(420px, calc(100vw - 32px));
}

/* ── 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%);
}

.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;
    }
}

/* 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
   ==================================================================== */

/* ====================================================================
   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 */
.pf-card-table table {
    border-collapse: separate !important;
    border-spacing: 0 5px !important;
    background: transparent !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;
}

/* ── 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;
}

/* 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;
}

/* ── 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;
    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; }
}

/* 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 .mud-tooltip-root so MudTooltip keeps its dark background.  */
.mud-popover:not(.mud-tooltip),
.mud-popover:not(.mud-tooltip) .mud-list,
.mud-menu-list {
    background-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;
}