/* =========================================================
   SETTINGS-THEME.CSS
   Tokenized visual cleanup layer for Settings.
========================================================= */

/* =========================================================
   1. SETTINGS PAGE SHELL
========================================================= */
.settings-page,
.settings-layout,
.settings-content,
.settings-sidebar {
  color: var(--app-text);
}

/* =========================================================
   2. SETTINGS PANELS / SECTIONS
========================================================= */
.settings-header,
.settings-section,
.settings-card,
.settings-sidebar,
.settings-accordion .accordion-item {
  background: var(--app-surface) !important;
  border: 1px solid var(--app-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-md) !important;
  color: var(--app-text) !important;
}

.settings-header h1,
.settings-section h2,
.settings-section h3,
.settings-sidebar h2,
.settings-sidebar h3,
.settings-sidebar strong {
  color: var(--app-text) !important;
}

.settings-header .text-muted,
.settings-section .text-muted,
.settings-sidebar .text-muted,
.settings-sidebar small {
  color: var(--app-text-muted) !important;
}

/* =========================================================
   3. SETTINGS SIDEBAR
========================================================= */
.settings-sidebar {
  background: var(--app-sidebar-bg) !important;
}

.settings-sidebar .nav-link,
.settings-sidebar button,
.settings-sidebar a {
  color: var(--app-text-muted) !important;
  border-radius: var(--radius-md);
}

.settings-sidebar .nav-link:hover,
.settings-sidebar button:hover,
.settings-sidebar a:hover {
  background: color-mix(in srgb, var(--app-primary), transparent 92%) !important;
  color: var(--app-text) !important;
}

.settings-sidebar .nav-link.active,
.settings-sidebar button.active,
.settings-sidebar a.active {
  background: color-mix(in srgb, var(--app-primary), transparent 84%) !important;
  color: var(--app-text) !important;
  font-weight: 700;
}

/* =========================================================
   4. ACCORDIONS
========================================================= */
.settings-accordion .accordion-button {
  background: var(--app-surface-muted) !important;
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
}

.settings-accordion .accordion-button:not(.collapsed) {
  background: color-mix(in srgb, var(--app-primary), transparent 92%) !important;
  color: var(--app-text) !important;
  box-shadow: none !important;
}

.settings-accordion .accordion-body {
  background: var(--app-surface) !important;
  color: var(--app-text) !important;
}

/* =========================================================
   5. SETTINGS FORMS
========================================================= */
.settings-page .form-control,
.settings-page .form-select,
.settings-page textarea {
  background: var(--app-input-bg) !important;
  border-color: var(--app-border) !important;
  color: var(--app-input-text) !important;
}

.settings-page .form-control:focus,
.settings-page .form-select:focus,
.settings-page textarea:focus {
  border-color: var(--app-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary), transparent 82%) !important;
}

.settings-page label {
  color: var(--app-text) !important;
}

/* =========================================================
   6. SETTINGS ACTION BARS
========================================================= */
.settings-save-bar,
.settings-toolbar {
  background: color-mix(in srgb, var(--app-surface), transparent 6%) !important;
  border-color: var(--app-border) !important;
  color: var(--app-text) !important;
}