/* ============================================================
   VIDARIA 1.1 SETTINGS CHROME
   ------------------------------------------------------------
   Phase 5: CSS-only restyle of the existing SettingsPage when
   the new shell is active. Scoped under body.vds-shell so legacy
   path is completely untouched.

   The per-section components (AccountSettings, GroupSettings,
   AlertSettings, UsersIndex, etc.) all render verbatim inside
   the restyled card. No JS changes needed.

   Full sub-tab-per-section structure (Account → 5 sub-tabs,
   etc., per mockup commit 0dc0f5f) is DEFERRED to polish — first
   pass just refreshes the outer chrome.
   ============================================================ */

body.vds-shell .settings-page {
  display: grid;
  grid-template-columns: var(--settings-nav-width) 1fr;
  gap: var(--space-4);
  padding: var(--space-4);
  max-width: var(--content-max-width);
  margin: 0 auto;
  background: var(--gray-50);
  min-height: calc(100vh - var(--nav-height));
}
@media (max-width: 900px) {
  body.vds-shell .settings-page {
    grid-template-columns: 1fr;
  }
}

/* Sidebar — restyled nav rail */
body.vds-shell .settings-sidebar {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3);
  position: sticky;
  top: calc(var(--nav-height) + var(--space-4));
  align-self: start;
  max-height: calc(100vh - var(--nav-height) - var(--space-8));
  overflow-y: auto;
}
body.vds-shell .settings-sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.vds-shell .settings-sidebar li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-600);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
  background: transparent;
}
body.vds-shell .settings-sidebar li:hover {
  background: var(--gray-50);
  color: var(--gray-900);
}
body.vds-shell .settings-sidebar li.active {
  background: var(--vidaria-blue-tint);
  color: var(--vidaria-blue);
  font-weight: var(--font-weight-bold);
}

/* Main content card */
body.vds-shell .settings-content,
body.vds-shell .settings-page > main,
body.vds-shell .settings-page > section {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  min-width: 0;
}

/* Form input restyle — only inside the settings page chrome */
body.vds-shell .settings-page input[type="text"],
body.vds-shell .settings-page input[type="email"],
body.vds-shell .settings-page input[type="tel"],
body.vds-shell .settings-page input[type="password"],
body.vds-shell .settings-page input[type="number"],
body.vds-shell .settings-page input[type="search"],
body.vds-shell .settings-page select,
body.vds-shell .settings-page textarea {
  height: 36px;
  padding: 0 var(--space-3);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--gray-900);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
body.vds-shell .settings-page textarea { height: auto; min-height: 80px; padding: var(--space-2) var(--space-3); }
body.vds-shell .settings-page input:focus,
body.vds-shell .settings-page select:focus,
body.vds-shell .settings-page textarea:focus {
  border-color: var(--vidaria-blue);
  box-shadow: 0 0 0 3px var(--vidaria-blue-tint);
}

/* Buttons inside settings get the new shell pill treatment */
body.vds-shell .settings-page .gs-nav__pill {
  /* SettingsSectionNav pills — when used in nested headers inside sections */
  background: transparent;
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
}
body.vds-shell .settings-page .gs-nav__pill--active {
  background: var(--vidaria-blue);
  border-color: var(--vidaria-blue);
  color: var(--white);
}

/* Section headings */
body.vds-shell .settings-page h2,
body.vds-shell .settings-page h3 {
  color: var(--gray-900);
  font-weight: var(--font-weight-bold);
}
body.vds-shell .settings-page h2 {
  font-size: var(--font-size-xl);
  margin: 0 0 var(--space-2);
}
body.vds-shell .settings-page h3 {
  font-size: var(--font-size-lg);
  margin: var(--space-4) 0 var(--space-2);
}

/* Subtle dividers between sections */
body.vds-shell .settings-page hr {
  border: none;
  border-top: 1px solid var(--gray-150);
  margin: var(--space-4) 0;
}