/* ============================================================
   VidariaSettings.css — Vidaria 1.1 settings shell (Phase A)
   ------------------------------------------------------------
   New chrome for SettingsPage.js: two-column layout
   (left rail + content), "SYSTEM CONFIGURATION" eyebrow,
   per-page header (pastel icon tile + title + subtitle),
   and the content container that wraps the existing tab bodies.

   ALL rules are scoped under `body.vds-shell` so nothing leaks
   into the legacy `.settings-page` render. Uses design tokens
   from tokens.css / vidaria-shell.css.

   NOTE: This file previously held a CSS-only restyle of the
   legacy `.settings-page` markup. That approach is superseded —
   under the Vidaria shell SettingsPage.js now renders a dedicated
   `.vds-settings-page` tree, so the old `.settings-page` overrides
   were dead and have been removed.
   ============================================================ */

/* ── Page layout: left rail + content ── */
body.vds-shell .vds-settings-page {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  padding: var(--space-6);
  min-height: calc(100vh - var(--nav-height));
  box-sizing: border-box;
  background: var(--gray-50);
  font-family: var(--font-family);
}

/* ── Left rail ── */
body.vds-shell .vds-settings-rail {
  flex: 0 0 240px;
  width: 240px;
  position: sticky;
  top: calc(var(--nav-height) + var(--space-6));
  align-self: flex-start;
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-3);
}

body.vds-shell .vds-rail-eyebrow {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-400);
  padding: 0 var(--space-3) var(--space-3);
}

body.vds-shell .vds-rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.vds-shell .vds-rail-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--gray-700);
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

body.vds-shell .vds-rail-item:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}

body.vds-shell .vds-rail-item.active {
  background: var(--vidaria-blue-tint);
  color: var(--vidaria-blue);
  font-weight: var(--font-weight-semibold);
  box-shadow: inset 3px 0 0 0 var(--vidaria-blue);
}

body.vds-shell .vds-rail-item--external {
  color: var(--gray-500);
  justify-content: space-between;
}

body.vds-shell .vds-rail-ext-icon {
  color: var(--gray-400);
  flex: 0 0 auto;
}

body.vds-shell .vds-rail-divider {
  height: 1px;
  background: var(--border-color-light);
  margin: var(--space-3) var(--space-2);
}

/* ── Content column ── */
body.vds-shell .vds-settings-main {
  flex: 1 1 auto;
  min-width: 0;
}

body.vds-shell .vds-settings-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ── Per-page header: pastel icon tile + title + subtitle ── */
body.vds-shell .vds-settings-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

body.vds-shell .vds-settings-header-tile {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--vidaria-blue-pale);
  color: var(--vidaria-blue);
}

body.vds-shell .vds-settings-header-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

body.vds-shell .vds-settings-title {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--gray-900);
  line-height: var(--line-height-tight);
}

body.vds-shell .vds-settings-subtitle {
  margin: 2px 0 0;
  font-size: var(--font-size-base);
  color: var(--gray-500);
  word-break: break-word;
}

/* ── Content container wrapping the existing tab bodies ── */
body.vds-shell .vds-settings-content {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  min-width: 0;
}

/* ── Profile two-card grid (Personal Information + Display Preferences) ── */
body.vds-shell .vds-settings-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}

body.vds-shell .vds-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* ── Per-page header hue variants ──
   The header icon tile defaults to Vidaria blue. Per-page pastel hues let
   each settings surface read distinctly (e.g. Account = green, per mockup). */
body.vds-shell .vds-settings-header-tile--green {
  background: var(--success-light);
  color: var(--success-text);
}

/* Group Settings header hue (amber/orange per mockup). */
body.vds-shell .vds-settings-header-tile--amber {
  background: var(--warning-light);
  color: var(--warning-text);
}

/* Users header hue (purple per mockup). */
body.vds-shell .vds-settings-header-tile--purple {
  background: var(--purple-light);
  color: var(--purple);
}

/* ============================================================
   Account Settings — Phase B tabbed layout
   ------------------------------------------------------------
   AccountSettings renders its own SettingsSubTabs + a stack of
   OpsCards directly on the page background (no white wrapper).
   ============================================================ */
body.vds-shell .vds-account-settings {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

body.vds-shell .vds-account-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ── Toggle / module rows (Features tab) ── */
body.vds-shell .vds-module-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

body.vds-shell .vds-module-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 12px 14px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: var(--white);
}

body.vds-shell .vds-module-info {
  min-width: 0;
}

body.vds-shell .vds-module-name {
  font-weight: var(--font-weight-semibold);
  font-size: 0.9rem;
  color: var(--gray-900);
}

body.vds-shell .vds-module-desc {
  font-size: 0.78rem;
  color: var(--gray-500);
  margin-top: 2px;
}

/* ── Green pill switch ── */
body.vds-shell .vds-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
}

body.vds-shell .vds-switch:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

body.vds-shell .vds-switch-track {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 99px;
  background: var(--gray-300);
  transition: background var(--transition-fast);
  flex: 0 0 auto;
}

body.vds-shell .vds-switch-track.on {
  background: var(--success);
}

body.vds-shell .vds-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform var(--transition-fast);
}

body.vds-shell .vds-switch-track.on .vds-switch-knob {
  transform: translateX(18px);
}

body.vds-shell .vds-switch-label {
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  min-width: 52px;
  text-align: left;
}

body.vds-shell .vds-switch-label.on {
  color: var(--success-text);
}

body.vds-shell .vds-switch-label.off {
  color: var(--gray-500);
}

/* ── Read-only Active/Inactive badge (non-Administrator) ── */
body.vds-shell .vds-module-badge {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

body.vds-shell .vds-module-badge.on {
  background: var(--success-light);
  color: var(--success-text);
}

body.vds-shell .vds-module-badge.off {
  background: var(--gray-150);
  color: var(--gray-500);
}

/* ============================================================
   Group Settings — Phase C tabbed layout
   ------------------------------------------------------------
   GroupSettings renders a group <select> + SettingsSubTabs + a
   stack of OpsCards directly on the page background (no white
   wrapper), mirroring the Phase B Account Settings layout.
   ============================================================ */
body.vds-shell .vds-group-settings {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

body.vds-shell .vds-group-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ── Group selector bar (above the sub-tabs, per mockup) ── */
body.vds-shell .vds-group-selector-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

body.vds-shell .vds-group-select-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 240px;
  flex: 1 1 240px;
}

body.vds-shell .vds-group-select-label > span {
  font-weight: var(--font-weight-semibold);
  font-size: 0.8rem;
  color: var(--gray-600);
}

body.vds-shell .vds-group-select {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--gray-900);
  font-size: 0.9rem;
}

body.vds-shell .vds-group-selector-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* ============================================================
   Users — Phase D redesign (table view)
   ------------------------------------------------------------
   UsersIndex under the Vidaria shell renders SettingsSubTabs
   (All Users / By Group) + a toolbar (group selector, search,
   role filter, show-inactive, Invite) + a clean OpsCard table.
   Scoped under body.vds-shell so the legacy drag/card UI is
   untouched. Mirrors the Phase B/C card-on-page-bg layout.
   ============================================================ */
body.vds-shell .vds-users {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

body.vds-shell .vds-users-inner {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ── Toolbar row ── */
body.vds-shell .vds-users-toolbar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

body.vds-shell .vds-users-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.vds-shell .vds-users-field > span {
  font-weight: var(--font-weight-semibold);
  font-size: 0.75rem;
  color: var(--gray-600);
}

body.vds-shell .vds-users-search {
  flex: 1 1 240px;
  min-width: 200px;
}

body.vds-shell .vds-users-search-box {
  position: relative;
  display: flex;
  align-items: center;
}

body.vds-shell .vds-users-search-icon {
  position: absolute;
  left: 10px;
  color: var(--gray-400);
  pointer-events: none;
}

body.vds-shell .vds-users-search-box input {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 32px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--gray-900);
  font-size: 0.9rem;
  box-sizing: border-box;
}

body.vds-shell .vds-users-select {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--gray-900);
  font-size: 0.9rem;
}

body.vds-shell .vds-users-inactive-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 40px;
  font-size: 0.85rem;
  color: var(--gray-700);
  cursor: pointer;
  white-space: nowrap;
}

body.vds-shell .vds-users-toolbar-spacer {
  flex: 1 1 auto;
}

body.vds-shell .vds-users-invite-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--vidaria-blue);
  color: #fff;
  font-size: 0.9rem;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

body.vds-shell .vds-users-invite-btn:hover { opacity: 0.9; }
body.vds-shell .vds-users-invite-btn:disabled {
  background: var(--gray-300);
  color: var(--gray-500);
  cursor: not-allowed;
}

body.vds-shell .vds-users-count {
  font-size: 0.8rem;
  color: var(--gray-500);
  margin-bottom: var(--space-3);
}

/* ── Bulk toolbar ── */
body.vds-shell .vds-users-bulkbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 10px 14px;
  margin-bottom: var(--space-3);
  border: 1px solid var(--vidaria-blue-tint);
  background: var(--vidaria-blue-tint);
  border-radius: var(--radius-md);
}

body.vds-shell .vds-users-bulk-count {
  font-weight: var(--font-weight-bold);
  font-size: 0.82rem;
  color: var(--vidaria-blue);
  margin-right: var(--space-2);
}

body.vds-shell .vds-users-bulkbar button {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--gray-700);
  font-size: 0.8rem;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

body.vds-shell .vds-users-bulkbar button:hover { background: var(--gray-100); }
body.vds-shell .vds-users-bulk-danger { color: var(--danger-text) !important; border-color: var(--danger-light) !important; }
body.vds-shell .vds-users-bulk-clear { margin-left: auto; }

/* ── Table ── */
body.vds-shell .vds-users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

body.vds-shell .vds-users-table thead th {
  text-align: left;
  padding: 12px 14px;
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  white-space: nowrap;
}

body.vds-shell .vds-users-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--gray-150);
  vertical-align: middle;
  color: var(--gray-800);
}

body.vds-shell .vds-users-table tbody tr:last-child td { border-bottom: none; }
body.vds-shell .vds-users-table tbody tr:hover { background: var(--gray-50); }
body.vds-shell .vds-users-row--inactive { opacity: 0.72; }

body.vds-shell .vds-users-col-check { width: 36px; }
body.vds-shell .vds-users-col-actions { width: 1%; white-space: nowrap; text-align: right; }
body.vds-shell .vds-users-empty {
  text-align: center;
  color: var(--gray-500);
  padding: var(--space-8) var(--space-4);
}

/* Name cell (avatar + name + email under) */
body.vds-shell .vds-users-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.vds-shell .vds-users-avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vidaria-blue-pale);
  color: var(--vidaria-blue);
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
}

body.vds-shell .vds-users-name-text { display: flex; flex-direction: column; min-width: 0; }
body.vds-shell .vds-users-name { font-weight: var(--font-weight-semibold); color: var(--gray-900); }
body.vds-shell .vds-users-subemail { font-size: 0.74rem; color: var(--gray-500); }
body.vds-shell .vds-users-email { color: var(--gray-600); }
body.vds-shell .vds-users-muted { color: var(--gray-400); }

body.vds-shell .vds-users-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--gray-700);
}

/* Role badge */
body.vds-shell .vds-role-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}
body.vds-shell .vds-role-badge--blue    { background: var(--vidaria-blue-pale); color: var(--vidaria-blue); }
body.vds-shell .vds-role-badge--info    { background: var(--info-light);    color: var(--info-text); }
body.vds-shell .vds-role-badge--warning { background: var(--warning-light); color: var(--warning-text); }
body.vds-shell .vds-role-badge--purple  { background: var(--purple-light);  color: var(--purple); }
body.vds-shell .vds-role-badge--success { background: var(--success-light); color: var(--success-text); }
body.vds-shell .vds-role-badge--gray    { background: var(--gray-150);      color: var(--gray-600); }

/* Group chips.
   A user managing many groups (admins/multi-site leaders) can have dozens of
   chips, which previously let the cell wrap to an enormous height and blew out the
   whole table row. Cap the cell to a fixed ~two-row height that scrolls, so every
   user occupies one equal, bounded row regardless of group count. */
body.vds-shell .vds-users-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-content: flex-start;
  height: 46px;            /* ~two rows of chips, always visible */
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;   /* Firefox */
  scrollbar-color: var(--gray-300) transparent;
}
body.vds-shell .vds-users-groups::-webkit-scrollbar { width: 6px; }
body.vds-shell .vds-users-groups::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 3px;
}
body.vds-shell .vds-users-groups::-webkit-scrollbar-track { background: transparent; }
body.vds-shell .vds-group-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--gray-100);
  color: var(--gray-700);
  font-size: 0.72rem;
  line-height: 1.4;        /* deterministic chip height so 46px = ~2 rows */
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

/* Actions: Edit button + dropdown menu */
body.vds-shell .vds-users-menu-wrap { position: relative; display: inline-block; }

body.vds-shell .vds-users-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--gray-700);
  font-size: 0.8rem;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}
body.vds-shell .vds-users-edit-btn:hover { background: var(--gray-100); }

body.vds-shell .vds-users-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 50;
  min-width: 200px;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}

body.vds-shell .vds-users-menu > button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--gray-700);
  font-size: 0.82rem;
  cursor: pointer;
}
body.vds-shell .vds-users-menu > button:hover { background: var(--gray-100); }
body.vds-shell .vds-users-menu-danger { color: var(--danger-text) !important; }
body.vds-shell .vds-users-menu-sep { height: 1px; background: var(--gray-150); margin: 4px 2px; }

body.vds-shell .vds-users-menu-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 10px;
}
body.vds-shell .vds-users-menu-field label {
  font-size: 0.7rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--gray-500);
}
body.vds-shell .vds-users-menu-field select {
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--gray-900);
  font-size: 0.82rem;
}

/* ============================================================
   Scheduled Reports — Phase E
   ------------------------------------------------------------
   Group selector bar (reuses .vds-group-selector-bar/.vds-group-select)
   + a stack of report OpsCards (green enable pill in the header,
   last-run subtext, expandable detail) + a Recent Logs card.
   ============================================================ */
body.vds-shell .vds-scheduled-reports {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

body.vds-shell .vds-sr-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

body.vds-shell .vds-sr-lastrun {
  font-size: 0.78rem;
  color: var(--gray-500);
}

body.vds-shell .vds-sr-expand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-3);
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--vidaria-blue);
  font-size: 0.82rem;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background var(--transition-fast);
}

body.vds-shell .vds-sr-expand:hover { background: var(--gray-50); }

body.vds-shell .vds-sr-detail {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--gray-150);
}

/* ============================================================
   Alert Configuration + Report Distribution — Phase E
   ------------------------------------------------------------
   Shared sidebar-rail + card-column layout. The alert panels and
   the distribution grid re-parent into OpsCards on the page bg.
   ============================================================ */
body.vds-shell .vds-alert-settings,
body.vds-shell .vds-distribution {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

body.vds-shell .vds-alert-layout {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  min-width: 0;
}

body.vds-shell .vds-alert-rail {
  flex: 0 0 240px;
  width: 240px;
  min-width: 0;
}

body.vds-shell .vds-alert-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Report Distribution — icon tile in the grid column headers.
   Real per-report thumbnails can replace the <Icon> tile later. */
body.vds-shell .vds-dist-col-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

body.vds-shell .vds-dist-icon-tile {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--vidaria-blue-pale);
  color: var(--vidaria-blue);
}

body.vds-shell .vds-dist-col-head h3 {
  margin: 0;
  font-size: 0.95rem;
}

/* ============================================================
   Level-2 sub-section navigation (JOB 1)
   ------------------------------------------------------------
   Wraps a FilterPillRow used as the second-level nav INSIDE a
   top tab (Group/Account) or as the primary nav (Alert Config).
   Visually distinct from the underline SettingsSubTabs (level-1):
   pills sit between the underline tabs and the single active card.
   ============================================================ */
body.vds-shell .vds-subsection-pills {
  margin-bottom: var(--space-5);
}

/* ============================================================
   Group Settings — level-3 section rail + level-4 field index
   ------------------------------------------------------------
   Replaces the sub-section pill row. Layout is a plain flex row:
     [ .vds-gs-subnav 200px ] [ .vds-group-cards flex:1 ]

   Why 200px when the outer rail is 240px: the width step is part of
   how the two vertical rails read as different levels rather than as
   two competing navs.

   FLEX TRAPS (both bit us on the All-Groups Overview — do not repeat):
     - No `margin: 0 auto` on the aside. An auto cross-axis margin kills
       align-items:stretch, and the rail silently stops matching the
       card height.
     - `min-width: 0` on the content column only. Putting it on the row
       strips shrink-protection and lets fixed-height children spill.
   ============================================================ */
body.vds-shell .vds-gs-body {
  display: flex;
  align-items: stretch;      /* rail follows the settings box height */
  gap: var(--space-5);
}

body.vds-shell .vds-gs-body > .vds-group-cards {
  flex: 1 1 auto;
  min-width: 0;              /* lets long tables/inputs shrink, not overflow */
}

body.vds-shell .vds-gs-subnav {
  flex: 0 0 200px;
  width: 200px;
  align-self: stretch;
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3) var(--space-2);
  box-sizing: border-box;
}

/* The rail box stretches to the card, but the nav inside sticks — so a
   tall section (Tags, Devices) keeps the sections reachable while
   scrolling instead of stranding them at the top. */
body.vds-shell .vds-gs-subnav-inner {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-4));
}

body.vds-shell .vds-gs-subnav-list,
body.vds-shell .vds-gs-subnav-fields {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.vds-shell .vds-gs-subnav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── Level 3: section items — mirrors .vds-rail-item ── */
body.vds-shell .vds-gs-subnav-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  background: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--gray-700);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

body.vds-shell .vds-gs-subnav-item:hover {
  background: var(--gray-100);
  color: var(--gray-900);
}

body.vds-shell .vds-gs-subnav-item.active {
  background: var(--vidaria-blue-tint);
  color: var(--vidaria-blue);
  font-weight: var(--font-weight-semibold);
  box-shadow: inset 3px 0 0 0 var(--vidaria-blue);
}

body.vds-shell .vds-gs-subnav-icon {
  flex: 0 0 auto;
  color: var(--gray-400);
}

body.vds-shell .vds-gs-subnav-item:hover .vds-gs-subnav-icon {
  color: var(--gray-600);
}

body.vds-shell .vds-gs-subnav-item.active .vds-gs-subnav-icon {
  color: var(--vidaria-blue);
}

body.vds-shell .vds-gs-subnav-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.vds-shell .vds-gs-subnav-meta {
  flex: 0 0 auto;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--gray-400);
  font-variant-numeric: tabular-nums;
}

body.vds-shell .vds-gs-subnav-item.active .vds-gs-subnav-meta {
  color: var(--vidaria-blue);
}

/* ── Level 4: field index ──
   Deliberately NOT the level-3 treatment. No pill, no icon, no active
   chip, lighter weight, smaller, behind a hairline rail. If this ever
   picks up a background/pill it will read as peer nav and the whole
   4-deep hierarchy collapses into soup. That is the entire point. */
body.vds-shell .vds-gs-subnav-fields {
  margin: 2px 0 var(--space-2) 0;
  padding-left: var(--space-4);
  border-left: 1px solid var(--border-color-light);
  margin-left: var(--space-4);
  display: flex;
  flex-direction: column;
}

body.vds-shell .vds-gs-subnav-field {
  display: block;
  width: 100%;
  padding: 3px var(--space-2);
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: var(--gray-500);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

body.vds-shell .vds-gs-subnav-field:hover {
  color: var(--vidaria-blue);
  text-decoration: underline;
}

/* Transient target highlight after a field jump. */
body.vds-shell .vds-gs-field-flash {
  animation: vds-gs-field-flash 1.2s ease-out;
  border-radius: var(--radius-md);
}

@keyframes vds-gs-field-flash {
  0%, 40% { background: var(--vidaria-blue-tint); }
  100%    { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  body.vds-shell .vds-gs-field-flash { animation: none; }
}

/* Narrow: rail returns to a horizontal strip above the card. Field index
   is dropped here — at this width the card isn't long enough to need a
   jump list, and a wrapped 4-level nav is worse than none. */
@media (max-width: 900px) {
  body.vds-shell .vds-gs-body {
    flex-direction: column;
    align-items: stretch;
  }
  body.vds-shell .vds-gs-subnav {
    flex: 0 0 auto;
    width: 100%;
    align-self: auto;
  }
  body.vds-shell .vds-gs-subnav-inner { position: static; }
  body.vds-shell .vds-gs-subnav-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  body.vds-shell .vds-gs-subnav-group { flex: 0 0 auto; }
  body.vds-shell .vds-gs-subnav-item { width: auto; }
  body.vds-shell .vds-gs-subnav-fields { display: none; }
}

/* ============================================================
   Settings buttons — Vidaria standardization (JOB 2)
   ------------------------------------------------------------
   Re-skins the legacy `.btn` family to the Vidaria design system,
   scoped to the three settings pages via `.vds-settings-scope`
   (added on each page's root wrapper) so nothing leaks into other
   pages or the legacy (!vidariaShell) render. Consistent color,
   radius, padding, and sizing across all three pages.

   Variants (mapped from existing legacy classes — REUSE, no markup churn):
     primary (brand blue)  ← .btn-action, .btn-primary
     secondary / neutral   ← .btn (plain), .btn-secondary
     danger (destructive)  ← .btn-danger
     link / ghost          ← .btn-link
   Order matters: neutral is declared before primary/danger so that
   an element carrying both `.btn` and `.btn-action`/`.btn-danger`
   resolves to the semantic variant (equal specificity, later wins).
   ============================================================ */
body.vds-shell .vds-settings-scope .btn,
body.vds-shell .vds-settings-scope .btn-action,
body.vds-shell .vds-settings-scope .btn-primary,
body.vds-shell .vds-settings-scope .btn-secondary,
body.vds-shell .vds-settings-scope .btn-danger,
body.vds-shell .vds-settings-scope .btn-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--font-family);
  font-size: 0.85rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}

body.vds-shell .vds-settings-scope .btn:disabled,
body.vds-shell .vds-settings-scope .btn-action:disabled,
body.vds-shell .vds-settings-scope .btn-primary:disabled,
body.vds-shell .vds-settings-scope .btn-secondary:disabled,
body.vds-shell .vds-settings-scope .btn-danger:disabled,
body.vds-shell .vds-settings-scope .btn-link:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Secondary / neutral (outline) — default for plain .btn */
body.vds-shell .vds-settings-scope .btn,
body.vds-shell .vds-settings-scope .btn-secondary {
  background: var(--white);
  border-color: var(--gray-300);
  color: var(--gray-700);
}
body.vds-shell .vds-settings-scope .btn:hover:not(:disabled),
body.vds-shell .vds-settings-scope .btn-secondary:hover:not(:disabled) {
  background: var(--gray-100);
  color: var(--gray-900);
}

/* Primary (brand blue) */
body.vds-shell .vds-settings-scope .btn-action,
body.vds-shell .vds-settings-scope .btn-primary {
  background: var(--vidaria-blue);
  border-color: var(--vidaria-blue);
  color: #fff;
}
body.vds-shell .vds-settings-scope .btn-action:hover:not(:disabled),
body.vds-shell .vds-settings-scope .btn-primary:hover:not(:disabled) {
  background: var(--vidaria-blue-hover);
  border-color: var(--vidaria-blue-hover);
}

/* Danger (destructive) */
body.vds-shell .vds-settings-scope .btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
body.vds-shell .vds-settings-scope .btn-danger:hover:not(:disabled) {
  background: var(--danger-text);
  border-color: var(--danger-text);
}

/* Link / ghost — inline text action, no chrome */
body.vds-shell .vds-settings-scope .btn-link {
  height: auto;
  padding: 0;
  background: transparent;
  border-color: transparent;
  color: var(--vidaria-blue);
  text-decoration: underline;
}
body.vds-shell .vds-settings-scope .btn-link:hover:not(:disabled) {
  color: var(--vidaria-blue-hover);
}

/* ── Responsive: collapse to single column ── */
@media (max-width: 900px) {
  body.vds-shell .vds-settings-page {
    flex-direction: column;
  }
  body.vds-shell .vds-settings-rail {
    position: static;
    width: 100%;
    flex-basis: auto;
  }
  body.vds-shell .vds-settings-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }
  body.vds-shell .vds-alert-layout {
    flex-direction: column;
  }
  body.vds-shell .vds-alert-rail {
    flex-basis: auto;
    width: 100%;
  }
}