/**
 * Styles spécifiques à la page d'installation (setup).
 * Nécessite common.css chargé en amont.
 */

/* ===== Layout ===== */
.setup {
    max-width: 520px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* ===== Hero ===== */
.setup__hero {
    text-align: center;
    margin-bottom: 2rem;
}

.setup__hero h1 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.setup__hero p {
    color: var(--color-text-light);
    font-size: 0.9rem;
}

.setup__domain {
    display: inline-block;
    background: var(--color-bg);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    font-family: monospace;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

/* ===== Card ===== */
.setup__card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.5rem;
}

/* ===== Formulaire ===== */
.setup__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.setup__submit {
    width: 100%;
}

/* ===== Steps ===== */
.setup__steps {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    color: var(--color-text-light);
    font-size: 0.8rem;
}

.setup__step {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.setup__step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
}

.setup__step--active .setup__step-number {
    background: var(--color-primary);
    color: var(--color-white);
}

.setup__step--done .setup__step-number {
    background: var(--color-success);
    color: var(--color-white);
}

.setup__step--pending .setup__step-number {
    background: var(--color-border);
    /* var(--color-text) sur var(--color-border) #e5e7eb : >12:1 — conforme WCAG AA */
    color: var(--color-text);
}

/* ===== Erreur serveur ===== */
.setup__server-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: var(--color-danger);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

/* ===== Vérification DNS ===== */
.verify__instructions {
    margin-bottom: 1rem;
}

.verify__instructions p {
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.verify__record {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.verify__field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.verify__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.verify__value {
    font-size: 0.85rem;
    word-break: break-all;
    padding: 0.35rem 0.5rem;
    background: var(--color-white);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

/* Bouton de copie DNS (cf. S2 audit a11y) : reset visuel pour rester identique au <code> original */
.verify__value--copyable {
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background-color 0.15s, border-color 0.15s;
}

.verify__value--copyable code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    background: none;
}

.verify__value--copyable:hover,
.verify__value--copyable:focus-visible {
    border-color: var(--color-primary);
}

.verify__value--copyable:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.verify__value--copied {
    background: #f0fdf4;
    border-color: var(--color-success);
}

.verify__propagation {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.verify__expiration {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text-light);
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    line-height: 1.5;
    margin-top: 0.75rem;
}

.verify__regenerate-form {
    margin-top: 0.75rem;
    text-align: center;
}

.verify__regenerate {
    font-size: 0.8rem;
}

/* ===== Page succès ===== */
.setup__success {
    text-align: center;
    padding: 1rem 0;
}

.setup__success-message {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-success);
    margin-bottom: 0.75rem;
}

.setup__success-detail {
    font-size: 0.875rem;
    color: var(--color-text-light);
    margin-bottom: 1.5rem;
}

.setup__success-link {
    display: inline-flex;
}

/* ===== Page login ===== */
.login__forgot {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.8rem;
}

.login__forgot-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-text-light);
    text-decoration: underline;
    cursor: pointer;
}

.login__forgot-link:hover {
    color: var(--color-text);
}

.login__forgot-message {
    text-align: center;
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--color-text-light);
}

.login__forgot-message a {
    color: var(--color-primary);
}

/* ===== Footer ===== */
.setup__footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.8rem;
    color: var(--color-text-light);
}