/* ============================================================
   UU Tools — Shared App Styles
   Loaded BEFORE per-page <style> so inline rules override.
   This file provides:
     - Design tokens (CSS custom properties)
     - Typography & accessibility baseline
     - Reusable utility classes (.badge, .btn, .skeleton, .toast, ...)
     - Polished scrollbar, focus ring, print styles
   ============================================================ */

/* -------- Design tokens -------- */
:root {
  --orange: #FF8200;
  --orange-strong: #d96e00;
  --orange-soft: #fff3e0;
  --dark: #1a1a1a;
  --dark2: #2c2c2c;

  --text: #2c2c2c;
  --text2: #5f5f5f;
  --text3: #888;
  --text-muted: #aaa;

  --border: #e2e2e2;
  --border-strong: #cfcfcf;
  --border-soft: #efefef;

  --bg: #f4f4f4;
  --bg-alt: #fafafa;
  --surface: #fff;

  --danger: #c0392b;
  --danger-bg: #fdf0ef;
  --danger-strong: #92211a;
  --warn: #b45309;
  --warn-bg: #fffbf5;
  --success: #1a7f37;
  --success-bg: #eafbef;
  --info: #1565c0;
  --info-bg: #e3f2fd;
  --neutral: #475569;
  --neutral-bg: #f1f5f9;

  --radius-sm: 4px;
  --radius: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgba(15,20,30,.04);
  --shadow: 0 2px 8px rgba(15,20,30,.06);
  --shadow-md: 0 4px 16px rgba(15,20,30,.08);
  --shadow-lg: 0 8px 32px rgba(15,20,30,.12);
  --shadow-xl: 0 20px 60px rgba(0,0,0,.55);

  --t-fast: 120ms ease;
  --t-base: 160ms ease;

  --font: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --phys-angelle-solid: oklch(0.585 0.132 264);
  --phys-angelle-ink: oklch(0.46 0.118 264);
  --phys-angelle-tint: oklch(0.967 0.028 264);
  --phys-angelle-line: oklch(0.90 0.05 264);
  --phys-bienvenu-solid: oklch(0.585 0.132 200);
  --phys-bienvenu-ink: oklch(0.46 0.118 200);
  --phys-bienvenu-tint: oklch(0.967 0.028 200);
  --phys-bienvenu-line: oklch(0.90 0.05 200);
  --phys-kim-solid: oklch(0.585 0.132 165);
  --phys-kim-ink: oklch(0.46 0.118 165);
  --phys-kim-tint: oklch(0.967 0.028 165);
  --phys-kim-line: oklch(0.90 0.05 165);
  --phys-lacy-solid: oklch(0.585 0.132 332);
  --phys-lacy-ink: oklch(0.46 0.118 332);
  --phys-lacy-tint: oklch(0.967 0.028 332);
  --phys-lacy-line: oklch(0.90 0.05 332);
  --phys-pickens-solid: oklch(0.585 0.132 300);
  --phys-pickens-ink: oklch(0.46 0.118 300);
  --phys-pickens-tint: oklch(0.967 0.028 300);
  --phys-pickens-line: oklch(0.90 0.05 300);
  --phys-riedinger-solid: oklch(0.585 0.132 28);
  --phys-riedinger-ink: oklch(0.46 0.118 28);
  --phys-riedinger-tint: oklch(0.967 0.028 28);
  --phys-riedinger-line: oklch(0.90 0.05 28);
  --phys-white-solid: oklch(0.585 0.132 132);
  --phys-white-ink: oklch(0.46 0.118 132);
  --phys-white-tint: oklch(0.967 0.028 132);
  --phys-white-line: oklch(0.90 0.05 132);
  --resident-solid: oklch(0.585 0.132 188);
  --resident-ink: oklch(0.46 0.118 188);
  --resident-tint: oklch(0.967 0.028 188);
  --resident-line: oklch(0.90 0.05 188);
}

/* -------- Baseline -------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Smooth fade-in for any page using <body class="uu-fade">.
   Keep this opacity-only so fixed modals remain anchored to the viewport. */
body.uu-fade { animation: uu-fade-in 220ms ease both; }
@keyframes uu-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* -------- Accessibility: visible focus ring -------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) { outline: none; }

/* -------- Scrollbars (subtle, modern) -------- */
* { scrollbar-width: thin; scrollbar-color: #cfcfcf transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: #d4d4d4;
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
}
*::-webkit-scrollbar-thumb:hover { background: #b8b8b8; background-clip: padding-box; border: 2px solid transparent; }

/* -------- Selection -------- */
::selection { background: rgba(255,130,0,0.22); color: var(--dark); }

/* -------- Reduced motion -------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------- Utility: badges -------- */
.uu-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.uu-badge-danger  { background: var(--danger-bg); color: var(--danger); }
.uu-badge-warn    { background: #fff3e0; color: #e65100; }
.uu-badge-success { background: var(--success-bg); color: var(--success); }
.uu-badge-info    { background: var(--info-bg); color: var(--info); }
.uu-badge-neutral { background: var(--neutral-bg); color: var(--neutral); }
.uu-badge-orange  { background: var(--orange-soft); color: var(--orange-strong); }

/* -------- Utility: buttons (opt-in via .uu-btn) -------- */
.uu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
  -webkit-user-select: none; user-select: none;
}
.uu-btn:active { transform: translateY(1px); }
.uu-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.uu-btn-primary { background: var(--orange); color: #fff; }
.uu-btn-primary:hover:not(:disabled) { background: var(--orange-strong); }
.uu-btn-secondary { background: var(--dark); color: #fff; }
.uu-btn-secondary:hover:not(:disabled) { background: #333; }
.uu-btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text2);
}
.uu-btn-ghost:hover:not(:disabled) { border-color: var(--border-strong); color: var(--text); }
.uu-btn-danger { background: var(--danger); color: #fff; }
.uu-btn-danger:hover:not(:disabled) { background: var(--danger-strong); }
.uu-btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.uu-btn-lg { height: 44px; padding: 0 22px; font-size: 14px; }

/* -------- Utility: skeleton loader -------- */
.uu-skeleton {
  display: inline-block;
  background: linear-gradient(90deg, #ececec 0%, #f5f5f5 50%, #ececec 100%);
  background-size: 200% 100%;
  animation: uu-skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
  color: transparent !important;
  user-select: none;
  pointer-events: none;
  min-width: 24px;
}
.uu-skeleton-line { display: block; height: 12px; border-radius: 4px; }
.uu-skeleton-num  { display: inline-block; width: 48px; height: 30px; border-radius: 6px; vertical-align: middle; }
@keyframes uu-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .uu-skeleton { animation: none; background: #ececec; }
}

/* -------- Utility: spinner -------- */
.uu-spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(0,0,0,0.1);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: uu-spin 0.8s linear infinite;
  vertical-align: -2px;
}
.uu-spinner-light {
  border-color: rgba(255,255,255,0.25);
  border-top-color: #fff;
}
@keyframes uu-spin { to { transform: rotate(360deg); } }

/* -------- Utility: empty state -------- */
.uu-empty {
  text-align: center;
  padding: 32px 20px;
  color: var(--text3);
  font-size: 13px;
}
.uu-empty-icon { font-size: 28px; opacity: 0.45; margin-bottom: 8px; }
.uu-empty-title { font-size: 14px; font-weight: 700; color: var(--text2); margin-bottom: 4px; }
.uu-empty-sub { font-size: 12px; color: var(--text3); }

/* -------- Toast notifications (used by polish.js window.uuToast) -------- */
#uu-toast-container {
  position: fixed;
  top: 88px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 360px;
}
.uu-toast {
  background: #1a1a1a;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid var(--orange);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: uu-toast-in 220ms ease both;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.uu-toast.uu-toast-success { border-left-color: var(--success); }
.uu-toast.uu-toast-warn    { border-left-color: var(--warn); }
.uu-toast.uu-toast-error   { border-left-color: var(--danger); }
.uu-toast.uu-toast-info    { border-left-color: var(--info); }
.uu-toast.uu-toast-leaving { animation: uu-toast-out 200ms ease both; }
.uu-toast-icon { font-size: 14px; line-height: 1.4; }
.uu-toast-msg { flex: 1; line-height: 1.4; }
.uu-toast-close {
  background: none; border: none; color: rgba(255,255,255,0.6);
  cursor: pointer; font-size: 14px; padding: 0 2px; line-height: 1;
  font-family: inherit;
}
.uu-toast-close:hover { color: #fff; }
@keyframes uu-toast-in  { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes uu-toast-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(20px); } }
@media (max-width: 600px) {
  #uu-toast-container { top: 76px; right: 12px; left: 12px; max-width: none; }
}

/* -------- Modal positioning guard --------
   Keep popup shells centered in the current viewport. The overlay scrolls when
   a dialog is taller than the screen, so the page underneath never needs to move. */
:where(
  .modal-overlay,
  .modal-backdrop,
  .modal-bg,
  .detail-backdrop,
  .wizard-overlay,
  .focal-entry-overlay,
  [class*="-modal-overlay"],
  [class*="-modal-backdrop"],
  [id*="-modal-backdrop"],
  [id*="modal"][style*="position:fixed"],
  [id*="modal"][style*="position: fixed"],
  [id*="feedback"][style*="position:fixed"],
  [id*="feedback"][style*="position: fixed"],
  body > [style*="position:fixed"][style*="inset:0"][style*="align-items:center"],
  body > [style*="position: fixed"][style*="inset: 0"][style*="align-items: center"]
) {
  align-items: center !important;
  justify-content: center !important;
  overflow-y: auto !important;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)) !important;
  min-height: min(100vh, 100dvh);
  box-sizing: border-box;
  overscroll-behavior: contain;
}

:where(
  .modal-overlay,
  .modal-backdrop,
  .modal-bg,
  .detail-backdrop,
  .wizard-overlay,
  .focal-entry-overlay,
  [class*="-modal-overlay"],
  [class*="-modal-backdrop"],
  [id*="-modal-backdrop"],
  [id*="modal"][style*="position:fixed"],
  [id*="modal"][style*="position: fixed"],
  [id*="feedback"][style*="position:fixed"],
  [id*="feedback"][style*="position: fixed"],
  body > [style*="position:fixed"][style*="inset:0"][style*="align-items:center"],
  body > [style*="position: fixed"][style*="inset: 0"][style*="align-items: center"]
) > :where(.modal, .modal-box, .modal-card, .detail-panel, [role="dialog"], div) {
  max-height: calc(100vh - 40px) !important;
  max-height: calc(100dvh - 40px) !important;
  overflow-y: auto !important;
  box-sizing: border-box;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* -------- Footer (opt-in: <footer class="uu-footer">) -------- */
.uu-footer {
  text-align: center;
  padding: 28px 20px 20px;
  font-size: 11px;
  color: #bbb;
  letter-spacing: 0.04em;
  border-top: 1px solid var(--border-soft);
  margin-top: 2.5rem;
}
.uu-footer .uu-sep { margin: 0 8px; opacity: 0.5; }

/* -------- Dark mode (manual preference) -------- */
:root[data-theme="dark"] {
    color-scheme: dark;

    --bg: #141414 !important;
    --bg-alt: #1a1a1a !important;
    --surface: #222 !important;
    --panel: #222 !important;
    --white: #222 !important;
    --card: #222 !important;

    --text: #e0e0e0 !important;
    --ink: #e0e0e0 !important;
    --text2: #a0a0a0 !important;
    --text3: #777 !important;
    --muted: #888 !important;
    --text-muted: #666 !important;

    --dark: #e0e0e0 !important;
    --dark2: #ccc !important;

    --border: #333 !important;
    --line: #333 !important;
    --border-strong: #444 !important;
    --border-soft: #282828 !important;

    --orange-soft: #3a2510 !important;

    --danger-bg: #3a1a16 !important;
    --urgent-bg: #3a1a16 !important;
    --success-bg: #1a2e1d !important;
    --warn-bg: #2e2510 !important;
    --info-bg: #1a2533 !important;
    --neutral-bg: #1e2530 !important;
    --blue-bg: #1a2533 !important;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.3) !important;
    --shadow: 0 2px 8px rgba(0,0,0,.4) !important;
    --shadow-md: 0 4px 16px rgba(0,0,0,.5) !important;
    --shadow-lg: 0 8px 32px rgba(0,0,0,.6) !important;
    --shadow-xl: 0 20px 60px rgba(0,0,0,.7) !important;
}

:root[data-theme="dark"] body {
    background: var(--bg);
    color: var(--text);
}

/* Scrollbars */
:root[data-theme="dark"] * { scrollbar-color: #444 transparent; }
:root[data-theme="dark"] *::-webkit-scrollbar-thumb { background: #444; }
:root[data-theme="dark"] *::-webkit-scrollbar-thumb:hover { background: #555; }

/* Selection */
:root[data-theme="dark"] ::selection { background: rgba(255,130,0,0.35); color: #fff; }

/* Form controls */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
    background-color: #1e1e1e;
    color: #e0e0e0;
    border-color: #333;
}
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] select:focus,
:root[data-theme="dark"] textarea:focus {
    background-color: #252525;
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: #666; }

/* Tables */
:root[data-theme="dark"] th {
    background-color: #1e1e1e !important;
    color: #a0a0a0;
    border-color: #333;
}
:root[data-theme="dark"] td { border-color: #282828; }
:root[data-theme="dark"] tr:hover td { background-color: #1e1e1e; }

/* Common surface patterns */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] [class*="card"],
:root[data-theme="dark"] [class*="modal-box"],
:root[data-theme="dark"] [class*="modal-content"],
:root[data-theme="dark"] [class*="panel-body"],
:root[data-theme="dark"] [class*="upload-zone"] {
    background-color: var(--surface);
    color: var(--text);
}
:root[data-theme="dark"] [class*="card-head"],
:root[data-theme="dark"] [class*="panel-head"] {
    background-color: #1e1e1e;
    border-color: var(--border);
}

/* Alert banners */
:root[data-theme="dark"] [class*="alert-banner"] { border-color: #444; }
:root[data-theme="dark"] .alert-banner.warn,
:root[data-theme="dark"] [class*="banner"].warn {
    background-color: var(--warn-bg);
    border-color: #5a4520;
}
:root[data-theme="dark"] .alert-banner.danger,
:root[data-theme="dark"] [class*="banner"].danger {
    background-color: var(--danger-bg);
    border-color: #5a2520;
}

/* Flag rows */
:root[data-theme="dark"] tr.flag-row td { background: #2a1a18 !important; }

/* Badges (darken backgrounds) */
:root[data-theme="dark"] .uu-badge-warn,
:root[data-theme="dark"] .badge-warn { background: #3a2510; }

/* Skeleton */
:root[data-theme="dark"] .uu-skeleton {
    background: linear-gradient(90deg, #2a2a2a 0%, #333 50%, #2a2a2a 100%);
    background-size: 200% 100%;
}

/* Spinner on light backgrounds */
:root[data-theme="dark"] .uu-spinner { border-color: rgba(255,255,255,0.1); }

/* Toast (already dark, just tweak border) */
:root[data-theme="dark"] .uu-toast { background: #2a2a2a; border-color: rgba(255,255,255,0.1); }

/* Footer */
:root[data-theme="dark"] .uu-footer { color: #555; border-top-color: #282828; }

/* Buttons: --dark was flipped to light for text; restore dark bg on buttons */
:root[data-theme="dark"] .uu-btn-secondary { background: #444; }
:root[data-theme="dark"] .uu-btn-secondary:hover:not(:disabled) { background: #555; }
:root[data-theme="dark"] .uu-btn-ghost { border-color: #444; color: #a0a0a0; }
:root[data-theme="dark"] .uu-btn-ghost:hover:not(:disabled) { border-color: #555; color: #e0e0e0; }

/* Catch-all: common light chip/badge/status backgrounds missed by sweep */
:root[data-theme="dark"] [class*="btn-secondary"] { background-color: #333; color: #e0e0e0; }
:root[data-theme="dark"] [class*="btn-secondary"]:hover { background-color: #444; }
:root[data-theme="dark"] [class*="issue-chip"],
:root[data-theme="dark"] [class*="status-"] {
    border-color: #444;
}
:root[data-theme="dark"] .issue-chip.warn,
:root[data-theme="dark"] .status-held { background: #3a2a10; color: #d4a03c; border-color: #5a4520; }
:root[data-theme="dark"] .issue-chip.error,
:root[data-theme="dark"] .status-cancelled { background: #3a1a16; color: #e07060; border-color: #5a2520; }
:root[data-theme="dark"] .issue-chip.info { background: #1a2533; color: #6ca6e8; border-color: #2a4060; }

/* hr / dividers */
:root[data-theme="dark"] hr { border-color: #333; }

/* -------- Print -------- */
@media print {
  .uu-nav, nav, .uu-nav-drawer, #uu-toast-container, .uu-footer { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .page, .uu-page { max-width: none !important; padding: 0 !important; }
}

/* ============================================================
   UU Tools — Shared Component System  (APPEND TO /app.css)
   ------------------------------------------------------------
   Drop this block at the END of the existing /app.css. It only
   ADDS new tokens and new .uu-* classes. It never restyles bare
   element selectors (table, button, input) and never touches the
   legacy generic classes (.card, .btn, .modal, .toolbar) so old
   pages keep rendering exactly as they do today.

   Layered so future broad visual changes happen HERE, not in each
   page's <style> block.

   Contents:
     0. Token gap-fill         spacing · type scale · z-index · layout
     1. Layout primitives      .uu-page · header · section · grid · stack
     2. Cards & panels         .uu-card (+ head/body/foot) · .uu-stat
     3. Chips & status dots     .uu-chip · .uu-dot   (badges already in app.css)
     4. Alerts                 .uu-alert
     5. Tables                 .uu-table-wrap · .uu-table
     6. Filter / toolbar       .uu-filterbar · .uu-search
     7. Form fields            .uu-field · input/select/textarea/check
     8. Tabs                   .uu-tabs · .uu-tab
     9. Segmented control      .uu-segmented · .uu-seg
    10. Modal                  .uu-modal-backdrop · .uu-modal
    (Buttons, badges, empty, skeleton, spinner, toast already exist
     above in app.css — reuse them; do not redefine.)
   ============================================================ */


/* ============================================================
   0 · TOKEN GAP-FILL
   The existing :root already defines colors, borders, surfaces,
   radii (sm/–/md/lg), shadows, motion (fast/base), fonts, and the
   per-physician oklch ramps. These are the tokens it was MISSING.
   Additive only — no existing token is redeclared.
   ============================================================ */
:root {
  /* ---- Spacing scale (4px base; 14 is the house card-gap) ---- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 14px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ---- Type scale (px) ---- */
  --fs-eyebrow: 11px;   /* uppercase section labels */
  --fs-micro: 10px;     /* table head, tiny meta */
  --fs-xs: 12px;        /* nav links, dense meta */
  --fs-sm: 13px;        /* body / table cell / inputs */
  --fs-base: 14px;      /* default body */
  --fs-md: 15px;        /* lead paragraph */
  --fs-lg: 17px;        /* card / modal title */
  --fs-xl: 22px;        /* page subtitle */
  --fs-2xl: 28px;       /* page title */
  --fs-3xl: 34px;       /* metric value */

  /* ---- Weights / line-heights / tracking ---- */
  --fw-medium: 600;     /* Source Sans 3 ships 600, not 500 */
  --fw-bold: 700;
  --fw-heavy: 800;
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-base: 1.5;
  --lh-relaxed: 1.6;
  --ls-tight: -0.02em;  /* big headings / metrics */
  --ls-eyebrow: 0.08em; /* uppercase labels */

  /* ---- Radius / motion additions ---- */
  --radius-xl: 14px;    /* modals, large panels */
  --radius-pill: 999px;
  --t-slow: 220ms ease;

  /* ---- Layout ---- */
  --nav-height: 60px;   /* matches current .uu-nav height */
  --page-max: 1200px;
  --page-max-narrow: 920px;
  --page-max-wide: 1480px;
  --accent-bar: 3px;    /* orange chrome rule */

  /* ---- z-index scale (reconciles values already in the wild) ---- */
  --z-content: 1;       /* sticky table headers inside a panel */
  --z-sticky: 100;      /* sticky filter/toolbars */
  --z-nav: 900;         /* global nav (current value) */
  --z-dropdown: 1000;
  --z-overlay: 2000;    /* modal backdrop (current value) */
  --z-modal: 2010;
  --z-toast: 10000;     /* matches current #uu-toast-container */
}


/* ============================================================
   1 · LAYOUT PRIMITIVES
   ============================================================ */
.uu-page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-7) var(--space-6) var(--space-12);
}
.uu-page--narrow { max-width: var(--page-max-narrow); }
.uu-page--wide   { max-width: var(--page-max-wide); }
.uu-role-page    { max-width: 960px; }

.uu-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.uu-page-header__text { min-width: 0; }
.uu-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--orange-strong);
  margin-bottom: 4px;
}
.uu-page-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--dark);
  margin: 0;
}
.uu-page-subtitle {
  font-size: var(--fs-md);
  color: var(--text2);
  line-height: var(--lh-snug);
  margin: 4px 0 0;
  text-wrap: pretty;
}
.uu-page-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.uu-section { margin-bottom: var(--space-7); }
.uu-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.uu-role-section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-7) 0 var(--space-3);
}
.uu-role-section-label:first-child { margin-top: 0; }
.uu-section-action {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--orange-strong);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
}
.uu-section-action:hover { text-decoration: underline; }
.uu-section-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--dark);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
/* Subtle leading orange tick — state cue, not decoration */
.uu-section-title--accent::before {
  content: "";
  width: 3px;
  height: 1em;
  border-radius: 2px;
  background: var(--orange);
  flex: 0 0 auto;
}

/* Auto-fill grid; modifiers force a fixed column count */
.uu-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.uu-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.uu-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.uu-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.uu-stack    { display: flex; flex-direction: column; gap: var(--space-4); }
.uu-stack--sm { gap: var(--space-2); }
.uu-stack--lg { gap: var(--space-7); }

.uu-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.uu-spacer { flex: 1 1 auto; }

@media (max-width: 760px) {
  .uu-grid--2, .uu-grid--3, .uu-grid--4 { grid-template-columns: 1fr; }
  .uu-page { padding: var(--space-5) var(--space-4) var(--space-10); }
}


/* ============================================================
   2 · CARDS & PANELS
   Single flat surface. No nested cards. Compose with head/body/foot.
   ============================================================ */
.uu-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: clip;
}
.uu-card + .uu-card { margin-top: var(--space-4); }

.uu-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-soft);
}
.uu-card-title {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--dark);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.uu-card-sub {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text3);
  margin-top: 2px;
}
.uu-card-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}
.uu-card-body { padding: var(--space-5); }
.uu-card-body--tight { padding: var(--space-3) var(--space-4); }
.uu-card-foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-soft);
  background: var(--bg-alt);
}
/* When a table fills the card, drop body padding */
.uu-card--flush .uu-card-body { padding: 0; }

/* ---- Stat card ---- */
.uu-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.uu-stat-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text3);
}
.uu-stat-value {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-heavy);
  line-height: 1;
  color: var(--dark);
  font-variant-numeric: tabular-nums;
}
.uu-stat--accent .uu-stat-value { color: var(--orange-strong); }
.uu-stat--danger .uu-stat-value { color: var(--danger); }
.uu-stat--info .uu-stat-value { color: var(--info); }
.uu-stat--success .uu-stat-value { color: var(--success); }
.uu-stat--purple .uu-stat-value { color: #4527a0; }
.uu-stat--link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.uu-stat--link:hover {
  border-color: var(--orange);
  box-shadow: 0 2px 12px rgba(255,130,0,0.1);
}
.uu-role-summary {
  margin-bottom: var(--space-6);
}
.uu-role-summary .uu-stat {
  align-items: flex-start;
  justify-content: center;
  min-height: 92px;
  text-align: left;
  gap: 3px;
}
.uu-role-summary .uu-stat-value {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 30px;
}
.uu-stat-delta {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.uu-stat-delta--up   { color: var(--success); }
.uu-stat-delta--down { color: var(--danger); }
.uu-stat-delta--flat { color: var(--text3); }

/* ---- Tool catalog / launcher cards ----
   Refreshed: compact cards, sized SVG icons in a brand-tinted tile,
   hairline section labels. The catalog renders Lucide <svg> icons; the
   tile + svg sizing replace the old emoji-era `font-size:24px`. */
.uu-tool-section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: var(--space-7) 0 var(--space-3);
}
.uu-tool-section-label:first-child { margin-top: 0; }
.uu-tool-section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-soft);
}
.uu-tool-count {
  font-size: var(--fs-micro);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.02em;
  color: var(--text3);
  background: var(--neutral-bg);
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  flex: 0 0 auto;
}
.uu-tool-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  margin-bottom: var(--space-8);
}
.uu-tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 150px;
  padding: 18px 18px 20px;
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.uu-tool-card::after {
  content: "\2192";
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-muted);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.uu-tool-card:hover {
  border-color: var(--orange);
  box-shadow: 0 4px 16px rgba(255,130,0,0.12);
  transform: translateY(-2px);
}
.uu-tool-card:hover::after { opacity: 0.9; transform: none; }
.uu-tool-icon {
  box-sizing: border-box;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  font-size: 22px;
  line-height: 1;
  background: var(--orange-soft);
  border: 1px solid color-mix(in oklab, var(--orange) 16%, var(--surface));
  border-radius: 12px;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.uu-tool-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--orange-strong);
  stroke-width: 2;
  display: block;
}
.uu-tool-card:hover .uu-tool-icon {
  background: color-mix(in oklab, var(--orange) 18%, var(--surface));
  border-color: color-mix(in oklab, var(--orange) 38%, var(--surface));
}
.uu-tool-name {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--dark);
}
.uu-tool-desc {
  font-size: var(--fs-xs);
  color: var(--text3);
  line-height: 1.4;
  margin-top: 1px;
}


/* ============================================================
   3 · CHIPS & STATUS DOTS
   (Pill BADGES already exist in app.css as .uu-badge-*; chips are
    the interactive / removable / filter variant.)
   ============================================================ */
.uu-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text2);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.uu-chip:hover { border-color: var(--border-strong); color: var(--text); }
.uu-chip.is-active {
  border-color: var(--orange);
  background: var(--orange-soft);
  color: var(--orange-strong);
}
.uu-chip-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.uu-chip-remove {
  border: none; background: none; cursor: pointer;
  color: currentColor; opacity: 0.55; font-size: 13px; line-height: 1;
  padding: 0; margin-right: -2px; font-family: inherit;
}
.uu-chip-remove:hover { opacity: 1; }

/* Inline status dot for table cells / list rows */
.uu-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  vertical-align: -1px;
  margin-right: 6px;
  background: var(--text-muted);
}
.uu-dot--success { background: var(--success); }
.uu-dot--warn    { background: var(--warn); }
.uu-dot--danger  { background: var(--danger); }
.uu-dot--info    { background: var(--info); }
.uu-dot--neutral { background: var(--neutral); }


/* ============================================================
   4 · ALERTS  (inline banners — state, not decoration)
   ============================================================ */
.uu-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--surface);
}
.uu-alert-icon { font-size: 15px; line-height: 1.4; flex: 0 0 auto; }
.uu-alert-body { flex: 1; min-width: 0; }
.uu-alert-title { font-weight: var(--fw-bold); margin-bottom: 2px; }
.uu-alert-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }

.uu-alert--info {
  background: var(--info-bg);
  border-color: color-mix(in oklab, var(--info) 28%, var(--surface));
}
.uu-alert--info .uu-alert-icon, .uu-alert--info .uu-alert-title { color: var(--info); }
.uu-alert--success {
  background: var(--success-bg);
  border-color: color-mix(in oklab, var(--success) 28%, var(--surface));
}
.uu-alert--success .uu-alert-icon, .uu-alert--success .uu-alert-title { color: var(--success); }
.uu-alert--warn {
  background: var(--warn-bg);
  border-color: color-mix(in oklab, var(--warn) 30%, var(--surface));
}
.uu-alert--warn .uu-alert-icon, .uu-alert--warn .uu-alert-title { color: var(--warn); }
.uu-alert--danger {
  background: var(--danger-bg);
  border-color: color-mix(in oklab, var(--danger) 28%, var(--surface));
}
.uu-alert--danger .uu-alert-icon, .uu-alert--danger .uu-alert-title { color: var(--danger); }


/* ============================================================
   5 · TABLES  (.uu-table — never restyles bare <table>)
   ============================================================ */
.uu-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: auto;
}
.uu-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.uu-table thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-content);
  text-align: left;
  font-size: var(--fs-micro);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-alt);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.uu-table th.is-sortable { cursor: pointer; }
.uu-table th.is-sortable:hover { color: var(--orange-strong); }
.uu-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text);
  vertical-align: middle;
}
.uu-table tbody tr:last-child td { border-bottom: none; }
.uu-table tbody tr:hover td { background: var(--bg-alt); }
.uu-table td.uu-num, .uu-table th.uu-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.uu-table--compact thead th { padding: 7px 12px; }
.uu-table--compact tbody td { padding: 7px 12px; }
.uu-table--zebra tbody tr:nth-child(even) td { background: rgba(0,0,0,0.012); }

/* Row states */
.uu-table tr.is-flagged   td { background: var(--danger-bg); }
.uu-table tr.is-flagged:hover td { background: var(--danger-bg); }
.uu-table tr.is-selected  td { background: var(--orange-soft); }


/* ============================================================
   6 · FILTER BAR / TOOLBAR
   ============================================================ */
.uu-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 9px 11px;
}
.uu-filterbar--sticky {
  position: sticky;
  top: var(--space-2);
  z-index: var(--z-sticky);
}
.uu-search { position: relative; flex: 1 1 240px; min-width: 180px; }
.uu-search .uu-input { padding-left: 32px; }
.uu-search-icon {
  position: absolute;
  left: 11px; top: 50%;
  transform: translateY(-50%);
  color: var(--text3);
  font-size: 13px;
  pointer-events: none;
}

/* Sticky bottom action bar (bulk-select pattern) */
.uu-actionbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  background: var(--dark);
  color: #fff;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
  transform: translateY(120%);
  transition: transform var(--t-base);
}
.uu-actionbar.is-open { transform: none; }
.uu-actionbar .uu-spacer { flex: 1; }


/* ============================================================
   7 · FORM FIELDS  (.uu-field / .uu-input / .uu-select / .uu-textarea)
   Scoped to .uu-* so bare inputs on legacy pages are untouched.
   ============================================================ */
.uu-field { display: flex; flex-direction: column; gap: 6px; }
.uu-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text2);
  letter-spacing: 0.01em;
}
.uu-label .uu-req { color: var(--danger); margin-left: 2px; }

.uu-input, .uu-select, .uu-textarea {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.uu-textarea {
  height: auto;
  min-height: 96px;
  padding: 10px 12px;
  line-height: var(--lh-relaxed);
  resize: vertical;
}
.uu-input:focus, .uu-select:focus, .uu-textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255,130,0,0.15);
}
.uu-input:disabled, .uu-select:disabled, .uu-textarea:disabled {
  background: var(--bg-alt);
  color: var(--text3);
  cursor: not-allowed;
}
.uu-input::placeholder, .uu-textarea::placeholder { color: var(--text-muted); }
.uu-input.is-invalid, .uu-select.is-invalid, .uu-textarea.is-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(192,57,43,0.13);
}
.uu-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.uu-help { font-size: var(--fs-xs); color: var(--text3); }
.uu-field-error { font-size: var(--fs-xs); color: var(--danger); font-weight: var(--fw-medium); }

/* Input with leading/trailing addon */
.uu-input-group { display: flex; align-items: stretch; }
.uu-input-group .uu-input { border-radius: 0; }
.uu-input-group > :first-child { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); }
.uu-input-group > :last-child  { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
.uu-input-group .uu-input + .uu-input,
.uu-input-group .uu-addon { margin-left: -1px; }
.uu-addon {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  font-size: var(--fs-sm);
  color: var(--text3);
  background: var(--bg-alt);
  border: 1px solid var(--border);
}

/* Inline check / radio */
.uu-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--text);
  cursor: pointer;
}
.uu-check input { accent-color: var(--orange); width: 15px; height: 15px; cursor: pointer; }


/* ============================================================
   8 · TABS  (underline)
   ============================================================ */
.uu-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
}
.uu-tab {
  appearance: none;
  border: none;
  background: none;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text2);
  padding: 10px 14px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.uu-tab:hover { color: var(--text); }
.uu-tab.is-active { color: var(--orange-strong); border-bottom-color: var(--orange); }
.uu-tab-count {
  font-size: var(--fs-micro);
  font-weight: var(--fw-heavy);
  background: var(--neutral-bg);
  color: var(--neutral);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
}
.uu-tab.is-active .uu-tab-count { background: var(--orange-soft); color: var(--orange-strong); }


/* ============================================================
   9 · SEGMENTED CONTROL
   ============================================================ */
.uu-segmented {
  display: inline-flex;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 2px;
}
.uu-seg {
  appearance: none;
  border: none;
  background: none;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text2);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.uu-seg:hover { color: var(--text); }
.uu-seg.is-active {
  background: var(--surface);
  color: var(--dark);
  box-shadow: var(--shadow-sm);
}


/* ============================================================
   10 · MODAL  (.uu-modal-* — matches app.css positioning guard,
   which already targets [class*="-modal-backdrop"])
   ============================================================ */
.uu-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15,20,30,0.5);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  overflow-y: auto;
}
.uu-modal-backdrop.is-open { display: flex; }
.uu-modal {
  width: 100%;
  max-width: 520px;
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: clip;
}
.uu-modal--sm { max-width: 400px; }
.uu-modal--lg { max-width: 760px; }
.uu-modal-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-soft);
}
.uu-modal-title {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--dark);
}
.uu-modal-close {
  border: none; background: none; cursor: pointer;
  color: var(--text3); font-size: 20px; line-height: 1;
  padding: 0 2px; font-family: inherit;
}
.uu-modal-close:hover { color: var(--text); }
.uu-modal-body { padding: var(--space-5); overflow-y: auto; }
.uu-modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-soft);
  background: var(--bg-alt);
}

/* ============================================================
   11 · NEEDS ACTION WORKFLOW CARD
   ============================================================ */
.uu-needs-card { margin-bottom: var(--space-6); }
.uu-needs-card .uu-card-head { align-items: flex-start; }
.uu-needs-subtitle {
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text3);
  line-height: 1.35;
}
.uu-needs-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  margin-left: 6px;
  border-radius: var(--radius-sm);
  background: var(--orange-soft);
  color: var(--orange-strong);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  vertical-align: 2px;
}
.uu-needs-body { padding: 0; }
.uu-needs-state {
  padding: 16px;
  color: var(--text3);
  font-size: var(--fs-sm);
}
.uu-needs-row {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-top: 1px solid var(--border-soft);
  color: inherit;
  text-decoration: none;
}
.uu-needs-row:first-child { border-top: 0; }
.uu-needs-row:hover { background: var(--bg-alt); }
.uu-needs-priority {
  width: 4px;
  height: 42px;
  border-radius: var(--radius-pill);
  background: var(--neutral);
}
.uu-needs-row--critical .uu-needs-priority { background: var(--danger); }
.uu-needs-row--high .uu-needs-priority { background: var(--warning); }
.uu-needs-row--medium .uu-needs-priority { background: var(--info); }
.uu-needs-row--low .uu-needs-priority { background: var(--success); }
.uu-needs-summary-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  border-top: 1px solid var(--border-soft);
  color: inherit;
  text-decoration: none;
}
.uu-needs-summary-row:first-child { border-top: 0; }
.uu-needs-summary-row:hover { background: var(--bg-alt); }
.uu-needs-summary-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--dark);
  font-size: var(--fs-md);
  font-weight: var(--fw-heavy);
  line-height: 1;
}
.uu-needs-row--critical .uu-needs-summary-count {
  background: var(--danger-bg);
  border-color: color-mix(in oklab, var(--danger) 28%, var(--border));
  color: var(--danger);
}
.uu-needs-row--high .uu-needs-summary-count {
  background: var(--orange-soft);
  border-color: color-mix(in oklab, var(--orange) 28%, var(--border));
  color: var(--orange-strong);
}
.uu-needs-row--medium .uu-needs-summary-count {
  background: var(--info-bg);
  border-color: color-mix(in oklab, var(--info) 24%, var(--border));
  color: var(--info);
}
.uu-needs-row--low .uu-needs-summary-count {
  background: var(--success-bg);
  border-color: color-mix(in oklab, var(--success) 24%, var(--border));
  color: var(--success);
}
.uu-needs-summary-main { min-width: 0; }
.uu-needs-summary-title {
  display: block;
  color: var(--dark);
  font-size: var(--fs-sm);
  font-weight: var(--fw-heavy);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.uu-needs-main { min-width: 0; }
.uu-needs-title {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-heavy);
  color: var(--dark);
  line-height: 1.25;
}
.uu-needs-patient {
  display: block;
  margin-top: 1px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text);
  overflow-wrap: anywhere;
}
.uu-needs-detail {
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text2);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.uu-needs-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.uu-needs-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--neutral-bg);
  color: var(--text3);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  line-height: 1.1;
}
.uu-needs-action {
  align-self: center;
  color: var(--orange-strong);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  white-space: nowrap;
}
@media (max-width: 560px) {
  .uu-needs-row {
    grid-template-columns: 4px minmax(0, 1fr);
    align-items: start;
  }
  .uu-needs-action {
    grid-column: 2;
    justify-self: start;
  }
  .uu-needs-summary-row {
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: start;
  }
  .uu-needs-summary-count {
    width: 40px;
    min-height: 32px;
  }
}

/* ---- end UU Tools component system ---- */
