/* ==========================================================================
   Settings: shared styles for the main menu view (SettingsView) and the
   ingame dialog (HUDSettings). Markup is rendered by js/shared/ui/SettingsTabs.js,
   js/shared/ui/SettingsFormRenderer.js (tabs: jQuery UI Tabs widget with its own theme).
   ========================================================================== */

/* Main menu view (Kachel `.menu-page`, Kopfzeile `.menu-page-head` in menu.css) */
.settings-widget {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: var(--gap-inner);
}

.settings-save-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: var(--fs-label);
    color: var(--clr-text-muted);
}

.settings-save-status-warning {
    color: var(--clr-status-warning);
}

/* Tab content (the tabs themselves use the jQuery UI Tabs widget and its theme) */
.settings-tab-content,
.settings-form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-inner);
}

.settings-section {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
}

.settings-section-title {
    margin: 0;
    padding-bottom: 0.25em;
    font-family: var(--font-narrow);
    font-size: var(--fs-btn);
    color: var(--clr-secondary-main);
    text-transform: uppercase;
    border-bottom: 1px solid var(--clr-border-light);
}

.settings-fields {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
}

.settings-row {
    display: grid;
    grid-template-columns: minmax(10em, 1fr) minmax(10em, 1.2fr);
    align-items: center;
    gap: 0.3em 1em;
}

.settings-row-checkbox {
    grid-template-columns: 1fr;
}

/* Schalter (global.css) im selben Raster wie die übrigen Zeilen: Beschriftung in der ersten
   Spalte, die Schiene am Anfang der zweiten – dort, wo Auswahllisten und Slider beginnen */
.settings-row-checkbox .switch {
    display: grid;
    grid-template-columns: minmax(10em, 1fr) minmax(10em, 1.2fr);
    column-gap: 1em;
}

.settings-row-checkbox .switch-track {
    justify-self: start;
}

.settings-label,
.settings-row .switch-label {
    font-size: var(--fs-label);
    color: var(--clr-text-primary);
}

/* Untergeordnete Schalter (Schema-Attribut `parent`), gesperrt solange der Hauptschalter aus ist:
   Beschriftung eingerückt an einer Petrol-Linie wie `.switch.is-sub` */
.settings-row-sub .switch-label {
    padding-left: 1rem;
    border-left: 2px solid var(--clr-secondary-subtle);
}

.settings-row-sub .settings-hint {
    padding-left: calc(1rem + 2px);
}

.settings-control {
    display: flex;
    align-items: center;
}

.settings-select {
    width: 100%;
}

.settings-slider-wrap {
    gap: 1em;
    width: 100%;
}

.settings-slider {
    flex: 1;
}

.settings-slider-value {
    min-width: 3.5em;
    text-align: right;
    font-family: var(--font-narrow);
    font-size: var(--fs-label);
    color: var(--clr-text-muted);
}

.settings-hint {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--fs-label);
    color: var(--clr-text-muted);
}

/* Knopf unter einem Feld (Schema-Attribut `action`), z. B. „Reset Tutorials" */
.settings-row-action {
    grid-column: 1 / -1;
    display: flex;
}

.settings-tab-actions {
    display: flex;
    justify-content: flex-end;
}

/* Controls tab: hotkey overview (js/shared/ui/HotkeyOverview.js) */
.hotkey-cap {
    display: inline-block;
    min-width: 1.6em;
    padding: 0.1em 0.45em;
    font-family: var(--font-narrow);
    font-size: var(--fs-label);
    text-align: center;
    color: var(--clr-text-primary);
    background: var(--clr-surface-input);
    border: 1px solid var(--clr-border-light);
    border-bottom-width: 2px;
    border-radius: 0.3em;
    white-space: nowrap;
}

.hotkey-plus,
.hotkey-or {
    padding: 0 0.3em;
    font-size: var(--fs-label);
    color: var(--clr-text-muted);
}

/* Controls tab: controllers and their profiles (js/shared/ui/GamepadSettingsPanel.js) */
.gamepad-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-inner);
}

.gamepad-list.is-disabled {
    opacity: 0.55;
}

.gamepad-card {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    padding: var(--pad-card);
    background: var(--clr-surface-subcard);
    border: 1px solid var(--clr-border-light);
}

.gamepad-card-head {
    display: flex;
    align-items: center;
    gap: 0.6em;
    color: var(--clr-text-primary);
}

.gamepad-card-name {
    font-family: var(--font-narrow);
    font-size: var(--fs-btn);
}

.gamepad-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5em;
}

/* Mapping dialog content (js/shared/ui/GamepadMappingDialog.js) */
.gamepad-map {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
}

.gamepad-map-progress {
    margin: 0;
    font-size: var(--fs-label);
    color: var(--clr-text-muted);
}

.gamepad-map-prompt {
    margin: 0;
    font-size: var(--fs-btn);
    color: var(--clr-text-primary);
}

/* Password strength bar (registration and account password change) */
.pw-strength-track {
    height: 0.35em;
    background: var(--clr-surface-dark);
    overflow: hidden;
}

.pw-strength-bar {
    height: 100%;
    width: 0;
    transition: width 0.3s, background-color 0.3s;
}

.pw-strength-weak {
    background-color: var(--clr-status-danger);
}

.pw-strength-medium {
    background-color: var(--clr-status-warning);
}

.pw-strength-strong {
    background-color: var(--clr-status-success);
}

/* Account forms (nickname, email, password) */
.settings-account-form {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
    max-width: 30em;
}

.settings-account-message {
    font-size: var(--fs-label);
}

.settings-account-message-ok {
    color: var(--clr-status-success);
}

.settings-account-message-error {
    color: var(--clr-status-danger);
}

.settings-section-title-danger {
    color: var(--clr-status-danger);
}

.settings-delete-list {
    margin: 0;
    padding-left: 1.4em;
    font-size: var(--fs-label);
    color: var(--clr-text-muted);
}

.settings-pending-note {
    display: flex;
    align-items: center;
    gap: 0.6em;
    flex-wrap: wrap;
    padding: 0.6em 0.9em;
    font-size: var(--fs-label);
    color: var(--clr-text-primary);
    background: var(--clr-primary-subtle);
    border: 1px solid var(--clr-primary-main);
}

/* Placeholders (friends, login required) */
.settings-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6em;
    padding: 2em 1em;
    text-align: center;
}

.settings-placeholder-icon {
    font-size: 2.5em;
    color: var(--clr-text-muted);
}

/* Account */
.settings-profile {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4em 1.5em;
    margin: 0;
    font-size: var(--fs-label);
}

.settings-profile dt {
    color: var(--clr-text-muted);
}

.settings-profile dd {
    margin: 0;
    font-weight: 600;
    color: var(--clr-text-primary);
}

.settings-planned-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
    gap: 0.6em;
}

.settings-planned-card {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.6em 0.9em;
    font-size: var(--fs-label);
    color: var(--clr-text-muted);
    background: var(--clr-surface-dark);
    border: 1px solid var(--clr-border-light);
}

.settings-planned-card .badge {
    margin-left: auto;
}

.settings-planned-card-danger {
    color: var(--clr-status-danger);
}

/* Verknüpfte Logins und E-Mail-Bestätigung im Konto-Tab (Todo-Phase 6, Punkte 1 und 2) */
.account-identities {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.account-identity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6em;
    padding: 0.6em 0.9em;
    background: var(--clr-surface-dark);
    border: 1px solid var(--clr-border-light);
}

.account-verified {
    margin: 0.6em 0 0 0;
    color: var(--clr-status-success);
    font-size: var(--fs-label);
}

.account-unverified {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5em;
    margin-top: 0.6em;
    padding: var(--pad-card);
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid var(--clr-status-warning);
}

.account-unverified .widget-text {
    margin: 0;
}

/* Ingame dialog content */
.settings-dialog-content {
    display: flex;
    flex-direction: column;
    gap: 1em;
}