/* ============================================================
   Platinum 2.0 — Application Shell & Design System
   Layered on top of Bootstrap 5.3.3.

   Sections
     01. Tokens (color, spacing, radius, shadow, motion, z-index)
     02. Dark-mode token overrides
     03. Bootstrap variable bridges
     04. Reset / typography
     05. App shell layout
     06. Sidebar
     07. Topbar
     08. Impersonation banner
     09. Content area & breadcrumbs
     10. Page header
     11. Cards
     12. Tables
     13. Stat cards & KPI row
     14. Empty state
     15. Banners
     16. Dropdowns & notifications
     17. Tabs
     18. Tags & status chips
     19. Segmented control
     20. Filter bar
     21. Toolbar
     22. Section header
     23. Progress & stepper
     24. Skeleton loader
     25. Keyboard shortcut
     26. Command palette
     27. Drawer / sheet
     28. Toast
     29. Timeline / activity feed
     30. Forms
     31. Avatars & avatar group
     32. Detail layout
     33. Buttons polish
     34. Anonymous (auth) shell
     35. Mobile
     36. Print
     37. Reduced motion
   ============================================================ */

/* ── 01. Tokens ─────────────────────────────────────────────── */
:root {
  color-scheme: light;

  /* Primary scale — derived from brand logo #006e9f (logos/logo-app.png) */
  --pl-primary-50:  #e6f4fb;
  --pl-primary-100: #c2e4f5;
  --pl-primary-200: #99d2ed;
  --pl-primary-300: #6cbfe4;
  --pl-primary-400: #3aabdb;
  --pl-primary-500: #1191c5;
  --pl-primary-600: #006e9f;
  --pl-primary-700: #005a82;
  --pl-primary-800: #054766;
  --pl-primary-900: #093a54;
  --pl-primary-950: #052433;

  /* Aliases (existing — keep for back-compat) */
  --pl-primary:       var(--pl-primary-600);
  --pl-primary-hover: var(--pl-primary-700);
  --pl-primary-soft:  var(--pl-primary-50);
  --pl-primary-ring:  rgba(0, 110, 159, 0.18);

  /* Neutral scale */
  --pl-neutral-0:   #ffffff;
  --pl-neutral-50:  #f8fafc;
  --pl-neutral-100: #f1f5f9;
  --pl-neutral-200: #e2e8f0;
  --pl-neutral-300: #cbd5e1;
  --pl-neutral-400: #94a3b8;
  --pl-neutral-500: #64748b;
  --pl-neutral-600: #475569;
  --pl-neutral-700: #334155;
  --pl-neutral-800: #1e293b;
  --pl-neutral-900: #0f172a;
  --pl-neutral-950: #020617;

  /* Text */
  --pl-text:        var(--pl-neutral-900);
  --pl-text-muted:  var(--pl-neutral-500);
  --pl-text-subtle: #5b6a86;        /* was var(--pl-neutral-400) #94a3b8 — failed WCAG AA on light surfaces */
  --pl-text-inverse: var(--pl-neutral-0);

  /* Surfaces */
  --pl-bg:           var(--pl-neutral-50);
  --pl-surface:      var(--pl-neutral-0);
  --pl-surface-alt:  var(--pl-neutral-100);
  --pl-surface-elevated: var(--pl-neutral-0);
  --pl-surface-sunken:   var(--pl-neutral-100);
  --pl-overlay:      rgba(15, 23, 42, 0.45);

  /* Borders */
  --pl-border:        var(--pl-neutral-200);
  --pl-border-strong: var(--pl-neutral-300);
  --pl-border-hairline: rgba(15, 23, 42, 0.06);
  --pl-ring:          var(--pl-primary-ring);

  /* Status colors */
  --pl-success:      #16a34a;
  --pl-success-50:   #f0fdf4;
  --pl-success-soft: #dcfce7;
  --pl-success-border: #bbf7d0;
  --pl-success-text: #166534;

  --pl-warning:      #d97706;
  --pl-warning-50:   #fffbeb;
  --pl-warning-soft: #fef3c7;
  --pl-warning-border: #fde68a;
  --pl-warning-text: #92400e;

  --pl-danger:       #dc2626;
  --pl-danger-50:    #fef2f2;
  --pl-danger-soft:  #fee2e2;
  --pl-danger-border: #fecaca;
  --pl-danger-text:  #991b1b;

  --pl-info:         #0284c7;
  --pl-info-50:      #f0f9ff;
  --pl-info-soft:    #e0f2fe;
  --pl-info-border:  #bae6fd;
  --pl-info-text:    #075985;

  /* Shape */
  --pl-radius-xs:  4px;
  --pl-radius-sm:  6px;
  --pl-radius:     8px;
  --pl-radius-md:  10px;
  --pl-radius-lg:  12px;
  --pl-radius-xl:  16px;
  --pl-radius-2xl: 24px;
  --pl-radius-pill: 9999px;

  /* Shadows */
  --pl-shadow-xs:  0 1px 1px rgba(15, 23, 42, 0.04);
  --pl-shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.05);
  --pl-shadow:     0 1px 3px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04);
  --pl-shadow-md:  0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --pl-shadow-lg:  0 10px 25px -10px rgba(15, 23, 42, 0.18);
  --pl-shadow-xl:  0 20px 35px -10px rgba(15, 23, 42, 0.22);
  --pl-shadow-2xl: 0 25px 50px -12px rgba(15, 23, 42, 0.28);
  --pl-shadow-inner: inset 0 1px 2px rgba(15, 23, 42, 0.05);

  /* Motion */
  --pl-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --pl-ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --pl-ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --pl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --pl-dur-instant: 80ms;
  --pl-dur-fast:    140ms;
  --pl-dur-base:    220ms;
  --pl-dur-slow:    320ms;

  /* Z-index */
  --pl-z-sidebar:  1040;
  --pl-z-backdrop: 1045;
  --pl-z-topbar:   1030;
  --pl-z-dropdown: 1060;
  --pl-z-drawer:   1070;
  --pl-z-modal:    1080;
  --pl-z-cmdk:     1090;
  --pl-z-toast:    1100;

  /* Typography */
  --pl-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, "Noto Sans", sans-serif,
                  "Apple Color Emoji", "Segoe UI Emoji";
  --pl-font-mono: "JetBrains Mono", "Fira Code", SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --pl-fs-xs:   0.6875rem;  /* 11 */
  --pl-fs-sm:   0.75rem;    /* 12 */
  --pl-fs-base: 0.875rem;   /* 14 */
  --pl-fs-md:   0.9375rem;  /* 15 */
  --pl-fs-lg:   1rem;       /* 16 */
  --pl-fs-xl:   1.125rem;   /* 18 */
  --pl-fs-2xl:  1.25rem;    /* 20 */
  --pl-fs-3xl:  1.5rem;     /* 24 */
  --pl-fs-4xl:  1.875rem;   /* 30 */
  --pl-fs-5xl:  2.25rem;    /* 36 */

  --pl-fw-regular:  400;
  --pl-fw-medium:   500;
  --pl-fw-semibold: 600;
  --pl-fw-bold:     700;

  --pl-lh-tight:  1.2;
  --pl-lh-snug:   1.35;
  --pl-lh-base:   1.5;
  --pl-lh-relaxed: 1.625;

  /* Spacing scale (companion to Bootstrap) */
  --pl-space-0: 0;
  --pl-space-1: 0.25rem;
  --pl-space-2: 0.5rem;
  --pl-space-3: 0.75rem;
  --pl-space-4: 1rem;
  --pl-space-5: 1.25rem;
  --pl-space-6: 1.5rem;
  --pl-space-8: 2rem;
  --pl-space-10: 2.5rem;
  --pl-space-12: 3rem;
  --pl-space-16: 4rem;
  --pl-wizard-gap-x: clamp(0.75rem, 1.1vw, 1.25rem);
  --pl-wizard-gap-y: clamp(0.85rem, 1.3vw, 1.5rem);

  /* Layout */
  --pl-sidebar-w:  260px;
  --pl-topbar-h:   56px;
  --pl-content-max: 1440px;

  /* ── New: surfaces & elevation ────────────────────────────── */
  --pl-elevation-1: var(--pl-surface);
  --pl-elevation-2: var(--pl-surface);
  --pl-elevation-3: var(--pl-surface);

  /* ── New: glass / backdrop ─────────────────────────────────── */
  --pl-glass-bg: rgba(255, 255, 255, 0.72);
  --pl-glass-border: rgba(15, 23, 42, 0.08);
  --pl-backdrop-blur: 12px;

  /* ── New: native UI ─────────────────────────────────────────── */
  --pl-scrollbar-track: transparent;
  --pl-scrollbar-thumb: rgba(15, 23, 42, 0.18);
  --pl-scrollbar-thumb-hover: rgba(15, 23, 42, 0.32);
  --pl-selection-bg: var(--pl-primary-100);
  --pl-selection-fg: var(--pl-primary-900);
  --pl-focus-ring: var(--pl-primary-ring);
  --pl-focus-ring-offset-color: var(--pl-bg);
  --pl-accent: var(--pl-primary-600);

  /* ── New: text variants ────────────────────────────────────── */
  --pl-text-strong: var(--pl-neutral-900);
  /* (existing) --pl-text-inverse: var(--pl-neutral-0); — keep */

  /* ── New: "on solid" text (text on solid status/primary fills) ─ */
  --pl-on-primary: #ffffff;
  --pl-on-success: #ffffff;
  --pl-on-warning: #ffffff;
  --pl-on-danger:  #ffffff;
  --pl-on-info:    #ffffff;

  /* ── New: status icon colors (between solid and text) ──────── */
  --pl-success-icon: var(--pl-success);
  --pl-warning-icon: var(--pl-warning);
  --pl-danger-icon:  var(--pl-danger);
  --pl-info-icon:    var(--pl-info);

  /* ── New: extended palette ─────────────────────────────────── */
  --pl-primary-light: #1191c5;        /* used in many gradients */

  --pl-purple:        #7c3aed;
  --pl-purple-soft:   #ede9fe;
  --pl-purple-border: #ddd6fe;
  --pl-purple-text:   #5b21b6;

  --pl-pink:          #db2777;
  --pl-pink-soft:     #fce7f3;
  --pl-pink-border:   #fbcfe8;
  --pl-pink-text:     #9d174d;

  --pl-cyan:          #0891b2;
  --pl-cyan-soft:     #ecfeff;
  --pl-cyan-border:   #a5f3fc;
  --pl-cyan-text:     #0e7490;

  --pl-rating-star:   #f59e0b;

  --pl-code-bg:       #0f172a;        /* code blocks intentionally dark in both themes */
  --pl-code-fg:       #e2e8f0;

  /* ── New: links (separate from primary) ────────────────────── */
  --pl-link:       var(--pl-primary);
  --pl-link-hover: var(--pl-primary-hover);

  /* ── New: overlays ─────────────────────────────────────────── */
  --pl-overlay-strong: rgba(15, 23, 42, 0.6);
  --pl-overlay-light:  rgba(15, 23, 42, 0.25);

  /* ── New: shadow lift (sticky footers/floating bars) ───────── */
  --pl-shadow-lift: 0 -6px 18px rgba(15, 23, 42, 0.06), var(--pl-shadow-sm);

  /* ── New: input surface (slightly different from card surface) ─ */
  --pl-input-bg:        var(--pl-surface);
  --pl-input-bg-hover:  var(--pl-primary-50);

  /* ── New: tint family (auto-flip in dark — high-leverage) ──── */
  --pl-primary-tint:        var(--pl-primary-50);
  --pl-primary-tint-hover:  var(--pl-primary-100);
  --pl-primary-on-tint:     var(--pl-primary-700);
  --pl-success-tint:        var(--pl-success-soft);
  --pl-success-on-tint:     var(--pl-success-text);
  --pl-neutral-tint:        var(--pl-neutral-100);
  --pl-icon-accent:         var(--pl-primary-600);

  /* ── New: skeleton shimmer (must be visible in both themes) ── */
  --pl-skeleton-from: var(--pl-neutral-100);
  --pl-skeleton-via:  var(--pl-neutral-200);
  --pl-skeleton-to:   var(--pl-neutral-100);

  /* ── Bootstrap bridges (so .text-muted, .border, .modal, .dropdown etc. follow our theme) ─ */
  --bs-body-bg:                  var(--pl-bg);
  --bs-body-color:               var(--pl-text);
  --bs-emphasis-color:           var(--pl-text-strong);
  --bs-secondary-bg:             var(--pl-surface-alt);
  --bs-tertiary-bg:              var(--pl-surface-sunken);
  --bs-border-color:             var(--pl-border);
  --bs-border-color-translucent: var(--pl-border-hairline);
  --bs-link-color:               var(--pl-link);
  --bs-link-hover-color:         var(--pl-link-hover);
  --bs-secondary-color:          var(--pl-text-muted);
  --bs-tertiary-color:           var(--pl-text-subtle);
  --bs-heading-color:            var(--pl-text-strong);
  --bs-code-color:               var(--pl-danger-text);
  --bs-highlight-bg:             var(--pl-warning-soft);
}

/* ── 02. Dark-mode token overrides ──────────────────────────── */
[data-theme="dark"] {
  color-scheme: dark;

  /* Text — bump subtle to pass WCAG */
  --pl-text:         #f1f5f9;
  --pl-text-muted:   #94a3b8;
  --pl-text-subtle:  #8c9bb3;       /* was #64748b — fails AA */
  --pl-text-strong:  #ffffff;
  --pl-text-inverse: #0f172a;

  /* Surfaces — real elevation steps (each ~+10 lightness) */
  --pl-bg:               #0b1220;
  --pl-surface:          #111a2e;
  --pl-surface-alt:      #16223a;
  --pl-surface-elevated: #1f2c4a;
  --pl-surface-sunken:   #0a1120;
  --pl-elevation-1:      #16223a;
  --pl-elevation-2:      #1f2c4a;
  --pl-elevation-3:      #25345a;

  /* Borders — must be visible */
  --pl-border:          rgba(255, 255, 255, 0.12);
  --pl-border-strong:   rgba(255, 255, 255, 0.22);
  --pl-border-hairline: rgba(255, 255, 255, 0.06);

  /* Brand alias re-tuned for legibility on dark */
  --pl-primary:        var(--pl-primary-400);
  --pl-primary-hover:  var(--pl-primary-300);
  --pl-primary-soft:   rgba(17, 145, 197, 0.18);
  --pl-primary-ring:   rgba(58, 171, 219, 0.32);
  --pl-primary-light:  #3aabdb;
  --pl-on-primary:     #051824;

  /* Status solids — bumped for dark legibility */
  --pl-success:        #22c55e;
  --pl-success-soft:   rgba(22, 163, 74, 0.18);
  --pl-success-border: rgba(22, 163, 74, 0.35);
  --pl-success-text:   #4ade80;
  --pl-success-icon:   #4ade80;
  --pl-on-success:     #06210f;

  --pl-warning:        #f59e0b;
  --pl-warning-soft:   rgba(217, 119, 6, 0.18);
  --pl-warning-border: rgba(217, 119, 6, 0.35);
  --pl-warning-text:   #fbbf24;
  --pl-warning-icon:   #fbbf24;
  --pl-on-warning:     #2b1801;

  --pl-danger:         #ef4444;
  --pl-danger-soft:    rgba(220, 38, 38, 0.18);
  --pl-danger-border:  rgba(220, 38, 38, 0.35);
  --pl-danger-text:    #f87171;
  --pl-danger-icon:    #f87171;
  --pl-on-danger:      #2d0606;

  --pl-info:           #38bdf8;
  --pl-info-soft:      rgba(2, 132, 199, 0.18);
  --pl-info-border:    rgba(2, 132, 199, 0.35);
  --pl-info-text:      #38bdf8;
  --pl-info-icon:      #38bdf8;
  --pl-on-info:        #02161f;

  /* Extended palette */
  --pl-purple-soft:   rgba(124, 58, 237, 0.20);
  --pl-purple-border: rgba(124, 58, 237, 0.35);
  --pl-purple-text:   #c4b5fd;

  --pl-pink-soft:     rgba(219, 39, 119, 0.18);
  --pl-pink-border:   rgba(219, 39, 119, 0.35);
  --pl-pink-text:     #f9a8d4;

  --pl-cyan-soft:     rgba(8, 145, 178, 0.18);
  --pl-cyan-border:   rgba(8, 145, 178, 0.35);
  --pl-cyan-text:     #67e8f9;

  --pl-rating-star:   #fbbf24;
  --pl-code-bg:       #0a1120;
  --pl-code-fg:       #e2e8f0;

  /* Links — lighter brand in dark */
  --pl-link:       var(--pl-primary-300);
  --pl-link-hover: var(--pl-primary-200);

  /* Overlays */
  --pl-overlay:        rgba(2, 6, 23, 0.7);
  --pl-overlay-strong: rgba(0, 0, 0, 0.78);
  --pl-overlay-light:  rgba(2, 6, 23, 0.4);

  /* Glass */
  --pl-glass-bg:     rgba(17, 26, 46, 0.72);
  --pl-glass-border: rgba(255, 255, 255, 0.08);

  /* Shadows — cover ALL sizes (xs, sm, base, md, lg, xl, 2xl, inner) */
  --pl-shadow-xs:    0 1px 1px rgba(0, 0, 0, 0.35);
  --pl-shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.4);
  --pl-shadow:       0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --pl-shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --pl-shadow-lg:    0 10px 25px -10px rgba(0, 0, 0, 0.6);
  --pl-shadow-xl:    0 20px 35px -10px rgba(0, 0, 0, 0.7);
  --pl-shadow-2xl:   0 25px 50px -12px rgba(0, 0, 0, 0.8);
  --pl-shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.45);
  --pl-shadow-lift:  0 -6px 18px rgba(0, 0, 0, 0.45), var(--pl-shadow-sm);

  /* Native UI */
  --pl-accent:                   var(--pl-primary-400);
  --pl-focus-ring:               rgba(58, 171, 219, 0.45);
  --pl-focus-ring-offset-color:  var(--pl-bg);
  --pl-scrollbar-track:          transparent;
  --pl-scrollbar-thumb:          rgba(255, 255, 255, 0.14);
  --pl-scrollbar-thumb-hover:    rgba(255, 255, 255, 0.28);
  --pl-selection-bg:             rgba(58, 171, 219, 0.45);
  --pl-selection-fg:             #f1f5f9;

  /* Inputs */
  --pl-input-bg:        rgba(255, 255, 255, 0.03);
  --pl-input-bg-hover:  rgba(0, 110, 159, 0.12);

  /* Tint family (auto-flips) */
  --pl-primary-tint:        rgba(58, 171, 219, 0.15);
  --pl-primary-tint-hover:  rgba(58, 171, 219, 0.28);
  --pl-primary-on-tint:     var(--pl-primary-300);
  --pl-success-tint:        rgba(16, 185, 129, 0.18);
  --pl-success-on-tint:     #6ee7b7;
  --pl-neutral-tint:        rgba(255, 255, 255, 0.06);
  --pl-icon-accent:         var(--pl-primary-400);

  /* Skeleton */
  --pl-skeleton-from: #16223a;
  --pl-skeleton-via:  #243358;
  --pl-skeleton-to:   #16223a;
}

/* ── Theme-swap transition lock (toggled by PL.theme JS) ────── */
html.pl-theme-switching *,
html.pl-theme-switching *::before,
html.pl-theme-switching *::after {
  transition: none !important;
  animation-duration: 0s !important;
}

/* ── 03. Bootstrap variable bridges ─────────────────────────── */
.btn-primary {
  --bs-btn-bg: var(--pl-primary);
  --bs-btn-color: var(--pl-on-primary);
  --bs-btn-border-color: var(--pl-primary);
  --bs-btn-hover-bg: var(--pl-primary-hover);
  --bs-btn-hover-color: var(--pl-on-primary);
  --bs-btn-hover-border-color: var(--pl-primary-hover);
  --bs-btn-active-bg: var(--pl-primary-hover);
  --bs-btn-active-color: var(--pl-on-primary);
  --bs-btn-active-border-color: var(--pl-primary-hover);
  --bs-btn-disabled-bg: var(--pl-primary);
  --bs-btn-disabled-color: var(--pl-on-primary);
  --bs-btn-disabled-border-color: var(--pl-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--pl-primary);
  --bs-btn-border-color: var(--pl-primary);
  --bs-btn-hover-bg: var(--pl-primary);
  --bs-btn-hover-color: var(--pl-on-primary);
  --bs-btn-hover-border-color: var(--pl-primary);
  --bs-btn-active-bg: var(--pl-primary);
  --bs-btn-active-color: var(--pl-on-primary);
  --bs-btn-active-border-color: var(--pl-primary);
  --bs-btn-disabled-color: var(--pl-primary);
  --bs-btn-disabled-border-color: var(--pl-primary);
}
.btn-primary, .btn-outline-primary {
  --bs-btn-focus-shadow-rgb: 17, 145, 197;
}

/* Secondary / light — neutral surfaces */
.btn-secondary {
  --bs-btn-bg: var(--pl-surface-alt);
  --bs-btn-color: var(--pl-text);
  --bs-btn-border-color: var(--pl-border-strong);
  --bs-btn-hover-bg: var(--pl-surface-elevated);
  --bs-btn-hover-color: var(--pl-text);
  --bs-btn-hover-border-color: var(--pl-border-strong);
  --bs-btn-active-bg: var(--pl-surface-elevated);
  --bs-btn-active-color: var(--pl-text);
  --bs-btn-active-border-color: var(--pl-border-strong);
  --bs-btn-disabled-bg: var(--pl-surface-sunken);
  --bs-btn-disabled-color: var(--pl-text-subtle);
  --bs-btn-disabled-border-color: var(--pl-border);
}
.btn-light {
  --bs-btn-bg: var(--pl-surface);
  --bs-btn-color: var(--pl-text);
  --bs-btn-border-color: var(--pl-border);
  --bs-btn-hover-bg: var(--pl-surface-alt);
  --bs-btn-hover-color: var(--pl-text);
  --bs-btn-hover-border-color: var(--pl-border-strong);
  --bs-btn-active-bg: var(--pl-surface-alt);
  --bs-btn-active-color: var(--pl-text);
  --bs-btn-active-border-color: var(--pl-border-strong);
  --bs-btn-disabled-bg: var(--pl-surface-sunken);
  --bs-btn-disabled-color: var(--pl-text-subtle);
  --bs-btn-disabled-border-color: var(--pl-border);
}

/* Status solid buttons */
.btn-success {
  --bs-btn-bg: var(--pl-success);
  --bs-btn-color: var(--pl-on-success);
  --bs-btn-border-color: var(--pl-success);
  --bs-btn-hover-bg: var(--pl-success);
  --bs-btn-hover-color: var(--pl-on-success);
  --bs-btn-hover-border-color: var(--pl-success);
  --bs-btn-active-bg: var(--pl-success);
  --bs-btn-active-color: var(--pl-on-success);
  --bs-btn-active-border-color: var(--pl-success);
  --bs-btn-disabled-bg: var(--pl-success);
  --bs-btn-disabled-color: var(--pl-on-success);
  --bs-btn-disabled-border-color: var(--pl-success);
  --bs-btn-focus-shadow-rgb: 22, 163, 74;
}
.btn-warning {
  --bs-btn-bg: var(--pl-warning);
  --bs-btn-color: var(--pl-on-warning);
  --bs-btn-border-color: var(--pl-warning);
  --bs-btn-hover-bg: var(--pl-warning);
  --bs-btn-hover-color: var(--pl-on-warning);
  --bs-btn-hover-border-color: var(--pl-warning);
  --bs-btn-active-bg: var(--pl-warning);
  --bs-btn-active-color: var(--pl-on-warning);
  --bs-btn-active-border-color: var(--pl-warning);
  --bs-btn-disabled-bg: var(--pl-warning);
  --bs-btn-disabled-color: var(--pl-on-warning);
  --bs-btn-disabled-border-color: var(--pl-warning);
  --bs-btn-focus-shadow-rgb: 217, 119, 6;
}
.btn-danger {
  --bs-btn-bg: var(--pl-danger);
  --bs-btn-color: var(--pl-on-danger);
  --bs-btn-border-color: var(--pl-danger);
  --bs-btn-hover-bg: var(--pl-danger);
  --bs-btn-hover-color: var(--pl-on-danger);
  --bs-btn-hover-border-color: var(--pl-danger);
  --bs-btn-active-bg: var(--pl-danger);
  --bs-btn-active-color: var(--pl-on-danger);
  --bs-btn-active-border-color: var(--pl-danger);
  --bs-btn-disabled-bg: var(--pl-danger);
  --bs-btn-disabled-color: var(--pl-on-danger);
  --bs-btn-disabled-border-color: var(--pl-danger);
  --bs-btn-focus-shadow-rgb: 220, 38, 38;
}
.btn-info {
  --bs-btn-bg: var(--pl-info);
  --bs-btn-color: var(--pl-on-info);
  --bs-btn-border-color: var(--pl-info);
  --bs-btn-hover-bg: var(--pl-info);
  --bs-btn-hover-color: var(--pl-on-info);
  --bs-btn-hover-border-color: var(--pl-info);
  --bs-btn-active-bg: var(--pl-info);
  --bs-btn-active-color: var(--pl-on-info);
  --bs-btn-active-border-color: var(--pl-info);
  --bs-btn-disabled-bg: var(--pl-info);
  --bs-btn-disabled-color: var(--pl-on-info);
  --bs-btn-disabled-border-color: var(--pl-info);
  --bs-btn-focus-shadow-rgb: 2, 132, 199;
}

/* Outline status buttons */
.btn-outline-secondary {
  --bs-btn-color: var(--pl-text);
  --bs-btn-border-color: var(--pl-border-strong);
  --bs-btn-hover-bg: var(--pl-surface-alt);
  --bs-btn-hover-color: var(--pl-text);
  --bs-btn-hover-border-color: var(--pl-border-strong);
  --bs-btn-active-bg: var(--pl-surface-alt);
  --bs-btn-active-color: var(--pl-text);
  --bs-btn-active-border-color: var(--pl-border-strong);
  --bs-btn-disabled-color: var(--pl-text-subtle);
  --bs-btn-disabled-border-color: var(--pl-border);
}
.btn-outline-light {
  --bs-btn-color: var(--pl-text);
  --bs-btn-border-color: var(--pl-border);
  --bs-btn-hover-bg: var(--pl-surface-alt);
  --bs-btn-hover-color: var(--pl-text);
  --bs-btn-hover-border-color: var(--pl-border-strong);
  --bs-btn-active-bg: var(--pl-surface-alt);
  --bs-btn-active-color: var(--pl-text);
  --bs-btn-active-border-color: var(--pl-border-strong);
  --bs-btn-disabled-color: var(--pl-text-subtle);
  --bs-btn-disabled-border-color: var(--pl-border);
}
.btn-outline-success {
  --bs-btn-color: var(--pl-success-text);
  --bs-btn-border-color: var(--pl-success);
  --bs-btn-hover-bg: var(--pl-success);
  --bs-btn-hover-color: var(--pl-on-success);
  --bs-btn-hover-border-color: var(--pl-success);
  --bs-btn-active-bg: var(--pl-success);
  --bs-btn-active-color: var(--pl-on-success);
  --bs-btn-active-border-color: var(--pl-success);
  --bs-btn-disabled-color: var(--pl-success-text);
  --bs-btn-disabled-border-color: var(--pl-success);
  --bs-btn-focus-shadow-rgb: 22, 163, 74;
}
.btn-outline-warning {
  --bs-btn-color: var(--pl-warning-text);
  --bs-btn-border-color: var(--pl-warning);
  --bs-btn-hover-bg: var(--pl-warning);
  --bs-btn-hover-color: var(--pl-on-warning);
  --bs-btn-hover-border-color: var(--pl-warning);
  --bs-btn-active-bg: var(--pl-warning);
  --bs-btn-active-color: var(--pl-on-warning);
  --bs-btn-active-border-color: var(--pl-warning);
  --bs-btn-disabled-color: var(--pl-warning-text);
  --bs-btn-disabled-border-color: var(--pl-warning);
  --bs-btn-focus-shadow-rgb: 217, 119, 6;
}
.btn-outline-danger {
  --bs-btn-color: var(--pl-danger-text);
  --bs-btn-border-color: var(--pl-danger);
  --bs-btn-hover-bg: var(--pl-danger);
  --bs-btn-hover-color: var(--pl-on-danger);
  --bs-btn-hover-border-color: var(--pl-danger);
  --bs-btn-active-bg: var(--pl-danger);
  --bs-btn-active-color: var(--pl-on-danger);
  --bs-btn-active-border-color: var(--pl-danger);
  --bs-btn-disabled-color: var(--pl-danger-text);
  --bs-btn-disabled-border-color: var(--pl-danger);
  --bs-btn-focus-shadow-rgb: 220, 38, 38;
}
.btn-outline-info {
  --bs-btn-color: var(--pl-info-text);
  --bs-btn-border-color: var(--pl-info);
  --bs-btn-hover-bg: var(--pl-info);
  --bs-btn-hover-color: var(--pl-on-info);
  --bs-btn-hover-border-color: var(--pl-info);
  --bs-btn-active-bg: var(--pl-info);
  --bs-btn-active-color: var(--pl-on-info);
  --bs-btn-active-border-color: var(--pl-info);
  --bs-btn-disabled-color: var(--pl-info-text);
  --bs-btn-disabled-border-color: var(--pl-info);
  --bs-btn-focus-shadow-rgb: 2, 132, 199;
}

/* Dark mode: button-color refinements */
[data-theme="dark"] .btn-primary {
  --bs-btn-color:        var(--pl-on-primary);
  --bs-btn-hover-color:  var(--pl-on-primary);
  --bs-btn-active-color: var(--pl-on-primary);
}
[data-theme="dark"] .btn-light {
  --bs-btn-bg:                  var(--pl-surface-alt);
  --bs-btn-color:               var(--pl-text);
  --bs-btn-border-color:        var(--pl-border);
  --bs-btn-hover-bg:            var(--pl-surface-elevated);
  --bs-btn-hover-color:         var(--pl-text);
  --bs-btn-hover-border-color:  var(--pl-border-strong);
  --bs-btn-active-bg:           var(--pl-surface-elevated);
  --bs-btn-disabled-bg:         var(--pl-surface-sunken);
  --bs-btn-disabled-color:      var(--pl-text-subtle);
}
[data-theme="dark"] .btn-secondary {
  --bs-btn-bg:                  var(--pl-surface-alt);
  --bs-btn-color:               var(--pl-text);
  --bs-btn-border-color:        var(--pl-border-strong);
  --bs-btn-hover-bg:            var(--pl-surface-elevated);
  --bs-btn-hover-color:         var(--pl-text);
  --bs-btn-hover-border-color:  var(--pl-border-strong);
}
[data-theme="dark"] .btn:disabled,
[data-theme="dark"] .btn.disabled { opacity: 0.55; }

/* Bootstrap utility overrides for dark mode */
[data-theme="dark"] .bg-white  { background-color: var(--pl-surface) !important; color: var(--pl-text) !important; }
[data-theme="dark"] .bg-light  { background-color: var(--pl-surface-alt) !important; color: var(--pl-text) !important; }
[data-theme="dark"] .bg-body   { background-color: var(--pl-bg) !important; }
[data-theme="dark"] .bg-body-tertiary,
[data-theme="dark"] .bg-body-secondary { background-color: var(--pl-surface-alt) !important; }
[data-theme="dark"] .text-dark { color: var(--pl-text) !important; }
[data-theme="dark"] .text-black { color: var(--pl-text-strong) !important; }
[data-theme="dark"] .text-body-secondary { color: var(--pl-text-muted) !important; }
[data-theme="dark"] .shadow-sm { box-shadow: var(--pl-shadow-sm) !important; }
[data-theme="dark"] .shadow    { box-shadow: var(--pl-shadow) !important; }
[data-theme="dark"] .shadow-lg { box-shadow: var(--pl-shadow-lg) !important; }
[data-theme="dark"] .border    { border-color: var(--pl-border) !important; }
[data-theme="dark"] .border-top, [data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start, [data-theme="dark"] .border-end { border-color: var(--pl-border) !important; }
[data-theme="dark"] hr { border-color: var(--pl-border); opacity: 1; }

a { color: var(--pl-link); text-decoration: none; }
a:hover { color: var(--pl-link-hover); }

/* ── 04. Reset / typography ─────────────────────────────────── */
html, body { height: 100%; }
body {
  background: var(--pl-bg);
  color: var(--pl-text);
  font-family: var(--pl-font-sans);
  font-size: var(--pl-fs-base);
  line-height: var(--pl-lh-base);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.tabular-nums, .pl-num { font-variant-numeric: tabular-nums; }

h1, h2, h3, h4, h5, h6 {
  color: var(--pl-text);
  font-weight: var(--pl-fw-semibold);
  letter-spacing: -0.011em;
  line-height: var(--pl-lh-tight);
}
h1 { font-size: var(--pl-fs-3xl); font-weight: var(--pl-fw-bold); }
h2 { font-size: var(--pl-fs-2xl); font-weight: var(--pl-fw-bold); }
h3 { font-size: var(--pl-fs-xl); }
h4 { font-size: var(--pl-fs-lg); }
h5 { font-size: var(--pl-fs-md); }
h6 { font-size: var(--pl-fs-base); }

.text-muted { color: var(--pl-text-muted) !important; }
.text-subtle { color: var(--pl-text-subtle) !important; }
.label-caps {
  font-size: var(--pl-fs-xs);
  font-weight: var(--pl-fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pl-text-subtle);
}

/* Focus */
:focus-visible {
  outline: 2px solid var(--pl-primary);
  outline-offset: 2px;
  border-radius: var(--pl-radius-xs);
}
.form-control, .form-select {
  background: var(--pl-surface);
  color: var(--pl-text);
  border-color: var(--pl-border);
}
.form-control:focus, .form-select:focus {
  border-color: var(--pl-primary);
  box-shadow: 0 0 0 3px var(--pl-primary-ring);
  background: var(--pl-surface);
  color: var(--pl-text);
}
.form-control::placeholder { color: var(--pl-text-subtle); }
.form-label { font-weight: var(--pl-fw-medium); font-size: var(--pl-fs-base); color: var(--pl-text); }

/* ── Native UI: selection, scrollbars, accent, autofill ────── */
::selection      { background: var(--pl-selection-bg); color: var(--pl-selection-fg); }
::-moz-selection { background: var(--pl-selection-bg); color: var(--pl-selection-fg); }

html { scrollbar-color: var(--pl-scrollbar-thumb) var(--pl-scrollbar-track); scrollbar-width: thin; }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: var(--pl-scrollbar-track); }
::-webkit-scrollbar-thumb {
  background: var(--pl-scrollbar-thumb);
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--pl-scrollbar-thumb-hover);
  background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }

/* Accent on native controls */
input, textarea, select, progress { accent-color: var(--pl-accent); }

/* Autofill */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--pl-input-bg) inset;
  -webkit-text-fill-color: var(--pl-text);
  caret-color: var(--pl-text);
  transition: background-color 5000s ease-in-out 0s;
}
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] textarea:-webkit-autofill,
[data-theme="dark"] select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--pl-surface-alt) inset;
}

/* Dark mode: native date/time picker indicator inversion */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="week"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(0.85);
  opacity: 0.7;
}

/* Dark mode: Bootstrap form-select chevron */
[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238c9bb3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* Disabled controls */
.form-control:disabled,
.form-select:disabled,
.form-check-input:disabled {
  background: var(--pl-surface-sunken);
  color: var(--pl-text-subtle);
  border-color: var(--pl-border);
  cursor: not-allowed;
}

/* ── 05. App shell layout ───────────────────────────────────── */
.pl-app {
  display: grid;
  grid-template-columns: var(--pl-sidebar-w) 1fr;
  min-height: 100vh;
}
.pl-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ── 06. Sidebar ────────────────────────────────────────────── */
/* Dark azure brand gradient — derived from logos/logo-app.png (#006e9f)
   Mirrors the proven look from the legacy code base: lighter brand at the
   top transitioning to deep navy at the bottom, with a soft fade-out. */
.pl-sidebar {
  background: linear-gradient(180deg, #0a4f7a 0%, #084466 45%, #062a47 100%);
  border-right: none;
  box-shadow: 2px 0 12px 0 rgba(0, 0, 0, 0.25);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: var(--pl-z-sidebar);
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}
.pl-sidebar::-webkit-scrollbar { width: 3px; }
.pl-sidebar::-webkit-scrollbar-track { background: transparent; }
.pl-sidebar::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.08); border-radius: 10px; }
.pl-sidebar::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.2); }

/* Bottom fade to deep navy */
.pl-sidebar::after {
  content: '';
  position: sticky;
  bottom: 0;
  display: block;
  height: 48px;
  margin-top: -48px;
  background: linear-gradient(to top, #062a47 5%, transparent);
  pointer-events: none;
  flex-shrink: 0;
}

.pl-sidebar__brand {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0 1rem;
  height: var(--pl-topbar-h);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-weight: var(--pl-fw-bold);
  font-size: var(--pl-fs-lg);
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.pl-sidebar__brand:hover { color: #fff; }
.pl-sidebar__brand-mark {
  width: 36px; height: 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff;
  padding: 4px;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  transition: transform var(--pl-dur-fast) var(--pl-ease);
}
.pl-sidebar__brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pl-sidebar__brand:hover .pl-sidebar__brand-mark { transform: scale(1.05); }

.pl-sidebar__tenant {
  margin: 0.5rem 0.75rem;
  padding: 0.5rem 0.625rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--pl-radius);
  display: flex; align-items: center; gap: 0.5rem;
  font-size: var(--pl-fs-sm);
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  transition: background-color var(--pl-dur-fast) var(--pl-ease);
  text-decoration: none;
}
.pl-sidebar__tenant:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.pl-sidebar__tenant .bi { color: rgba(255, 255, 255, 0.75); }
.pl-sidebar__tenant-name {
  flex: 1 1 auto;
  font-weight: var(--pl-fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.pl-sidebar__tenant-tier {
  font-size: var(--pl-fs-xs);
  color: rgba(255, 255, 255, 0.6);
  text-transform: capitalize;
}

.pl-sidebar__search {
  padding: 0 0.75rem 0.5rem;
  position: relative;
}
.pl-sidebar__search input {
  width: 100%;
  height: 32px;
  padding: 0 0.625rem 0 2rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--pl-radius-sm);
  font-size: var(--pl-fs-sm);
  color: #fff;
}
.pl-sidebar__search input::placeholder { color: rgba(255, 255, 255, 0.5); }
.pl-sidebar__search input:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 2px rgba(58, 171, 219, 0.25);
  outline: none;
}
.pl-sidebar__search .bi {
  position: absolute; left: 1.375rem; top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.55); font-size: 0.85rem;
  pointer-events: none;
}

.pl-sidebar__nav {
  padding: 0.25rem 0.5rem 1rem;
  flex: 1 1 auto;
}
.pl-sidebar__section-label {
  padding: 0.875rem 0.875rem 0.25rem;
  font-size: var(--pl-fs-xs);
  font-weight: var(--pl-fw-bold);
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  display: flex; align-items: center; gap: 0.375rem;
}
.pl-sidebar__section-label .bi { font-size: 0.75rem; opacity: 0.6; }

.pl-sidebar__group { margin-top: 0.125rem; }
.pl-sidebar__group-label {
  padding: 0.5rem 0.875rem 0.25rem;
  font-size: 0.625rem;
  font-weight: var(--pl-fw-semibold);
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  display: flex; align-items: center; justify-content: space-between;
  cursor: default; user-select: none;
  border-radius: var(--pl-radius-sm);
}
.pl-sidebar__group-label:focus { outline: none; }
.pl-sidebar__group-label:focus-visible { outline: none; }
/* Collapsible section header — interactive variant (e.g. SUBSCRIPTIONS). */
.pl-sidebar__group-label[data-pl-group-toggle] {
  cursor: pointer;
  transition: color var(--pl-dur-fast) var(--pl-ease),
              background-color var(--pl-dur-fast) var(--pl-ease);
}
.pl-sidebar__group-label[data-pl-group-toggle]:hover {
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.04);
}
.pl-sidebar__group-label[data-pl-group-toggle]:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.3); outline-offset: -2px;
}
/* Caret: hidden on plain labels, shown + rotating on collapsible headers. */
.pl-sidebar__group-label .caret { display: none; }
.pl-sidebar__group-label[data-pl-group-toggle] .caret {
  display: inline-block;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.35);
  transition: transform var(--pl-dur-fast) var(--pl-ease),
              color var(--pl-dur-fast) var(--pl-ease);
}
.pl-sidebar__group-label[data-pl-group-toggle]:hover .caret { color: rgba(255, 255, 255, 0.7); }
.pl-sidebar__group.is-collapsed > .pl-sidebar__group-label[data-pl-group-toggle] .caret {
  transform: rotate(-90deg);
}
.pl-sidebar__group.is-collapsed .pl-sidebar__items { display: none; }

/* ── Nested sidebar groups (two-level menus, e.g. Digital Presence) ── */
.pl-sidebar__group-icon {
  display: inline-block;
  font-size: 0.75rem;
  margin-right: 0.4rem;
  opacity: 0.7;
  vertical-align: -1px;
}
.pl-sidebar__group--nested {
  margin-top: 0.125rem;
}
.pl-sidebar__group-label--nested {
  /* Look like a regular .pl-sidebar__item row */
  padding: 0.4375rem 0.75rem 0.4375rem 0.875rem;
  font-size: var(--pl-fs-base);
  font-weight: var(--pl-fw-medium);
  letter-spacing: normal;
  color: rgba(255, 255, 255, 0.85);
  text-transform: none;
  border-radius: var(--pl-radius-sm);
  cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.625rem;
  transition: background-color var(--pl-dur-fast) var(--pl-ease),
              color var(--pl-dur-fast) var(--pl-ease);
}
.pl-sidebar__group-label--nested:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.pl-sidebar__group-label--nested:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.3); outline-offset: -2px;
}
.pl-sidebar__group-label--nested .caret {
  display: inline-block;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.5);
  transition: transform var(--pl-dur-fast) var(--pl-ease);
}
.pl-sidebar__group-label--nested:hover .caret { color: rgba(255, 255, 255, 0.85); }
.pl-sidebar__group--nested.is-collapsed > .pl-sidebar__group-label--nested .caret {
  transform: rotate(-90deg);
}
.pl-sidebar__items--nested {
  margin-left: 1.125rem;
  padding-left: 0.375rem;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.pl-sidebar__items--nested .pl-sidebar__item {
  padding-left: 1.75rem;
  font-size: calc(var(--pl-fs-base) - 0.5px);
  color: rgba(255, 255, 255, 0.7);
  position: relative;
}
.pl-sidebar__items--nested .pl-sidebar__item:hover,
.pl-sidebar__items--nested .pl-sidebar__item.is-active {
  color: #fff;
}
/* Replace icons with bullet dots so nested rows read as a sub-list (matches reference UI). */
.pl-sidebar__items--nested .pl-sidebar__item > .bi { display: none; }
.pl-sidebar__items--nested .pl-sidebar__item::before {
  content: "";
  position: absolute;
  left: 0.875rem;
  top: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translateY(-50%);
  transition: background-color var(--pl-dur-fast) var(--pl-ease);
}
.pl-sidebar__items--nested .pl-sidebar__item:hover::before,
.pl-sidebar__items--nested .pl-sidebar__item.is-active::before {
  background: #fff;
}

.pl-sidebar__items { display: flex; flex-direction: column; gap: 1px; }
.pl-sidebar__item {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.4375rem 0.75rem 0.4375rem 0.875rem;
  border-radius: var(--pl-radius-sm);
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--pl-fs-base);
  font-weight: var(--pl-fw-medium);
  border-left: 3px solid transparent;
  margin-left: 1px;
  transition: background-color var(--pl-dur-fast) var(--pl-ease),
              color var(--pl-dur-fast) var(--pl-ease);
  position: relative;
  text-decoration: none;
}
.pl-sidebar__item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.pl-sidebar__item .bi {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}
.pl-sidebar__item:hover .bi { color: #fff; }
.pl-sidebar__item.is-active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-left-color: var(--pl-primary-300);
  font-weight: var(--pl-fw-semibold);
}
.pl-sidebar__item.is-active .bi { color: #fff; }
.pl-sidebar__item:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.3);
  outline-offset: -2px;
}
.pl-sidebar__item-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.pl-sidebar__badge {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: var(--pl-fs-xs);
  font-weight: var(--pl-fw-semibold);
  padding: 1px 6px; border-radius: var(--pl-radius-pill);
  min-width: 18px; text-align: center;
  flex-shrink: 0;
}
.pl-sidebar__badge--muted {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}
.pl-sidebar__badge--success { background: var(--pl-success); color: #fff; }
.pl-sidebar__badge--warning { background: var(--pl-warning); color: #fff; }
.pl-sidebar__badge--danger  { background: var(--pl-danger); color: #fff; }

.pl-sidebar__footer {
  margin-top: auto;
  padding: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; align-items: center; gap: 0.625rem;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.12);
  color: rgba(255, 255, 255, 0.92);
}
.pl-sidebar__footer .pl-icon-btn {
  color: rgba(255, 255, 255, 0.7);
}
.pl-sidebar__footer .pl-icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.pl-sidebar__footer-meta {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}
.pl-sidebar__footer-name {
  font-size: var(--pl-fs-base);
  font-weight: var(--pl-fw-semibold);
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pl-sidebar__footer-sub {
  font-size: var(--pl-fs-sm);
  color: rgba(255, 255, 255, 0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 07. Topbar ─────────────────────────────────────────────── */
.pl-topbar {
  position: sticky; top: 0; z-index: var(--pl-z-topbar);
  background: var(--pl-surface);
  border-bottom: 1px solid var(--pl-border);
  height: var(--pl-topbar-h);
  display: flex; align-items: center;
  padding: 0 1rem;
  gap: 0.75rem;
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
}
.pl-topbar__toggle {
  display: inline-flex;
  background: var(--pl-surface-alt); border: 1px solid var(--pl-border);
  width: 38px; height: 38px; border-radius: 10px;
  color: var(--pl-text); font-size: 1.15rem;
  align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background var(--pl-dur-fast) var(--pl-ease), border-color var(--pl-dur-fast) var(--pl-ease), color var(--pl-dur-fast) var(--pl-ease), transform var(--pl-dur-fast) var(--pl-ease);
}
.pl-topbar__toggle:hover {
  background: var(--pl-primary-soft); border-color: var(--pl-primary);
  color: var(--pl-primary);
}
.pl-topbar__toggle:active { transform: scale(0.96); }
.pl-topbar__toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--pl-primary-ring);
}
@media (min-width: 769px) {
  .pl-app.is-sidebar-collapsed { grid-template-columns: 1fr; }
  .pl-app.is-sidebar-collapsed .pl-sidebar { display: none; }
}

/* ── Topbar breadcrumbs (replaces former .pl-search) ──────── */
.pl-topbar__crumbs {
  flex: 1 1 auto;
  min-width: 0;            /* allow children to truncate */
  overflow: hidden;
  display: flex;
  align-items: center;
}

.pl-topbar__crumbs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;     /* Firefox */
  -ms-overflow-style: none;  /* IE/Edge legacy */
  min-width: 0;
  max-width: 100%;
}
.pl-topbar__crumbs-list::-webkit-scrollbar { display: none; }

.pl-topbar__crumbs-item {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
  min-width: 0;
}

.pl-topbar__crumb {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 32px;
  padding: 0 0.65rem;
  border-radius: var(--pl-radius-pill);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--pl-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--pl-dur-fast) var(--pl-ease),
              color var(--pl-dur-fast) var(--pl-ease);
  max-width: 240px;
}

.pl-topbar__crumb-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.pl-topbar__crumb .bi {
  font-size: 0.95rem;
  flex-shrink: 0;
  opacity: 0.95;
}

.pl-topbar__crumb:hover,
.pl-topbar__crumb:focus-visible {
  background: var(--pl-primary-soft);
  color: var(--pl-primary-700);
  outline: none;
}
.pl-topbar__crumb:focus-visible {
  box-shadow: 0 0 0 3px var(--pl-primary-ring);
}

/* Tenant root chip — slightly stronger emphasis */
.pl-topbar__crumb--tenant {
  background: var(--pl-primary-soft);
  color: var(--pl-primary-700);
  font-weight: 600;
}
.pl-topbar__crumb--tenant:hover {
  background: var(--pl-primary-100);
  color: var(--pl-primary-800);
}
.pl-topbar__crumb--tenant .bi {
  color: var(--pl-primary-600);
}

/* Current page — strongest emphasis, no hover treatment */
.pl-topbar__crumb--current {
  color: var(--pl-text);
  font-weight: 600;
  cursor: default;
  background: transparent;
}
.pl-topbar__crumb--current:hover {
  background: transparent;
  color: var(--pl-text);
}
.pl-topbar__crumb--current .bi {
  color: var(--pl-primary-600);
}

.pl-topbar__crumbs-sep {
  color: var(--pl-text-subtle);
  font-size: 0.7rem;
  margin: 0 0.05rem;
  flex-shrink: 0;
}

.pl-topbar__actions {
  display: flex; align-items: center; gap: 0.375rem;
  flex-shrink: 0;
  margin-left: 0.5rem;
}

/* Pills */
.pl-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 4px 10px; border-radius: var(--pl-radius-pill);
  font-size: var(--pl-fs-sm);
  font-weight: var(--pl-fw-semibold);
  border: 1px solid var(--pl-border);
  background: var(--pl-surface);
  color: var(--pl-text);
  white-space: nowrap;
  line-height: 1.25;
  transition: background-color var(--pl-dur-fast) var(--pl-ease);
}
.pl-pill__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pl-text-subtle);
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.18);
}
.pl-pill--online  { color: var(--pl-success-text); background: var(--pl-success-soft); border-color: var(--pl-success-border); }
.pl-pill--online  .pl-pill__dot { background: var(--pl-success); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18); animation: pl-pulse 2s ease-in-out infinite; }
.pl-pill--delayed { color: var(--pl-warning-text); background: var(--pl-warning-soft); border-color: var(--pl-warning-border); }
.pl-pill--delayed .pl-pill__dot { background: var(--pl-warning); box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.18); }
.pl-pill--offline { color: var(--pl-danger-text); background: var(--pl-danger-soft); border-color: var(--pl-danger-border); }
.pl-pill--offline .pl-pill__dot { background: var(--pl-danger); box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18); }
.pl-pill--tenant {
  background: var(--pl-primary-soft);
  color: var(--pl-primary-hover);
  border-color: var(--pl-primary-200);
}
.pl-pill--ghost {
  background: var(--pl-surface-alt);
  border-color: transparent;
  color: var(--pl-text-muted);
}

@keyframes pl-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18); }
  50%      { box-shadow: 0 0 0 5px rgba(22, 163, 74, 0.08); }
}

/* Icon buttons */
.pl-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--pl-radius-sm);
  background: transparent; border: 0; color: var(--pl-text);
  position: relative;
  cursor: pointer;
  transition: background-color var(--pl-dur-fast) var(--pl-ease);
}
.pl-icon-btn:hover { background: var(--pl-surface-alt); }
.pl-icon-btn:focus-visible { outline: 2px solid var(--pl-primary); outline-offset: 1px; }
.pl-icon-btn .bi { font-size: 1.05rem; }
.pl-icon-btn .pl-icon-btn__dot {
  position: absolute; top: 7px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pl-danger);
  border: 2px solid var(--pl-surface);
}

/* Avatar */
.pl-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pl-primary-500), var(--pl-primary-700));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--pl-fs-sm);
  font-weight: var(--pl-fw-semibold);
  flex-shrink: 0;
  overflow: hidden;
}
.pl-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pl-avatar--xs { width: 20px; height: 20px; font-size: 0.625rem; }
.pl-avatar--sm { width: 24px; height: 24px; font-size: 0.6875rem; }
.pl-avatar--lg { width: 40px; height: 40px; font-size: var(--pl-fs-base); }
.pl-avatar--xl { width: 56px; height: 56px; font-size: var(--pl-fs-lg); }

.pl-avatar-group {
  display: inline-flex;
  align-items: center;
}
.pl-avatar-group > .pl-avatar {
  border: 2px solid var(--pl-surface);
  margin-left: -8px;
}
.pl-avatar-group > .pl-avatar:first-child { margin-left: 0; }
.pl-avatar-group > .pl-avatar-group__more {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pl-surface-alt);
  color: var(--pl-text-muted);
  border: 2px solid var(--pl-surface);
  margin-left: -8px;
  font-size: var(--pl-fs-xs);
  font-weight: var(--pl-fw-semibold);
  border-radius: 50%;
  height: 32px; width: 32px;
}

/* Dark mode: topbar glass + chip refinement */
[data-theme="dark"] .pl-topbar {
  background: var(--pl-glass-bg);
  border-bottom-color: var(--pl-border);
  backdrop-filter: saturate(160%) blur(var(--pl-backdrop-blur));
  -webkit-backdrop-filter: saturate(160%) blur(var(--pl-backdrop-blur));
}
[data-theme="dark"] .pl-topbar__toggle:hover { background: var(--pl-surface-elevated); }
[data-theme="dark"] .pl-topbar__crumb:hover,
[data-theme="dark"] .pl-topbar__crumb:focus-visible {
  background: var(--pl-primary-tint);
  color: var(--pl-primary-200);
}
[data-theme="dark"] .pl-topbar__crumb--tenant {
  background: var(--pl-primary-tint);
  color: var(--pl-primary-200);
}
[data-theme="dark"] .pl-topbar__crumb--tenant:hover {
  background: var(--pl-primary-tint-hover);
  color: var(--pl-primary-100);
}
[data-theme="dark"] .pl-topbar__crumb--tenant .bi,
[data-theme="dark"] .pl-topbar__crumb--current .bi {
  color: var(--pl-primary-300);
}
[data-theme="dark"] .pl-topbar__crumb--current { color: var(--pl-text-strong); }
[data-theme="dark"] .pl-pill {
  background: var(--pl-surface-alt);
  border-color: var(--pl-border);
  color: var(--pl-text);
}
[data-theme="dark"] .pl-pill--tenant {
  background: var(--pl-primary-tint);
  color: var(--pl-primary-200);
  border-color: var(--pl-primary-tint-hover);
}
[data-theme="dark"] .pl-icon-btn:hover { background: var(--pl-surface-elevated); }

/* ── 08. Impersonation banner ───────────────────────────────── */
.pl-impersonate {
  background: var(--pl-warning-soft);
  border-bottom: 1px solid var(--pl-warning-border);
  color: var(--pl-warning-text);
  font-size: var(--pl-fs-base);
  font-weight: var(--pl-fw-medium);
  padding: 0.5rem 1rem;
  display: flex; align-items: center; gap: 0.75rem;
}
.pl-impersonate .bi { font-size: 1rem; }
.pl-impersonate form { margin-left: auto; }

/* ── 09. Content area & breadcrumbs ─────────────────────────── */
.pl-content {
  flex: 1 1 auto;
  padding: 1.25rem 1.5rem 3rem;
  min-width: 0;
  width: 100%;
}
.pl-content > .container-fluid { padding: 0; }

.pl-crumbs {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.25rem;
  font-size: var(--pl-fs-base);
  color: var(--pl-text-muted);
  margin-bottom: 0.75rem;
}
.pl-crumbs a {
  color: var(--pl-text-muted);
  padding: 2px 4px;
  border-radius: var(--pl-radius-xs);
  transition: background-color var(--pl-dur-fast) var(--pl-ease),
              color var(--pl-dur-fast) var(--pl-ease);
}
.pl-crumbs a:hover { color: var(--pl-primary); background: var(--pl-primary-soft); }
.pl-crumbs__sep { color: var(--pl-text-subtle); margin: 0 0.125rem; font-size: 0.75rem; }
.pl-crumbs__current { color: var(--pl-text); font-weight: var(--pl-fw-semibold); padding: 2px 4px; }

/* ── 10. Page header ────────────────────────────────────────── */
.pl-page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.pl-page-header__title { margin: 0; }
.pl-page-header__icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #38b6e0 0%, var(--pl-primary) 100%);
  color: #fff;
  font-size: 1.5rem; flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(17, 145, 197, 0.25);
}
.pl-page-header__icon.pl-stat__icon--success {
  background: linear-gradient(135deg, #4ade80 0%, var(--pl-success) 100%);
  color: #fff;
  box-shadow: 0 4px 10px rgba(22, 163, 74, 0.25);
}
.pl-page-header__icon.pl-stat__icon--warning {
  background: linear-gradient(135deg, #fbbf24 0%, var(--pl-warning) 100%);
  color: #fff;
  box-shadow: 0 4px 10px rgba(217, 119, 6, 0.25);
}
.pl-page-header__icon.pl-stat__icon--danger {
  background: linear-gradient(135deg, #f87171 0%, var(--pl-danger) 100%);
  color: #fff;
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.25);
}
.pl-page-header__icon.pl-stat__icon--info {
  background: linear-gradient(135deg, #38bdf8 0%, var(--pl-info) 100%);
  color: #fff;
  box-shadow: 0 4px 10px rgba(2, 132, 199, 0.25);
}
.pl-page-header__subtitle {
  color: var(--pl-text-muted);
  font-size: var(--pl-fs-base);
  margin-top: 0.25rem;
  max-width: 64ch;
}
.pl-page-header__meta {
  margin-top: 0.5rem;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.375rem 0.875rem;
  font-size: var(--pl-fs-sm);
  color: var(--pl-text-muted);
}
.pl-page-header__meta-item { display: inline-flex; align-items: center; gap: 0.25rem; }
.pl-page-header__actions {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.pl-page-header__tabs {
  border-bottom: 1px solid var(--pl-border);
  margin-bottom: 1.25rem;
}

/* ── 11. Cards ──────────────────────────────────────────────── */
.card, .pl-card {
  background: var(--pl-surface);
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius-lg);
  box-shadow: var(--pl-shadow-sm);
  color: var(--pl-text);
}
.card .card-header, .pl-card__header {
  background: transparent;
  border-bottom: 1px solid var(--pl-border);
  font-weight: var(--pl-fw-semibold);
  padding: 0.875rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
  color: var(--pl-text);
}
.pl-card__title {
  font-size: var(--pl-fs-md);
  font-weight: var(--pl-fw-semibold);
  margin: 0;
  display: flex; align-items: center; gap: 0.5rem;
  color: var(--pl-text);
}
.pl-card__title .bi { color: var(--pl-text-muted); }
.pl-card__body { padding: 1.25rem; }
.pl-card__footer {
  background: var(--pl-surface-alt);
  border-top: 1px solid var(--pl-border);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--pl-radius-lg) var(--pl-radius-lg);
  font-size: var(--pl-fs-base);
}

.pl-card--elevated { box-shadow: var(--pl-shadow-md); }
.pl-card--ghost { background: transparent; border-color: transparent; box-shadow: none; }
.pl-card--gradient {
  background: linear-gradient(180deg, var(--pl-primary-soft) 0%, transparent 60%), var(--pl-surface);
}
.pl-card--hover {
  transition: transform var(--pl-dur-fast) var(--pl-ease),
              box-shadow var(--pl-dur-fast) var(--pl-ease),
              border-color var(--pl-dur-fast) var(--pl-ease);
}
.pl-card--hover:hover {
  transform: translateY(-1px);
  box-shadow: var(--pl-shadow);
  border-color: var(--pl-border-strong);
}

/* Dark mode: real elevation steps for cards */
[data-theme="dark"] .card,
[data-theme="dark"] .pl-card {
  background: var(--pl-elevation-1);
  border-color: var(--pl-border);
}
[data-theme="dark"] .pl-card--elevated {
  background: var(--pl-elevation-2);
  border-color: var(--pl-border-strong);
}
[data-theme="dark"] .pl-card__footer {
  background: var(--pl-surface-sunken);
  border-top-color: var(--pl-border);
}
[data-theme="dark"] .pl-card--gradient {
  background: linear-gradient(180deg, var(--pl-primary-tint) 0%, transparent 60%), var(--pl-elevation-1);
}

/* ── 12. Tables ─────────────────────────────────────────────── */
.table {
  color: var(--pl-text);
  --bs-table-bg: transparent;
  --bs-table-color: var(--pl-text);
  --bs-table-hover-color: var(--pl-text);
  --bs-table-hover-bg: var(--pl-surface-alt);
  margin-bottom: 0;
}
.table > :not(caption) > * > * {
  border-bottom-color: var(--pl-border);
  padding: 0.75rem 1rem;
  background-color: transparent;
}
.table thead th {
  font-weight: var(--pl-fw-semibold);
  font-size: var(--pl-fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pl-text-muted);
  border-bottom: 1px solid var(--pl-border);
  background: var(--pl-surface-alt);
  white-space: nowrap;
}
.table.table-light thead th { background: var(--pl-surface-alt); }
.table.table-hover tbody tr:hover > * { background-color: var(--pl-surface-alt); }
.pl-table thead th {
  position: sticky; top: 0;
  background: var(--pl-surface-alt);
  z-index: 1;
}
.pl-table--zebra tbody tr:nth-child(odd) { background: var(--pl-surface-alt); }
.pl-table--dense > :not(caption) > * > * { padding: 0.5rem 0.875rem; }
.pl-table tbody tr.is-expanded + tr.pl-table__expand {
  background: var(--pl-surface-alt);
}
.pl-table__expand > td {
  padding: 1rem 1.25rem;
  border-top: 0;
}

/* Dark mode: table bridges, zebra & borders */
[data-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--pl-text);
  --bs-table-hover-color: var(--pl-text);
  --bs-table-hover-bg: var(--pl-surface-elevated);
  --bs-table-striped-bg: var(--pl-surface-alt);
  --bs-table-striped-color: var(--pl-text);
  --bs-table-active-bg: var(--pl-surface-elevated);
  --bs-table-active-color: var(--pl-text);
  --bs-table-border-color: var(--pl-border);
  color: var(--pl-text);
}
[data-theme="dark"] .table > :not(caption) > * > * {
  border-bottom-color: var(--pl-border);
}
[data-theme="dark"] .table thead th,
[data-theme="dark"] .pl-table thead th {
  background: var(--pl-surface-alt);
  color: var(--pl-text-muted);
  border-bottom-color: var(--pl-border);
}
[data-theme="dark"] .table.table-hover tbody tr:hover > * { background-color: var(--pl-surface-elevated); }
[data-theme="dark"] .pl-table--zebra tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.03); }
[data-theme="dark"] .pl-table tbody tr.is-expanded + tr.pl-table__expand { background: var(--pl-surface-elevated); }
[data-theme="dark"] .table-bordered,
[data-theme="dark"] .table-bordered > :not(caption) > * > * {
  border-color: var(--pl-border);
}

/* ── 13. Stat cards & KPI row ───────────────────────────────── */
.pl-stat {
  display: block;
  background: var(--pl-surface);
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius-lg);
  box-shadow: var(--pl-shadow-sm);
  padding: 1rem 1.125rem;
  color: var(--pl-text);
  transition: transform var(--pl-dur-fast) var(--pl-ease),
              box-shadow var(--pl-dur-fast) var(--pl-ease),
              border-color var(--pl-dur-fast) var(--pl-ease);
  position: relative;
  overflow: hidden;
}
a.pl-stat:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--pl-shadow);
  border-color: var(--pl-border-strong);
}
a.pl-stat:focus-visible {
  outline: 2px solid var(--pl-primary);
  outline-offset: 2px;
}
.pl-stat__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; margin-bottom: 0.375rem;
}
.pl-stat__label {
  font-size: var(--pl-fs-sm);
  font-weight: var(--pl-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pl-text-muted);
}
.pl-stat__icon {
  width: 32px; height: 32px; border-radius: var(--pl-radius);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pl-primary-soft); color: var(--pl-primary);
  font-size: 0.95rem;
}
.pl-stat__icon--success { background: var(--pl-success-soft); color: var(--pl-success); }
.pl-stat__icon--warning { background: var(--pl-warning-soft); color: var(--pl-warning); }
.pl-stat__icon--danger  { background: var(--pl-danger-soft);  color: var(--pl-danger); }
.pl-stat__icon--info    { background: var(--pl-info-soft);    color: var(--pl-info); }
.pl-stat__value {
  font-size: var(--pl-fs-3xl);
  font-weight: var(--pl-fw-bold);
  line-height: var(--pl-lh-tight);
  color: var(--pl-text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.pl-stat__foot {
  margin-top: 0.5rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
  min-height: 1.25rem;
}
.pl-stat__delta {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: var(--pl-fs-sm);
  font-weight: var(--pl-fw-semibold);
  font-variant-numeric: tabular-nums;
}
.pl-stat__delta--up   { color: var(--pl-success); }
.pl-stat__delta--down { color: var(--pl-danger); }
.pl-stat__delta--flat { color: var(--pl-text-muted); }
.pl-stat__delta-pill {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 1px 6px;
  border-radius: var(--pl-radius-pill);
  background: var(--pl-success-soft);
  color: var(--pl-success-text);
  font-size: var(--pl-fs-xs);
  font-weight: var(--pl-fw-semibold);
}
.pl-stat__delta-pill--down { background: var(--pl-danger-soft); color: var(--pl-danger-text); }
.pl-stat__delta-pill--flat { background: var(--pl-surface-alt); color: var(--pl-text-muted); }
.pl-stat__spark { color: var(--pl-primary); opacity: 0.85; }
.pl-stat__spark svg { display: block; }

.pl-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.875rem;
  margin-bottom: 1.25rem;
}

/* KPI row density variants — pick based on how many stats you're showing. */
.pl-kpi-row--compact   { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.pl-kpi-row--spacious  { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* .pl-stat modifiers — let custom dashboard cards share the canonical
   pattern instead of inventing their own (.rep-kpi, .ss-stat, etc.). */
.pl-stat--no-icon .pl-stat__icon { display: none; }
.pl-stat--compact { padding: 0.75rem 0.875rem; }
.pl-stat--compact .pl-stat__value { font-size: var(--pl-fs-2xl); }
.pl-stat--simple {
  box-shadow: none;
  background: transparent;
}
.pl-stat--border-left {
  border-left: 3px solid var(--pl-primary);
  padding-left: 1rem;
}
.pl-stat--border-left.pl-stat--success { border-left-color: var(--pl-success); }
.pl-stat--border-left.pl-stat--warning { border-left-color: var(--pl-warning); }
.pl-stat--border-left.pl-stat--danger  { border-left-color: var(--pl-danger); }
.pl-stat--border-left.pl-stat--info    { border-left-color: var(--pl-info); }

/* Dashboard container — consistent page-level grid + gap for all dashboards. */
.pl-dashboard {
  display: grid;
  gap: 1.25rem;
}
.pl-dashboard__row {
  display: grid;
  gap: 1rem;
}
.pl-dashboard__row--2-col { grid-template-columns: 1fr; }
.pl-dashboard__row--3-col { grid-template-columns: 1fr; }
@media (min-width: 992px) {
  .pl-dashboard__row--2-col { grid-template-columns: 1fr 1fr; }
  .pl-dashboard__row--3-col { grid-template-columns: 1fr 1fr 1fr; }
  .pl-dashboard__row--main-aside { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

/* ── 14. Empty state ────────────────────────────────────────── */
.pl-empty {
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: var(--pl-surface);
  border: 1px dashed var(--pl-border-strong);
  border-radius: var(--pl-radius-lg);
  color: var(--pl-text-muted);
}
.pl-empty__art {
  width: 96px; height: 96px;
  margin: 0 auto 1rem;
  display: flex; align-items: center; justify-content: center;
  color: var(--pl-primary);
  opacity: 0.85;
}
.pl-empty__icon {
  width: 56px; height: 56px; margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--pl-primary-soft);
  color: var(--pl-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}
.pl-empty__title {
  color: var(--pl-text);
  font-weight: var(--pl-fw-semibold);
  font-size: var(--pl-fs-lg);
  margin-bottom: 0.375rem;
}
.pl-empty__body {
  max-width: 460px; margin: 0 auto 1rem;
  font-size: var(--pl-fs-base);
  color: var(--pl-text-muted);
}
.pl-empty__actions {
  display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  justify-content: center;
}

/* ── 15. Banners ────────────────────────────────────────────── */
.pl-banner {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--pl-radius);
  border: 1px solid var(--pl-border);
  background: var(--pl-surface);
  margin-bottom: 1rem;
  font-size: var(--pl-fs-base);
  position: relative;
}
.pl-banner__icon { flex: 0 0 auto; font-size: 1.1rem; margin-top: 1px; }
.pl-banner__body { flex: 1 1 auto; }
.pl-banner__title { font-weight: var(--pl-fw-semibold); color: inherit; }
.pl-banner__cta {
  display: inline-block;
  margin-top: 0.25rem;
  font-weight: var(--pl-fw-semibold);
  text-decoration: underline;
  color: inherit;
}
.pl-banner__close {
  background: transparent; border: 0; color: inherit; opacity: 0.6;
  font-size: 1rem; padding: 0 0.25rem; line-height: 1;
  cursor: pointer;
}
.pl-banner__close:hover { opacity: 1; }
.pl-banner--info    { background: var(--pl-info-soft);    border-color: var(--pl-info-border);    color: var(--pl-info-text); }
.pl-banner--success { background: var(--pl-success-soft); border-color: var(--pl-success-border); color: var(--pl-success-text); }
.pl-banner--warning { background: var(--pl-warning-soft); border-color: var(--pl-warning-border); color: var(--pl-warning-text); }
.pl-banner--danger  { background: var(--pl-danger-soft);  border-color: var(--pl-danger-border);  color: var(--pl-danger-text); }

/* ── 16. Dropdowns & notifications ──────────────────────────── */
.dropdown-menu {
  --bs-dropdown-bg: var(--pl-surface);
  --bs-dropdown-color: var(--pl-text);
  --bs-dropdown-link-color: var(--pl-text);
  --bs-dropdown-link-hover-color: var(--pl-text);
  --bs-dropdown-link-hover-bg: var(--pl-surface-alt);
  --bs-dropdown-link-active-bg: var(--pl-primary);
  --bs-dropdown-link-active-color: #fff;
  border-color: var(--pl-border);
  box-shadow: var(--pl-shadow-lg);
  border-radius: var(--pl-radius);
  padding: 0.375rem;
  font-size: var(--pl-fs-base);
}
.dropdown-item {
  border-radius: var(--pl-radius-sm);
  padding: 0.5rem 0.625rem;
  display: flex; align-items: center; gap: 0.5rem;
  color: var(--pl-text);
}
.dropdown-item .bi { color: var(--pl-text-muted); font-size: 1rem; }
.dropdown-item:active { background: var(--pl-primary); color: #fff; }
.dropdown-item:active .bi { color: #fff; }
.dropdown-header {
  font-size: var(--pl-fs-xs);
  font-weight: var(--pl-fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pl-text-subtle);
}
.dropdown-divider { border-color: var(--pl-border); margin: 0.25rem 0; }

.pl-notifs { width: 360px; }
.pl-notifs__item {
  display: flex; gap: 0.625rem;
  padding: 0.625rem; border-radius: var(--pl-radius-sm);
  color: var(--pl-text);
  text-decoration: none;
}
.pl-notifs__item:hover { background: var(--pl-surface-alt); color: var(--pl-text); }
.pl-notifs__item.is-unread { background: var(--pl-primary-soft); }
.pl-notifs__title { font-weight: var(--pl-fw-semibold); color: var(--pl-text); font-size: var(--pl-fs-base); }
.pl-notifs__body  { color: var(--pl-text-muted); font-size: var(--pl-fs-base); }
.pl-notifs__meta  { color: var(--pl-text-subtle); font-size: var(--pl-fs-sm); margin-top: 0.125rem; }
.pl-notifs__empty {
  padding: 1.5rem 1rem; text-align: center;
  color: var(--pl-text-muted); font-size: var(--pl-fs-base);
}
.pl-notifs__footer {
  border-top: 1px solid var(--pl-border);
  margin-top: 0.25rem;
  padding-top: 0.375rem;
  text-align: center;
}

/* Quick-create dropdown — "+" button in the topbar */
.pl-quick-create-menu {
  min-width: 240px;
}
.pl-quick-create-menu__item {
  position: relative;
  padding-right: 1.75rem;
  transition: background-color var(--pl-dur-fast) var(--pl-ease),
              padding-left var(--pl-dur-fast) var(--pl-ease);
}
.pl-quick-create-menu__item:hover,
.pl-quick-create-menu__item:focus-visible {
  background: var(--pl-surface-alt);
}
.pl-quick-create-menu__item .bi:first-child {
  color: var(--pl-primary);
  font-size: 1.05rem;
  flex-shrink: 0;
}
.pl-quick-create-menu__label {
  flex-grow: 1;
  min-width: 0;
}
.pl-quick-create-menu__chev {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  color: var(--pl-text-subtle) !important;
  font-size: 0.85rem !important;
  opacity: 0;
  transition: opacity var(--pl-dur-fast) var(--pl-ease),
              transform var(--pl-dur-fast) var(--pl-ease);
}
.pl-quick-create-menu__item:hover .pl-quick-create-menu__chev,
.pl-quick-create-menu__item:focus-visible .pl-quick-create-menu__chev {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.pl-quick-create-menu__hint {
  padding: 0.25rem 0.75rem 0.375rem;
  font-size: var(--pl-fs-xs);
  color: var(--pl-text-subtle);
  text-align: center;
}
.pl-quick-create-menu__hint .pl-kbd { margin: 0 0.125rem; }

/* Make the tenant pill feel clickable when rendered as an <a> */
a.pl-pill--tenant {
  text-decoration: none;
  cursor: pointer;
}
.pl-pill--tenant:hover,
.pl-pill--tenant:focus-visible {
  background: var(--pl-primary-100, var(--pl-primary-soft));
  border-color: var(--pl-primary-300, var(--pl-primary-200));
  color: var(--pl-primary-hover);
  text-decoration: none;
}
[data-theme="dark"] a.pl-pill--tenant { color: var(--pl-primary-200); }
[data-theme="dark"] .pl-pill--tenant:hover,
[data-theme="dark"] .pl-pill--tenant:focus-visible {
  background: var(--pl-primary-tint-hover);
  color: var(--pl-primary-100);
}

/* Dark mode: lifted dropdowns + visible hover */
[data-theme="dark"] .dropdown-menu {
  --bs-dropdown-bg: var(--pl-elevation-2);
  --bs-dropdown-color: var(--pl-text);
  --bs-dropdown-link-color: var(--pl-text);
  --bs-dropdown-link-hover-color: var(--pl-text-strong);
  --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.06);
  --bs-dropdown-link-active-bg: var(--pl-primary);
  --bs-dropdown-link-active-color: var(--pl-on-primary);
  --bs-dropdown-border-color: var(--pl-border);
  background: var(--pl-elevation-2);
  border-color: var(--pl-border);
  box-shadow: var(--pl-shadow-xl);
}
[data-theme="dark"] .dropdown-item { color: var(--pl-text); }
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus { background: rgba(255, 255, 255, 0.06); color: var(--pl-text-strong); }
[data-theme="dark"] .dropdown-item:active,
[data-theme="dark"] .dropdown-item.active {
  background: var(--pl-primary);
  color: var(--pl-on-primary);
}
[data-theme="dark"] .dropdown-item:active .bi,
[data-theme="dark"] .dropdown-item.active .bi { color: var(--pl-on-primary); }
[data-theme="dark"] .dropdown-divider { border-color: var(--pl-border); }
[data-theme="dark"] .dropdown-header { color: var(--pl-text-subtle); }
[data-theme="dark"] .pl-notifs__item:hover { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .pl-notifs__item.is-unread { background: var(--pl-primary-tint); }

/* ── 17. Tabs ───────────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 1px solid var(--pl-border);
  --bs-nav-tabs-link-active-bg: transparent;
}
.nav-tabs .nav-link {
  border: 0; color: var(--pl-text-muted);
  border-bottom: 2px solid transparent;
  font-weight: var(--pl-fw-medium);
  padding: 0.625rem 0.875rem;
  margin-bottom: -1px;
  transition: color var(--pl-dur-fast) var(--pl-ease),
              border-color var(--pl-dur-fast) var(--pl-ease);
  background: transparent;
}
.nav-tabs .nav-link:hover {
  color: var(--pl-text);
  border-color: transparent;
  isolation: isolate;
}
.nav-tabs .nav-link.active {
  color: var(--pl-primary);
  border-bottom-color: var(--pl-primary);
  background: transparent;
  font-weight: var(--pl-fw-semibold);
}

.pl-tabs {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid var(--pl-border);
}
.pl-tabs .pl-tab {
  position: relative;
  padding: 0.625rem 0.875rem;
  color: var(--pl-text-muted);
  font-weight: var(--pl-fw-medium);
  font-size: var(--pl-fs-base);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--pl-dur-fast) var(--pl-ease);
  display: inline-flex; align-items: center; gap: 0.375rem;
}
.pl-tabs .pl-tab:hover { color: var(--pl-text); }
.pl-tabs .pl-tab.is-active {
  color: var(--pl-primary);
  border-bottom-color: var(--pl-primary);
  font-weight: var(--pl-fw-semibold);
}

/* ── 18. Tags & status chips ────────────────────────────────── */
.pl-tag {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 2px 8px;
  border-radius: var(--pl-radius-pill);
  font-size: var(--pl-fs-sm);
  font-weight: var(--pl-fw-semibold);
  line-height: 1.4;
  background: var(--pl-surface-alt);
  color: var(--pl-text-muted);
  border: 1px solid transparent;
  white-space: nowrap;
}
.pl-tag .bi { font-size: 0.8em; }
.pl-tag--success { background: var(--pl-success-soft); color: var(--pl-success-text); }
.pl-tag--warning { background: var(--pl-warning-soft); color: var(--pl-warning-text); }
.pl-tag--danger  { background: var(--pl-danger-soft);  color: var(--pl-danger-text); }
.pl-tag--info    { background: var(--pl-info-soft);    color: var(--pl-info-text); }
.pl-tag--primary { background: var(--pl-primary-soft); color: var(--pl-primary-hover); }
.pl-tag--neutral { background: var(--pl-surface-alt);  color: var(--pl-text-muted); }
.pl-tag--outline {
  background: transparent;
  border-color: var(--pl-border-strong);
  color: var(--pl-text-muted);
}
.pl-tag--dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

/* ── 19. Segmented control ──────────────────────────────────── */
.pl-segmented {
  display: inline-flex;
  background: var(--pl-surface-alt);
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius);
  padding: 2px;
  gap: 2px;
}
.pl-segmented__item {
  background: transparent;
  border: 0;
  padding: 4px 12px;
  font-size: var(--pl-fs-base);
  font-weight: var(--pl-fw-medium);
  color: var(--pl-text-muted);
  border-radius: var(--pl-radius-sm);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.25rem;
  transition: background-color var(--pl-dur-fast) var(--pl-ease),
              color var(--pl-dur-fast) var(--pl-ease);
  text-decoration: none;
  line-height: 1.4;
}
.pl-segmented__item:hover { color: var(--pl-text); }
.pl-segmented__item.is-active {
  background: var(--pl-surface);
  color: var(--pl-text);
  box-shadow: var(--pl-shadow-xs);
  font-weight: var(--pl-fw-semibold);
}

/* ── 20. Filter bar ─────────────────────────────────────────── */
.pl-filter-bar {
  display: flex; flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.625rem;
  padding: 0.625rem 0.75rem;
  background: var(--pl-surface);
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius);
  margin-bottom: 1rem;
}
.pl-filter-chip {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 3px 10px;
  border: 1px dashed var(--pl-border-strong);
  border-radius: var(--pl-radius-pill);
  font-size: var(--pl-fs-sm);
  color: var(--pl-text-muted);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--pl-dur-fast) var(--pl-ease),
              color var(--pl-dur-fast) var(--pl-ease),
              background-color var(--pl-dur-fast) var(--pl-ease);
  text-decoration: none;
}
.pl-filter-chip:hover {
  border-color: var(--pl-primary);
  color: var(--pl-primary);
}
.pl-filter-chip.is-active {
  background: var(--pl-primary-soft);
  border-color: var(--pl-primary);
  border-style: solid;
  color: var(--pl-primary-hover);
  font-weight: var(--pl-fw-semibold);
}
.pl-filter-chip__close {
  margin-left: 2px;
  display: inline-flex;
  align-items: center;
  opacity: 0.6;
}
.pl-filter-chip__close:hover { opacity: 1; }
.pl-filter-bar__divider {
  width: 1px;
  align-self: stretch;
  background: var(--pl-border);
  margin: 0 0.125rem;
}

/* ── 21. Toolbar ────────────────────────────────────────────── */
.pl-toolbar {
  display: flex; flex-wrap: wrap;
  align-items: center; gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  background: var(--pl-surface);
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius);
  margin-bottom: 1rem;
}
.pl-toolbar__search {
  position: relative;
  flex: 1 1 240px;
  max-width: 360px;
  min-width: 200px;
}
.pl-toolbar__search input {
  width: 100%;
  height: 34px;
  padding: 0 0.625rem 0 2rem;
  background: var(--pl-bg);
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius-sm);
  font-size: var(--pl-fs-base);
  color: var(--pl-text);
}
.pl-toolbar__search input:focus {
  border-color: var(--pl-primary);
  box-shadow: 0 0 0 3px var(--pl-primary-ring);
  outline: none;
  background: var(--pl-surface);
}
.pl-toolbar__search .bi {
  position: absolute; left: 0.625rem; top: 50%;
  transform: translateY(-50%);
  color: var(--pl-text-subtle);
  pointer-events: none;
}
.pl-toolbar__group {
  display: inline-flex; align-items: center;
  gap: 0.375rem;
}
.pl-toolbar__divider {
  width: 1px;
  align-self: stretch;
  background: var(--pl-border);
  margin: 0 0.125rem;
}
.pl-toolbar__spacer { flex: 1 1 auto; }

/* Flush variant — the toolbar becomes a card's header bar (used inside
   .info-card.p-0): drop the standalone border/background/margin so it reads as
   one bar with a single divider under it, and align its padding to list rows. */
.pl-toolbar--flush {
  border: 0;
  border-bottom: 1px solid var(--pl-border);
  border-radius: 0;
  background: transparent;
  margin-bottom: 0;
  padding: 0.75rem 1rem;
}
/* Let the search take most of the row (reference layout: wide search, controls
   pushed to the right edge). */
.pl-toolbar__search--grow {
  flex: 1 1 320px;
  max-width: none;
}
[data-theme="dark"] .pl-toolbar--flush { border-bottom-color: rgba(255,255,255,0.08); }

/* ── 22. Section header ─────────────────────────────────────── */
.pl-section-header {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.625rem;
  margin: 1.5rem 0 0.875rem;
  border-bottom: 1px solid var(--pl-border);
}
.pl-section-header__title {
  font-size: var(--pl-fs-md);
  font-weight: var(--pl-fw-semibold);
  margin: 0;
  display: flex; align-items: center; gap: 0.5rem;
  color: var(--pl-text);
}
.pl-section-header__title .bi { color: var(--pl-text-muted); }
.pl-section-header__sub {
  font-size: var(--pl-fs-sm);
  color: var(--pl-text-muted);
  margin-top: 0.125rem;
}
.pl-section-header--sticky {
  position: sticky;
  top: var(--pl-topbar-h);
  background: var(--pl-bg);
  z-index: 5;
  padding-top: 0.75rem;
}

/* ── 23. Progress & stepper ─────────────────────────────────── */
.pl-progress {
  background: var(--pl-surface-alt);
  border-radius: var(--pl-radius-pill);
  height: 6px;
  overflow: hidden;
  position: relative;
}
.pl-progress__bar {
  background: var(--pl-primary);
  height: 100%;
  transition: width var(--pl-dur-base) var(--pl-ease);
  border-radius: var(--pl-radius-pill);
}
.pl-progress--success .pl-progress__bar { background: var(--pl-success); }
.pl-progress--warning .pl-progress__bar { background: var(--pl-warning); }
.pl-progress--danger  .pl-progress__bar { background: var(--pl-danger); }
.pl-progress--sm { height: 4px; }
.pl-progress--lg { height: 10px; }

.pl-stepper {
  display: flex; align-items: center;
  gap: 0;
  padding: 0;
  list-style: none;
  margin: 0 0 1.25rem;
}
.pl-stepper__step {
  display: flex; align-items: center; gap: 0.5rem;
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--pl-fs-base);
  color: var(--pl-text-muted);
}
.pl-stepper__step + .pl-stepper__step::before {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--pl-border);
  margin: 0 0.75rem;
}
.pl-stepper__circle {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pl-surface-alt);
  color: var(--pl-text-muted);
  border: 1px solid var(--pl-border);
  font-size: var(--pl-fs-sm);
  font-weight: var(--pl-fw-semibold);
  flex-shrink: 0;
}
.pl-stepper__step.is-active .pl-stepper__circle {
  background: var(--pl-primary);
  color: #fff;
  border-color: var(--pl-primary);
  box-shadow: 0 0 0 3px var(--pl-primary-ring);
}
.pl-stepper__step.is-complete .pl-stepper__circle {
  background: var(--pl-success);
  color: #fff;
  border-color: var(--pl-success);
}
.pl-stepper__step.is-active { color: var(--pl-text); font-weight: var(--pl-fw-semibold); }
.pl-stepper__step.is-complete { color: var(--pl-text); }

/* Bootstrap Progress bridges */
.progress {
  --bs-progress-bg: var(--pl-surface-alt);
  --bs-progress-bar-bg: var(--pl-primary);
  --bs-progress-bar-color: var(--pl-on-primary);
}

/* Dark mode: progress + stepper polish */
[data-theme="dark"] .pl-progress { background: var(--pl-surface-alt); }
[data-theme="dark"] .progress {
  --bs-progress-bg: var(--pl-surface-alt);
  --bs-progress-bar-bg: var(--pl-primary);
  --bs-progress-bar-color: var(--pl-on-primary);
}
[data-theme="dark"] .pl-stepper__step.is-active .pl-stepper__circle {
  background: var(--pl-primary);
  color: var(--pl-on-primary);
  border-color: var(--pl-primary);
  box-shadow: 0 0 0 3px var(--pl-primary-ring);
}
[data-theme="dark"] .pl-stepper__step.is-complete .pl-stepper__circle {
  background: var(--pl-success);
  color: var(--pl-on-success);
  border-color: var(--pl-success);
}
[data-theme="dark"] .pl-stepper__step + .pl-stepper__step::before { background: var(--pl-border); }

/* ── 24. Skeleton loader ────────────────────────────────────── */
.pl-skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--pl-skeleton-from) 0%,
    var(--pl-skeleton-via) 50%,
    var(--pl-skeleton-to) 100%
  );
  background-size: 200% 100%;
  animation: pl-skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--pl-radius-sm);
  height: 12px;
  width: 100%;
}
.pl-skeleton--text { height: 0.875rem; margin: 0.25rem 0; }
.pl-skeleton--title { height: 1.25rem; width: 60%; margin: 0.5rem 0; }
.pl-skeleton--circle { border-radius: 50%; aspect-ratio: 1; }
.pl-skeleton--block { height: 100px; border-radius: var(--pl-radius); }

@keyframes pl-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── 25. Keyboard shortcut ──────────────────────────────────── */
.pl-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.25rem;
  padding: 1px 5px;
  font-family: var(--pl-font-mono);
  font-size: var(--pl-fs-xs);
  font-weight: var(--pl-fw-semibold);
  color: var(--pl-text-muted);
  background: var(--pl-surface);
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius-xs);
  box-shadow: 0 1px 0 var(--pl-border-strong);
  line-height: 1.25;
}

/* Dark mode: kbd uses elevated surface for legibility */
[data-theme="dark"] .pl-kbd {
  background: var(--pl-surface-alt);
  color: var(--pl-text);
  border-color: var(--pl-border-strong);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

/* ── 26. Command palette ────────────────────────────────────── */
.pl-cmdk-backdrop {
  position: fixed; inset: 0;
  background: var(--pl-overlay);
  z-index: var(--pl-z-cmdk);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.pl-cmdk-backdrop.is-open { display: flex; }
.pl-cmdk {
  background: var(--pl-surface);
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius-lg);
  width: min(620px, 92vw);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--pl-shadow-2xl);
  animation: pl-cmdk-rise var(--pl-dur-base) var(--pl-ease-spring);
}
@keyframes pl-cmdk-rise {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.pl-cmdk__input-wrap {
  position: relative;
  border-bottom: 1px solid var(--pl-border);
  display: flex; align-items: center;
  padding: 0 0.875rem;
}
.pl-cmdk__input-wrap .bi { color: var(--pl-text-muted); flex-shrink: 0; }
.pl-cmdk__input {
  flex: 1 1 auto;
  border: 0; outline: 0;
  background: transparent;
  height: 52px;
  font-size: var(--pl-fs-lg);
  color: var(--pl-text);
  padding: 0 0.625rem;
}
.pl-cmdk__input::placeholder { color: var(--pl-text-subtle); }
.pl-cmdk__close {
  flex-shrink: 0;
}
.pl-cmdk__list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.5rem;
}
.pl-cmdk__group-label {
  font-size: var(--pl-fs-xs);
  font-weight: var(--pl-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pl-text-subtle);
  padding: 0.5rem 0.625rem 0.25rem;
}
.pl-cmdk__item {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--pl-radius-sm);
  color: var(--pl-text);
  text-decoration: none;
  cursor: pointer;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
}
.pl-cmdk__item:hover,
.pl-cmdk__item.is-focused {
  background: var(--pl-surface-alt);
}
.pl-cmdk__item .bi { color: var(--pl-text-muted); }
.pl-cmdk__item-label { flex: 1 1 auto; min-width: 0; }
.pl-cmdk__footer {
  padding: 0.5rem 0.875rem;
  border-top: 1px solid var(--pl-border);
  background: var(--pl-surface-alt);
  font-size: var(--pl-fs-sm);
  color: var(--pl-text-muted);
  display: flex; gap: 1rem; flex-wrap: wrap;
}
.pl-cmdk__hint { display: inline-flex; align-items: center; gap: 0.25rem; }

/* Dark mode: command palette — strong backdrop blur + lifted surface */
[data-theme="dark"] .pl-cmdk-backdrop {
  background: var(--pl-overlay-strong);
  backdrop-filter: blur(var(--pl-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--pl-backdrop-blur));
}
[data-theme="dark"] .pl-cmdk {
  background: var(--pl-elevation-3);
  border-color: var(--pl-border-strong);
  box-shadow: var(--pl-shadow-2xl);
}
[data-theme="dark"] .pl-cmdk__input-wrap { border-bottom-color: var(--pl-border); }
[data-theme="dark"] .pl-cmdk__item:hover,
[data-theme="dark"] .pl-cmdk__item.is-focused {
  background: rgba(58, 171, 219, 0.15);
  color: var(--pl-text-strong);
}
[data-theme="dark"] .pl-cmdk__footer {
  background: var(--pl-surface-alt);
  border-top-color: var(--pl-border);
}

/* ── 27. Drawer / sheet ─────────────────────────────────────── */
.pl-drawer-backdrop {
  position: fixed; inset: 0;
  background: var(--pl-overlay);
  z-index: var(--pl-z-drawer);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--pl-dur-base) var(--pl-ease),
              visibility var(--pl-dur-base) var(--pl-ease);
}
.pl-drawer-backdrop.is-open { opacity: 1; visibility: visible; }
.pl-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(480px, 100vw);
  background: var(--pl-surface);
  border-left: 1px solid var(--pl-border);
  z-index: calc(var(--pl-z-drawer) + 1);
  transform: translateX(100%);
  transition: transform var(--pl-dur-base) var(--pl-ease);
  display: flex; flex-direction: column;
  box-shadow: var(--pl-shadow-2xl);
}
.pl-drawer.is-open { transform: translateX(0); }
.pl-drawer--wide { width: min(720px, 100vw); }
.pl-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--pl-border);
  flex-shrink: 0;
}
.pl-drawer__title {
  margin: 0;
  font-size: var(--pl-fs-lg);
  font-weight: var(--pl-fw-semibold);
  color: var(--pl-text);
}
.pl-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.25rem;
}
.pl-drawer__footer {
  display: flex; justify-content: flex-end; gap: 0.5rem;
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--pl-border);
  background: var(--pl-surface-alt);
  flex-shrink: 0;
}

/* Dark mode: drawer — elevated surface, visible border, deeper shadow */
[data-theme="dark"] .pl-drawer-backdrop { background: var(--pl-overlay-strong); }
[data-theme="dark"] .pl-drawer {
  background: var(--pl-elevation-2);
  border-left: 1px solid var(--pl-border-strong);
  box-shadow: -20px 0 60px -10px rgba(0, 0, 0, 0.75);
}
[data-theme="dark"] .pl-drawer__header { border-bottom-color: var(--pl-border); }
[data-theme="dark"] .pl-drawer__footer {
  background: var(--pl-surface-sunken);
  border-top-color: var(--pl-border);
}

/* ── 28. Toast ──────────────────────────────────────────────── */
/* Top-right toast stack. Sits just below the 56px topbar so it never
   overlaps the topbar controls. Click-through except on toast bodies. */
.pl-toast-region {
  position: fixed;
  top: calc(56px + 0.75rem);
  right: 1rem;
  z-index: var(--pl-z-toast);
  display: flex; flex-direction: column;
  gap: 0.5rem;
  max-width: 380px;
  width: calc(100vw - 2rem);
  pointer-events: none;
}
@media (max-width: 768px) {
  .pl-toast-region { top: calc(56px + 0.5rem); right: 0.5rem; width: calc(100vw - 1rem); }
}
.pl-toast {
  pointer-events: auto;
  position: relative;
  display: flex; align-items: flex-start; gap: 0.625rem;
  background: var(--pl-surface);
  color: var(--pl-text);
  border: 1px solid var(--pl-border);
  border-left: 3px solid var(--pl-primary);
  border-radius: var(--pl-radius);
  padding: 0.75rem 0.875rem;
  box-shadow: var(--pl-shadow-lg);
  animation: pl-toast-slide var(--pl-dur-base) var(--pl-ease-spring);
  overflow: hidden;
}
.pl-toast.is-leaving {
  animation: pl-toast-out var(--pl-dur-base) var(--pl-ease) forwards;
}
@keyframes pl-toast-slide {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes pl-toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}
.pl-toast__icon { flex-shrink: 0; font-size: 1.1rem; line-height: 1.2; color: var(--pl-primary); }
.pl-toast__body { flex: 1 1 auto; min-width: 0; }
.pl-toast__title { font-weight: var(--pl-fw-semibold); }
.pl-toast__msg { color: var(--pl-text-muted); font-size: var(--pl-fs-base); word-wrap: break-word; }
.pl-toast__close {
  background: transparent; border: 0;
  color: var(--pl-text-muted);
  font-size: 0.875rem; padding: 0 0.25rem; cursor: pointer;
  flex-shrink: 0;
  border-radius: var(--pl-radius-sm);
}
.pl-toast__close:hover { background: var(--pl-surface-sunken); color: var(--pl-text); }
.pl-toast__progress {
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  background: var(--pl-primary);
  width: 100%;
  transform-origin: left center;
  animation: pl-toast-progress linear forwards;
  opacity: 0.55;
}
@keyframes pl-toast-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
.pl-toast:hover .pl-toast__progress { animation-play-state: paused; }

.pl-toast--success { border-left-color: var(--pl-success); }
.pl-toast--success .pl-toast__icon { color: var(--pl-success); }
.pl-toast--success .pl-toast__progress { background: var(--pl-success); }
.pl-toast--warning { border-left-color: var(--pl-warning); }
.pl-toast--warning .pl-toast__icon { color: var(--pl-warning); }
.pl-toast--warning .pl-toast__progress { background: var(--pl-warning); }
.pl-toast--danger  { border-left-color: var(--pl-danger);  }
.pl-toast--danger .pl-toast__icon  { color: var(--pl-danger); }
.pl-toast--danger .pl-toast__progress  { background: var(--pl-danger); }
.pl-toast--info    { border-left-color: var(--pl-info);    }
.pl-toast--info .pl-toast__icon    { color: var(--pl-info); }
.pl-toast--info .pl-toast__progress { background: var(--pl-info); }

/* Dark mode: toast — lifted surface with visible border */
[data-theme="dark"] .pl-toast {
  background: var(--pl-elevation-3);
  border-color: var(--pl-border-strong);
  color: var(--pl-text);
  box-shadow: var(--pl-shadow-xl);
}
[data-theme="dark"] .pl-toast__msg { color: var(--pl-text-muted); }
[data-theme="dark"] .pl-toast__close:hover { background: var(--pl-elevation-4, var(--pl-surface-sunken)); }

@media (prefers-reduced-motion: reduce) {
  .pl-toast { animation: none; }
  .pl-toast.is-leaving { animation: none; opacity: 0; }
  .pl-toast__progress { animation: none; display: none; }
}

/* ── 29. Timeline / activity feed ───────────────────────────── */
.pl-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.pl-timeline::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--pl-border);
  border-radius: var(--pl-radius-pill);
}
.pl-timeline__item {
  position: relative;
  padding-left: 48px;
  padding-bottom: 1.25rem;
}
.pl-timeline__item:last-child { padding-bottom: 0; }
.pl-timeline__bullet {
  position: absolute;
  left: 0; top: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--pl-surface);
  border: 1px solid var(--pl-border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--pl-text-muted);
  font-size: var(--pl-fs-base);
  z-index: 1;
}
.pl-timeline__item--success .pl-timeline__bullet { background: var(--pl-success-soft); border-color: var(--pl-success-border); color: var(--pl-success); }
.pl-timeline__item--warning .pl-timeline__bullet { background: var(--pl-warning-soft); border-color: var(--pl-warning-border); color: var(--pl-warning); }
.pl-timeline__item--danger  .pl-timeline__bullet { background: var(--pl-danger-soft);  border-color: var(--pl-danger-border);  color: var(--pl-danger); }
.pl-timeline__item--info    .pl-timeline__bullet { background: var(--pl-info-soft);    border-color: var(--pl-info-border);    color: var(--pl-info); }
.pl-timeline__item--primary .pl-timeline__bullet { background: var(--pl-primary-soft); border-color: var(--pl-primary-200);    color: var(--pl-primary); }
.pl-timeline__head {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 0.375rem;
  font-size: var(--pl-fs-base);
}
.pl-timeline__actor { font-weight: var(--pl-fw-semibold); color: var(--pl-text); }
.pl-timeline__verb { color: var(--pl-text-muted); }
.pl-timeline__target { font-weight: var(--pl-fw-medium); color: var(--pl-text); }
.pl-timeline__meta {
  font-size: var(--pl-fs-sm);
  color: var(--pl-text-subtle);
  margin-top: 0.125rem;
}
.pl-timeline__body {
  margin-top: 0.375rem;
  font-size: var(--pl-fs-base);
  color: var(--pl-text-muted);
}

/* Back-compat for old activity feed name */
.activity-feed { list-style: none; padding: 0; }

/* ── 30. Forms ──────────────────────────────────────────────── */
.pl-form-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem 1.25rem;
}
.pl-form-grid > .span-2  { grid-column: span 2; }
.pl-form-grid > .span-3  { grid-column: span 3; }
.pl-form-grid > .span-4  { grid-column: span 4; }
.pl-form-grid > .span-6  { grid-column: span 6; }
.pl-form-grid > .span-8  { grid-column: span 8; }
.pl-form-grid > .span-12 { grid-column: span 12; }
@media (max-width: 768px) {
  .pl-form-grid > [class*="span-"] { grid-column: span 12; }
}
.pl-form-group {
  display: flex; flex-direction: column;
  gap: 0.375rem;
}
.pl-field-label {
  font-size: var(--pl-fs-base);
  font-weight: var(--pl-fw-medium);
  color: var(--pl-text);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.pl-field-label__required {
  color: var(--pl-danger);
}
.pl-field-help {
  font-size: var(--pl-fs-sm);
  color: var(--pl-text-muted);
}
.pl-field-error {
  font-size: var(--pl-fs-sm);
  color: var(--pl-danger);
  display: inline-flex; align-items: center; gap: 0.25rem;
}
.pl-fieldset {
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius);
  padding: 1rem 1.25rem 1.25rem;
  margin-bottom: 1rem;
}
.pl-fieldset > legend {
  width: auto;
  padding: 0 0.5rem;
  margin: 0 0 0 -0.5rem;
  font-size: var(--pl-fs-base);
  font-weight: var(--pl-fw-semibold);
  color: var(--pl-text);
  float: none;
}

/* Form check polish */
.form-check-input:checked {
  background-color: var(--pl-primary);
  border-color: var(--pl-primary);
}
.form-check-input:focus {
  border-color: var(--pl-primary);
  box-shadow: 0 0 0 3px var(--pl-primary-ring);
}

/* ── Table column show/hide picker (.col-menu — see js/column-picker.js) ─────
   Shared "Columns" dropdown used by the patients, digital-forms and
   submissions tables. JS toggles .d-none on every [data-col] cell. */
.col-menu__panel {
  min-width: 250px; max-width: 290px; padding: 0;
  border: 1px solid var(--pl-border); border-radius: var(--pl-radius);
  box-shadow: var(--pl-shadow-lg);
}
.col-menu__head {
  display: flex; align-items: center; gap: .25rem;
  padding: .625rem .875rem; border-bottom: 1px solid var(--pl-border);
}
.col-menu__head [data-pcol-count] { font-variant-numeric: tabular-nums; }
.col-menu__body { max-height: 280px; overflow-y: auto; padding: .375rem; }
.col-menu__item {
  display: flex; align-items: center; gap: .5rem; margin: 0;
  padding: .375rem .5rem; border-radius: 8px; cursor: pointer;
  font-size: .875rem; color: var(--pl-text);
}
.col-menu__item:hover { background: var(--pl-surface-alt); }
.col-menu__item input { margin: 0; cursor: pointer; flex: 0 0 auto; }
.col-menu__item input.form-check-input:checked {
  background-color: var(--pl-primary); border-color: var(--pl-primary);
}
/* Locked column — always on. Keep it clearly CHECKED with its white tick
   (softened + not-allowed) rather than Bootstrap's faded, tick-less grey box. */
.col-menu__item input.form-check-input:disabled { cursor: not-allowed; opacity: 1; }
.col-menu__item input.form-check-input:disabled:checked {
  background-color: color-mix(in srgb, var(--pl-primary) 62%, transparent);
  border-color: color-mix(in srgb, var(--pl-primary) 62%, transparent);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
/* On/off legibility — visible columns in full text colour, hidden ones muted. */
.col-menu__item:has(input:checked) span { color: var(--pl-text); }
.col-menu__item:has(input:not(:checked)) span { color: var(--pl-text-muted); }
.col-menu__foot { padding: .5rem .625rem; border-top: 1px solid var(--pl-border); }

/* Dark mode: form controls, check, switch, input-group */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background: var(--pl-input-bg);
  color: var(--pl-text);
  border-color: var(--pl-border);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background: var(--pl-input-bg);
  color: var(--pl-text);
  border-color: var(--pl-primary);
  box-shadow: 0 0 0 3px var(--pl-primary-ring);
}
[data-theme="dark"] .form-control::placeholder { color: var(--pl-text-subtle); }
[data-theme="dark"] .form-check-input {
  background-color: var(--pl-input-bg);
  border-color: var(--pl-border-strong);
}
[data-theme="dark"] .form-check-input:checked {
  background-color: var(--pl-primary);
  border-color: var(--pl-primary);
}
[data-theme="dark"] .form-switch .form-check-input {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2394a3b8'/%3e%3c/svg%3e");
}
[data-theme="dark"] .form-switch .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}
[data-theme="dark"] .input-group-text {
  background: var(--pl-surface-alt);
  color: var(--pl-text);
  border-color: var(--pl-border);
}
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-select:disabled,
[data-theme="dark"] .form-check-input:disabled {
  background: var(--pl-surface-sunken);
  color: var(--pl-text-subtle);
  border-color: var(--pl-border);
}
[data-theme="dark"] .pl-fieldset { border-color: var(--pl-border); }

/* ── 32. Detail layout ──────────────────────────────────────── */
.pl-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1.25rem;
}
@media (max-width: 992px) {
  .pl-detail { grid-template-columns: 1fr; }
}
.pl-detail__hero {
  display: flex; justify-content: space-between;
  align-items: flex-start;
  gap: 1rem; flex-wrap: wrap;
  padding: 1.25rem 1.5rem;
  background: var(--pl-surface);
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius-lg);
  margin-bottom: 1.25rem;
}
.pl-detail__title { display: flex; align-items: center; gap: 0.75rem; }
.pl-detail__avatar { flex-shrink: 0; }
.pl-detail__name {
  margin: 0;
  font-size: var(--pl-fs-2xl);
  font-weight: var(--pl-fw-bold);
}
.pl-detail__sub {
  color: var(--pl-text-muted);
  font-size: var(--pl-fs-base);
  margin-top: 0.125rem;
}
.pl-detail__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pl-detail__main { min-width: 0; }
.pl-detail__aside {
  position: sticky;
  top: calc(var(--pl-topbar-h) + 1rem);
  align-self: flex-start;
}

/* ── Detail hero — unified gradient hero used across detail pages ──
   Variants: --billing, --feature, --staff, --clinic, --success
   Anatomy:  .pl-hero
              ├ .pl-hero__main      (avatar + body)
              │   ├ .pl-hero__avatar
              │   └ .pl-hero__body  (eyebrow, title, sub, chips)
              └ .pl-hero__aside     (stat or actions) */
.pl-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.25rem;
  border-radius: var(--pl-radius-xl, 16px);
  color: var(--pl-text);
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.05);
  background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 50%, #fce7f3 100%);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 12px 28px -16px rgba(15, 23, 42, 0.18);
}
.pl-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.55) 0%, transparent 55%),
    radial-gradient(80% 70% at 100% 100%, rgba(15, 23, 42, 0.04) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
}

.pl-hero__main {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex: 1 1 320px;
  min-width: 0;
}
.pl-hero__avatar {
  width: 68px;
  height: 68px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pl-primary, #1e40af);
  font-size: 1.65rem;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 2px rgba(15, 23, 42, 0.06);
}
.pl-hero__avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.pl-hero__body { min-width: 0; flex: 1 1 auto; }
.pl-hero__eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pl-text-muted);
  margin-bottom: 0.2rem;
}
.pl-hero__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--pl-text);
}
.pl-hero__sub {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  color: var(--pl-text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.pl-hero__sub strong { font-weight: 700; color: var(--pl-text); }
.pl-hero__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(15, 23, 42, 0.06);
  color: var(--pl-text);
}
.pl-hero__chips {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}
.pl-hero__pill,
.pl-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(15, 23, 42, 0.06);
  color: var(--pl-text);
  white-space: nowrap;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03);
}
.pl-hero__chip .bi { font-size: 0.88em; opacity: 0.92; }

.pl-hero__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  flex-shrink: 0;
  gap: 0.2rem;
}
.pl-hero__stat {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--pl-text);
}
.pl-hero__stat small {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--pl-text-muted);
  margin-left: 0.1rem;
}
.pl-hero__stat-sub {
  font-size: 0.78rem;
  color: var(--pl-text-muted);
}

.pl-hero__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: row;
}
.pl-hero__actions .btn,
.pl-hero .pl-hero__actions .btn {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(15, 23, 42, 0.08);
  color: var(--pl-text);
  font-weight: 600;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.pl-hero__actions .btn:hover,
.pl-hero__actions .btn:focus {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.16);
  color: var(--pl-text);
}
.pl-hero__actions .btn:active { transform: translateY(1px); }
.pl-hero__actions .btn-primary {
  background: #0f172a;
  color: #fff;
  border-color: transparent;
}
.pl-hero__actions .btn-primary:hover { background: #1e293b; color: #fff; }
.pl-hero__actions .btn-outline-danger {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(220, 38, 38, 0.25);
  color: #b91c1c;
}
.pl-hero__actions .btn-outline-danger:hover {
  background: #fee2e2;
  border-color: rgba(220, 38, 38, 0.5);
  color: #991b1b;
}

/* ── Hero theme variants ─────────────────────────────────────── */
/* Soft pastel gradients — modern, professional, calm. White text would
   not be readable on these tints; dark text is used instead. The avatar
   icon takes the variant accent color so each hero still has identity. */
.pl-hero--billing { background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 50%, #fce7f3 100%); }
.pl-hero--feature { background: linear-gradient(135deg, #ede9fe 0%, #f3e8ff 50%, #fae8ff 100%); }
.pl-hero--staff   { background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 50%, #fce7f3 100%); }
.pl-hero--clinic  { background: linear-gradient(135deg, #ccfbf1 0%, #cffafe 50%, #dbeafe 100%); }
.pl-hero--brand   { background: linear-gradient(135deg, #e0e7ff 0%, #ede9fe 50%, #c7d2fe 100%); }
.pl-hero--tier    { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fed7aa 100%); }
.pl-hero--success,
.pl-hero--applied { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 50%, #bbf7d0 100%); }
.pl-hero--neutral { background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #cbd5e1 100%); }
.pl-hero--plain   { background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border-color: var(--pl-border); }

/* Per-variant avatar icon accent color. */
.pl-hero--billing .pl-hero__avatar { color: #1d4ed8; }
.pl-hero--feature .pl-hero__avatar { color: #6d28d9; }
.pl-hero--staff   .pl-hero__avatar { color: #c2410c; }
.pl-hero--clinic  .pl-hero__avatar { color: #0e7490; }
.pl-hero--brand   .pl-hero__avatar { color: #4338ca; }
.pl-hero--tier    .pl-hero__avatar { color: #b45309; }
.pl-hero--success .pl-hero__avatar,
.pl-hero--applied .pl-hero__avatar { color: #047857; }
.pl-hero--neutral .pl-hero__avatar { color: #334155; }
.pl-hero--plain   .pl-hero__avatar {
  background: linear-gradient(135deg, var(--pl-primary, #006e9f), #1191c5);
  color: #fff; border-color: transparent;
}

/* Dark mode — flip back to deeper saturated gradients with white text. */
[data-theme="dark"] .pl-hero {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.25),
    0 14px 30px -16px rgba(0, 0, 0, 0.55);
}
[data-theme="dark"] .pl-hero::before {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.14) 0%, transparent 55%),
    radial-gradient(80% 70% at 100% 100%, rgba(0, 0, 0, 0.22) 0%, transparent 60%);
}
[data-theme="dark"] .pl-hero__title,
[data-theme="dark"] .pl-hero__stat,
[data-theme="dark"] .pl-hero__sub strong { color: #fff; }
[data-theme="dark"] .pl-hero__eyebrow,
[data-theme="dark"] .pl-hero__sub,
[data-theme="dark"] .pl-hero__stat small,
[data-theme="dark"] .pl-hero__stat-sub { color: rgba(255, 255, 255, 0.82); }
[data-theme="dark"] .pl-hero__avatar {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
[data-theme="dark"] .pl-hero__code,
[data-theme="dark"] .pl-hero__pill,
[data-theme="dark"] .pl-hero__chip {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
[data-theme="dark"] .pl-hero__actions .btn {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
[data-theme="dark"] .pl-hero__actions .btn:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}
[data-theme="dark"] .pl-hero__actions .btn-primary {
  background: rgba(255, 255, 255, 0.92);
  color: #0f172a;
}
[data-theme="dark"] .pl-hero__actions .btn-outline-danger {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(248, 113, 113, 0.4);
  color: #fecaca;
}

[data-theme="dark"] .pl-hero--billing { background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 45%, #9d174d 100%); }
[data-theme="dark"] .pl-hero--feature { background: linear-gradient(135deg, #3730a3 0%, #6d28d9 50%, #a21caf 100%); }
[data-theme="dark"] .pl-hero--staff   { background: linear-gradient(135deg, #7c2d12 0%, #9f1239 50%, #be185d 100%); }
[data-theme="dark"] .pl-hero--clinic  { background: linear-gradient(135deg, #134e4a 0%, #155e75 50%, #1e3a8a 100%); }
[data-theme="dark"] .pl-hero--brand   { background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%); }
[data-theme="dark"] .pl-hero--tier    { background: linear-gradient(135deg, #422006 0%, #78350f 50%, #b45309 100%); }
[data-theme="dark"] .pl-hero--success,
[data-theme="dark"] .pl-hero--applied { background: linear-gradient(135deg, #064e3b 0%, #047857 55%, #059669 100%); }
[data-theme="dark"] .pl-hero--neutral { background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #334155 100%); }
[data-theme="dark"] .pl-hero--plain   { background: linear-gradient(135deg, #0f172a 0%, #111827 100%); border-color: rgba(255,255,255,0.08); }

@media (max-width: 720px) {
  .pl-hero { padding: 1.1rem 1.2rem; gap: 1rem; }
  .pl-hero__title { font-size: 1.25rem; }
  .pl-hero__avatar { width: 56px; height: 56px; font-size: 1.35rem; }
  .pl-hero__stat { font-size: 1.6rem; }
  .pl-hero__aside { align-items: flex-start; text-align: left; width: 100%; }
}

.pl-key-facts {
  background: var(--pl-surface);
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius-lg);
  overflow: hidden;
}
.pl-key-facts__header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--pl-border);
  font-size: var(--pl-fs-xs);
  font-weight: var(--pl-fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pl-text-muted);
}
.pl-key-facts__item {
  display: flex; align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  font-size: var(--pl-fs-base);
  border-bottom: 1px solid var(--pl-border);
}
.pl-key-facts__item:last-child { border-bottom: 0; }
.pl-key-facts__label {
  color: var(--pl-text-muted);
  font-size: var(--pl-fs-sm);
  flex-shrink: 0;
}
.pl-key-facts__value {
  color: var(--pl-text);
  font-weight: var(--pl-fw-medium);
  text-align: right;
  min-width: 0;
  word-wrap: break-word;
}

/* ── 33. Buttons polish ─────────────────────────────────────── */
.btn {
  --bs-btn-font-weight: var(--pl-fw-medium);
  --bs-btn-border-radius: var(--pl-radius-sm);
  font-size: var(--pl-fs-base);
  transition: background-color var(--pl-dur-fast) var(--pl-ease),
              border-color var(--pl-dur-fast) var(--pl-ease),
              box-shadow var(--pl-dur-fast) var(--pl-ease),
              color var(--pl-dur-fast) var(--pl-ease),
              transform var(--pl-dur-fast) var(--pl-ease);
  display: inline-flex; align-items: center; gap: 0.375rem;
  justify-content: center;
}
.btn:active { transform: translateY(0.5px); }
.btn-sm { --bs-btn-padding-y: 0.25rem; --bs-btn-padding-x: 0.625rem; font-size: var(--pl-fs-sm); }
.btn-lg { --bs-btn-padding-y: 0.5rem;  --bs-btn-padding-x: 1rem;     font-size: var(--pl-fs-md); }
.btn-icon {
  width: 32px; height: 32px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}

.btn-soft-primary {
  background: var(--pl-primary-soft);
  color: var(--pl-primary-hover);
  border: 1px solid transparent;
}
.btn-soft-primary:hover {
  background: var(--pl-primary-100);
  color: var(--pl-primary-hover);
}
.btn-soft-success {
  background: var(--pl-success-soft);
  color: var(--pl-success-text);
  border: 1px solid transparent;
}
.btn-soft-warning {
  background: var(--pl-warning-soft);
  color: var(--pl-warning-text);
  border: 1px solid transparent;
}
.btn-soft-danger {
  background: var(--pl-danger-soft);
  color: var(--pl-danger-text);
  border: 1px solid transparent;
}

/* Dark mode: soft buttons — visible hover bumps */
[data-theme="dark"] .btn-soft-primary {
  background: var(--pl-primary-tint);
  color: var(--pl-primary-on-tint);
}
[data-theme="dark"] .btn-soft-primary:hover {
  background: rgba(58, 171, 219, 0.28);
  color: var(--pl-primary-200);
}
[data-theme="dark"] .btn-soft-success {
  background: var(--pl-success-tint);
  color: var(--pl-success-on-tint);
}
[data-theme="dark"] .btn-soft-success:hover {
  background: rgba(16, 185, 129, 0.28);
  color: var(--pl-success-on-tint);
}
[data-theme="dark"] .btn-soft-warning {
  background: var(--pl-warning-soft);
  color: var(--pl-warning-text);
}
[data-theme="dark"] .btn-soft-warning:hover {
  background: rgba(217, 119, 6, 0.32);
  color: var(--pl-warning-text);
}
[data-theme="dark"] .btn-soft-danger {
  background: var(--pl-danger-soft);
  color: var(--pl-danger-text);
}
[data-theme="dark"] .btn-soft-danger:hover {
  background: rgba(220, 38, 38, 0.32);
  color: var(--pl-danger-text);
}

/* ── 34. Anonymous (auth) shell ─────────────────────────────── */
.pl-anon {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(79, 70, 229, 0.10), transparent 60%),
    radial-gradient(800px 400px at 110% 110%, rgba(124, 58, 237, 0.08), transparent 60%),
    var(--pl-bg);
}
.pl-anon__pitch {
  background: linear-gradient(135deg, var(--pl-primary-700) 0%, var(--pl-primary-900) 100%);
  color: #fff;
  padding: 3rem 2.5rem;
  display: flex; flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.pl-anon__pitch::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 300px at 110% 0%, rgba(255, 255, 255, 0.12), transparent 60%),
    radial-gradient(400px 200px at 0% 110%, rgba(255, 255, 255, 0.08), transparent 60%);
  pointer-events: none;
}
.pl-anon__pitch-content { position: relative; z-index: 1; max-width: 480px; }
.pl-anon__brand {
  display: inline-flex; align-items: center; gap: 0.625rem;
  font-size: var(--pl-fs-lg);
  font-weight: var(--pl-fw-bold);
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.pl-anon__brand-mark {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.pl-anon__hero {
  font-size: var(--pl-fs-4xl);
  font-weight: var(--pl-fw-bold);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 2.5rem 0 1rem;
}
.pl-anon__lead {
  font-size: var(--pl-fs-lg);
  color: rgba(255, 255, 255, 0.85);
  line-height: var(--pl-lh-snug);
  max-width: 44ch;
}
.pl-anon__features {
  list-style: none;
  padding: 0; margin: 2rem 0 0;
  display: grid;
  gap: 0.875rem;
  position: relative; z-index: 1;
}
.pl-anon__feature {
  display: flex; gap: 0.75rem; align-items: flex-start;
  font-size: var(--pl-fs-base);
  color: rgba(255, 255, 255, 0.92);
}
.pl-anon__feature-icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.pl-anon__footer {
  position: relative; z-index: 1;
  font-size: var(--pl-fs-sm);
  color: rgba(255, 255, 255, 0.6);
}

.pl-anon__form-wrap {
  display: flex; align-items: center;
  justify-content: center;
  padding: 2rem;
}
.pl-anon__card {
  width: 100%;
  max-width: 420px;
  background: var(--pl-surface);
  border-radius: var(--pl-radius-xl);
  padding: 2rem 2.25rem;
  box-shadow: var(--pl-shadow-lg);
  border: 1px solid var(--pl-border);
}
@media (max-width: 992px) {
  .pl-anon { grid-template-columns: 1fr; }
  .pl-anon__pitch { display: none; }
}

/* Dark mode: anon shell — brand-tinted background, lifted card, deeper pitch */
[data-theme="dark"] .pl-anon {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(58, 171, 219, 0.12), transparent 60%),
    radial-gradient(800px 400px at 110% 110%, rgba(17, 145, 197, 0.10), transparent 60%),
    var(--pl-bg);
}
[data-theme="dark"] .pl-anon__pitch {
  background: linear-gradient(135deg, #062a44 0%, #03182a 100%);
}
[data-theme="dark"] .pl-anon__card {
  background: var(--pl-elevation-2);
  border-color: var(--pl-border-strong);
  box-shadow: var(--pl-shadow-xl);
}

/* ── 35. Mobile ─────────────────────────────────────────────── */
.pl-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: var(--pl-overlay);
  z-index: var(--pl-z-backdrop);
}
.pl-backdrop.is-open { display: block; }

@media (max-width: 768px) {
  .pl-app { grid-template-columns: 1fr; }
  .pl-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--pl-sidebar-w);
    transform: translateX(-100%);
    transition: transform var(--pl-dur-base) var(--pl-ease);
    box-shadow: var(--pl-shadow-lg);
  }
  .pl-sidebar.is-open { transform: translateX(0); }
  .pl-topbar__toggle { display: inline-flex; }
  .pl-pill--tenant { display: none; }
  .pl-content { padding: 1rem; }
  .pl-page-header { flex-direction: column; align-items: flex-start; }
  .pl-detail { grid-template-columns: 1fr; }

  /* Collapse intermediate crumbs on tablet — keep only tenant root + current page */
  .pl-topbar__crumbs-item:not(:first-child):not(.pl-topbar__crumbs-item--current) {
    display: none;
  }
  .pl-topbar__crumbs-item:first-child + .pl-topbar__crumbs-item--current::before {
    content: "/";
    color: var(--pl-text-subtle);
    margin: 0 0.4rem;
    font-size: 0.85rem;
  }
}

/* === Navigation modernization === */
/* Additive polish for sidebar + topbar — modern SaaS feel (Linear/Vercel/Notion).
   All rules below either introduce new selectors or override existing ones at equal
   or higher specificity. No prior rules are mutated. */

/* ── 1. Sidebar items: hover/active refinement ───────────────── */
.pl-sidebar__item {
  transition: background-color 200ms ease, color 200ms ease, border-left-color 200ms ease;
}
.pl-sidebar__item:hover {
  background: rgba(0, 110, 159, 0.08);
  background: color-mix(in srgb, var(--bs-primary, #006e9f) 8%, transparent);
}
.pl-sidebar__item.is-active {
  border-left: 4px solid var(--bs-primary, #006e9f);
  background: rgba(0, 110, 159, 0.16);
  background: color-mix(in srgb, var(--bs-primary, #006e9f) 16%, transparent);
  font-weight: 600;
}
.pl-sidebar__item .bi {
  transition: color 200ms ease;
}

/* ── 2. Sidebar group labels: nested-only collapsible affordance ─ */
.pl-sidebar__group-label--nested {
  transition: background-color 200ms ease, color 200ms ease;
}
.pl-sidebar__group-label--nested:hover .caret {
  color: var(--pl-primary-200, #99d2ed);
}
.pl-sidebar__group-label--nested .caret {
  display: inline-block;
  transition: transform 180ms ease, color 180ms ease;
}
.pl-sidebar__group--nested.is-collapsed > .pl-sidebar__group-label--nested .caret {
  transform: rotate(-90deg);
}

/* ── 3. Sidebar badges: modern pill (urgent counts stand out) ── */
.pl-sidebar__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.1rem 0.4rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
  border-radius: 999px;
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}
.pl-sidebar__badge--success {
  background: rgba(22, 163, 74, 0.14);
  color: #16a34a;
}
.pl-sidebar__badge--warning {
  background: rgba(217, 119, 6, 0.16);
  color: #d97706;
}
.pl-sidebar__badge--muted {
  background: rgba(148, 163, 184, 0.18);
  color: rgba(255, 255, 255, 0.75);
}

/* ── 4. Topbar: glass surface + soft elevation ───────────────── */
.pl-topbar {
  background: rgba(255, 255, 255, 0.85);
  border-bottom-color: rgba(15, 23, 42, 0.06);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ── 5. Topbar icon buttons: tactile affordance ──────────────── */
.pl-icon-btn {
  transition: background-color 150ms ease, color 150ms ease;
}
.pl-icon-btn:hover {
  background: color-mix(in srgb, var(--bs-primary, #006e9f) 10%, transparent);
}
.pl-icon-btn .pl-icon-btn__dot {
  box-shadow: 0 0 0 2px var(--bs-body-bg, var(--pl-surface, #fff));
  border: 0;
}

/* ── 6. Tenant pill: clickable affordance ────────────────────── */
.pl-pill--tenant {
  transition: background-color 150ms ease, color 150ms ease, box-shadow 200ms ease;
}
a.pl-pill,
a.pl-pill--tenant {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.pl-pill--tenant:hover {
  background: var(--pl-primary-100, #c2e4f5);
  color: var(--pl-primary-800, #054766);
  box-shadow: 0 4px 10px rgba(0, 110, 159, 0.15);
}

/* ── 7. Crumb polish ─────────────────────────────────────────── */
.pl-topbar__crumb {
  transition: color 150ms ease, background-color 150ms ease;
}
.pl-topbar__crumb:not(.pl-topbar__crumb--current):hover {
  color: var(--bs-primary, var(--pl-primary, #006e9f));
}
.pl-topbar__crumb--current {
  font-weight: 600;
}

/* ── 8. Dark theme parity ────────────────────────────────────── */
[data-theme="dark"] .pl-topbar {
  background: rgba(15, 23, 42, 0.85);
  border-bottom-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .pl-sidebar__badge {
  background: rgba(248, 113, 113, 0.18);
  color: #fca5a5;
}
[data-theme="dark"] .pl-sidebar__badge--success {
  background: rgba(74, 222, 128, 0.18);
  color: #86efac;
}
[data-theme="dark"] .pl-sidebar__badge--warning {
  background: rgba(251, 191, 36, 0.18);
  color: #fcd34d;
}
[data-theme="dark"] .pl-sidebar__badge--muted {
  background: rgba(148, 163, 184, 0.16);
  color: rgba(255, 255, 255, 0.7);
}
[data-theme="dark"] .pl-icon-btn .pl-icon-btn__dot {
  box-shadow: 0 0 0 2px var(--bs-body-bg, var(--pl-surface, #0f172a));
}
[data-theme="dark"] a.pl-pill--tenant:hover {
  background: var(--pl-primary-tint-hover, rgba(0, 110, 159, 0.25));
  color: var(--pl-primary-100, #c2e4f5);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .pl-sidebar__group-label--nested:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
[data-theme="dark"] .pl-sidebar__group-label--nested:hover .caret {
  color: var(--pl-primary-200, #99d2ed);
}

/* ── 9. Reduced motion: keep colors, drop translate/scale ────── */
@media (prefers-reduced-motion: no-preference) {
  .pl-sidebar__item-label {
    transition: transform 200ms ease;
  }
  .pl-sidebar__item:hover .pl-sidebar__item-label {
    transform: translateX(2px);
  }
  .pl-icon-btn {
    transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
  }
  .pl-icon-btn:hover {
    transform: scale(1.05);
  }
  .pl-icon-btn:active {
    transform: scale(0.97);
  }
  a.pl-pill--tenant:hover {
    transform: translateY(-1px);
  }
}

@media (max-width: 480px) {
  .pl-topbar { padding: 0 0.5rem; gap: 0.375rem; }
  .pl-content { padding: 0.75rem; }
  .pl-topbar__crumb { max-width: 140px; padding: 0 0.5rem; font-size: 0.78rem; }
  /* On phones the tenant chip text is hidden — keep just the icon to save space */
  .pl-topbar__crumb--tenant .pl-topbar__crumb-text { display: none; }
  .pl-topbar__crumb--tenant { padding: 0 0.45rem; }
}

/* ── 36. Print ──────────────────────────────────────────────── */
@media print {
  .pl-sidebar, .pl-topbar, .pl-impersonate, .pl-toast-region,
  .pl-drawer, .pl-drawer-backdrop, .pl-cmdk-backdrop { display: none !important; }
  .pl-app { display: block; }
  .pl-content { padding: 0; }
  .pl-card, .card { break-inside: avoid; box-shadow: none; border-color: #d0d7e2; }
  a { color: inherit; text-decoration: none; }
  body { background: #fff; color: #0f172a; }

  /* Force-light fallback: prevent dark-mode tokens from leaking into prints */
  [data-theme="dark"] {
    background: #fff !important;
    color: #0f172a !important;
  }
  [data-theme="dark"] body,
  [data-theme="dark"] .pl-content,
  [data-theme="dark"] .pl-card,
  [data-theme="dark"] .card {
    background: #fff !important;
    color: #0f172a !important;
    border-color: #d0d7e2 !important;
  }
}

/* ── 37. Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .pl-pill--online .pl-pill__dot { animation: none; }
}

/* ── Forced-colors (Windows high-contrast) ──────────────────── */
@media (forced-colors: active) {
  *:focus-visible {
    outline: 2px solid CanvasText;
    outline-offset: 2px;
  }
  .pl-card, .dropdown-menu, .pl-cmdk, .pl-drawer, .pl-toast {
    border: 1px solid CanvasText;
  }
}

/* ── Utilities ──────────────────────────────────────────────── */
.min-w-0 { min-width: 0; }
.pl-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-hairline { border-bottom: 1px solid var(--pl-border-hairline); }
.pl-divider { height: 1px; background: var(--pl-border); margin: 1rem 0; }
.pl-mono { font-family: var(--pl-font-mono); }