/*
 * Stratum Custom CSS — auto-loaded on all authentication pages.
 * Applies the dark slate/navy theme to forgot_password, reset_password,
 * set_password, and two_factor pages without rewriting each PHP file.
 */

/* ── Page background & layout ──────────────────────────────────── */
body.authentication {
    background-color: #0f172a !important;
    min-height: 100vh;
}
/* Ambient glows via pseudo-elements */
body.authentication::before {
    content: '';
    position: fixed;
    top: -10%;
    left: 15%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(99,102,241,0.09) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}
body.authentication::after {
    content: '';
    position: fixed;
    bottom: -15%;
    right: 10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(139,92,246,0.07) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

/* Headings */
body.authentication h1,
body.authentication h2,
body.authentication h3 {
    color: #f1f5f9 !important;
}

/* ── Auth card (tw-bg-white) → dark surface ────────────────────── */
body.authentication .tw-bg-white {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    border-top: 2px solid #6366f1 !important;
    border-radius: 16px !important;
    box-shadow: 0 32px 64px rgba(0,0,0,0.45), 0 0 0 1px rgba(99,102,241,0.06) !important;
}

/* ── Form elements ─────────────────────────────────────────────── */
body.authentication label,
body.authentication .control-label {
    color: #cbd5e1 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}
body.authentication .form-control {
    background-color: #0f172a !important;
    border: 1px solid #2d3f55 !important;
    color: #f1f5f9 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    height: auto !important;
    padding: 10px 14px !important;
}
body.authentication .form-control:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.20) !important;
    outline: none !important;
}
body.authentication .form-control::placeholder {
    color: #3d546e !important;
}

/* Input group addon */
body.authentication .input-group-addon {
    background-color: #0f172a !important;
    border-color: #2d3f55 !important;
    color: #64748b !important;
}

/* ── Buttons ───────────────────────────────────────────────────── */
body.authentication .btn-primary,
body.authentication button[type="submit"].btn-primary {
    background-color: #6366f1 !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    transition: background-color 0.15s !important;
}
body.authentication .btn-primary:hover,
body.authentication .btn-primary:focus {
    background-color: #4f46e5 !important;
    border-color: #4f46e5 !important;
}
body.authentication .btn-link,
body.authentication a {
    color: #818cf8 !important;
}
body.authentication a:hover { color: #a5b4fc !important; }

/* ── Alerts ────────────────────────────────────────────────────── */
body.authentication .alert-danger {
    background-color: rgba(239,68,68,0.10) !important;
    border-color: rgba(239,68,68,0.22) !important;
    color: #fca5a5 !important;
    border-radius: 8px !important;
}
body.authentication .alert-success {
    background-color: rgba(16,185,129,0.10) !important;
    border-color: rgba(16,185,129,0.22) !important;
    color: #6ee7b7 !important;
    border-radius: 8px !important;
}
body.authentication .alert-info {
    background-color: rgba(99,102,241,0.10) !important;
    border-color: rgba(99,102,241,0.22) !important;
    color: #a5b4fc !important;
    border-radius: 8px !important;
}

/* ── 2FA code page extras ──────────────────────────────────────── */
body.two-factor-authentication-code .tw-text-neutral-600 {
    color: #94a3b8 !important;
}

/* ── Fixed-chrome layout ───────────────────────────────────────── */
/*
 * Header is position:fixed (not sticky) so getBoundingClientRect().bottom
 * always returns exactly 57 regardless of scroll or overflow state.
 * This prevents the #setup-close-strip from landing at top:0 and creating
 * the lighter-blue gap between the browser chrome and the logo.
 *
 * Body no longer scrolls — only #wrapper (content area) scrolls.
 * Sidebar and setup-menu-wrapper are both fixed at top:57px.
 */
#header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
}

/* Body locked — no page scroll */
body.admin {
    overflow: hidden !important;
}

/* Content area pushed below the fixed header, scrolls on its own */
body.admin #wrapper {
    margin-top: 57px !important;
    height: calc(100vh - 57px) !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable !important;
}

/* Main sidebar: fixed below header, independently scrollable */
aside#menu {
    position: fixed !important;
    top: 57px !important;
    bottom: 0 !important;
    height: calc(100vh - 57px) !important;
    max-height: calc(100vh - 57px) !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 50 !important;
}

/* Setup menu wrapper: fixed at the same origin as the main sidebar so its
 * content aligns with the close strip (also at top:57px from viewport).
 * pointer-events:none when closed — clicks pass through to the sidebar. */
#setup-menu-wrapper {
    position: fixed !important;
    top: 57px !important;
    bottom: 0 !important;
    height: calc(100vh - 57px) !important;
    max-height: calc(100vh - 57px) !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    z-index: 80 !important;
    pointer-events: none !important;
}

#setup-menu-wrapper.display-block {
    pointer-events: auto !important;
}

/* The wrapper now starts at 57px itself — remove the tw-mt-[57px] offset
 * that was there to compensate for the old position:absolute; top:0 layout */
#setup-menu-wrapper #setup-menu {
    margin-top: 0 !important;
}

/* ── Hide sidebar user profile box ─────────────────────────────── */
.admin #menu .sidebar-user-profile {
    display: none !important;
}

/* Small top breathing room inside the sidebar (no longer needs to clear header) */
.admin #menu #side-menu {
    margin-top: 8px !important;
}

/* ── Setup menu close button ───────────────────────────────────── */
/* Reset the first-child heading-style that style.min.css wrongly applies to the first menu <li> */
#setup-menu > li:first-child {
    padding: 6px 13px !important;
    border-bottom: 0 !important;
    font-weight: 600 !important;
    color: inherit !important;
    margin-bottom: 0 !important;
}

#setup-menu-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px 10px 16px;
    margin-top: 57px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    margin-bottom: 10px;
    font-weight: 600;
    /* no color — inherit from sidebar so it works in both light and dark themes */
    background: inherit;
    position: sticky;
    top: 57px;
    z-index: 2;
    box-sizing: border-box;
}

#setup-menu-header .close-customizer {
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    opacity: 0.75;
}

#setup-menu-header .close-customizer:hover {
    opacity: 1;
    background-color: rgba(255,255,255,0.1);
}