/* =========================================
   Account Pages Styling
   Applies to:
   - Manage pages
   - Login / Register
   - Future Account pages
   ========================================= */

/* Main wrapper */
.account-scope {
    max-width: 1100px;
}

    /* =========================================
   Headings
   ========================================= */

    /* The same lettering as the sign-in and sign-up titles (Benji, 2026-10-13): Nunito, heavy, on
       every title of the account pages. The page title as big as "Connexion"; the card titles
       (Profil, E-mail, Mot de passe...) smaller; the grey line under the page title stays a lead. */
    .account-scope h1,
    .account-scope h2,
    .account-scope h3,
    .account-scope h4 {
        font-family: var(--sheep-display);
        font-weight: 900;
        line-height: 1.1;
        letter-spacing: -0.02em;
        color: var(--sheep-heading, #202124);
    }

    .account-scope h1 {
        font-size: clamp(2.1rem, 3.8vw, 3.1rem);
        line-height: 1.08;
    }

    .account-scope h2 {
        font-size: 1.6rem;
    }

    .account-scope h3 {
        font-size: 1.45rem;
    }

    .account-scope h4 {
        font-size: 1.2rem;
    }

    /* The markup's "fw-bold" would thin them to 700: the same heavy weight everywhere. */
    .account-scope h1.fw-bold,
    .account-scope h2.fw-bold,
    .account-scope h3.fw-bold,
    .account-scope h4.fw-bold {
        font-weight: 900 !important;
    }

    .account-scope h2.text-muted {
        font-family: inherit;
        font-size: 1.02rem;
        font-weight: 500;
        letter-spacing: 0;
        color: var(--sheep-gray) !important;
    }

    [data-theme="dark"] .account-scope h1,
    [data-theme="dark"] .account-scope h2,
    [data-theme="dark"] .account-scope h3,
    [data-theme="dark"] .account-scope h4 {
        color: #e9ebee;
    }

/* =========================================
   Card container (Login/Register/Manage sections)
   ========================================= */

.account-card {
    background: #ffffff;
    border: 1px solid rgba(var(--sheep-accent-dark-rgb, 23, 143, 67), 0.15);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
}

/* Dark mode */
[data-theme="dark"] .account-card {
    background: #152037;
    border-color: rgba(226, 232, 240, 0.12);
}

/* =========================================
   Manage Navigation (nav-pills)
   ========================================= */

/* As the site's menus (Benji, 2026-10-13): dark words, a pale band on mouse-over, the current page
   as a gradient button in the site's colour with white words. */
.account-scope .nav-pills .nav-link {
    color: var(--sheep-dark, #202124);
    border-radius: var(--radius);
    opacity: 1;
    font-weight: 600;
    transition: var(--transition);
}

    .account-scope .nav-pills .nav-link:hover {
        background-color: var(--sheep-accent-soft);
        color: var(--sheep-accent-ink);
    }

    .account-scope .nav-pills .nav-link.active,
    .account-scope .nav-pills .show > .nav-link {
        background: var(--sheep-grad);
        color: #fff;
        font-weight: 700;
        box-shadow: 0 6px 16px rgba(var(--sheep-accent-dark-rgb), 0.24);
    }

/* =========================================
   Buttons
   ========================================= */

.account-scope .btn-primary {
    background-color: var(--sheep-accent);
    border-color: var(--sheep-accent);
    transition: var(--transition);
}

    .account-scope .btn-primary:hover,
    .account-scope .btn-primary:focus {
        background-color: var(--sheep-accent-dark);
        border-color: var(--sheep-accent-dark);
    }

/* Outline primary (used for Passkey button etc.) */
.account-scope .btn-outline-primary {
    color: var(--sheep-accent-dark);
    border-color: var(--sheep-accent-dark);
}

    .account-scope .btn-outline-primary:hover {
        background-color: var(--sheep-accent-dark);
        color: white;
    }

/* =========================================
   Links
   ========================================= */

.account-scope a {
    color: var(--sheep-accent-dark);
    text-decoration: none;
    transition: var(--transition);
}

    .account-scope a:hover {
        color: var(--sheep-accent-ink);
        text-decoration: underline;
    }

    /* A link dressed as a button keeps the button's own words, white on the gradient (Benji,
       2026-10-13): the link colour above painted them in the site's colour, on the same colour. */
    .account-scope a.btn,
    .account-scope a.btn:hover,
    .account-scope a.btn:focus-visible {
        color: var(--bs-btn-color);
        text-decoration: none;
    }

        .account-scope a.btn:hover,
        .account-scope a.btn:focus-visible {
            color: var(--bs-btn-hover-color);
        }

[data-theme="dark"] .account-scope a {
    color: var(--sheep-accent);
}

    [data-theme="dark"] .account-scope a:hover {
        color: var(--sheep-accent-ink);
    }

/* The card titles in the site's heading colour, as everywhere, not green. */
.account-scope .text-sheep-green {
    color: var(--sheep-heading, #202124) !important;
}

/* =========================================
   Forms
   ========================================= */

.account-scope .form-control:focus,
.account-scope .form-select:focus,
.account-scope .form-check-input:focus {
    border-color: var(--sheep-accent);
    box-shadow: 0 0 0 0.25rem rgba(var(--sheep-accent-dark-rgb), 0.25);
}

.account-scope .form-check-input:checked {
    background-color: var(--sheep-accent-dark);
    border-color: var(--sheep-accent-dark);
}

/* =========================================
   Status / Validation
   ========================================= */

.account-scope .text-danger {
    font-weight: 500;
}

.account-scope .validation-summary-errors {
    background: rgba(220, 53, 69, 0.08);
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
}

/* =========================================
   Responsive polish
   ========================================= */

@media (max-width: 991.98px) {
    .account-card {
        padding: 1.25rem;
    }
}

/* =========================================
   The account pages, tidied (Benji, 2026-10-13)
   One title and its lead; the sections' menu on the left (icons, the current one as a gradient
   button), the section in a white card on the right. Phones: the menu is a strip of pills above
   the card. Forms keep a reading width; the actions of a section sit in one row, the main one in
   the site's colour, the others plain, the dangerous ones in red.
   ========================================= */
.manage-layout {
    max-width: 1100px;
}

.manage-head {
    margin-bottom: 22px;
}

.manage-lead {
    margin: 0;
    font-size: 1.02rem;
    color: var(--sheep-gray);
}

.manage-grid {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.manage-nav .nav-pills {
    gap: 4px;
}

.manage-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
}

    .manage-nav .nav-link .bi {
        font-size: 1.15rem;
        line-height: 1;
        flex: 0 0 auto;
    }

.manage-body {
    min-width: 0;
    padding: 28px 32px 32px;
    border: 1px solid var(--surface-border, #e9ebee);
    border-radius: var(--radius-lg, 16px);
    background: var(--surface-bg, #fff);
    box-shadow: 0 4px 16px rgba(32, 33, 36, 0.05);
}

    .manage-body > h3:first-child,
    .manage-body > .manage-panel > h3:first-child,
    .manage-body .status-message + h3,
    .manage-body > h3 {
        margin-bottom: 18px;
    }

    .manage-body h4 {
        margin-top: 28px;
        margin-bottom: 12px;
    }

    /* The forms keep a reading width whatever the card's (the name fields stay side by side). */
    .manage-body .row > .col-xl-6 {
        flex: 0 0 auto;
        width: 100%;
        max-width: 560px;
    }

    .manage-body .manage-panel form,
    .manage-body .manage-text {
        max-width: 680px;
    }

    .manage-body .form-floating > .form-control,
    .manage-body .form-floating > .form-select {
        border-radius: var(--radius, 12px);
    }

    .manage-body .btn-lg {
        padding: 12px 20px;
        font-size: 1rem;
    }

    .manage-body .alert {
        border-radius: var(--radius, 12px);
    }

    .manage-body .table {
        margin-bottom: 20px;
    }

        .manage-body .table td {
            vertical-align: middle;
        }

.manage-text {
    max-width: 560px;
}

.manage-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 6px 0 18px;
}

    .manage-actions form {
        margin: 0;
    }

.manage-panel-danger h3 {
    margin-bottom: 4px;
}

/* Phones and tablets: the menu as a strip of pills, the card below. */
@media (max-width: 991.98px) {
    .manage-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .manage-nav .nav-pills {
        flex-direction: row !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 6px;
        scrollbar-width: none;
    }

        .manage-nav .nav-pills::-webkit-scrollbar {
            display: none;
        }

    .manage-nav .nav-item {
        flex: 0 0 auto;
    }

    .manage-nav .nav-link {
        padding: 9px 14px;
        border-radius: 999px;
        border: 1px solid var(--surface-border-strong, #dadce0);
        white-space: nowrap;
    }

        .manage-nav .nav-link.active {
            border-color: transparent;
        }

    .manage-body {
        padding: 20px 18px 24px;
        border-radius: 16px;
    }
}

[data-theme="dark"] .manage-body {
    background: #152037;
    border-color: rgba(226, 232, 240, 0.12);
}

[data-theme="dark"] .manage-nav .nav-link {
    color: #e9ebee;
}

    [data-theme="dark"] .manage-nav .nav-link:hover {
        background: rgba(var(--sheep-accent-rgb), 0.16);
        color: var(--sheep-accent-ink);
    }

/* =========================================
   The small account pages (Benji, 2026-10-13): forgotten password, confirmations, two-factor
   sign-in, lockout... One centred card, the title in the sign-in page's lettering, the line under
   it as a lead, the form at a reading width, no rule between them.
   ========================================= */
.account-scope .account-card {
    max-width: 680px;
    margin: 0 auto;
    padding: 32px 32px 36px;
}

    .account-scope .account-card > h1 {
        margin-bottom: 6px;
    }

    .account-scope .account-card > h2 {
        margin-bottom: 18px;
        font-family: inherit;
        font-size: 1.02rem;
        font-weight: 500;
        letter-spacing: 0;
        color: var(--sheep-gray);
    }

    .account-scope .account-card > hr {
        display: none;
    }

    .account-scope .account-card .row > [class*="col-"] {
        flex: 0 0 auto;
        width: 100%;
        max-width: 520px;
    }

    .account-scope .account-card .btn-lg {
        padding: 12px 20px;
        font-size: 1rem;
    }

@media (max-width: 575.98px) {
    .account-scope .account-card {
        padding: 22px 18px 26px;
    }
}