/**
 * Account Settings Styles
 * Settings overlay for managing profile, password, and account deletion.
 * Extends the base account-ui.css card/overlay patterns.
 */

/* ── Settings Card ──────────────────────────────────── */

.account-settings {
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
}

.account-settings__body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.5rem);
}

/* ── Sections ───────────────────────────────────────── */

.account-settings__section {
    padding: var(--spacing-sm, 0.5rem) 0;
}

.account-settings__section + .account-settings__section {
    border-top: 1px solid var(--card-border, rgb(0 0 0 / 8%));
}

.account-settings__section-title {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    color: var(--text-primary, #333);
    margin: 0 0 var(--spacing-sm, 0.5rem);
}

/* ── Row (input + save button) ──────────────────────── */

.account-settings__row {
    display: flex;
    gap: var(--spacing-sm, 0.5rem);
    align-items: flex-start;
}

.account-settings__row .account-form__input {
    flex: 1;
    min-width: 0;
}

/* ── Save / Action Buttons ──────────────────────────── */

.account-settings__save-btn {
    padding: 10px 16px;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 500;
    font-family: var(--font-primary, -apple-system, blinkmacsystemfont, sans-serif);
    color: var(--text-primary, #333);
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--card-border, rgb(0 0 0 / 12%));
    border-radius: var(--border-radius-md, 8px);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    white-space: nowrap;
    margin-top: var(--spacing-sm, 0.5rem);
}

.account-settings__save-btn:hover:not(:disabled) {
    background: var(--bg-tertiary, #fafafa);
    border-color: var(--text-muted, #767676);
}

.account-settings__save-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.account-settings__save-btn:focus-visible {
    outline: 2px solid var(--accent-color, #06c);
    outline-offset: 2px;
}

/* ── Select (auto-lock dropdown) ────────────────────── */

.account-settings__select {
    appearance: auto;
    cursor: pointer;
    max-width: 200px;
}

/* ── Danger Zone ────────────────────────────────────── */

.account-settings__danger .account-settings__section-title {
    color: var(--color-error, #ef4444);
}

.account-settings__delete-btn {
    padding: 10px 16px;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 500;
    font-family: var(--font-primary, -apple-system, blinkmacsystemfont, sans-serif);
    color: #fff;
    background: var(--color-error, #ef4444);
    border: none;
    border-radius: var(--border-radius-md, 8px);
    cursor: pointer;
    transition: background-color 0.15s, transform 0.1s;
    margin-top: var(--spacing-sm, 0.5rem);
}

.account-settings__delete-btn:hover {
    background: #dc2626;
    transform: translateY(-1px);
}

.account-settings__delete-btn:active {
    transform: translateY(0);
}

.account-settings__delete-btn:focus-visible {
    outline: 2px solid var(--color-error, #ef4444);
    outline-offset: 2px;
}

/* ── Delete Confirmation ────────────────────────────── */

.account-settings__confirm-delete {
    margin-top: var(--spacing-sm, 0.5rem);
    padding: var(--spacing-sm, 0.5rem);
    background: rgb(239 68 68 / 5%);
    border: 1px solid rgb(239 68 68 / 20%);
    border-radius: var(--border-radius-md, 8px);
}

.account-settings__confirm-msg {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-error, #ef4444);
    font-weight: 500;
    margin: 0 0 var(--spacing-sm, 0.5rem);
}

.account-settings__confirm-row {
    display: flex;
    gap: var(--spacing-sm, 0.5rem);
}

/* ── Responsive ─────────────────────────────────────── */

@media (max-width: 480px) {
    .account-settings {
        max-height: 85vh;
    }

    .account-settings__row {
        flex-direction: column;
    }
}