/* Public pages (imprint, privacy): same layout as login via login_minimal – theme/font from parent */
body.page-login,
body.public-page {
    background-color: var(--bs-gray-100) !important;
    color: var(--bs-body-color) !important;
}

body.public-page .login-page-layout {
    padding-top: 0;
}

.public-page-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    flex: 1;
    box-sizing: border-box;
    width: 100%;
    overflow-x: hidden;
}

.public-header {
    flex-shrink: 0;
    padding: 1.5rem 2rem;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.public-header-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.public-header-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.public-header-title {
    margin: 0.5rem 0 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

.header-logo-link {
    display: inline-block;
    text-decoration: none;
    border-radius: 4px;
}

.header-logo-link:focus-visible {
    outline: 3px solid var(--form-input-focus-border-color);
    outline-offset: 4px;
}

.header-logo {
    max-height: 56px;
    width: auto;
    display: block;
}

.public-main {
    flex: 1;
    padding: 2rem;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* Legal pages (imprint, privacy) */
.legal-page {
    background: var(--bs-body-bg);
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    max-width: 100%;
}

.legal-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.legal-page-header h1 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

.legal-page h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 1.5rem 0 0.75rem;
    color: var(--bs-body-color);
}

.legal-page p {
    margin: 0 0 1rem;
    line-height: 1.7;
    color: var(--bs-body-color);
}

.legal-page .btn-back {
    white-space: nowrap;
}

/* Footer in public layout: not fixed, at end of content */
.public-page-wrapper .dashboard-footer {
    position: static;
    margin-top: auto;
    flex-shrink: 0;
}

.public-page-wrapper .footer-version {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

/* ==========================================================================
   A11y Keyboard Navigation (focus rings for public & login pages)
   ========================================================================== */

:root, [data-bs-theme="light"] {
    --a11y-focus-color: #0d6efd;
}

[data-bs-theme="dark"] {
    --a11y-focus-color: #3d8bfd;
}

.login-wrapper .form-control:focus-visible,
.public-page-wrapper .form-control:focus-visible {
    outline: 3px solid var(--a11y-focus-color) !important;
    outline-offset: 0px !important;
    box-shadow: none !important;
}

.login-wrapper .form-check-input:focus-visible,
.public-page-wrapper .form-check-input:focus-visible {
    outline: 2px solid var(--a11y-focus-color) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
    border-radius: 4px !important;
}

.login-wrapper .btn:focus-visible,
.public-page-wrapper .btn:focus-visible {
    outline: 3px solid var(--a11y-focus-color) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

.login-wrapper a:focus-visible,
.dashboard-footer a:focus-visible,
.legal-page a:focus-visible {
    outline: 3px solid var(--a11y-focus-color) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
    border-radius: 2px !important;
}

.header-logo-link:focus-visible {
    outline: 3px solid var(--a11y-focus-color) !important;
    outline-offset: 4px !important;
    box-shadow: none !important;
}


/* ==========================================================================
   Native System Dark Mode Overrides (F5 Persistent & Immune to JS)
   ========================================================================== */

@media (prefers-color-scheme: dark) {

    /* 1. Base page backgrounds */
    body.page-login,
    body.public-page,
    .login-page-layout,
    .public-page-wrapper {
        background-color: var(--bs-gray-950) !important;
        color: var(--bs-gray-200) !important;
    }

    /* 2. Main Login Card (.login-wrapper)
       Restores the shadow and adds a subtle border for dark mode contrast */
    .login-wrapper .content, .legal-page {
        background-color: var(--bs-gray-900) !important;
        border: 1px solid var(--bs-gray-800) !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.65) !important
    }

    /* 3. Make inner containers transparent to let the card background shine through */
    .login-wrapper .main-header,
    .legal-page .content {
        background-color: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* 4. Form Inputs & Fields */
    .login-wrapper .form-control,
    .public-page-wrapper .form-control {
        background-color: var(--bs-gray-800) !important;
        border: 1px solid var(--bs-gray-700) !important;
        color: var(--bs-gray-100) !important;
        box-shadow: none !important;
    }

    /* 5. Typography & Text (Extended for all heading levels & utilities) */
    .login-wrapper label,
    .login-wrapper p,
    .login-wrapper .form-check-label,
    .login-wrapper .form-text a,
    .public-header-title,
    .dashboard-footer,
    .legal-page p,
    .legal-page div {
        color: var(--bs-gray-200) !important;
    }
    /* Targets headings on legal pages AND the login/password screens */
    .legal-page h1, .legal-page h2, .legal-page h3, .legal-page h4, .legal-page h5, .legal-page h6,
    .login-wrapper h1, .login-wrapper h2, .login-wrapper h3, .login-wrapper h4, .login-wrapper h5, .login-wrapper h6,
    .h1, .h2, .h3, .h4, .h5, .h6,
    .legal-page strong,
    .legal-page .text-dark {
        color: var(--bs-gray-100) !important;
    }
    /* Adjusts soft muted texts for dark mode readability */
    .legal-page .text-muted {
        color: var(--bs-gray-400) !important;
    }
    /* Footer Links */
    .dashboard-footer a {
        color: var(--bs-link-color) !important;
    }

    /* 6. Public Layout Header & Footer tweaks*/
    .public-header {
        background: var(--bs-gray-950) !important;
        border-bottom: 1px solid var(--bs-gray-800) !important;
    }
    .public-page-wrapper .footer-version {
        color: var(--bs-gray-500) !important;
    }
    /* Fixes the native Bootstrap divider lines inside the raw legal content */
    .legal-page .border-top,
    .legal-page .border-bottom {
        border-color: var(--bs-gray-800) !important;
    }

    /*  7. Legal & Public Action Buttons (must use html directly otherwise cannot reach secondary buttons) */
    html body .btn.btn-secondary.btn-back,
    html body a.btn.btn-secondary.btn-back {
        background-color: var(--bs-gray-800) !important;
        border-color: var(--bs-gray-700) !important;
        color: var(--bs-gray-100) !important;
        background-image: none !important;
        box-shadow: none !important;
    }
    html body .btn.btn-secondary.btn-back:hover,
    html body a.btn.btn-secondary.btn-back:hover,
    html body .btn.btn-secondary.btn-back:focus,
    html body a.btn.btn-secondary.btn-back:focus {
        background-color: var(--bs-gray-700) !important;
        border-color: var(--bs-gray-600) !important;
        color: var(--bs-gray-50) !important;
    }
}