/* ===========================================================================
   Patriot LPR — Design System  (foundation v2)
   Dark slate surfaces · Patriot navy + brand-red accent.
   Modeled on GoatAssist's proven .ga-* system, re-toned dark and prefixed .plr-*.

   ADDITIVE + COEXISTING: this sheet is loaded globally but defines ONLY
   :root custom properties and .plr-* prefixed classes. It contains NO bare
   element resets (body / a / input / table / h1 …), so it cannot repaint any
   existing (old) page — old UI keeps its exact look. New V2 pages opt in by
   using .plr-* classes and the V2 layout.
   =========================================================================== */

:root {
    /* --- surfaces / neutrals (DARK slate) --- */
    --plr-canvas:        #3b4a5c;  /* app / page background */
    --plr-surface:       #344254;  /* cards */
    --plr-surface-2:     #2d3a4a;  /* subtle inset / striped rows / inputs */
    --plr-surface-3:     #3d4f63;  /* hover fill / raised */
    --plr-text:          #e2e8f0;  /* primary text */
    --plr-text-strong:   #ffffff;
    --plr-muted:         #8a99ab;  /* secondary text */
    --plr-border:        #4a5a6d;  /* hairlines */
    --plr-border-strong: #5a6c80;

    /* --- brand / accents --- */
    --plr-navy:          #1a365d;  /* primary — headers / primary buttons / active */
    --plr-navy-hover:    #0d2b4b;  /* darker */
    --plr-navy-light:    #2a4a7f;  /* lighter */
    --plr-primary:       var(--plr-navy);
    --plr-primary-hover: var(--plr-navy-hover);
    --plr-on-primary:    #ffffff;

    --plr-red:           #c53030;  /* brand red — the attention accent */
    --plr-red-light:     #e53e3e;
    --plr-red-dark:      #9b2c2c;
    --plr-accent:        var(--plr-red);
    --plr-on-accent:     #ffffff;

    --plr-link:          #5b9bd5;  /* links / focus accent */
    --plr-link-hover:    #7db8e8;
    --plr-focus:         rgba(91, 155, 213, .30);

    --plr-sidebar-bg:    #0f172a;  /* icon-rail sidebar shell */

    /* --- operational status (reserved — never decorative) --- */
    --plr-good:    #4ade80;  --plr-good-bg:  rgba(45, 138, 94, .18);  --plr-good-bd:  rgba(74, 222, 128, .32);
    --plr-warn:    #fbbf24;  --plr-warn-bg:  rgba(217, 119, 6, .18);  --plr-warn-bd:  rgba(251, 191, 36, .32);
    --plr-bad:     #f87171;  --plr-bad-bg:   rgba(179, 38, 30, .20);  --plr-bad-bd:   rgba(248, 113, 113, .32);

    /* --- shape --- */
    --plr-radius-sm:  6px;
    --plr-radius:     8px;
    --plr-radius-lg:  12px;
    --plr-radius-pill: 999px;

    /* --- spacing scale (4px base — single source of rhythm) --- */
    --plr-1: .25rem; --plr-2: .5rem; --plr-3: .75rem; --plr-4: 1rem;
    --plr-5: 1.5rem; --plr-6: 2rem; --plr-7: 3rem; --plr-8: 4rem;

    /* --- type scale (one ramp) --- */
    --plr-fs-micro: .75rem; --plr-fs-sm: .875rem; --plr-fs-base: 1rem; --plr-fs-lg: 1.125rem;
    --plr-fs-h4: 1.25rem; --plr-fs-h3: 1.5rem; --plr-fs-h2: 2rem; --plr-fs-h1: 2.5rem;

    --plr-font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --plr-font-display: Georgia, 'Times New Roman', 'Times', serif;  /* editorial numerals (stat values) */

    /* --- elevation --- */
    --plr-shadow-sm:      0 1px 2px rgba(0, 0, 0, .18), 0 1px 3px rgba(0, 0, 0, .22);
    --plr-shadow-md:      0 4px 16px rgba(0, 0, 0, .28);
    --plr-shadow-overlay: 0 12px 32px rgba(0, 0, 0, .40), 0 2px 8px rgba(0, 0, 0, .28);

    /* --- motion + z --- */
    --plr-ease: .2s cubic-bezier(.4, 0, .2, 1);
    --plr-z-nav: 1050; --plr-z-overlay: 1060; --plr-z-modal: 1070;

    /* --- app shell --- */
    --plr-sidebar-rail: 72px; --plr-sidebar-open: 248px;

    /* --- canonical breakpoints (documented; media queries below use these values):
       phone ≤640 · tablet 641–1024 · desktop >1024 · wide >1280.
       NOTE: the sidebar drawer boundary stays at 992px to remain compatible with the
       existing, unmodified nav-menu.js (which hardcodes 992 for auto-close). --- */
}

/* ======================================================================== */
/*  SCROLLBAR CHROME — the ONE intentional global rule in this sheet.        */
/*  Styles only the scroll *chrome* (not content), so it repaints no layout  */
/*  and touches no old-page look — it just turns the default fat gray bar     */
/*  into a slim, dark, on-theme scrollbar (GoatAssist model). The 2px track-  */
/*  colored border insets the thumb so it reads ~6px slim. Token-based, no    */
/*  inline hex. Firefox uses scrollbar-width/color; WebKit uses the pseudo-   */
/*  elements. More-specific inner scrollers (.plr-table-card, .plr-sb-nav)    */
/*  keep their own tighter overrides.                                         */
/* ======================================================================== */
html { scrollbar-width: thin; scrollbar-color: var(--plr-border-strong) var(--plr-surface-2); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--plr-surface-2); }
::-webkit-scrollbar-thumb {
    background: var(--plr-border-strong); border-radius: var(--plr-radius-pill);
    border: 2px solid var(--plr-surface-2);
}
::-webkit-scrollbar-thumb:hover { background: var(--plr-muted); }
::-webkit-scrollbar-corner { background: var(--plr-surface-2); }

/* ======================================================================== */
/*  SCOPED BASE — only inside a .plr-scope container (V2 pages), never global */
/* ======================================================================== */
.plr-scope { color: var(--plr-text); font-family: var(--plr-font-body); }
.plr-scope h1, .plr-scope h2, .plr-scope h3, .plr-scope h4 {
    color: var(--plr-text-strong); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 .5em;
}
.plr-scope h1 { font-size: var(--plr-fs-h1); }
.plr-scope h2 { font-size: var(--plr-fs-h2); }
.plr-scope h3 { font-size: var(--plr-fs-h3); }
.plr-scope h4 { font-size: var(--plr-fs-h4); }
.plr-scope a { color: var(--plr-link); text-decoration: none; }
.plr-scope a:hover { color: var(--plr-link-hover); text-decoration: underline; }

/* ======================================================================== */
/*  BUTTONS                                                                  */
/* ======================================================================== */
.plr-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: var(--plr-font-body); font-size: .9375rem; font-weight: 600; line-height: 1;
    min-height: 42px; padding: .7rem 1.15rem;
    border-radius: var(--plr-radius); border: 1px solid transparent;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.plr-btn:hover { text-decoration: none; }
.plr-btn:disabled, .plr-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }

.plr-btn-primary { background: var(--plr-primary); color: var(--plr-on-primary); }
.plr-btn-primary:hover { background: var(--plr-primary-hover); color: var(--plr-on-primary); }

.plr-btn-accent { background: var(--plr-accent); color: var(--plr-on-accent); box-shadow: 0 0 18px rgba(197, 48, 48, .22); }
.plr-btn-accent:hover { background: var(--plr-red-dark); color: var(--plr-on-accent); transform: translateY(-1px); box-shadow: 0 0 26px rgba(197, 48, 48, .38); }

.plr-btn-ghost { background: transparent; color: var(--plr-text); border-color: var(--plr-border-strong); }
.plr-btn-ghost:hover { background: var(--plr-surface-3); color: var(--plr-text-strong); }

.plr-btn-danger { background: transparent; color: var(--plr-bad); border-color: var(--plr-bad); }
.plr-btn-danger:hover { background: var(--plr-bad-bg); color: var(--plr-bad); }

.plr-btn-sm { min-height: 34px; padding: .4rem .75rem; font-size: var(--plr-fs-sm); }
.plr-btn-lg { min-height: 50px; padding: .9rem 1.5rem; font-size: 1.0625rem; }
.plr-btn-block { width: 100%; }

/* quiet link-styled button */
.plr-link-btn { background: none; border: none; padding: 0; margin: 0; font: inherit; color: var(--plr-link); cursor: pointer; }
.plr-link-btn:hover { color: var(--plr-link-hover); text-decoration: underline; }

/* ======================================================================== */
/*  CARDS                                                                    */
/* ======================================================================== */
.plr-card {
    background: var(--plr-surface); border: 1px solid var(--plr-border);
    border-radius: var(--plr-radius-lg); padding: 1.5rem; box-shadow: var(--plr-shadow-sm);
}
.plr-card + .plr-card { margin-top: 1.25rem; }
.plr-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--plr-3); margin-bottom: var(--plr-4); }
.plr-card-head h3 { margin: 0; font-size: var(--plr-fs-h4); }
.plr-card-featured { border-color: var(--plr-accent); }
.plr-card-featured::before { content: ""; display: block; height: 3px; background: var(--plr-accent); border-radius: 3px; margin: -1.5rem -1.5rem 1.5rem; }

/* ======================================================================== */
/*  STAT / KPI TILE                                                          */
/* ======================================================================== */
.plr-stat { display: flex; flex-direction: column; gap: .25rem; }
.plr-stat-label { font-size: var(--plr-fs-micro); text-transform: uppercase; letter-spacing: .05em; color: var(--plr-muted); font-weight: 600; }
.plr-stat-value { font-family: var(--plr-font-display); font-size: 2rem; font-weight: 700; color: var(--plr-text-strong); line-height: 1; letter-spacing: -0.01em; }
.plr-stat-trend { font-size: var(--plr-fs-sm); color: var(--plr-good); font-weight: 600; }
.plr-stat-trend.down { color: var(--plr-bad); }

/* ======================================================================== */
/*  FORMS                                                                    */
/* ======================================================================== */
.plr-field { margin-bottom: 1.1rem; }
.plr-field label { display: block; font-size: var(--plr-fs-sm); font-weight: 600; color: var(--plr-text); margin-bottom: .35rem; }
.plr-input,
.plr-field input, .plr-field select, .plr-field textarea {
    width: 100%; font-family: var(--plr-font-body); font-size: 1rem; color: var(--plr-text);
    background: var(--plr-surface-2); padding: .65rem .75rem;
    border: 1px solid var(--plr-border); border-radius: var(--plr-radius);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.plr-input::placeholder,
.plr-field input::placeholder, .plr-field textarea::placeholder { color: var(--plr-muted); }
.plr-input:focus, .plr-input:focus-visible,
.plr-field input:focus, .plr-field select:focus, .plr-field textarea:focus {
    outline: none; border-color: var(--plr-link); box-shadow: 0 0 0 3px var(--plr-focus);
}
.plr-field select option { background: var(--plr-surface-2); color: var(--plr-text); }
/* checkbox / radio inside a field must not stretch to full width */
.plr-field input[type="checkbox"], .plr-field input[type="radio"] { width: auto; padding: 0; border: none; }

/* Blazor validation states (scoped so old pages are untouched) */
.plr-scope .invalid, .plr-field .invalid { border-color: var(--plr-bad) !important; }
.plr-scope .validation-message, .plr-field .validation-message { color: var(--plr-bad); font-size: .85rem; }
.plr-scope .valid.modified:not([type=checkbox]) { outline: none; }

/* ======================================================================== */
/*  CHIPS                                                                    */
/* ======================================================================== */
.plr-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .8125rem; font-weight: 500; padding: .25rem .6rem;
    border-radius: var(--plr-radius-pill); background: var(--plr-surface-3); color: var(--plr-text);
    white-space: nowrap;
}
.plr-chip-brand { background: rgba(91, 155, 213, .16); color: var(--plr-link); }
.plr-chip-accent { background: rgba(197, 48, 48, .18); color: var(--plr-red-light); }

/* ======================================================================== */
/*  STATUS PILLS (operational only)                                         */
/* ======================================================================== */
.plr-status { display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; font-weight: 600; padding: .25rem .6rem; border-radius: var(--plr-radius-pill); }
.plr-status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.plr-status-good { color: var(--plr-good); background: var(--plr-good-bg); }
.plr-status-warn { color: var(--plr-warn); background: var(--plr-warn-bg); }
.plr-status-bad  { color: var(--plr-bad);  background: var(--plr-bad-bg); }
.plr-status-muted { color: var(--plr-muted); background: var(--plr-surface-2); }

/* ======================================================================== */
/*  ALERTS                                                                   */
/* ======================================================================== */
.plr-alert { display: flex; gap: .6rem; padding: .75rem .9rem; border-radius: var(--plr-radius); font-size: var(--plr-fs-sm); border: 1px solid; }
.plr-alert-info { background: rgba(91, 155, 213, .14); border-color: rgba(91, 155, 213, .32); color: var(--plr-link); }
.plr-alert-good { background: var(--plr-good-bg); border-color: var(--plr-good-bd); color: var(--plr-good); }
.plr-alert-warn { background: var(--plr-warn-bg); border-color: var(--plr-warn-bd); color: var(--plr-warn); }
.plr-alert-bad  { background: var(--plr-bad-bg);  border-color: var(--plr-bad-bd);  color: var(--plr-bad); }

/* ======================================================================== */
/*  TABLE + TABLE-CARD (dark grid, phone → labelled cards)                   */
/* ======================================================================== */
.plr-table-card {
    background: var(--plr-surface); border: 1px solid var(--plr-border);
    border-radius: var(--plr-radius-lg); overflow-x: auto; overflow-y: hidden;
    box-shadow: var(--plr-shadow-sm);
    scrollbar-width: thin; scrollbar-color: var(--plr-border) transparent;
}
.plr-table-card::-webkit-scrollbar { height: 10px; }
.plr-table-card::-webkit-scrollbar-thumb { background: var(--plr-border); border-radius: var(--plr-radius-pill); }
.plr-table-card::-webkit-scrollbar-track { background: transparent; }
.plr-table-card .plr-table { width: auto; min-width: 100%; }

.plr-table { width: 100%; border-collapse: collapse; color: var(--plr-text); }
.plr-table th, .plr-table td { padding: .7rem .85rem; text-align: left; border-bottom: 1px solid var(--plr-border); vertical-align: middle; }
.plr-table thead th {
    background: var(--plr-surface-2); color: var(--plr-muted);
    font-size: var(--plr-fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    position: sticky; top: 0; z-index: 2;
}
.plr-table tbody tr:nth-child(even) { background: var(--plr-surface-2); }
.plr-table tbody tr:hover { background: var(--plr-surface-3); }
.plr-table tbody tr:last-child td { border-bottom: none; }
.plr-table td.primary-cell { color: var(--plr-text-strong); font-weight: 600; }
.plr-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.plr-table .nowrap { white-space: nowrap; }
.plr-table .actions { text-align: right; white-space: nowrap; }

/* ======================================================================== */
/*  PAGER                                                                    */
/* ======================================================================== */
.plr-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--plr-3); margin-top: var(--plr-4); flex-wrap: wrap; }
.plr-pager .count { font-size: var(--plr-fs-sm); color: var(--plr-muted); }
.plr-pager-btns { display: flex; gap: var(--plr-2); }

/* ======================================================================== */
/*  EMPTY STATE                                                              */
/* ======================================================================== */
.plr-empty { text-align: center; padding: var(--plr-7) var(--plr-4); color: var(--plr-muted); }
.plr-empty-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--plr-surface-2); display: grid; place-items: center; margin: 0 auto var(--plr-3); color: var(--plr-border-strong); font-size: 1.25rem; }
.plr-empty h3 { color: var(--plr-text); margin-bottom: .25rem; }

/* ======================================================================== */
/*  LIST ROWS (compact label + trailing badge; linked or plain)             */
/* ======================================================================== */
.plr-list { display: flex; flex-direction: column; }
.plr-list-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--plr-3);
    padding: .6rem .25rem; border-bottom: 1px solid var(--plr-border);
    color: var(--plr-text); text-decoration: none;
}
.plr-list-row:last-child { border-bottom: none; }
a.plr-list-row { border-radius: var(--plr-radius-sm); transition: background-color var(--plr-ease), color var(--plr-ease); }
a.plr-list-row:hover { background: var(--plr-surface-3); color: var(--plr-text-strong); text-decoration: none; }

/* ======================================================================== */
/*  ACTION TILE (clickable card: centered icon + label — quick actions)     */
/* ======================================================================== */
.plr-action {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--plr-2); text-align: center; text-decoration: none; color: var(--plr-text);
    transition: border-color var(--plr-ease), color var(--plr-ease), transform var(--plr-ease);
}
.plr-action:hover { color: var(--plr-text-strong); border-color: var(--plr-border-strong); transform: translateY(-1px); text-decoration: none; }
.plr-action i { font-size: 1.5rem; color: var(--plr-link); }
.plr-action-label { font-size: var(--plr-fs-sm); font-weight: 600; }

/* ======================================================================== */
/*  MODAL                                                                    */
/* ======================================================================== */
.plr-modal-backdrop {
    position: fixed; inset: 0; background: rgba(0, 0, 0, .55);
    display: flex; align-items: center; justify-content: center; padding: var(--plr-4);
    z-index: var(--plr-z-modal); backdrop-filter: blur(2px);
}
.plr-modal {
    background: var(--plr-surface); border: 1px solid var(--plr-border);
    border-radius: var(--plr-radius-lg); box-shadow: var(--plr-shadow-overlay);
    width: min(640px, 100%); max-height: min(84vh, 60rem); display: flex; flex-direction: column;
    color: var(--plr-text);
}
.plr-modal-head { display: flex; align-items: center; gap: var(--plr-3); padding: var(--plr-4) var(--plr-4) var(--plr-3); border-bottom: 1px solid var(--plr-border); }
.plr-modal-head h3 { margin: 0; font-size: 1.125rem; color: var(--plr-text-strong); }
.plr-modal-body { padding: var(--plr-4); overflow-y: auto; }
.plr-modal-foot { display: flex; flex-wrap: wrap; gap: var(--plr-3); justify-content: flex-end; padding: var(--plr-3) var(--plr-4) var(--plr-4); border-top: 1px solid var(--plr-border); }

/* ======================================================================== */
/*  PAGE HEAD + LAYOUT PRIMITIVES                                            */
/* ======================================================================== */
.plr-page-head { margin-bottom: 1.5rem; }
.plr-page-head h1 { margin-bottom: .25rem; }
.plr-sub { color: var(--plr-muted); margin: 0; }

.plr-grid { display: grid; gap: var(--plr-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.plr-grid-sm { display: grid; gap: var(--plr-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.plr-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--plr-3); }
.plr-cluster-between { display: flex; flex-wrap: wrap; align-items: center; gap: var(--plr-3); justify-content: space-between; }
.plr-stack > * + * { margin-top: var(--plr-4); }
.plr-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--plr-3); margin-bottom: var(--plr-4); }
.plr-toolbar .plr-field { margin: 0; }
.plr-toolbar .grow { flex: 1 1 240px; }

/* ======================================================================== */
/*  APP SHELL — dark icon-rail sidebar (72px rail → hover-expand; mobile     */
/*  off-canvas drawer). Reuses the existing nav-menu.js contract:            */
/*  #sidebar element, toggled class "collapse", .sidebar-link auto-close,    */
/*  #sidebarOverlay, #mobileMenuBtn. All rules scoped under .plr-shell so    */
/*  they never touch the old MainLayout/NavMenu.                             */
/* ======================================================================== */
/* SCROLL FIX: the document/body scrolls naturally (GoatAssist model). The shell is a
   plain block — NOT a flex row with min-height:100vh — and the sidebar is position:fixed
   (out of flow) instead of an in-flow sticky 100vh flex child. That old flex-row + sticky
   + 100vh combination trapped page scrolling and left a dead right-side scrollbar. The
   main column simply reserves the fixed rail with a left margin and grows with content. */
.plr-shell { background: var(--plr-canvas); color: var(--plr-text); }

.plr-shell .plr-sidebar {
    background: var(--plr-sidebar-bg); color: rgba(255, 255, 255, .8);
    width: var(--plr-sidebar-open); height: 100vh; position: fixed; top: 0; left: 0;
    display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0;
    z-index: var(--plr-z-nav); box-shadow: 2px 0 8px rgba(0, 0, 0, .25);
    transition: width var(--plr-ease), transform var(--plr-ease), box-shadow var(--plr-ease);
}

/* Main flows in the document and scrolls with it. min-height keeps the footer pinned to
   the viewport bottom on short pages WITHOUT locking scroll; margin-left reserves the
   fixed rail (set per-breakpoint below — 0 on mobile drawer, rail width on desktop). */
.plr-shell .plr-main { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; margin-left: 0; }
.plr-shell .plr-content { flex: 1; }

/* ---- Desktop / tablet: collapsed = icon rail, hover expands over content ---- */
@media (min-width: 992px) {
    /* Reserve the fixed rail's footprint; the sidebar hover-expands OVER content
       (fixed), so the content does not shift and this margin stays at the rail width. */
    .plr-shell .plr-main { margin-left: var(--plr-sidebar-rail); }

    .plr-shell .plr-sidebar.collapse {
        width: var(--plr-sidebar-rail); display: flex !important; visibility: visible !important;
    }
    .plr-shell .plr-sidebar.collapse .nav-text,
    .plr-shell .plr-sidebar.collapse .plr-sb-brand,
    .plr-shell .plr-sidebar.collapse .plr-sb-user-info { display: none; }
    .plr-shell .plr-sidebar.collapse .plr-sb-head { justify-content: center; }
    .plr-shell .plr-sidebar.collapse:hover { width: var(--plr-sidebar-open); box-shadow: var(--plr-shadow-overlay); overflow: visible; }
    .plr-shell .plr-sidebar.collapse:hover .nav-text,
    .plr-shell .plr-sidebar.collapse:hover .plr-sb-brand,
    .plr-shell .plr-sidebar.collapse:hover .plr-sb-user-info { display: block; animation: plrFade .2s ease-in; }
    .plr-shell .plr-sidebar.collapse:hover .chevron { display: inline-block; }
    .plr-shell .plr-sidebar.collapse:hover .plr-sb-head { justify-content: flex-start; }
}

@keyframes plrFade { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } }

/* ---- Sidebar header / brand ---- */
.plr-shell .plr-sb-head {
    display: flex; align-items: center; gap: .625rem; padding: .875rem .5rem .75rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08); flex-shrink: 0;
}
.plr-shell .plr-sb-logo { height: 36px; width: auto; min-width: 36px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3)); }
.plr-shell .plr-sb-brand { overflow: hidden; white-space: nowrap; min-width: 0; }
.plr-shell .plr-sb-brand-name { font-size: .8125rem; font-weight: 600; color: rgba(255, 255, 255, .95); line-height: 1.3; text-overflow: ellipsis; overflow: hidden; }
.plr-shell .plr-sb-brand-email { font-size: .6875rem; color: rgba(255, 255, 255, .4); text-overflow: ellipsis; overflow: hidden; }
.plr-shell .plr-sb-close { display: none; margin-left: auto; flex-shrink: 0; background: rgba(255, 255, 255, .1); border: none; color: rgba(255, 255, 255, .7); width: 32px; height: 32px; border-radius: var(--plr-radius-sm); align-items: center; justify-content: center; cursor: pointer; }
.plr-shell .plr-sb-close:hover { background: rgba(255, 255, 255, .2); color: #fff; }

/* ---- Scrollable nav ---- */
.plr-shell .plr-sb-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: .25rem 0; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .08) transparent; }
.plr-shell .plr-sb-nav::-webkit-scrollbar { width: 3px; }
.plr-shell .plr-sb-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .08); border-radius: 2px; }

/* ---- Links (custom class; NOT .nav-link, to avoid Bootstrap conflict) ---- */
.plr-shell .plr-sb-link {
    display: flex !important; align-items: center; gap: 0; padding: .5rem 0; margin: 1px 0;
    color: rgba(255, 255, 255, .65); text-decoration: none; white-space: nowrap; cursor: pointer;
    border-left: 3px solid transparent; transition: background-color var(--plr-ease), color var(--plr-ease);
}
.plr-shell .plr-sb-link:hover { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .95); text-decoration: none; }
.plr-shell .plr-sb-link.active { background: rgba(255, 255, 255, .12); color: #fff !important; font-weight: 600; border-left-color: var(--plr-accent); }
.plr-shell .plr-sb-link i:first-child { font-size: 1.1rem; min-width: var(--plr-sidebar-rail); text-align: center; flex-shrink: 0; color: rgba(255, 255, 255, .45); transition: color var(--plr-ease); }
.plr-shell .plr-sb-link:hover i:first-child, .plr-shell .plr-sb-link.active i:first-child { color: rgba(255, 255, 255, .95); }
.plr-shell .plr-sb-link.sub-link i:first-child { font-size: .95rem; }
.plr-shell .nav-text { font-size: .8125rem; line-height: 1.4; }

/* ---- Section dividers + collapsible groups ---- */
.plr-shell .plr-sb-div { height: 1px; background: rgba(255, 255, 255, .06); margin: .375rem 0; border: none; }
.plr-shell .plr-sb-group {
    display: flex; align-items: center; gap: 0; width: 100%; padding: .5rem 0; margin: 1px 0;
    background: none; border: none; color: rgba(255, 255, 255, .6);
    font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    cursor: pointer; text-align: left; transition: background-color var(--plr-ease), color var(--plr-ease);
}
.plr-shell .plr-sb-group:hover { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .85); }
.plr-shell .plr-sb-group i:first-child { font-size: 1.05rem; min-width: var(--plr-sidebar-rail); text-align: center; flex-shrink: 0; }
.plr-shell .chevron { margin-left: auto; font-size: .65rem !important; min-width: auto !important; padding-right: .75rem; transition: transform var(--plr-ease); }
.plr-shell .chevron.open { transform: rotate(180deg); }
.plr-shell .plr-sb-items { max-height: 0; overflow: hidden; transition: max-height var(--plr-ease); }
.plr-shell .plr-sb-items.expanded { max-height: 640px; }

/* ---- Footer / logout ---- */
.plr-shell .plr-sb-foot { margin-top: auto; flex-shrink: 0; padding-bottom: .5rem; }
.plr-shell .plr-sb-link.logout-link { color: #fc8181 !important; }
.plr-shell .plr-sb-link.logout-link i:first-child { color: #fc8181 !important; }
.plr-shell .plr-sb-link.logout-link:hover { background: rgba(252, 129, 129, .08) !important; color: #feb2b2 !important; }
.plr-shell .plr-sb-link.logout-link:hover i:first-child { color: #feb2b2 !important; }

/* ---- Content footer ---- */
.plr-shell .plr-site-footer { text-align: center; padding: 1.25rem 1rem; margin-top: 2rem; background: var(--plr-surface-2); border-top: 1px solid var(--plr-border); font-size: .8125rem; color: var(--plr-muted); }
.plr-shell .plr-site-footer a { color: var(--plr-link); text-decoration: none; }
.plr-shell .plr-site-footer a:hover { color: var(--plr-link-hover); text-decoration: underline; }
.plr-shell .plr-footer-divider { margin: 0 .5rem; color: var(--plr-border); }

/* ---- Mobile menu button + overlay (hidden on desktop) ---- */
.plr-mobile-menu-btn { display: none; }
.plr-sidebar-overlay { display: none; }

/* ---- Mobile: off-canvas drawer (boundary 992 to match nav-menu.js) ---- */
@media (max-width: 991.98px) {
    /* Mobile: sidebar is an off-canvas fixed drawer overlaying content; main is full width.
       Reserve top space so page content (the .plr-page-head H1) clears the fixed
       .plr-mobile-menu-btn hamburger (top .625rem + 40px tall ≈ 50px). Worst case is a
       zero-top-padding page, so the clearance lives in the shell to fix every V2 page at
       once; self-padded pages just gain a little extra top breathing room on phone. */
    .plr-shell .plr-main { margin-left: 0; padding-top: calc(var(--plr-7) + var(--plr-2)); }
    .plr-shell .plr-sidebar {
        position: fixed; top: 0; left: 0; width: 280px; height: 100vh;
        transform: translateX(0); z-index: var(--plr-z-overlay); overflow-y: auto;
    }
    .plr-shell .plr-sidebar.collapse { transform: translateX(-100%); display: flex !important; visibility: visible !important; }
    .plr-shell .plr-sb-head { display: flex; align-items: center; }
    .plr-shell .plr-sb-brand { flex: 1; }
    .plr-shell .plr-sb-close { display: flex; }
    .plr-shell .plr-sb-nav { display: block !important; flex: 1; overflow-y: auto; }
    /* auto-expand groups on mobile for reach; hide chevrons */
    .plr-shell .plr-sb-items { max-height: 800px !important; }
    .plr-shell .chevron { display: none !important; }

    .plr-mobile-menu-btn {
        position: fixed; top: .625rem; left: .625rem; z-index: var(--plr-z-modal);
        background: var(--plr-navy); border: none; color: #fff; width: 40px; height: 40px;
        border-radius: var(--plr-radius); display: flex; align-items: center; justify-content: center;
        cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); padding: 0;
    }
    .plr-mobile-menu-btn:hover { background: var(--plr-navy-light); }
    .plr-mobile-menu-btn i { font-size: 1.25rem; }
    .plr-sidebar-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: var(--plr-z-nav); backdrop-filter: blur(2px); }
}

/* ======================================================================== */
/*  SORTABLE TABLE HEADER (reusable — clickable th that toggles sort)        */
/* ======================================================================== */
.plr-th-sort { cursor: pointer; user-select: none; white-space: nowrap; transition: color var(--plr-ease); }
.plr-th-sort:hover { color: var(--plr-text); }
.plr-th-sort .plr-sort-ic { margin-left: .4rem; opacity: .85; }

/* Violation / resolved state is shown as a compact .plr-status pill in a dedicated
   Status cell (see .plr-status-bad / -warn / -good) — NOT a full-row wash, so the
   row keeps normal dark surface + zebra + hover and text stays high-contrast. */
.plr-table td.status-cell { white-space: nowrap; }

/* ======================================================================== */
/*  RESPONSIVE MAIN + ASIDE SPLIT (2:1 desktop → stacked phone)              */
/* ======================================================================== */
.plr-split { display: grid; gap: var(--plr-5); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 992px) { .plr-split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }

/* ======================================================================== */
/*  ICON + TEXT LIST ROW (reusable — feature / spec / use-case lists)        */
/* ======================================================================== */
.plr-feat-row { display: flex; align-items: center; gap: .5rem; font-size: var(--plr-fs-sm); color: var(--plr-text); margin-bottom: .5rem; }
.plr-feat-row:last-child { margin-bottom: 0; }
.plr-feat-row > i:first-child { flex-shrink: 0; color: var(--plr-good); }

/* ======================================================================== */
/*  PAYWALL / GATED-DATA PATTERN (reusable — blurred teaser + centered lock) */
/* ======================================================================== */
.plr-paywall { position: relative; border-radius: var(--plr-radius-lg); overflow: hidden; min-height: 360px; }
.plr-paywall-blur { filter: blur(3px); opacity: .4; pointer-events: none; }
.plr-paywall-scrim {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    padding: var(--plr-4); background: linear-gradient(135deg, rgba(26, 54, 93, .95), rgba(45, 58, 74, .95));
}
.plr-paywall-panel { width: min(400px, 100%); }
.plr-paywall-lock { font-size: 3rem; color: rgba(255, 255, 255, .9); line-height: 1; }

/* Price tier (inside a .plr-card) */
.plr-price-amount { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--plr-text-strong); }
.plr-price-label { font-size: var(--plr-fs-sm); color: var(--plr-muted); }
.plr-price-note { text-align: center; padding: var(--plr-3); color: var(--plr-muted); font-size: var(--plr-fs-sm); border-top: 1px solid var(--plr-border); margin-top: var(--plr-3); }

/* ======================================================================== */
/*  RESPONSIVE — phone ≤640: tables collapse to labelled cards (no scroll)   */
/* ======================================================================== */
@media (max-width: 640px) {
    .plr-table thead { position: absolute; left: -9999px; }
    .plr-table, .plr-table tbody, .plr-table tr, .plr-table td { display: block; width: 100%; }
    .plr-table tr { padding: var(--plr-3) var(--plr-4); border-bottom: 1px solid var(--plr-border); }
    .plr-table tbody tr:hover { background: transparent; }
    .plr-table td { border: none; padding: .3rem 0; display: flex; justify-content: space-between; align-items: center; gap: var(--plr-4); text-align: right; }
    .plr-table td::before { content: attr(data-label); font-size: var(--plr-fs-micro); text-transform: uppercase; letter-spacing: .04em; color: var(--plr-muted); font-weight: 600; text-align: left; flex: none; }
    .plr-table td.actions { justify-content: flex-end; padding-top: .6rem; }
    .plr-table td.actions::before { display: none; }
    .plr-table td.nowrap { white-space: normal; }
    .plr-table td.primary-cell { font-weight: 700; font-size: 1.05rem; color: var(--plr-text-strong); border-bottom: 1px solid var(--plr-border); padding-bottom: .5rem; margin-bottom: .25rem; }
    .plr-pager { flex-direction: column; align-items: stretch; }
}

/* ======================================================================== */
/*  CONVERGED BATCH-1 PRIMITIVES                                             */
/*  Extracted from the 5 Manager V2 pages so every page shares ONE           */
/*  definition instead of page-scoped copies (.mv-req, .required,            */
/*  .pmv-form-grid/.pmv-span2, .pmv-detail-grid, inline min(760px)).         */
/*  Token-based, no inline hex. Placed LAST so the single-class .plr-modal-lg */
/*  width wins over .plr-modal by source order.                             */
/* ======================================================================== */

/* Modal form-field grid — responsive 2-up that collapses to 1-up; zeroes the
   inner .plr-field bottom margin so the grid gap owns the rhythm. */
.plr-form-grid { display: grid; gap: var(--plr-4); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.plr-form-row  { display: grid; gap: var(--plr-4); grid-template-columns: 1fr 1fr; }
.plr-form-grid > .plr-field, .plr-form-row > .plr-field { margin-bottom: 0; }
.plr-span-all { grid-column: 1 / -1; }
@media (max-width: 640px) { .plr-form-row { grid-template-columns: 1fr; } }

/* Required-field asterisk — apply to the <label>. */
.plr-required::after { content: " *"; color: var(--plr-red-light); font-weight: 700; }

/* Wider modal (~760px) — follows .plr-modal above so it overrides its width. */
.plr-modal-lg { width: min(760px, 100%); }

/* Anchored column-filter dropdown surface. Wrap the trigger in
   .plr-popover-anchor; add .plr-popover-end for a right-aligned popover. */
.plr-popover-anchor { position: relative; display: inline-block; }
.plr-popover, .plr-filter-popup {
    position: absolute; top: calc(100% + .4rem); left: 0; z-index: var(--plr-z-overlay);
    min-width: 200px; padding: var(--plr-3);
    background: var(--plr-surface); border: 1px solid var(--plr-border-strong);
    border-radius: var(--plr-radius); box-shadow: var(--plr-shadow-overlay);
    text-transform: none; letter-spacing: normal;
}
.plr-popover-end { left: auto; right: 0; }

/* Read-only detail list (label/value grid) for detail modals. */
.plr-dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: 0; font-size: var(--plr-fs-sm); }
.plr-dl dt { color: var(--plr-muted); font-weight: 600; }
.plr-dl dd { margin: 0; color: var(--plr-text); }

/* Chip variants completing the .plr-chip family. */
.plr-chip-warn  { background: var(--plr-warn-bg); color: var(--plr-warn); }
.plr-chip-muted { background: var(--plr-surface-2); color: var(--plr-muted); }

/* ======================================================================== */
/*  CONVERGED BATCH-2 PRIMITIVES — pre-auth (BlankLayout) pages              */
/*  Extracted from Login/Forgot/Reset/Register/SignUp V2 so every auth page   */
/*  shares ONE shell / card / header / label / checkbox instead of five      */
/*  page-scoped copies. Token-based, no inline hex.                          */
/* ======================================================================== */

/* Full-viewport flex-center on the branded navy canvas (tokenized gradient). */
.plr-auth-shell {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: var(--plr-5);
    background: linear-gradient(140deg, var(--plr-sidebar-bg) 0%, var(--plr-navy) 50%, var(--plr-navy-light) 100%);
}

/* Width-capped centered auth card — pair with .plr-card; follows it in this
   sheet so its padding/shadow override .plr-card by source order. */
.plr-auth-card { width: 100%; max-width: 420px; margin-inline: auto; padding: 2.5rem 2rem; box-shadow: var(--plr-shadow-overlay); }
/* Roomier variant for multi-field auth forms (e.g. Register) — global modifier
   so it wins over .plr-auth-card by source order, no page-scoped override. */
.plr-auth-card-wide { max-width: 520px; }

/* Centered brand header + logo (self-contained h2/p so it works with or
   without a .plr-scope ancestor). */
.plr-auth-header { text-align: center; margin-bottom: var(--plr-6); }
.plr-auth-header h2 { color: var(--plr-text-strong); font-size: var(--plr-fs-h3); font-weight: 800; margin: 0 0 .375rem; letter-spacing: -0.01em; }
.plr-auth-header p  { color: var(--plr-muted); font-size: var(--plr-fs-sm); margin: 0; }
.plr-auth-logo { height: 72px; width: auto; object-fit: contain; margin-bottom: 1.25rem; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3)); }

/* Uppercase micro-caps field label. */
.plr-label-micro { font-size: var(--plr-fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--plr-muted); }

/* Consent checkbox row — checkbox + wrapping muted label with inline links. */
.plr-check { display: flex; align-items: flex-start; gap: var(--plr-2); margin-top: var(--plr-3); font-size: var(--plr-fs-sm); color: var(--plr-muted); cursor: pointer; }
.plr-check input[type="checkbox"] { width: auto; margin-top: .15rem; flex-shrink: 0; cursor: pointer; }
.plr-check a { color: var(--plr-link); }
.plr-check a:hover { color: var(--plr-link-hover); text-decoration: underline; }

/* ======================================================================== */
/*  CONVERGED BATCH-3 PRIMITIVES — account / billing / settings pages        */
/*  Extracted from MyAccount/MyCompanyBilling/MyUsage/AlertSettings V2 so     */
/*  every page shares one definition. Token-based, no inline hex.            */
/* ======================================================================== */

/* Card section header: leading icon + h3, one flat row. Inner icon color/size
   and h3 size may still be set inline where a variant (e.g. muted) is wanted. */
.plr-section-head { display: flex; align-items: center; gap: var(--plr-3); margin-bottom: var(--plr-4); }
.plr-section-head > i { color: var(--plr-link); font-size: 1.1rem; flex-shrink: 0; }
.plr-section-head h3 { font-size: var(--plr-fs-lg); margin: 0; }

/* Micro muted sub-caption under a .plr-stat-value. */
.plr-stat-sub { font-size: var(--plr-fs-micro); color: var(--plr-muted); }

/* Positive / money CTA — green. Dark navy text for contrast on bright green. */
.plr-btn-success { background: var(--plr-good); color: var(--plr-navy); }
.plr-btn-success:hover { filter: brightness(0.93); color: var(--plr-navy); }

/* Labelled setting row: title + description on the left, control on the right. */
.plr-setting-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--plr-4); padding: var(--plr-3) 0; border-bottom: 1px solid var(--plr-border); }
.plr-setting-row:last-child { border-bottom: none; }
.plr-setting-copy { min-width: 0; }
.plr-setting-title { font-weight: 600; color: var(--plr-text-strong); font-size: var(--plr-fs-base); line-height: 1.3; }
.plr-setting-desc { font-size: var(--plr-fs-sm); color: var(--plr-muted); margin-top: .15rem; line-height: 1.35; }

/* On-theme toggle switch on a native checkbox (accessible, no JS). Track + thumb
   are painted siblings that react to :checked / :focus-visible. */
.plr-switch { position: relative; flex-shrink: 0; width: 44px; height: 24px; display: inline-block; cursor: pointer; margin-top: .1rem; }
.plr-switch input[type="checkbox"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.plr-switch .track { position: absolute; inset: 0; background: var(--plr-surface-2); border: 1px solid var(--plr-border-strong); border-radius: var(--plr-radius-pill); transition: background-color var(--plr-ease), border-color var(--plr-ease); }
.plr-switch .thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--plr-muted); transition: transform var(--plr-ease), background-color var(--plr-ease); pointer-events: none; }
.plr-switch input[type="checkbox"]:checked ~ .track { background: var(--plr-navy-light); border-color: var(--plr-navy-light); }
.plr-switch input[type="checkbox"]:checked ~ .thumb { transform: translateX(20px); background: var(--plr-text-strong); }
.plr-switch input[type="checkbox"]:focus-visible ~ .track { box-shadow: 0 0 0 3px var(--plr-focus); }

/* ======================================================================== */
/*  CONVERGED BATCH-4 PRIMITIVES — public info / legal pages                 */
/*  Extracted from Software/GetStarted/Privacy/Terms/DeleteAccount V2.       */
/*  Token-based, no inline hex.                                             */
/* ======================================================================== */

/* Long-form reading container + prose rhythm. These are GLOBAL descendant
   selectors, so they also theme injected MarkupString HTML (the ::deep-
   equivalent for the TOS reader: global styles are NOT scope-restricted, so a
   literal ::deep — which only works in scoped .razor.css — is neither needed
   nor valid here). Apply .plr-prose to the text-body element. */
.plr-prose { max-width: 900px; margin-inline: auto; line-height: 1.7; color: var(--plr-text); }
.plr-prose p { margin-bottom: var(--plr-4); color: var(--plr-text); }
.plr-prose ul, .plr-prose ol { padding-left: var(--plr-5); margin-bottom: var(--plr-4); }
.plr-prose li { margin-bottom: .4rem; color: var(--plr-text); }
.plr-prose h2 { font-size: var(--plr-fs-h3); color: var(--plr-text-strong); font-weight: 700; margin: var(--plr-6) 0 var(--plr-4); padding-bottom: var(--plr-2); border-bottom: 1px solid var(--plr-border); scroll-margin-top: var(--plr-5); }
.plr-prose h3 { font-size: var(--plr-fs-lg); color: var(--plr-text); margin: var(--plr-5) 0 var(--plr-2); }
.plr-prose h4 { font-size: var(--plr-fs-lg); color: var(--plr-text-strong); margin: var(--plr-4) 0 var(--plr-2); }
.plr-prose strong { color: var(--plr-text-strong); }
.plr-prose a { color: var(--plr-link); text-decoration: none; }
.plr-prose a:hover { color: var(--plr-link-hover); text-decoration: underline; }

/* Simple non-collapsing table (legal / spec tables — does NOT collapse to
   labelled cards on phone the way .plr-table does). */
.plr-table-plain { width: 100%; border-collapse: collapse; margin: var(--plr-4) 0; font-size: var(--plr-fs-sm); }
.plr-table-plain th { background: var(--plr-navy); color: var(--plr-text-strong); padding: .75rem 1rem; text-align: left; font-weight: 600; border: 1px solid var(--plr-border); }
.plr-table-plain td { padding: .6rem 1rem; border: 1px solid var(--plr-border); color: var(--plr-text); background: var(--plr-surface-2); }
@media (max-width: 640px) {
    .plr-table-plain { font-size: var(--plr-fs-micro); }
    .plr-table-plain th, .plr-table-plain td { padding: .5rem .6rem; }
}

/* Step-row family (onboarding / how-it-works). .plr-step-num = leading badge
   (a numbered circle by default; pages may swap in a larger icon badge). */
.plr-steps { display: flex; flex-direction: column; gap: var(--plr-4); }
.plr-step { display: flex; align-items: flex-start; gap: var(--plr-3); }
.plr-step-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--plr-navy); color: var(--plr-text-strong); display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; }

/* In-button async spinner (white ring on a colored button). */
.plr-spinner { width: 1rem; height: 1rem; border: 2px solid rgba(255, 255, 255, .35); border-top-color: var(--plr-text-strong); border-radius: 50%; display: inline-block; animation: plrSpin .7s linear infinite; }
@keyframes plrSpin { to { transform: rotate(360deg); } }

/* ======================================================================== */
/*  CONVERGED BATCH-5 PRIMITIVES — tow pages                                 */
/*  Extracted from TowClearDashboard / IncomingTowRequests /                 */
/*  ManageTowQueue / PropertyTowClearSettings / TowClearAuthorization V2.    */
/*  Token-based, no inline hex.                                             */
/* ======================================================================== */

/* Segmented-control tab strip, with an optional count-badge slot (.plr-tab-badge). */
.plr-tabs { display: flex; flex-wrap: wrap; gap: var(--plr-2); margin-bottom: var(--plr-4); }
.plr-tab {
    display: inline-flex; align-items: center; gap: .45rem; min-height: 38px;
    padding: .45rem .9rem; border-radius: var(--plr-radius-pill);
    border: 1px solid var(--plr-border); background: var(--plr-surface-2); color: var(--plr-muted);
    font-size: var(--plr-fs-sm); font-weight: 600; cursor: pointer;
    transition: background-color var(--plr-ease), color var(--plr-ease), border-color var(--plr-ease);
}
.plr-tab:hover { background: var(--plr-surface-3); color: var(--plr-text); border-color: var(--plr-border-strong); }
.plr-tab.active { background: var(--plr-navy); border-color: var(--plr-navy); color: var(--plr-on-primary); }
.plr-tab-badge { background: var(--plr-warn); color: var(--plr-navy); font-size: var(--plr-fs-micro); font-weight: 700; line-height: 1; border-radius: var(--plr-radius-pill); padding: .2rem .45rem; min-width: 1.1rem; text-align: center; }

/* Status-pill scale extensions (join .plr-status-good/-warn/-bad/-muted):
   info = blue, primary = navy. */
.plr-status-info { color: var(--plr-link); background: rgba(91, 155, 213, .16); }
.plr-status-primary { color: var(--plr-text-strong); background: var(--plr-navy-light); }

/* Larger centered page-level loading ring (vs the in-button .plr-spinner). */
.plr-spinner-lg { width: 40px; height: 40px; border: 3px solid var(--plr-border); border-top-color: var(--plr-link); border-radius: 50%; margin: 0 auto var(--plr-3); animation: plrSpin .7s linear infinite; }

/* Input row with a leading muted icon affix (+ optional trailing button). */
.plr-input-group { display: flex; align-items: center; gap: var(--plr-2); }
.plr-input-group > i { color: var(--plr-muted); flex-shrink: 0; }
.plr-input-group > .plr-input { flex: 1 1 auto; min-width: 0; }

/* ======================================================================== */
/*  CONVERGED BATCH-6 PRIMITIVES — admin manager pages                       */
/*  Column-filter popover family + toast. Pairs with the existing            */
/*  .plr-filter-popup / .plr-popover-anchor / .plr-popover-end (Batch 2).    */
/* ======================================================================== */

/* Column-filter anchor: makes an element a positioning context for the
   absolutely-positioned .plr-filter-popup. Apply to a <th>, a wrapper <div>,
   or (add display:inline-block inline) an inline anchor <span>. */
.plr-th-filter { position: relative; }
.plr-filter-btn { color: var(--plr-muted); font-size: var(--plr-fs-sm); line-height: 1; }
.plr-filter-btn:hover { color: var(--plr-link-hover); }
.plr-filter-on { color: var(--plr-link); margin-left: .25rem; }
/* Clear/Apply row at the foot of a filter popover. */
.plr-filter-actions { display: flex; justify-content: flex-end; gap: var(--plr-2); margin-top: var(--plr-2); }

/* Success/error toast (fixed top-right) + a stacked variant for several. */
.plr-toast { position: fixed; top: var(--plr-4); right: var(--plr-4); z-index: var(--plr-z-modal); width: min(360px, calc(100vw - 2rem)); }
.plr-toast-stack { position: fixed; top: var(--plr-4); right: var(--plr-4); z-index: var(--plr-z-modal); display: flex; flex-direction: column; gap: var(--plr-2); width: min(360px, calc(100vw - 2rem)); }

/* ======================================================================== */
/*  CONVERGED BATCH-7 PRIMITIVES — admin billing / usage / updates utils     */
/* ======================================================================== */

/* Table loading veil (covers a positioned .plr-table-card while fetching). */
.plr-loading-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(45, 58, 74, .55); border-radius: var(--plr-radius-lg); z-index: 3; }

/* Compact icon-only action button (pairs with .plr-btn + a variant). */
.plr-btn-icon { min-height: 32px; padding: .35rem .6rem; }

/* Progress bar (track + fill) with an indeterminate sliding variant
   (upload / import). */
.plr-progress { width: 100%; height: 24px; background: var(--plr-surface-2); border: 1px solid var(--plr-border); border-radius: var(--plr-radius); overflow: hidden; }
.plr-progress-bar { height: 100%; display: flex; align-items: center; justify-content: center; color: var(--plr-on-primary); font-size: var(--plr-fs-sm); font-weight: 600; background: var(--plr-primary); }
.plr-progress-indeterminate { background: linear-gradient(90deg, var(--plr-primary) 0%, var(--plr-primary-hover) 50%, var(--plr-primary) 100%); background-size: 200% 100%; animation: plrProgressSlide 1.1s linear infinite; }
@keyframes plrProgressSlide { 0% { background-position: 200% 0; } 100% { background-position: 0 0; } }

/* Muted, non-shrinking currency/unit prefix inside a .plr-input-group. */
.plr-input-prefix { color: var(--plr-muted); flex-shrink: 0; }

/* Selected-row highlight (multi-select modal tables). */
.plr-row-selected { background: color-mix(in srgb, var(--plr-link) 14%, transparent); }

/* ======================================================================== */
/*  CONVERGED BATCH-8 PRIMITIVES — inline expandable detail/preview row       */
/* ======================================================================== */

/* Expandable inline detail row rendered directly under a table row (its <td>
   spans the full width). Gives the band a subtle inset surface so it reads as
   a child of the row above it. */
.plr-table-detail-row > td { background: var(--plr-surface-2); }

/* Scrollable, bordered reading/preview pane for the detail row's content
   (rendered HTML, long text, nested summary). */
.plr-detail-pane { max-height: 320px; overflow-y: auto; padding: var(--plr-4); background: var(--plr-surface); border: 1px solid var(--plr-border); border-radius: var(--plr-radius); font-size: var(--plr-fs-sm); line-height: 1.6; color: var(--plr-text); }

/* ======================================================================== */
/*  CONVERGED BATCH-9 PRIMITIVES — checkbox, filter row, fixed veil,          */
/*  green chip + green progress fill                                          */
/* ======================================================================== */

/* Label-wrapped native checkbox tuned for the dark theme (row-select + form
   toggles). accent-color keeps the native box legible on dark surfaces. */
.plr-checkbox { display: flex; align-items: center; gap: .5rem; cursor: pointer; margin: 0; }
.plr-checkbox input[type="checkbox"] { width: auto; flex-shrink: 0; cursor: pointer; accent-color: var(--plr-link); }

/* Full-width, left-aligned selectable option row inside a filter pick-list
   popup (quiet default, hover fill, bold selected). */
.plr-filter-item { display: block; width: 100%; text-align: left; padding: .4rem .5rem; border-radius: var(--plr-radius-sm); color: var(--plr-text); font-size: var(--plr-fs-sm); }
.plr-filter-item:hover { background: var(--plr-surface-3); color: var(--plr-text-strong); text-decoration: none; }
.plr-filter-item.active { background: var(--plr-navy-light); color: var(--plr-text-strong); font-weight: 600; }

/* Full-viewport fixed blocking loader veil (the fixed sibling of the absolute
   .plr-loading-overlay). Center a content card inside it. */
.plr-loading-overlay-fixed { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .5); backdrop-filter: blur(2px); z-index: var(--plr-z-modal); }

/* Green (positive / resolved) chip fill + green progress-bar fill — layered on
   .plr-chip / .plr-progress-bar respectively. */
.plr-chip-good { background: var(--plr-good-bg); color: var(--plr-good); }
.plr-progress-bar-good { background: var(--plr-good); color: var(--plr-navy); }