/* ===== DARK-THEME COMPONENT OVERRIDES ===============================
   Cases the token flip alone can't cover: chip TEXT colours are baked
   light-optimised (dark ink on a pale chip) in the component files, so
   on a dark chip they'd be illegible — here we swap them to the bright
   semantic tone. Loaded LAST so these win. Only active under
   <html data-theme="dark">. */

/* Badges — brighten the ink to match the dark tinted chip */
:root[data-theme="dark"] .badge.success{ color:var(--success); }
:root[data-theme="dark"] .badge.warning{ color:var(--warning); }
:root[data-theme="dark"] .badge.danger{ color:var(--danger); }

/* Status pills */
:root[data-theme="dark"] .status-pill.active,
:root[data-theme="dark"] .status-pill.submitted,
:root[data-theme="dark"] .status-pill.completed{ color:var(--success); }
:root[data-theme="dark"] .status-pill.pending,
:root[data-theme="dark"] .status-pill.draft{ color:var(--warning); }
:root[data-theme="dark"] .status-pill.inactive,
:root[data-theme="dark"] .status-pill.disabled{ background:#1c2740; color:var(--text-muted); }

/* Profile status pills */
:root[data-theme="dark"] .status.active{ color:var(--success); }
:root[data-theme="dark"] .status.inactive{ color:var(--danger); }

/* Danger button — soften the pink border/hover to a dark red */
:root[data-theme="dark"] .btn-danger{ border-color:#5a2a2c; }
:root[data-theme="dark"] .btn-danger:hover{ background:#4a2224; }

/* Select chevron — brighten the teal glyph so it reads on a dark control */
:root[data-theme="dark"] .portal-main select,
:root[data-theme="dark"] .zt-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232dd4bf' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}