/* ==========================================================================
   Rehabity UI: the shared component layer (October 2026).

   Modelled on shadcn/ui (https://ui.shadcn.com): the same semantic token
   names (background, foreground, primary, muted, accent, border, input, ring,
   destructive) and the same component recipes (Button, Input, Label, Card,
   Badge, Alert, Table, Dialog, Tabs, Dropdown Menu, Sonner toast), written
   as plain CSS because the portals are vanilla HTML with no build step.

   Rules for using it:
   - Every class is prefixed `ui-` so it can load beside a page's own <style>
     without colliding (several pages define their own .card / .btn-primary).
   - Colors come from the tokens below, never hex in markup. Changing a token
     re-themes every page that loads this file.
   - Keyboard behaviour for dialogs and menus lives in js/ui.js (shadcn gets it
     from Radix; we do not have Radix).
   ========================================================================== */

:root {
  /* Brand, mapped onto shadcn's semantic names */
  --background: #EDF1FA;            /* page */
  --foreground: #0A2F5C;            /* headings, primary text (navy) */
  --card: #FFFFFF;
  --card-foreground: #0A2F5C;
  --popover: #FFFFFF;
  --primary: #0A2F5C;               /* navy: primary buttons */
  --primary-hover: #0D3A72;
  --primary-foreground: #FFFFFF;
  --accent-brand: #40DF8C;          /* mint: progress, success, highlights */
  --accent-brand-foreground: #0A2F5C;
  --secondary: #F1F5F9;
  --secondary-foreground: #0A2F5C;
  --muted: #F5F7FA;
  --muted-foreground: #5B6B80;      /* body copy, descriptions (4.9:1 on white) */
  --subtle-foreground: #8896A8;     /* hints, table headers */
  --border: #E2E8F0;
  --input: #D5DEEA;
  --ring: rgba(10, 47, 92, 0.22);
  --ring-strong: #0A2F5C;
  --destructive: #DC2626;
  --destructive-foreground: #B91C1C;
  --destructive-soft: #FEF2F2;
  --destructive-border: #FECACA;
  --success-foreground: #047857;
  --success-soft: #ECFDF3;
  --success-border: #A7F3C4;
  --warning-foreground: #92400E;
  --warning-soft: #FFFBEB;
  --warning-border: #FCD34D;
  --info-foreground: #3730A3;
  --info-soft: #EEF2FF;
  --info-border: #C7D2FE;

  --radius: 10px;                   /* buttons, inputs */
  --radius-sm: 6px;                 /* badges */
  --radius-lg: 14px;                /* cards, dialogs */

  --shadow-xs: 0 1px 2px rgba(10, 47, 92, 0.05);
  --shadow-sm: 0 1px 3px rgba(10, 47, 92, 0.06), 0 1px 2px rgba(10, 47, 92, 0.04);
  --shadow-lg: 0 10px 30px -6px rgba(10, 47, 92, 0.22), 0 4px 10px -4px rgba(10, 47, 92, 0.10);
}

/* Tailwind's `.hidden` and a ui- component's own `display` (inline-flex on a
   button, flex on a dialog) are equal specificity, so which wins would depend
   on stylesheet order. This makes `hidden` always win on a ui- element,
   except where a responsive class (`hidden md:inline-flex`) is meant to
   bring it back at a breakpoint. */
[class*="ui-"].hidden:not([class*="sm:"]):not([class*="md:"]):not([class*="lg:"]):not([class*="xl:"]) { display: none; }

/* ── Typography helpers ─────────────────────────────────────────────────── */
.ui-h1 { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.02em; color: var(--foreground); margin: 0; }
.ui-h2 { font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--foreground); margin: 0; }
.ui-text { font-size: 14px; line-height: 1.55; color: var(--muted-foreground); margin: 0; }
.ui-small { font-size: 13px; line-height: 1.5; color: var(--muted-foreground); margin: 0; }
.ui-hint { font-size: 12px; line-height: 1.5; color: var(--subtle-foreground); margin: 0; }
.ui-strong { font-weight: 600; color: var(--foreground); }
.ui-num { font-variant-numeric: tabular-nums; }

/* ── Card ───────────────────────────────────────────────────────────────── */
.ui-card {
  background: var(--card); color: var(--card-foreground);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 24px;
  min-width: 0; /* a card in a grid or flex row may shrink below its content */
}
.ui-card-flush { padding: 0; overflow: hidden; }
.ui-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ui-card-flush > .ui-card-header { padding: 20px 24px 0; margin-bottom: 12px; }
.ui-card-title { font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--foreground); margin: 0; }
.ui-card-description { font-size: 13px; line-height: 1.5; color: var(--muted-foreground); margin: 2px 0 0; }
.ui-card-label { font-size: 13px; font-weight: 500; color: var(--muted-foreground); margin: 0 0 8px; }
.ui-card-footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.ui-stat { font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -0.02em; color: var(--foreground); font-variant-numeric: tabular-nums; }

/* ── Button ─────────────────────────────────────────────────────────────── */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 16px; border-radius: var(--radius);
  font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap;
  text-decoration: none; cursor: pointer; user-select: none;
  border: 1px solid transparent; background: transparent; color: var(--foreground);
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, opacity .15s;
}
.ui-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); border-color: var(--ring-strong); }
/* No pointer-events:none: a disabled button's title tooltip often explains WHY
   it is disabled (the RTM roster's Designate, for one), and that needs hover. */
.ui-btn:disabled, .ui-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.ui-btn:disabled:hover { background-color: inherit; }
.ui-btn-outline:disabled:hover { background: var(--card); }
.ui-btn-primary:disabled:hover { background: var(--primary); }
.ui-btn svg { flex-shrink: 0; }

.ui-btn-primary { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-xs); }
.ui-btn-primary:hover { background: var(--primary-hover); }
.ui-btn-accent { background: var(--accent-brand); color: var(--accent-brand-foreground); font-weight: 600; box-shadow: var(--shadow-xs); }
.ui-btn-accent:hover { background: #36D17F; }
.ui-btn-secondary { background: var(--secondary); color: var(--secondary-foreground); }
.ui-btn-secondary:hover { background: #E7EDF4; }
.ui-btn-outline { background: var(--card); border-color: var(--border); box-shadow: var(--shadow-xs); }
.ui-btn-outline:hover { background: var(--muted); }
.ui-btn-ghost:hover { background: var(--muted); }
.ui-btn-outline-destructive { background: var(--card); border-color: var(--destructive-border); color: var(--destructive-foreground); box-shadow: var(--shadow-xs); }
.ui-btn-outline-destructive:hover { background: var(--destructive-soft); }
.ui-btn-destructive { background: var(--destructive); color: #fff; }
.ui-btn-destructive:hover { background: #B91C1C; }
.ui-btn-link { height: auto; padding: 0; color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }

.ui-btn-sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.ui-btn-lg { height: 42px; padding: 0 22px; font-size: 15px; }
/* Dense tables and inline row actions */
.ui-btn-xs { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 7px; gap: 4px; }
.ui-btn-icon { width: 32px; height: 32px; padding: 0; }
/* A full-width button may wrap a long label (an upgrade with its price) on a
   phone instead of running off the screen. */
.ui-btn-block { width: 100%; white-space: normal; height: auto; min-height: 36px; padding-top: 8px; padding-bottom: 8px; text-align: center; line-height: 1.3; }
.ui-btn-lg.ui-btn-block { min-height: 42px; }

/* Outline on a navy section: transparent, light border, white text */
.ui-btn-outline-inverse { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); }
.ui-btn-outline-inverse:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.55); }
.ui-btn-outline-inverse:focus-visible { box-shadow: 0 0 0 3px rgba(64,223,140,0.55); border-color: transparent; }

/* On the navy header */
.ui-btn-on-dark { background: rgba(255,255,255,0.10); color: #fff; }
.ui-btn-on-dark:hover { background: rgba(255,255,255,0.18); }
.ui-btn-on-dark:focus-visible { box-shadow: 0 0 0 3px rgba(64,223,140,0.55); border-color: transparent; }

/* ── Form controls ──────────────────────────────────────────────────────── */
.ui-label { display: block; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--foreground); margin: 0 0 6px; }
.ui-label .ui-optional { font-weight: 400; color: var(--subtle-foreground); }
.ui-input, .ui-select, .ui-textarea {
  display: block; width: 100%; box-sizing: border-box;
  height: 38px; padding: 0 12px; border-radius: var(--radius);
  border: 1px solid var(--input); background: var(--card); color: var(--foreground);
  font-family: inherit; font-size: 14px; box-shadow: var(--shadow-xs); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.ui-textarea { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.ui-select { appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238896A8' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; }
.ui-input::placeholder, .ui-textarea::placeholder { color: #A3AFBF; }
.ui-input:focus-visible, .ui-select:focus-visible, .ui-textarea:focus-visible,
.ui-input:focus, .ui-select:focus, .ui-textarea:focus { border-color: var(--ring-strong); box-shadow: 0 0 0 3px var(--ring); }
.ui-input:disabled, .ui-select:disabled, .ui-textarea:disabled { opacity: .55; cursor: not-allowed; background: var(--muted); }
.ui-input[aria-invalid="true"] { border-color: var(--destructive); box-shadow: 0 0 0 3px rgba(220,38,38,0.15); }
.ui-field { min-width: 0; }
.ui-field-hint { font-size: 12px; line-height: 1.5; color: var(--muted-foreground); margin: 6px 0 0; }
.ui-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.ui-checkbox-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--muted-foreground); line-height: 1.5; cursor: pointer; }
.ui-checkbox { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; accent-color: var(--primary); cursor: pointer; }

/* ── Date picker (js/ui-datepicker.js upgrades every input[type=date]) ──────
   shadcn's Date Picker: a typeable field with a calendar button, and a
   popover Calendar with month + year dropdowns. */
.ui-date { min-width: 0; }
.ui-date-field { position: relative; }
.ui-date-field .ui-date-text { padding-right: 40px; font-variant-numeric: tabular-nums; }
.ui-date-trigger {
  position: absolute; top: 50%; right: 5px; transform: translateY(-50%);
  width: 30px; height: 30px; border: 0; border-radius: 7px; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: var(--muted-foreground);
  transition: background-color .15s, color .15s;
}
.ui-date-trigger:hover, .ui-date-trigger[aria-expanded="true"] { background: var(--muted); color: var(--foreground); }
.ui-date-trigger:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.ui-date-trigger:disabled { opacity: .5; cursor: not-allowed; }
.ui-date-text[aria-invalid="true"] { border-color: var(--destructive); box-shadow: 0 0 0 3px rgba(220,38,38,0.12); }
.ui-date-msg { font-size: 12px; line-height: 1.4; color: var(--destructive-foreground); margin: 5px 0 0; }

.ui-date-pop {
  position: fixed; z-index: 1000; width: 288px; padding: 12px;
  background: var(--popover); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); font-family: inherit; color: var(--foreground);
}
.ui-date-pop[hidden] { display: none; }
.ui-date-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.ui-date-selects { flex: 1; display: flex; gap: 6px; min-width: 0; }
.ui-date-select {
  flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 26px 0 9px; border-radius: 8px;
  border: 1px solid var(--input); background-color: var(--card); color: var(--foreground);
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; appearance: none; outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%238896A8' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center;
}
.ui-date-select[data-part="year"] { flex: 0 0 82px; }
.ui-date-select:hover { background-color: var(--muted); }
.ui-date-select:focus-visible { border-color: var(--ring-strong); box-shadow: 0 0 0 3px var(--ring); }
.ui-date-nav {
  width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--foreground); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s, opacity .15s;
}
.ui-date-nav:hover { background: var(--muted); }
.ui-date-nav:disabled { opacity: .35; cursor: not-allowed; background: var(--card); }
.ui-date-nav:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.ui-date-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ui-date-row + .ui-date-row { margin-top: 2px; }
.ui-date-weekdays span { height: 28px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; color: var(--subtle-foreground); }
.ui-date-day {
  height: 36px; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500; color: var(--foreground); font-variant-numeric: tabular-nums;
  transition: background-color .12s, color .12s;
}
.ui-date-day:hover { background: var(--muted); }
.ui-date-day:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring-strong); }
.ui-date-day.is-outside { color: #B4BFCD; }
.ui-date-day.is-today { background: var(--secondary); font-weight: 700; }
.ui-date-day.is-selected, .ui-date-day.is-selected:hover { background: var(--primary); color: var(--primary-foreground); font-weight: 600; }
.ui-date-day.is-selected:focus-visible { box-shadow: 0 0 0 3px var(--ring); }
.ui-date-day:disabled, .ui-date-day:disabled:hover { color: #CBD3DE; background: transparent; cursor: not-allowed; text-decoration: line-through; text-decoration-color: rgba(136,150,168,0.4); }
.ui-date-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.ui-date-sel { font-size: 12px; color: var(--muted-foreground); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-date-today {
  flex-shrink: 0; height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--card); font-family: inherit; font-size: 12px; font-weight: 600; color: var(--foreground); cursor: pointer;
}
.ui-date-today:hover { background: var(--muted); }
.ui-date-today:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.ui-date-today[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .ui-date-day, .ui-date-trigger, .ui-date-nav { transition: none; } }

/* ── Badge (status) ─────────────────────────────────────────────────────── */
.ui-badge {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 2px 8px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-size: 12px; font-weight: 500; line-height: 18px;
  background: var(--secondary); color: var(--muted-foreground);
}
.ui-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }
.ui-badge-success { background: var(--success-soft); color: var(--success-foreground); border-color: var(--success-border); }
.ui-badge-success .ui-badge-dot { background: var(--accent-brand); }
.ui-badge-warning { background: var(--warning-soft); color: var(--warning-foreground); border-color: var(--warning-border); }
.ui-badge-warning .ui-badge-dot { background: #F59E0B; }
.ui-badge-info { background: var(--info-soft); color: var(--info-foreground); border-color: var(--info-border); }
.ui-badge-info .ui-badge-dot { background: #6366F1; }
.ui-badge-destructive { background: var(--destructive-soft); color: var(--destructive-foreground); border-color: var(--destructive-border); }
.ui-badge-destructive .ui-badge-dot { background: #EF4444; }
.ui-badge-neutral { background: var(--secondary); color: #64748B; border-color: var(--border); }
.ui-badge-neutral .ui-badge-dot { background: #94A3B8; }
.ui-badge-outline { background: transparent; border-color: var(--border); color: var(--foreground); }

/* ── Alert ──────────────────────────────────────────────────────────────── */
.ui-alert {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--muted);
  padding: 12px 14px; font-size: 13px; line-height: 1.55; color: var(--foreground);
}
.ui-alert p { margin: 0; }
.ui-alert p + p { margin-top: 6px; }
.ui-alert-info { background: var(--info-soft); border-color: var(--info-border); color: #312E81; }
.ui-alert-success { background: var(--success-soft); border-color: var(--success-border); color: #065F46; }
.ui-alert-warning { background: var(--warning-soft); border-color: var(--warning-border); color: var(--warning-foreground); }
.ui-alert-destructive { background: var(--destructive-soft); border-color: var(--destructive-border); color: var(--destructive-foreground); }

/* ── Progress ───────────────────────────────────────────────────────────── */
.ui-progress { height: 8px; background: var(--secondary); border-radius: 999px; overflow: hidden; }
.ui-progress-sm { height: 6px; }
.ui-progress > div { height: 100%; background: var(--accent-brand); border-radius: 999px; transition: width .3s ease; }

/* ── Separator ──────────────────────────────────────────────────────────── */
.ui-separator { height: 1px; background: var(--border); border: 0; margin: 20px 0; }

/* ── Table ──────────────────────────────────────────────────────────────── */
.ui-table-wrap { overflow-x: auto; }
.ui-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ui-table th {
  height: 40px; padding: 0 16px; text-align: left; vertical-align: middle; white-space: nowrap;
  font-size: 13px; font-weight: 500; color: var(--muted-foreground);
  border-bottom: 1px solid var(--border); background: var(--card);
  position: relative; /* contains an .sr-only label inside the scroll box */
}
.ui-table td { padding: 12px 16px; vertical-align: middle; color: var(--foreground); border-bottom: 1px solid var(--border); }
.ui-table tbody tr { transition: background-color .12s; }
.ui-table tbody tr:hover { background: #F8FAFC; }
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table .ui-cell-muted { color: var(--muted-foreground); }
.ui-table .ui-cell-empty { text-align: center; color: var(--subtle-foreground); padding: 32px 16px; }
.ui-table .ui-cell-actions { text-align: right; white-space: nowrap; width: 1%; }
.ui-table-pager td { padding: 10px 16px; background: var(--muted); }
.ui-table-pager-inner { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: 13px; color: var(--muted-foreground); }
.ui-cell-sub { display: block; font-size: 12px; line-height: 1.5; color: var(--muted-foreground); font-weight: 400; }

/* ── Tabs / segmented control ───────────────────────────────────────────── */
.ui-tabs-list { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--radius); background: var(--secondary); }
.ui-tabs-trigger {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border: 0; border-radius: 7px; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500; color: var(--muted-foreground);
  transition: background-color .15s, color .15s, box-shadow .15s;
}
.ui-tabs-trigger:hover { color: var(--foreground); }
.ui-tabs-trigger[aria-selected="true"] { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-sm); }
.ui-tabs-trigger:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }

/* ── Dropdown menu (row actions) ────────────────────────────────────────── */
.ui-menu { position: relative; display: inline-block; }
.ui-menu > summary { list-style: none; }
.ui-menu > summary::-webkit-details-marker { display: none; }
/* Newer Chrome still lays out a closed <details>' content; a position:fixed
   panel there widens the whole page on a phone. */
.ui-menu:not([open]) > .ui-menu-content { display: none; }
.ui-menu-content {
  position: fixed; z-index: 70; min-width: 200px; padding: 4px;
  background: var(--popover); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); text-align: left;
}
.ui-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px;
  background: transparent; font-family: inherit; font-size: 13px; font-weight: 400; color: var(--foreground);
  text-align: left; cursor: pointer; white-space: nowrap;
}
.ui-menu-item:hover, .ui-menu-item:focus-visible { background: var(--muted); outline: none; }
.ui-menu-item:disabled { opacity: .5; cursor: not-allowed; }
.ui-menu-item-destructive { color: var(--destructive-foreground); }
.ui-menu-item-destructive:hover, .ui-menu-item-destructive:focus-visible { background: var(--destructive-soft); }
.ui-menu-separator { height: 1px; background: var(--border); margin: 4px -4px; }
.ui-menu-note { padding: 6px 10px; font-size: 12px; color: var(--muted-foreground); }

/* ── Dialog ─────────────────────────────────────────────────────────────── */
.ui-dialog-overlay {
  position: fixed; inset: 0; z-index: 60; padding: 16px;
  background: rgba(7, 22, 42, 0.5); align-items: center; justify-content: center;
}
.ui-dialog {
  width: 100%; max-width: 460px; max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 24px;
}
.ui-dialog-title { font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; color: var(--foreground); margin: 0; }
.ui-dialog-description { font-size: 14px; line-height: 1.5; color: var(--muted-foreground); margin: 6px 0 16px; }
.ui-dialog-footer { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
@media (max-width: 480px) {
  .ui-dialog-footer { flex-direction: column-reverse; }
  .ui-dialog-footer .ui-btn { width: 100%; }
}

/* ── Toast (Sonner-style) ───────────────────────────────────────────────── */
.ui-toast {
  position: fixed; right: 24px; bottom: 24px; z-index: 100; max-width: min(380px, calc(100vw - 32px));
  background: var(--popover); color: var(--foreground); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 14px 16px;
  font-size: 14px; font-weight: 500; line-height: 1.45;
}
@media (max-width: 640px) { .ui-toast { right: 16px; left: 16px; bottom: 16px; max-width: none; } }

/* ── Skeleton ───────────────────────────────────────────────────────────── */
.ui-skeleton { background: var(--secondary); border-radius: 8px; position: relative; overflow: hidden; }
.ui-skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent); animation: ui-shimmer 1.4s infinite; }
@keyframes ui-shimmer { 100% { transform: translateX(100%); } }

/* ── List rows (roster, checklist) ──────────────────────────────────────── */
.ui-list { display: grid; gap: 8px; }
.ui-list-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card);
}
.ui-list-row-active { border-color: var(--success-border); background: var(--success-soft); }
.ui-list-row-title { font-size: 14px; font-weight: 500; color: var(--foreground); margin: 0; }
.ui-list-row-meta { font-size: 12px; color: var(--muted-foreground); }

/* ── Links ──────────────────────────────────────────────────────────────── */
.ui-link {
  color: var(--foreground); font: inherit; font-weight: 500; background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(10, 47, 92, 0.3);
}
.ui-link:hover { text-decoration-color: currentColor; }
.ui-link-muted { color: var(--muted-foreground); text-decoration-color: rgba(91, 107, 128, 0.35); }
.ui-link-plain { text-decoration: none; }
.ui-link-plain:hover { text-decoration: underline; }

/* ── Divider with a label ("or") ────────────────────────────────────────── */
.ui-divider { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--subtle-foreground); text-transform: uppercase; letter-spacing: 0.04em; }
.ui-divider::before, .ui-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ── Inset panel (a step inside a card: two-factor, a summary) ──────────── */
.ui-panel { background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.ui-panel-title { font-size: 14px; font-weight: 600; color: var(--foreground); margin: 0 0 4px; }

/* One-time code input */
.ui-input-code { height: 46px; text-align: center; font-size: 20px; font-weight: 600; letter-spacing: 0.4em; font-variant-numeric: tabular-nums; }

/* ── Password requirement checklist (signup, reset, settings) ───────────────
   The pages' scripts add .met to a .pw-req as each rule is satisfied. */
.ui-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; padding: 12px 14px; background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius); }
.ui-checklist .pw-req { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--subtle-foreground); transition: color .15s; }
.ui-checklist .pw-req .pw-dot { font-size: 12px; width: 14px; text-align: center; color: #CBD5E1; }
.ui-checklist .pw-req.met { color: var(--success-foreground); }
.ui-checklist .pw-req.met .pw-dot { color: #22C55E; }
@media (max-width: 380px) { .ui-checklist { grid-template-columns: 1fr; } }

/* ── Auth pages: top bar + centered card ────────────────────────────────── */
.ui-site-bar { background: var(--card); border-bottom: 1px solid var(--border); padding: 14px 24px; }
.ui-auth-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 16px; }
.ui-auth-wrap { width: 100%; max-width: 420px; }
.ui-auth-card { padding: 32px; }
.ui-auth-header { text-align: center; margin-bottom: 24px; }
.ui-auth-title { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.02em; color: var(--foreground); margin: 0 0 4px; }
.ui-auth-subtitle { font-size: 14px; line-height: 1.5; color: var(--muted-foreground); margin: 0; }
.ui-auth-foot { text-align: center; font-size: 12px; color: var(--subtle-foreground); margin-top: 20px; }
.ui-auth-foot a { color: var(--muted-foreground); }
@media (max-width: 480px) { .ui-auth-card { padding: 24px 20px; } .ui-auth-main { padding: 24px 12px; } }

/* ── Color utilities: last, so they win over a component's own text color ── */
.ui-text-destructive { color: var(--destructive-foreground); }
.ui-text-success { color: var(--success-foreground); }
.ui-text-warning { color: #B45309; }

@media (prefers-reduced-motion: reduce) {
  .ui-skeleton::after { animation: none; }
  .ui-btn, .ui-input, .ui-select, .ui-textarea, .ui-tabs-trigger, .ui-progress > div { transition: none; }
}