/* BMSDock Settings UI Standardization — UI 1.0.4
   Scope: Settings modal only. Layout behavior remains in style.css. */

#settingsOverlay{
  --settings-header-size:18px;
  --settings-text-size:14px;
  --settings-meta-size:12px;
  --settings-title-weight:700;
  --settings-text-weight:400;
  --settings-control-height:42px;
  --settings-action-height:44px;
  --settings-control-radius:10px;
  --settings-section-radius:14px;
}

/* Header */
#settingsOverlay .settings-panel-title{
  font-size:var(--settings-header-size) !important;
  font-weight:var(--settings-title-weight) !important;
  line-height:1.2 !important;
}

/* Section titles keep visual priority. */
#settingsOverlay .settings-section-title,
#settingsOverlay .motor-settings-section .settings-section-title{
  font-size:var(--settings-text-size) !important;
  font-weight:var(--settings-title-weight) !important;
  line-height:1.3 !important;
}

/* Field labels are regular body text so they do not compete with section titles. */
#settingsOverlay .graph-setting-label{
  font-size:var(--settings-text-size) !important;
  font-weight:var(--settings-text-weight) !important;
  line-height:1.3 !important;
  color:#94a3b8 !important;
}

/* Description / secondary text */
#settingsOverlay .settings-section-sub,
#settingsOverlay .settings-hint,
#settingsOverlay .settings-diagnostics{
  font-size:var(--settings-text-size) !important;
  font-weight:var(--settings-text-weight) !important;
  line-height:1.4 !important;
}

/* Unified sections */
#settingsOverlay .settings-section{
  border-radius:var(--settings-section-radius) !important;
}

/* Unified form controls */
#settingsOverlay .settings-select,
#settingsOverlay .settings-input,
#settingsOverlay .settings-section select.settings-select,
#settingsOverlay .graph-setting-select,
#settingsOverlay #motorPresetSelect{
  min-height:var(--settings-control-height) !important;
  height:var(--settings-control-height) !important;
  border-radius:var(--settings-control-radius) !important;
  font-family:inherit !important;
  font-size:var(--settings-text-size) !important;
  font-weight:var(--settings-text-weight) !important;
  line-height:1.2 !important;
}

/* Selected values in graph/map dropdowns carry the emphasis.
   IDs are included deliberately to beat legacy Stage rules without affecting language controls. */
#settingsOverlay #graphSmoothingModeSelect,
#settingsOverlay #graphLineWidthSelect,
#settingsOverlay #mapPointSizeSelect,
#settingsOverlay .graph-setting-select,
#settingsOverlay #motorPresetSelect,
#settingsOverlay #polePairsInput{
  font-weight:var(--settings-title-weight) !important;
}

#settingsOverlay #graphSmoothingModeSelect,
#settingsOverlay #graphLineWidthSelect,
#settingsOverlay #mapPointSizeSelect,
#settingsOverlay .graph-setting-select{
  color:#64748b !important;
}

#settingsOverlay .settings-select option,
#settingsOverlay .graph-setting-select option,
#settingsOverlay #motorPresetSelect option{
  font-family:inherit !important;
  font-size:var(--settings-text-size) !important;
}
#settingsOverlay .graph-setting-select option,
#settingsOverlay #motorPresetSelect option{
  font-weight:var(--settings-title-weight) !important;
  color:#64748b !important;
}

/* Settings language follows Description typography */
#settingsOverlay .settings-language-switch .language-dropdown-toggle,
#settingsOverlay .settings-language-switch .language-option{
  font-family:inherit !important;
  font-size:var(--settings-text-size) !important;
  font-weight:var(--settings-text-weight) !important;
}
#settingsOverlay .settings-language-switch .language-dropdown-toggle{
  min-height:var(--settings-control-height) !important;
  height:var(--settings-control-height) !important;
  border-radius:var(--settings-control-radius) !important;
  padding:0 10px 0 12px !important;
}
#settingsOverlay .settings-language-switch .language-option{
  min-height:36px !important;
  height:36px !important;
}

/* Refresh is an icon control, aligned to all other controls */
#settingsOverlay .settings-refresh-btn{
  min-height:var(--settings-control-height) !important;
  height:var(--settings-control-height) !important;
  border-radius:var(--settings-control-radius) !important;
  font-size:18px !important;
  font-weight:var(--settings-title-weight) !important;
}

/* Action buttons */
#settingsOverlay .clear-track-btn.settings-action{
  min-height:var(--settings-action-height) !important;
  height:var(--settings-action-height) !important;
  border-radius:var(--settings-control-radius) !important;
  font-size:var(--settings-text-size) !important;
  font-weight:var(--settings-title-weight) !important;
  line-height:1.2 !important;
}

/* Build is service metadata, intentionally smaller */
#settingsOverlay .settings-build-label{
  font-size:var(--settings-meta-size) !important;
  font-weight:var(--settings-text-weight) !important;
  line-height:1.3 !important;
}

/* Mobile keeps the same typography; only layout remains responsive. */
@media(max-width:520px){
  #settingsOverlay .graph-setting-label{
    font-size:var(--settings-text-size) !important;
  }
}

/* UI 1.0.4 — Settings geometry + motor control normalization */
#settingsOverlay{
  --settings-section-padding:12px;
  --settings-section-gap:12px;
  --settings-row-gap:10px;
  --settings-field-gap:12px;
  --settings-border-color:#e2e8f0;
  --settings-control-bg:#fff;
  --settings-label-color:#94a3b8;
  --settings-value-color:#64748b;
  --settings-focus-ring:rgba(100,116,139,.18);
}

/* One spacing rhythm across the modal. */
#settingsOverlay .settings-card-panel{
  gap:var(--settings-section-gap) !important;
}
#settingsOverlay .settings-section{
  padding:var(--settings-section-padding) !important;
  border-color:var(--settings-border-color) !important;
}
#settingsOverlay .graph-settings-section,
#settingsOverlay .map-settings-section,
#settingsOverlay .motor-settings-section{
  gap:var(--settings-row-gap) !important;
}
#settingsOverlay .graph-setting-row{
  gap:var(--settings-field-gap) !important;
}

/* Secondary field labels use one neutral treatment everywhere. */
#settingsOverlay .graph-setting-label{
  color:var(--settings-label-color) !important;
  font-size:var(--settings-text-size) !important;
  font-weight:var(--settings-text-weight) !important;
}

/* Shared control geometry. */
#settingsOverlay .settings-select,
#settingsOverlay .settings-input,
#settingsOverlay .graph-setting-select,
#settingsOverlay #motorPresetSelect,
#settingsOverlay #polePairsInput,
#settingsOverlay .settings-language-switch .language-dropdown-toggle,
#settingsOverlay .settings-refresh-btn{
  height:var(--settings-control-height) !important;
  min-height:var(--settings-control-height) !important;
  border:1px solid var(--settings-border-color) !important;
  border-radius:var(--settings-control-radius) !important;
  box-sizing:border-box !important;
}

/* Select/input values: emphasized but neutral — including Motor settings. */
#settingsOverlay #graphSmoothingModeSelect,
#settingsOverlay #graphLineWidthSelect,
#settingsOverlay #mapPointSizeSelect,
#settingsOverlay #motorPresetSelect,
#settingsOverlay #polePairsInput{
  color:var(--settings-value-color) !important;
  font-size:var(--settings-text-size) !important;
  font-weight:var(--settings-title-weight) !important;
  background-color:var(--settings-control-bg) !important;
}
#settingsOverlay #motorPresetSelect option{
  color:var(--settings-value-color) !important;
  font-weight:var(--settings-title-weight) !important;
}

/* Motor row follows the exact same control rhythm as graph/map. */
#settingsOverlay .motor-settings-grid{
  grid-template-columns:minmax(0,1fr) 78px var(--settings-control-height) !important;
  gap:8px !important;
  align-items:center !important;
}
#settingsOverlay .settings-refresh-btn{
  width:var(--settings-control-height) !important;
  color:var(--settings-value-color) !important;
  background:var(--settings-control-bg) !important;
}
#settingsOverlay .settings-hint,
#settingsOverlay .settings-section-sub{
  color:var(--settings-label-color) !important;
}

/* Consistent interaction states for every settings control. */
#settingsOverlay .settings-select:hover,
#settingsOverlay .settings-input:hover,
#settingsOverlay .graph-setting-select:hover,
#settingsOverlay .settings-language-switch .language-dropdown-toggle:hover,
#settingsOverlay .settings-refresh-btn:hover{
  border-color:#cbd5e1 !important;
}
#settingsOverlay .settings-select:focus-visible,
#settingsOverlay .settings-input:focus-visible,
#settingsOverlay .graph-setting-select:focus-visible,
#settingsOverlay .settings-language-switch .language-dropdown-toggle:focus-visible,
#settingsOverlay .settings-refresh-btn:focus-visible{
  outline:none !important;
  border-color:#94a3b8 !important;
  box-shadow:0 0 0 3px var(--settings-focus-ring) !important;
}

@media(max-width:520px){
  #settingsOverlay .graph-setting-row{
    gap:10px !important;
  }
}

/* UI 1.9.7 — shared action bridge; preserves approved Settings visuals. */
#settingsOverlay .clear-track-btn.settings-action {
  height: var(--ui-action-height) !important;
  min-height: var(--ui-action-height) !important;
  border-radius: var(--ui-action-radius) !important;
  font-size: var(--ui-action-font-size) !important;
  font-weight: var(--ui-action-font-weight) !important;
}
#settingsOverlay .clear-track-btn.settings-action.danger {
  background: var(--ui-action-danger-bg) !important;
  color: var(--ui-action-danger-fg) !important;
}