/* aeo-audit: settings — customer-facing Settings page (Round 17 / D-098).
 * Three-section layout (Account, Competitors, Notifications) with a single
 * form that POSTs to api/save-settings.php. Inline error messages per field;
 * flash message above the form for save success/failure.
 */

.aeo-settings {
    max-width: 56rem;
    margin: 1.5rem auto;
    padding: 0 1.25rem;
}

.aeo-settings__header {
    margin-bottom: 1.5rem;
}
.aeo-settings__title {
    font-size: 1.875rem;
    font-weight: 800;
    color: rgb(31 41 55);
    margin: 0 0 0.25rem 0;
}
.dark .aeo-settings__title { color: #ffffff; }
.aeo-settings__subtitle {
    font-size: 0.9375rem;
    color: rgb(107 114 128);
    margin: 0;
}
.dark .aeo-settings__subtitle { color: rgb(209 213 219); }

/* Flash message above the form (success / error). Hidden by default. */
.aeo-settings__flash {
    display: none;
    padding: 0.875rem 1.125rem;
    border-radius: 0.625rem;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
    border-left: 4px solid transparent;
}
.aeo-settings__flash.is-visible { display: block; }
.aeo-settings__flash--success {
    background-color: rgba(22, 163, 74, 0.10);
    border-left-color: #16a34a;
    color: rgb(22 101 52);
}
.dark .aeo-settings__flash--success {
    background-color: rgba(74, 222, 128, 0.10);
    color: rgb(187 247 208);
}
.aeo-settings__flash--error {
    background-color: rgba(220, 38, 38, 0.10);
    border-left-color: #dc2626;
    color: rgb(127 29 29);
}
.dark .aeo-settings__flash--error {
    background-color: rgba(248, 113, 113, 0.12);
    color: rgb(254 202 202);
}

/* Each section is its own card. */
.aeo-settings__section {
    border-radius: 0.875rem;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04);
}
.dark .aeo-settings__section {
    background-color: rgb(31 41 55);
    border-color: rgb(75 85 99);
}
.aeo-settings__section-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: rgb(31 41 55);
    margin: 0 0 0.375rem 0;
}
.dark .aeo-settings__section-title { color: #ffffff; }
.aeo-settings__section-desc {
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgb(107 114 128);
    margin: 0 0 1rem 0;
}
.dark .aeo-settings__section-desc { color: rgb(209 213 219); }

/* D-107 / D-108 — small italic clarifier slot above a settings section's
 * fields. Originally introduced (D-107) for the competitor URL "saved for
 * upcoming feature" note; that note was removed in Round 30 (D-108) once
 * the feature shipped, but the CSS rule is retained — zero cost, reusable
 * for future "saved for X" notes (e.g. notification preferences when
 * automated emails ship). The rule has no current call sites. */
.aeo-settings__section-note {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: rgb(107 114 128);
    margin: -0.25rem 0 1rem 0;
}
.dark .aeo-settings__section-note { color: rgb(209 213 219); }

/* Read-only key/value display in Section 1. */
.aeo-settings__readonly {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) 1fr;
    column-gap: 1rem;
    row-gap: 0.5rem;
    margin: 0;
}
.aeo-settings__readonly dt {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgb(107 114 128);
    align-self: center;
}
.dark .aeo-settings__readonly dt { color: rgb(156 163 175); }
.aeo-settings__readonly dd {
    margin: 0;
    font-size: 0.9375rem;
    color: rgb(31 41 55);
    word-break: break-word;
}
.dark .aeo-settings__readonly dd { color: rgb(243 244 246); }
.aeo-settings__readonly-empty {
    color: rgb(156 163 175);
    font-style: italic;
}
.aeo-settings__readonly a { color: var(--bg-primary); text-decoration: none; }
.aeo-settings__readonly a:hover { text-decoration: underline; }

/* Form fields. */
.aeo-settings__field {
    margin-bottom: 0.875rem;
}
.aeo-settings__field label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgb(55 65 81);
    margin-bottom: 0.25rem;
}
.dark .aeo-settings__field label { color: rgb(229 231 235); }
.aeo-settings__field input[type="url"],
.aeo-settings__field input[type="text"] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(209 213 219);
    background-color: #ffffff;
    color: rgb(31 41 55);
    font-size: 0.9375rem;
    font-family: inherit;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.dark .aeo-settings__field input[type="url"],
.dark .aeo-settings__field input[type="text"] {
    background-color: rgb(55 65 81);
    border-color: rgb(75 85 99);
    color: rgb(243 244 246);
}
.aeo-settings__field input:focus {
    outline: none;
    border-color: var(--bg-primary);
    box-shadow: 0 0 0 3px rgb(var(--bg-primary-rgb) / 0.18);
}

.aeo-settings__field--invalid input {
    border-color: #dc2626;
}
.aeo-settings__field--invalid input:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}

.aeo-settings__field-error {
    display: none;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: #dc2626;
}
.dark .aeo-settings__field-error { color: #f87171; }
.aeo-settings__field-error.is-visible { display: block; }

.aeo-settings__field--checkbox label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    cursor: pointer;
}
.aeo-settings__field--checkbox input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--bg-primary);
}

.aeo-settings__hint {
    font-size: 0.75rem;
    color: rgb(107 114 128);
    margin: 0.5rem 0 0 0;
    line-height: 1.5;
}
.dark .aeo-settings__hint { color: rgb(156 163 175); }
.aeo-settings__hint strong { color: rgb(55 65 81); }
.dark .aeo-settings__hint strong { color: rgb(229 231 235); }

/* Save button row. */
.aeo-settings__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

@media (max-width: 767px) {
    .aeo-settings { padding: 0 0.875rem; }
    .aeo-settings__section { padding: 1.125rem 1rem; }
    .aeo-settings__readonly {
        grid-template-columns: 1fr;
        row-gap: 0.875rem;
    }
    .aeo-settings__readonly dt { margin-bottom: -0.25rem; }
    .aeo-settings__actions { justify-content: stretch; }
    .aeo-settings__actions .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .aeo-settings__field input { transition: none; }
}