/* Phase G — Settings page surface styles. */
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--bs-border-color, #f1eff4);
}
.setting-row:last-child { border-bottom: none; }

.color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .15s, border-color .15s;
}
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.selected { border-color: #181C32; transform: scale(1.15); }
.swatch-primary { background: #3699FF; }
.swatch-success { background: #50CD89; }
.swatch-info { background: #7239EA; }
.swatch-warning { background: #FFC700; }
.swatch-danger { background: #F1416C; }
.swatch-dark { background: #181C32; }

[data-setting-widget] select.form-select {
  width: auto;
  min-width: 160px;
}

/* Quick settings modal — compact left nav + right content split. */
.settings-modal-body {
  min-height: 420px;
  max-height: 70vh;
}
.settings-modal-body .setting-row {
  padding: 10px 0;
}

/* Full-page settings overlay — fixed viewport panel, not a Bootstrap modal. */
.settings-overlay {
  position: fixed;
  inset: 0;
  background: var(--bs-body-bg, #fff);
  z-index: 1080;
  display: flex;
  flex-direction: column;
}
.settings-overlay-header { flex-shrink: 0; }
.settings-overlay-footer { flex-shrink: 0; }
.settings-overlay-body {
  flex: 1 1 auto;
  min-height: 0;
}
.settings-overlay-nav {
  width: 240px;
}
.settings-overlay-content {
  min-width: 0;
}