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

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

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

    .account-scope h1 {
        color: var(--sheep-green);
        font-weight: 700;
    }

    .account-scope h2 {
        color: var(--sheep-gray);
        font-weight: 500;
    }

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

.account-card {
    background: #ffffff;
    border: 1px solid rgba(44, 119, 68, 0.15);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
}

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

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

.account-scope .nav-pills .nav-link {
    color: var(--sheep-green);
    border-radius: var(--radius);
    opacity: 1;
    transition: var(--transition);
}

    .account-scope .nav-pills .nav-link:hover {
        background-color: rgba(44, 119, 68, 0.08);
        color: var(--sheep-green-dark);
    }

    .account-scope .nav-pills .nav-link.active,
    .account-scope .nav-pills .show > .nav-link {
        background-color: rgba(242, 140, 56, 0.18);
        color: var(--sheep-orange-dark);
        font-weight: 600;
    }

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

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

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

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

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

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

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

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

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

.account-scope .form-control:focus,
.account-scope .form-select:focus,
.account-scope .form-check-input:focus {
    border-color: var(--sheep-green);
    box-shadow: 0 0 0 0.25rem rgba(44, 119, 68, 0.25);
}

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

/* =========================================
   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;
    }
}