/* =========================================================================
   Atheer Cloud PBX · Design-System Refinement Layer  (refine.css)
   -------------------------------------------------------------------------
   ADDITIVE only. Loaded LAST in index.html (after rtl.css) so it can refine
   shared components without editing components.css. Fully reversible: remove
   the single <link> to restore the prior appearance.

   Goals (Yeastar P-Series level professionalism, applied to all 67 pages):
     §1  Legacy token bridge  — define the --c-* / --color-* aliases that
         components.css references but that were NEVER defined anywhere
         (nfqdn / domains panels, :focus-visible ring, second .tabs block,
         .badge--registered family). They were silently falling back to
         light-only hex and broke in dark mode. Mapping them to the modern
         theme tokens makes them correct in light / dark / auto automatically.
     §2  Forms       — .form-section / .form-section-title were used 19× with
         ZERO css. Give them a real, professional section-card treatment.
     §3  Tables      — denser, calmer, tabular numerals, refined sticky head.
     §4  Tabs        — harmonise the two tab systems on the theme tokens.
     §5  Buttons     — accent focus ring, disabled + loading states.
     §6  Surfaces    — cards / modals / drawers elevation restraint.
     §7  Misc        — scrollbars, badges, page rhythm.

   Uses CSS logical properties throughout for RTL/LTR safety. No !important
   except where overriding an existing !important would otherwise be impossible.
   ========================================================================= */

/* ──────────────────────────────────────────────────────────────────────────
   §1 · LEGACY TOKEN BRIDGE
   Custom properties resolve at use-time, so a single :root mapping onto the
   already-theme-aware modern tokens follows light/dark/auto for free.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* legacy "--c-*" family (nfqdn + domains panels) */
  --c-accent: var(--accent);
  --c-text: var(--text-primary);
  --c-text-muted: var(--text-muted);
  --c-surface: var(--surface-2);
  --c-border: var(--border);
  --c-info: var(--status-info);
  --c-success: var(--status-success);
  --c-warning: var(--status-warning);
  --c-error: var(--status-error);

  /* legacy "--color-*" family (second .tabs block + :focus-visible) */
  --color-primary: var(--accent);
  --color-border: var(--border);
  --color-muted: var(--text-muted);
  --color-surface-2: var(--surface-2);
}

/* Theme-aware focus ring (was a hardcoded #2563eb that ignored dark mode) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ──────────────────────────────────────────────────────────────────────────
   §2 · FORMS — section cards + grid + field polish
   ────────────────────────────────────────────────────────────────────────── */

/* A form-section becomes a tidy bordered group, like Yeastar config panels. */
.form-section {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-block-end: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.form-section:last-child { margin-block-end: 0; }

/* Section title with an accent rule down the leading edge. */
.form-section-title {
  margin: 0;
  padding-inline-start: var(--space-3);
  border-inline-start: 3px solid var(--accent);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

/* The outer <form> (.form-grid / .form__grid) is a vertical STACK of sections,
   not a field grid — its children are full-width .form-section blocks. */
.form-grid,
.form__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* The INNER .form-fields is the real two-column responsive field grid. */
.form-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
}
.form-fields .field--full,
.form-fields .form-fields__full,
.form-fields > .field--wide { grid-column: 1 / -1; }
/* Free-text / wide blocks (infoBox, notices, textareas, checkbox groups, alerts)
   span the full row so they never get squished into a half-width column. */
.form-fields > .info-box,
.form-fields > .infobox,
.form-fields > .alert,
.form-fields > .checkbox-group,
.form-fields > p,
.form-fields > .field:has(textarea),
.form-fields > .form-field:has(textarea),
.form-fields > .form-group:has(textarea) { grid-column: 1 / -1; }

@media (max-width: 720px) {
  .form-fields { grid-template-columns: 1fr; }
}

/* Action bar: separated from the fields, trailing-aligned (Yeastar pattern). */
.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--divider);
}
.form-actions-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Inline (label-left) field variant — common in dense PBX config screens. */
.field--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
}
.field--inline > .field__label {
  flex: 0 0 200px;
  margin: 0;
  text-align: start;
}
.field--inline > .field__control { flex: 1; }

/* Crisper focus ring on the standard field control, using the accent ring. */
.field__control:focus-within {
  border-color: var(--field-focus);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Disabled field + required marker affordances. */
.field__control:has(.field__input:disabled),
.field__control.is-disabled {
  background: var(--field-disabled-bg);
  color: var(--text-muted);
  cursor: not-allowed;
}
.field__label .required-star,
.field__label[data-required]::after {
  color: var(--status-error);
}

/* Native selects/inputs that aren't wrapped in .field__control still look
   consistent with the design system. */
select.field__input,
.form-section select,
.form-section input[type="text"],
.form-section input[type="number"],
.form-section input[type="email"],
.form-section input[type="tel"],
.form-section input[type="password"] {
  font: inherit;
  color: var(--text-primary);
}

/* ──────────────────────────────────────────────────────────────────────────
   §3 · TABLES — calmer, denser, Yeastar-style data grids
   ────────────────────────────────────────────────────────────────────────── */

/* Slightly tighter default rhythm + tabular numerals for alignment. */
.table { font-variant-numeric: tabular-nums; }
.table tbody tr { height: 48px; }
.table tbody td { padding-block: 10px; }

/* Sticky header gets a hairline shadow so it detaches cleanly while scrolling. */
.table thead th {
  font-size: 11px;
  letter-spacing: 0.05em;
  box-shadow: inset 0 -1px 0 var(--border);
}

/* Calmer zebra + accent-tinted hover that reads in both themes. Match the
   existing !important hover so ours composes instead of fighting it. */
.table tbody tr:hover { background: var(--accent-soft) !important; }

/* Row action cluster: ghost icon buttons that only gain weight on hover. */
.table__row-actions .btn--icon,
.table__row-actions .icon-btn {
  color: var(--text-muted);
  background: transparent;
  border-color: transparent;
}
.table__row-actions .btn--icon:hover,
.table__row-actions .icon-btn:hover {
  color: var(--text-primary);
  background: var(--surface-3);
}

/* Optional fully-bordered variant for dense config tables. */
.table--bordered tbody td { border-inline-end: 1px solid var(--divider); }
.table--bordered tbody td:last-child { border-inline-end: 0; }

/* ──────────────────────────────────────────────────────────────────────────
   §4 · TABS — harmonise the two tab systems on the theme tokens
   The later .tabs / .tabs__item block in components.css used undefined
   --color-* vars (light-only hex). Re-skin it to match .tab + the palette.
   ────────────────────────────────────────────────────────────────────────── */
.tabs { border-block-end-color: var(--border); }
.tabs__item {
  color: var(--text-secondary);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
}
.tabs__item:hover {
  color: var(--text-primary);
  background: var(--surface-2);
}
.tabs__item.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: var(--fw-semibold);
}

/* ──────────────────────────────────────────────────────────────────────────
   §5 · BUTTONS — focus ring, disabled, loading
   ────────────────────────────────────────────────────────────────────────── */
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.btn:disabled,
.btn.is-disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.btn.is-loading { position: relative; color: transparent !important; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  color: var(--text-on-accent);
  animation: refine-spin 0.6s linear infinite;
}
.btn--ghost.is-loading::after,
.btn--subtle.is-loading::after { color: var(--accent); }
@keyframes refine-spin { to { transform: rotate(360deg); } }

/* Quiet accent button for secondary actions. */
.btn--subtle {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: transparent;
}
.btn--subtle:hover { background: var(--accent-soft-hover); }

/* ── §5b · Legacy single-dash class bridge ──────────────────────────────────
   Pages use .btn-primary / .btn-secondary / .btn-danger / .btn-ghost / .btn-sm
   / .btn-icon (single dash, ~59 usages) but components.css only defines the
   double-dash BEM forms — so those buttons rendered as plain grey. Map them. */
.btn-primary {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--accent-hover); }
[data-theme="dark"] .btn-primary { box-shadow: var(--glow-primary); }

.btn-secondary {
  background: var(--surface-2);
  color: var(--text-primary);
  border-color: var(--border);
}
.btn-secondary:hover { background: var(--surface-3); border-color: var(--border-strong); }

.btn-danger {
  background: var(--status-error);
  color: #fff;
  border-color: transparent;
}
[data-theme="dark"] .btn-danger { background: var(--status-error-bg); color: var(--status-error-fg); }

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover { background: var(--accent-soft); color: var(--text-primary); }

.btn-sm { height: 32px; padding: 6px var(--space-3); font-size: var(--fs-label-sm); }
.btn-icon { padding: 0; width: 38px; }
.btn-icon.btn-sm { width: 32px; }
.btn-block { width: 100%; }

/* Extra-small button (35 uses, undefined: was falling back to full .btn size). */
.btn--xs,
.btn-xs { height: 28px; padding: 4px var(--space-2); font-size: var(--fs-label-sm); gap: var(--space-1); }
.btn--xs.btn--icon,
.btn-xs.btn-icon { width: 28px; padding: 0; }

/* legacy badge variant */
.badge-secondary,
.badge--neutral  { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
.badge-primary   { background: var(--accent-soft); color: var(--accent); }
.badge--info,
.badge-info      { background: var(--status-info-bg); color: var(--status-info-fg); }

/* ──────────────────────────────────────────────────────────────────────────
   §6 · SURFACES — cards / modals / drawers elevation restraint
   ────────────────────────────────────────────────────────────────────────── */
.card { box-shadow: var(--shadow-xs); }
.card--interactive { transition: box-shadow var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast); }
.card--interactive:hover { transform: translateY(-1px); }

.modal__header,
.drawer__header { background: var(--surface-1); }
.modal__title,
.drawer__title { letter-spacing: -0.01em; }
.modal__footer,
.drawer__footer { background: var(--surface-1); }

/* ──────────────────────────────────────────────────────────────────────────
   §7 · MISC — scrollbars, status badges, page rhythm
   ────────────────────────────────────────────────────────────────────────── */

/* Token-driven scrollbars (replaces browser default chrome). */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--scrollbar-track); }
*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: padding-box; }

/* Theme-aware re-skin of the hardcoded-hex telephony status badges
   (.badge--registered/unregistered/dnd/busy/available) so they read in dark
   mode too. Loaded after components.css → wins by source order. */
.badge--registered,
.badge--available  { background: var(--status-success-bg); color: var(--status-success-fg); border: 1px solid transparent; }
.badge--unregistered { background: var(--status-neutral-bg); color: var(--status-neutral-fg); border: 1px solid transparent; }
.badge--dnd        { background: var(--status-warning-bg); color: var(--status-warning-fg); border: 1px solid transparent; }
.badge--busy       { background: var(--status-error-bg); color: var(--status-error-fg); border: 1px solid transparent; }

/* nfqdn / domains panel flags now follow theme tokens via §1 bridge, but the
   two hardcoded-hex flag colors in components.css still need a dark-aware skin. */
.nfqdn-flag--ok      { background: var(--status-success-bg); color: var(--status-success-fg); }
.nfqdn-flag--pending { background: var(--status-warning-bg); color: var(--status-warning-fg); }

/* Page header: a touch more breathing room below the title block. */
.page-header { margin-block-end: var(--space-5); }

/* ══════════════════════════════════════════════════════════════════════════
   §8 · BOOTSTRAP-STYLE COMPATIBILITY BRIDGE
   Many pages (Trunks, Extensions, Queues, IVR, Routes, Contacts, Hotel,
   Business-hours, SMS, Domains …) were authored with a Bootstrap-ish class
   vocabulary that was NEVER defined in any stylesheet:
     .form-group (70×) .form-label (47×) .alert (46×) .table-wrap (26×)
     .form-row (25×) .form-control (19×) .form-field (12×) .data-table (8×)
     .btn-outline (8×) .form-hint .form-textarea .checkbox-group .form-card …
   They rendered as bare, unstyled markup. This section maps the whole family
   onto the design tokens, so every page that uses them turns professional at
   once. Purely additive (all selectors were undefined) → zero override risk.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Field wrappers ── */
.form-group,
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-block-end: var(--space-4);
}
.form-group:last-child,
.form-field:last-child { margin-block-end: 0; }

/* A .form-row lays its child groups out horizontally, wrapping on small widths. */
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-5);
}
.form-row > .form-group,
.form-row > .form-field { flex: 1 1 220px; margin-block-end: 0; }

/* ── Labels & hints ── */
.form-label,
.field-label {
  font-size: var(--fs-label-md);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}
.form-label .required,
.form-label .required-star,
.form-label[data-required]::after { color: var(--status-error); }
.form-hint,
.form-info-row { font-size: var(--fs-label-sm); color: var(--text-muted); }

/* ── Controls: input / select / textarea ── */
.form-control,
.form-input {
  width: 100%;
  min-height: 40px;
  padding: 8px var(--space-3);
  font: inherit;
  font-size: var(--fs-body-md);
  color: var(--text-primary);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
  appearance: none;
}
.form-control::placeholder,
.form-input::placeholder { color: var(--field-placeholder); }
.form-control:hover,
.form-input:hover { border-color: var(--field-border-hover); }
.form-control:focus,
.form-control:focus-visible,
.form-input:focus,
.form-input:focus-visible {
  outline: none;
  border-color: var(--field-focus);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.form-control:disabled,
.form-control[readonly],
.form-input:disabled,
.form-input[readonly] {
  background: var(--field-disabled-bg);
  color: var(--text-muted);
  cursor: not-allowed;
}
textarea.form-control,
.form-textarea { min-height: 96px; resize: vertical; line-height: var(--lh-normal); }

/* Native select caret (since appearance is stripped) — crisp SVG chevron,
   logical-property aware, theme-adaptive. Replaces the old fuzzy 5px gradient
   triangle that read as an unclear smudge. See unified select rule in §SELECT. */
select.form-control {
  background-image: var(--select-chevron);
  background-position: calc(100% - 14px) center;
  background-size: 14px 14px;
  background-repeat: no-repeat;
  padding-inline-end: var(--space-7);
}
[dir="rtl"] select.form-control {
  background-position: 14px center;
  padding-inline-end: var(--space-3);
  padding-inline-start: var(--space-7);
}

/* ── Checkboxes / toggles ── */
.checkbox-group { display: flex; flex-direction: column; gap: var(--space-2); }
.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-body-md);
  color: var(--text-primary);
  cursor: pointer;
}
.form-check-input,
.checkbox-label input[type="checkbox"],
.checkbox-label input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ── Cards (Bootstrap-style) ── */
.form-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
}

/* ── Alerts ── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--text-muted);
  background: var(--surface-2);
  color: var(--text-primary);
  font-size: var(--fs-body-md);
  line-height: var(--lh-normal);
}
.alert .material-symbols-rounded,
.alert .material-symbols-outlined { flex: 0 0 auto; }
.alert-info {
  background: var(--status-info-bg); border-color: transparent;
  border-inline-start-color: var(--status-info); color: var(--status-info-fg);
}
.alert-success {
  background: var(--status-success-bg); border-color: transparent;
  border-inline-start-color: var(--status-success); color: var(--status-success-fg);
}
.alert-warning {
  background: var(--status-warning-bg); border-color: transparent;
  border-inline-start-color: var(--status-warning); color: var(--status-warning-fg);
}
.alert-danger {
  background: var(--status-error-bg); border-color: transparent;
  border-inline-start-color: var(--status-error); color: var(--status-error-fg);
}

/* ── Tables (Bootstrap-style .data-table + .table-wrap container) ── */
.table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  overflow-x: auto;
  background: var(--card-bg);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-md);
  font-variant-numeric: tabular-nums;
}
.data-table thead th {
  text-align: start;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-2);
  padding: 10px var(--space-4);
  border-block-end: 1px solid var(--border);
  white-space: nowrap;
}
[data-theme="dark"] .data-table thead th { background: var(--surface-3); }
.data-table tbody td {
  padding: 11px var(--space-4);
  border-block-end: 1px solid var(--divider);
  color: var(--text-primary);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-block-end: 0; }
[data-theme="light"] .data-table tbody tr:nth-child(even) { background: rgba(234, 237, 255, 0.35); }
[data-theme="dark"]  .data-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
.data-table tbody tr:hover { background: var(--accent-soft); }

/* ── Extra button variants ── */
.btn-outline {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}
.btn-outline:hover { background: var(--accent-soft); }
.btn-warning {
  background: var(--status-warning);
  color: #fff;
  border-color: transparent;
}
[data-theme="dark"] .btn-warning { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.btn-danger-outline {
  background: transparent;
  color: var(--status-error-fg);
  border: 1px solid var(--status-error);
}
.btn-danger-outline:hover { background: var(--status-error-bg); }

/* ── Spacing / text utilities (Bootstrap-ish, were undefined) ── */
.mt-1 { margin-block-start: var(--space-1); }
.mt-2 { margin-block-start: var(--space-2); }
.mt-3 { margin-block-start: var(--space-3); }
.mt-4 { margin-block-start: var(--space-4); }
.mb-1 { margin-block-end: var(--space-1); }
.mb-2 { margin-block-end: var(--space-2); }
.mb-3 { margin-block-end: var(--space-3); }
.mb-4 { margin-block-end: var(--space-4); }
.ms-1 { margin-inline-start: var(--space-1); }
.ms-2 { margin-inline-start: var(--space-2); }
.me-1 { margin-inline-end: var(--space-1); }
.me-2 { margin-inline-end: var(--space-2); }
.text-small { font-size: var(--fs-label-sm); }
.text-danger { color: var(--status-error-fg); }

/* ── Page content container ── */
.page-content { display: block; }
.connect-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--fs-label-md);
  color: var(--text-secondary);
}

/* ══════════════════════════════════════════════════════════════════════════
   §9 · TRUNK PAGE — type picker (page-specific, was fully unstyled)
   ══════════════════════════════════════════════════════════════════════════ */
.trunk-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
}
.trunk-type-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.trunk-type-card:hover {
  border-color: var(--field-border-hover);
  background: var(--card-hover-bg);
  transform: translateY(-1px);
}
.trunk-type-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent);
}
.trunk-type-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.trunk-type-card .material-symbols-rounded,
.trunk-type-card .material-symbols-outlined { color: var(--accent); font-size: 26px; }
.trunk-type-label { font-weight: var(--fw-semibold); color: var(--text-primary); }
.trunk-type-desc { font-size: var(--fs-label-sm); color: var(--text-muted); line-height: var(--lh-snug); }

/* ══════════════════════════════════════════════════════════════════════════
   §10 · REMAINING GAPS — filter bars, BEM alert variants, small utilities
   (the last undefined high-use classes found in the full page scan)
   ══════════════════════════════════════════════════════════════════════════ */

/* Filter bar (audit-log / reports) — compact label + input groups. */
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
}
.filter-label {
  font-size: var(--fs-label-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}
.filter-input {
  width: 100%;
  height: 36px;
  padding: 6px var(--space-3);
  font: inherit;
  font-size: var(--fs-body-md);
  color: var(--text-primary);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  appearance: none;
}
select.filter-input { padding-inline-end: var(--space-6); }
.filter-input:hover { border-color: var(--field-border-hover); }
.filter-input:focus,
.filter-input:focus-visible {
  outline: none;
  border-color: var(--field-focus);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* BEM-style alert variants (double dash) mirror the single-dash family. */
.alert--info {
  background: var(--status-info-bg); border-color: transparent;
  border-inline-start: 3px solid var(--status-info); color: var(--status-info-fg);
}
.alert--success {
  background: var(--status-success-bg); border-color: transparent;
  border-inline-start: 3px solid var(--status-success); color: var(--status-success-fg);
}
.alert--warning {
  background: var(--status-warning-bg); border-color: transparent;
  border-inline-start: 3px solid var(--status-warning); color: var(--status-warning-fg);
}
.alert--danger,
.alert--error {
  background: var(--status-error-bg); border-color: transparent;
  border-inline-start: 3px solid var(--status-error); color: var(--status-error-fg);
}

/* Small text-alignment utilities (logical, RTL-safe). */
.text-end { text-align: end; }
.text-start { text-align: start; }
.text-center { text-align: center; }

/* Generic page container (was undefined; keep minimal to avoid layout shifts). */
.page-wrap { display: block; }

/* ============================================================================
 * §11  Tailwind-utility compatibility subset
 * ----------------------------------------------------------------------------
 * billing-summary.js (the customer Billing & Plan page) is authored entirely
 * in Tailwind utility classes, but no Tailwind build is loaded — so the whole
 * page rendered unstyled. This is an additive, bounded subset covering exactly
 * the utilities that page uses. COLORS are mapped to theme tokens (not the raw
 * Tailwind palette) so the page follows light/dark/auto like everything else.
 * These are conventional utility names doing exactly what they say, so global
 * scope is safe.
 * ========================================================================== */

/* display / box */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.block { display: block; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.overflow-hidden { overflow: hidden; }
.w-full { width: 100%; }
.max-w-5xl { max-width: 64rem; }
.mx-auto { margin-inline: auto; }
.mt-auto { margin-block-start: auto; }

/* gaps */
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }

/* grid columns (+ Tailwind sm/lg responsive prefixes) */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* padding */
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.px-2 { padding-inline: 0.5rem; }
.px-2\.5 { padding-inline: 0.625rem; }
.px-4 { padding-inline: 1rem; }
.py-0\.5 { padding-block: 0.125rem; }
.py-2 { padding-block: 0.5rem; }
.py-3 { padding-block: 0.75rem; }
.py-6 { padding-block: 1.5rem; }

/* margin */
.mb-1 { margin-block-end: 0.25rem; }
.mb-2 { margin-block-end: 0.5rem; }
.mb-3 { margin-block-end: 0.75rem; }
.mb-4 { margin-block-end: 1rem; }
.mb-6 { margin-block-end: 1.5rem; }
.mt-0\.5 { margin-block-start: 0.125rem; }
.mt-1 { margin-block-start: 0.25rem; }
.mt-2 { margin-block-start: 0.5rem; }

/* radius (mapped to design-system tokens for visual cohesion) */
.rounded-full { border-radius: var(--radius-full); }
.rounded-2xl { border-radius: var(--radius-xl); }
.rounded-xl  { border-radius: var(--radius-lg); }

/* borders */
.border   { border: 1px solid var(--border); }
.border-b { border-block-end: 1px solid var(--border); }
.border-gray-100,
.border-gray-200 { border-color: var(--border); }
.border-red-200    { border-color: var(--status-error); }
.border-yellow-200 { border-color: var(--status-warning); }

/* shadow */
.shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.06); }

/* type scale */
.text-xs   { font-size: 0.75rem;  line-height: 1.4; }
.text-sm   { font-size: 0.875rem; line-height: 1.45; }
.text-base { font-size: 1rem;     line-height: 1.5; }
.text-lg   { font-size: 1.125rem; line-height: 1.4; }
.text-xl   { font-size: 1.25rem;  line-height: 1.35; }
.text-2xl  { font-size: 1.5rem;   line-height: 1.3; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.uppercase     { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.04em; }
.italic        { font-style: italic; }
.text-left  { text-align: left; }
.text-right { text-align: right; }

/* text colors → theme tokens */
.text-gray-900 { color: var(--text-primary); }
.text-gray-700 { color: var(--text-primary); }
.text-gray-600 { color: var(--text-secondary); }
.text-gray-500 { color: var(--text-muted); }
.text-gray-400 { color: var(--text-muted); }
.text-white { color: var(--text-on-accent); }
.text-blue-700   { color: var(--status-info-fg); }
.text-green-700  { color: var(--status-success-fg); }
.text-green-500  { color: var(--status-success); }
.text-orange-700 { color: var(--status-warning-fg); }
.text-orange-600 { color: var(--status-warning-fg); }
.text-red-700 { color: var(--status-error-fg); }
.text-red-600 { color: var(--status-error-fg); }
.text-yellow-700 { color: var(--status-warning-fg); }
.text-yellow-600 { color: var(--status-warning-fg); }

/* background colors → theme tokens (surfaces follow the elevation model) */
.bg-white { background: var(--surface-1); }
.bg-gray-50  { background: var(--surface-2); }
.bg-gray-100 { background: var(--surface-3); }
.bg-blue-100   { background: var(--status-info-bg); }
.bg-green-100  { background: var(--status-success-bg); }
.bg-orange-100 { background: var(--status-warning-bg); }
.bg-red-100 { background: var(--status-error-bg); }
.bg-red-50  { background: var(--status-error-bg); }
.bg-yellow-100 { background: var(--status-warning-bg); }
.bg-yellow-50  { background: var(--status-warning-bg); }
.bg-indigo-600 { background: var(--accent); }
.hover\:bg-indigo-700:hover { background: var(--accent-hover); }
.hover\:bg-gray-50:hover { background: var(--surface-2); }

/* spacing between stacked children (Tailwind space-y / divide-y) */
.space-y-1 > * + * { margin-block-start: 0.25rem; }
.space-y-4 > * + * { margin-block-start: 1rem; }
.divide-y > * + * { border-block-start: 1px solid var(--border); }
.divide-gray-50 > * + *,
.divide-gray-100 > * + * { border-color: var(--border-subtle); }

/* transitions / effects */
.transition-colors {
  transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.animate-pulse { animation: refine-pulse 1.6s ease-in-out infinite; }
@keyframes refine-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }

/* skeleton heights */
.h-24 { height: 6rem; }
.h-32 { height: 8rem; }
.h-48 { height: 12rem; }

/* ============================================================================
 * §12  Cross-page component vocabulary (Bootstrap-style single/double dash)
 * ----------------------------------------------------------------------------
 * Components used across several pages whose classes were undefined. Mirrors the
 * design-system look using the same tokens, so these pages match the BEM family.
 *   modal-overlay/-dialog/-header/-body/-footer/-close · toggle switch ·
 *   tabs (tab-bar/tab-btn) · stat/stats/kpi cards · slide-form · pagination ·
 *   filters-bar · code-block · status-dot · page-title · btn--outline · inputs
 * ========================================================================== */

/* ---- Modal (overlay + dialog vocabulary) ---- */
.modal-overlay {
  position: fixed; inset: 0;
  background: var(--modal-backdrop);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
  z-index: var(--z-modal);
  animation: fade-in var(--dur-fast) var(--ease-out);
}
.modal-dialog {
  background: var(--modal-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%; max-width: 560px;
  max-height: calc(100vh - var(--space-9));
  display: flex; flex-direction: column;
  animation: slide-up var(--dur-normal) var(--ease-out);
}
.modal-dialog--lg { max-width: 820px; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-block-end: 1px solid var(--border);
  font-weight: var(--fw-semibold);
}
.modal-body { padding: var(--space-6); overflow-y: auto; }
.modal-footer {
  display: flex; justify-content: flex-end; gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-block-start: 1px solid var(--border);
}
.modal-close,
.btn-close {
  appearance: none; border: none; background: transparent;
  color: var(--text-muted); cursor: pointer;
  width: 32px; height: 32px; border-radius: var(--radius-md);
  font-size: 18px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.modal-close:hover,
.btn-close:hover { background: var(--surface-3); color: var(--text-primary); }

/* ---- Toggle switch ---- */
.toggle {
  display: inline-flex; align-items: center; gap: var(--space-3);
  cursor: pointer; user-select: none;
}
.toggle__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.toggle__slider {
  position: relative; flex: none;
  width: 40px; height: 22px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.toggle__slider::before {
  content: ""; position: absolute; top: 2px; inset-inline-start: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface-1);
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: inset-inline-start var(--dur-fast) var(--ease-out);
}
.toggle__input:checked + .toggle__slider {
  background: var(--accent); border-color: var(--accent);
}
.toggle__input:checked + .toggle__slider::before { inset-inline-start: 20px; background: #fff; }
.toggle__input:focus-visible + .toggle__slider { box-shadow: 0 0 0 3px var(--accent-ring); }
.toggle__label { font-size: 13px; color: var(--text-primary); }
/* small inline checkbox helper used by contacts */
.toggle-input { accent-color: var(--accent); width: 16px; height: 16px; }
/* pill that reflects on/off state (sms-gateways) */
.toggle-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--radius-full);
  font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid transparent;
}
.toggle-badge.toggle-on  { background: var(--status-success-bg); color: var(--status-success-fg); }
.toggle-badge.toggle-off { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }

/* ---- Tabs (tab-bar / tab-btn vocabulary) ---- */
.tab-bar {
  display: flex; gap: var(--space-1);
  border-block-end: 1px solid var(--border);
  margin-block-end: var(--space-5);
  overflow-x: auto;
}
.tab-btn {
  appearance: none; background: transparent; border: none;
  padding: var(--space-3) var(--space-4);
  font-size: 14px; font-weight: 500; color: var(--text-muted);
  cursor: pointer; white-space: nowrap;
  border-block-end: 2px solid transparent; margin-block-end: -1px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.tab-btn:hover { color: var(--text-primary); }
.tab-btn--active,
.tab-btn.active {
  color: var(--accent); border-block-end-color: var(--accent);
}
.tab-content, .tab-panel { display: block; }

/* ---- Stat / KPI cards ---- */
.stats-row, .stats-container {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-block-end: var(--space-5);
}
.stat-card, .kpi-tile {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
}
.kpi-row {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-block-end: var(--space-5);
}
.kpi-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }

/* ---- Card meta rows ---- */
.card-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: 4px; }
.meta-label { font-size: 12px; color: var(--text-muted); }
.meta-value { font-size: 13px; color: var(--text-primary); font-weight: 500; }
.card-state { font-size: 12px; color: var(--text-muted); }

/* ---- Slide-in form panel ---- */
.form-container { display: block; }
.slide-form {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
  box-shadow: var(--shadow-sm);
  animation: fade-in var(--dur-fast) var(--ease-out);
}
.slide-form-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-block-end: var(--space-2);
  font-weight: var(--fw-semibold);
}

/* ---- Pagination ---- */
.pagination {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: var(--space-2); margin-block-start: var(--space-5);
}
.pagination button, .pagination .page-btn {
  min-width: 34px; height: 34px; padding-inline: 10px;
  border: 1px solid var(--border); background: var(--surface-1);
  color: var(--text-primary); border-radius: var(--radius-md);
  cursor: pointer; font-size: 13px;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.pagination button:hover:not(:disabled) { background: var(--surface-2); border-color: var(--border-strong); }
.pagination button:disabled { opacity: .45; cursor: not-allowed; }
.pagination button.active,
.pagination .page-btn.active { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }

/* ---- Filters bar (cdr / recordings) ---- */
.filters-bar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-block-end: var(--space-5);
}

/* ---- Monospace code block (domain provisioning output) ---- */
.code-block {
  font-family: var(--font-mono);
  font-size: 12.5px; line-height: 1.6;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  color: var(--text-primary);
  white-space: pre-wrap; word-break: break-word;
  overflow-x: auto;
}

/* ---- Status dot / badge ---- */
.status-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-muted); margin-inline-end: 6px; vertical-align: middle;
}
.status-dot.ok, .status-dot--ok, .status-dot.online { background: var(--status-success); }
.status-dot.warn, .status-dot--warn { background: var(--status-warning); }
.status-dot.err, .status-dot--err, .status-dot.offline { background: var(--status-error); }
.status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--radius-full);
  font-size: 12px; font-weight: 600;
  background: var(--status-neutral-bg); color: var(--status-neutral-fg);
}

/* ---- Security dashboard sections ---- */
.dash-section { margin-block-end: var(--space-6); }
.dash-section__title { font-size: 15px; font-weight: var(--fw-semibold); margin-block-end: var(--space-3); }

/* ---- Page title (single-dash heading used by several pages) ---- */
.page-title {
  font-size: var(--fs-headline-sm); font-weight: var(--fw-semibold);
  color: var(--text-primary); margin: 0 0 var(--space-2);
}

/* ---- Buttons: double-dash outline mirror ---- */
.btn--outline {
  background: transparent; color: var(--text-primary);
  border: 1px solid var(--border-strong);
}
.btn--outline:hover { background: var(--surface-2); border-color: var(--accent); color: var(--accent); }

/* ---- Inputs: small variant + search/select bridges ---- */
.input--sm {
  padding-block: 6px; padding-inline: 10px; font-size: 13px;
}
.search-input, .form-select,
input.input, select.input, textarea.input {
  width: 100%;
  padding: 9px 12px;
  font: inherit; font-size: 14px;
  color: var(--text-primary);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.search-input:focus, .form-select:focus,
.search-input:focus-visible, .form-select:focus-visible,
input.input:focus, select.input:focus, textarea.input:focus,
input.input:focus-visible, select.input:focus-visible, textarea.input:focus-visible {
  outline: none; border-color: var(--field-focus);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* ---- Table column / action helpers (contacts) ---- */
.col-actions { width: 1%; white-space: nowrap; text-align: end; }
.col-fav { width: 1%; }
.col-name { font-weight: 500; }
.action-btns { display: inline-flex; align-items: center; gap: var(--space-1); justify-content: flex-end; }
.delete-btn:hover { color: var(--status-error); }

/* ============================================================================
 * §13  Page-specific completion — last genuinely-undefined classes
 * ----------------------------------------------------------------------------
 * Covers real defects found by the full gap scan (after excluding pages that
 * self-inject their own <style>: agent-softphone, register, wallboard,
 * _helpers): standalone unstyled <table>s, the Security Dashboard page,
 * audit-log filter bar, card/ops/queue vocabularies, spinners, and a compact
 * set of generic layout helpers. All additive; all theme-token based.
 * ========================================================================== */

/* ---- Missed Tailwind util (billing) ---- */
.whitespace-nowrap { white-space: nowrap; }

/* ---- Standalone <table>s lacking .data-table/.table ---- */
.guests-table,
.audit-table,
.top-actions-table,
.contacts-table,
.phonebooks-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px; color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden;
}
.guests-table thead th,
.audit-table thead th,
.top-actions-table thead th {
  text-align: start; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); background: var(--surface-2);
  padding: 10px 14px; border-block-end: 1px solid var(--border);
  white-space: nowrap;
}
.guests-table td,
.audit-table td,
.top-actions-table td {
  padding: 10px 14px; border-block-end: 1px solid var(--border-subtle);
  vertical-align: middle;
}
.guests-table tbody tr:last-child td,
.audit-table tbody tr:last-child td,
.top-actions-table tbody tr:last-child td { border-block-end: none; }
.guests-table tbody tr:hover,
.audit-table tbody tr:hover,
.top-actions-table tbody tr:hover { background: var(--accent-soft); }

/* ---- Audit-log filter bar ---- */
.filter-bar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); margin-block-end: var(--space-5);
}
.filter-actions { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
.filter-select {
  padding: 8px 12px; font: inherit; font-size: 13px;
  color: var(--text-primary); background: var(--field-bg);
  border: 1px solid var(--field-border); border-radius: var(--radius-md);
}
.filter-select:focus, .filter-select:focus-visible {
  outline: none; border-color: var(--field-focus); box-shadow: 0 0 0 3px var(--accent-ring);
}

/* ---- Security Dashboard ---- */
.security-dashboard { display: block; }
.kpi-value { font-size: 28px; font-weight: 700; line-height: 1.1; color: var(--text-primary); }
.kpi-tile--link {
  display: flex; align-items: center; gap: var(--space-2);
  cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast);
}
.kpi-tile--link:hover { border-color: var(--accent); background: var(--accent-soft); }
.kpi-icon { color: var(--accent); font-size: 20px; display: inline-flex; }
.kpi-arrow { margin-inline-start: auto; color: var(--accent); font-weight: 700; }
.dash-section__header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-block-end: var(--space-3);
}
.dash-section--slim { margin-block-end: var(--space-4); }
.top-action-name { font-weight: 500; }
.top-action-count { text-align: end; width: 1%; white-space: nowrap; }
.sessions-list { display: flex; flex-direction: column; gap: var(--space-2); }
.session-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.session-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.session-ip { font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.session-ua { font-size: 12.5px; color: var(--text-muted); }
.session-time { font-size: 12px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.session-time__full { color: var(--text-muted); opacity: .8; }
.session-actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.quick-link-card {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.quick-link-card:hover { border-color: var(--accent); background: var(--accent-soft); }
.quick-link-card__text { font-weight: 500; }
.quick-link-card__arrow { color: var(--accent); font-weight: 700; }

/* ---- Card vocabulary (sms-gateways / ops-health / queues) ---- */
.gateways-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.gateway-card, .check-card, .moh-card {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-5);
  box-shadow: var(--shadow-xs);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.gateway-name { font-size: 15px; font-weight: var(--fw-semibold); }
.provider-badge {
  display: inline-flex; align-items: center; padding: 2px 8px;
  border-radius: var(--radius-full); font-size: 11px; font-weight: 600;
  background: var(--status-info-bg); color: var(--status-info-fg);
}
.card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.card-body { display: flex; flex-direction: column; gap: var(--space-2); }
.card-actions { display: flex; align-items: center; gap: var(--space-2); justify-content: flex-end; margin-block-start: var(--space-2); }
.check-card__body { display: flex; flex-direction: column; gap: var(--space-2); font-size: 13px; }
.moh-status { font-size: 12px; color: var(--text-muted); }
.agent-list { display: flex; flex-direction: column; gap: var(--space-1); }

/* ---- Ops-health page ---- */
.ops-health-page { display: block; }
.ops-content { display: flex; flex-direction: column; gap: var(--space-4); }
.ops-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-block-end: var(--space-4); }
.ops-banner {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--status-info-bg); color: var(--status-info-fg);
  border-inline-start: 3px solid var(--status-info);
}

/* ---- Dashboard section title (bilingual heading) ---- */
.section-title { display: flex; align-items: baseline; gap: var(--space-2); margin-block-end: var(--space-4); font-weight: var(--fw-semibold); }
.section-title__ar { font-size: 16px; color: var(--text-primary); }
.section-title__en { font-size: 13px; color: var(--text-muted); }
.section-title__sep { color: var(--border-strong); }

/* ---- Spinners / loading ---- */
.spinner, .pax-spinner {
  display: inline-block; width: 18px; height: 18px;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: refine-spin .7s linear infinite;
}
.loading-state { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-7); color: var(--text-muted); }
.loading-cell { text-align: center; color: var(--text-muted); padding: var(--space-5); }
.loading-dots::after { content: "…"; animation: refine-pulse 1.2s ease-in-out infinite; }

/* ---- Generic layout helpers (compact, low-risk) ---- */
.header-actions { display: flex; align-items: center; gap: var(--space-2); justify-content: flex-end; flex-wrap: wrap; }
.search-bar { display: flex; align-items: center; gap: var(--space-2); }
.full-width { grid-column: 1 / -1; width: 100%; }
.ltr { direction: ltr; text-align: start; }
.page-subtitle, .page-info, .page-counter { font-size: 13px; color: var(--text-muted); }
.page-numbers { display: inline-flex; align-items: center; gap: var(--space-1); }
.info-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: 4px; }
.help-text { font-size: 12px; color: var(--text-muted); }
.form__actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-block-start: var(--space-4); padding-block-start: var(--space-4); border-block-start: 1px solid var(--border); }
.form-group--narrow { max-width: 280px; }
.form-group-toggle, .form-group-submit { display: block; }
.form-label__suffix { color: var(--text-muted); font-weight: 400; font-size: 12px; margin-inline-start: 4px; }
.actions-cell { white-space: nowrap; text-align: end; }
.error-row td, .empty-row td { text-align: center; color: var(--text-muted); padding: var(--space-5); }
.auth-steps { display: flex; align-items: center; gap: var(--space-2); }
.inline-form-wrap, .modals-area, .import-result, .phonebook-add-form, .checkin-form, .contact-form { display: block; }
.import-hint { font-size: 12px; color: var(--text-muted); }
.csv-textarea { width: 100%; min-height: 140px; font-family: var(--font-mono); font-size: 12.5px; }
.file-input { display: block; font-size: 13px; }
.edit-btn:hover { color: var(--accent); }
.email-link, .call-link { color: var(--text-link); text-decoration: none; }
.email-link:hover, .call-link:hover { text-decoration: underline; }
.col-email { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Button / badge variants ---- */
.btn--danger-ghost {
  background: transparent; border: 1px solid transparent; color: var(--status-error);
}
.btn--danger-ghost:hover { background: var(--status-error-bg); }
.badge--xs { font-size: 10px; padding: 1px 6px; }

/* ---- Empty / error sub-text ---- */
.empty-state__desc, .error-state__message { font-size: 13px; color: var(--text-muted); margin-block-start: var(--space-1); }

/* ============================================================================
 * §SELECT  Unified dropdown caret — crisp, theme-adaptive chevron
 * ----------------------------------------------------------------------------
 * Every native <select> in the app stripped the OS arrow via appearance:none
 * but replacements were inconsistent: .form-control drew a fuzzy 5px gradient
 * triangle (read as an unclear smudge), while .filter-input / .form-select /
 * .filter-select drew nothing at all (blank/invisible caret). This unifies all
 * of them onto one clean SVG chevron, positioned with logical properties so it
 * sits on the correct edge in both RTL and LTR, and brightens in dark mode.
 * Additive + token-driven; touches presentation only.
 * ========================================================================== */
:root {
  /* slate-500 — legible on light surfaces */
  --select-chevron: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2364748b'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='6%209%2012%2015%2018%209'/%3E%3C/svg%3E");
}
[data-theme="dark"] {
  /* slate-400 — brighter for dark surfaces */
  --select-chevron: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2394a3b8'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='6%209%2012%2015%2018%209'/%3E%3C/svg%3E");
}

/* All select variants share the same crisp chevron. appearance:none ensures no
   duplicate native arrow shows alongside it. */
select.filter-input,
select.form-select,
select.filter-select,
select.input,
.form-section select,
select.field__input {
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--select-chevron);
  background-position: calc(100% - 12px) center;
  background-size: 14px 14px;
  background-repeat: no-repeat;
  padding-inline-end: var(--space-7);
}
[dir="rtl"] select.filter-input,
[dir="rtl"] select.form-select,
[dir="rtl"] select.filter-select,
[dir="rtl"] select.input,
[dir="rtl"] .form-section select,
[dir="rtl"] select.field__input {
  background-position: 12px center;
  padding-inline-end: var(--space-3);
  padding-inline-start: var(--space-7);
}
/* Native multi-line / sized selects shouldn't get a single-row caret. */
select[multiple], select[size]:not([size="1"]) { background-image: none; padding-inline-end: var(--space-3); }

/* ════════════════════════════════════════════════════════════════════
   S39 · Button & action-bar polish (app-wide)
   Cards are flex-columns (align-items:stretch), which stretched any lone
   button to the full card width — looking unprofessional. Constrain only
   BUTTONS (never inputs/fields) so they size to their content. Plus a
   reusable compact action bar (blue Save / red Cancel) for form headers.
   ════════════════════════════════════════════════════════════════════ */
.card > .btn,
.form-card > .btn,
.section-card > .btn { align-self: flex-start; }

.form-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.form-actions--end { justify-content: flex-end; }
.form-actions--bar {
  justify-content: flex-end;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
/* Soft red "Cancel" — professional, not alarming */
.btn--cancel {
  background: transparent;
  color: var(--status-error, #dc2626);
  border-color: var(--status-error-border, rgba(220,38,38,0.4));
}
.btn--cancel:hover {
  background: var(--status-error-bg, rgba(220,38,38,0.08));
  border-color: var(--status-error, #dc2626);
}