/**
 * FILE: css/auth.css
 * Login / Register / Forgot Password: puts the Barangay Abaga hall photo behind
 * the card (with a navy tint so the card stands out) and keeps the card compact.
 * The card itself keeps the look from login.css / register.css /
 * forgot-password.php — blue gradient seal panel on the left, form on the right.
 */

/* ---------- Page background: hall photo + navy tint (no patterns) ---------- */
html body {
    background: #071a3d !important;
    min-height: 100vh;
    min-height: 100svh;
    /* Column, so the chatbot widget / modal markup that also lives in <body>
       can't squeeze the card sideways. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* !important: head.php puts an inline padding:0 on <body>.
       Small top/bottom padding so the whole card fits one screen (no scroll). */
    padding: 20px !important;
    overflow-x: hidden;
}
/* Narrower screens: leave room above the card for the fixed "Back to Home" pill */
@media (max-width: 1180px) {
    html body { padding-top: 72px !important; }
}
.auth-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.auth-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    display: block;
}
.auth-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(6, 22, 52, 0.82) 0%, rgba(10, 40, 96, 0.70) 55%, rgba(13, 71, 161, 0.60) 100%);
}
body[data-theme="dark"] .auth-bg::after {
    background: linear-gradient(135deg, rgba(3, 10, 26, 0.9) 0%, rgba(5, 18, 44, 0.82) 55%, rgba(8, 30, 70, 0.74) 100%);
}

/* ---------- Back to Home: glass pill over the photo ---------- */
html body .back-home-btn {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: none;
}
html body .back-home-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    border-color: #ffffff;
}

/* ---------- Compact card: sized to fit one screen ---------- */
html body .main-container {
    position: relative;
    z-index: 1;
    width: 100% !important;
    /* Big card: up to 1200px wide, but always leaving room at the sides for
       the fixed "Back to Home" pill; tall enough to fill most of the screen. */
    max-width: min(1080px, calc(100vw - 420px)) !important;
    min-height: min(660px, calc(100vh - 160px));
    flex: 0 0 auto;
    margin: 0 auto;
    border-radius: 22px !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    box-shadow:
        0 0 0 6px rgba(255, 255, 255, 0.06),
        0 40px 80px -24px rgba(0, 0, 0, 0.7);
    animation: auth-card-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes auth-card-in {
    from { opacity: 0; transform: translateY(16px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

/* ---- Left: blue seal panel with soft glows + floating bubbles ---- */
html body .logo-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 56px 48px;
    background:
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.20), transparent 42%),
        radial-gradient(circle at 88% 92%, rgba(96, 165, 250, 0.45), transparent 48%),
        linear-gradient(155deg, #172f7a 0%, #1d4ed8 55%, #3b82f6 100%) !important;
}
html body .logo-section::before,
html body .logo-section::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.03) 70%);
    animation: auth-bubble 9s ease-in-out infinite;
}
html body .logo-section::before { width: 220px; height: 220px; top: -70px; right: -60px; }
html body .logo-section::after  { width: 150px; height: 150px; bottom: -40px; left: -45px; animation-delay: -4.5s; }
@keyframes auth-bubble {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-10px, 10px) scale(1.06); }
}
html body .logo-circle-wrapper {
    width: 190px;
    height: 190px;
    margin-bottom: 24px;
    border: 5px solid #ffffff !important;
    background: #ffffff !important;
    box-shadow:
        0 0 0 10px rgba(255, 255, 255, 0.16),
        0 0 0 22px rgba(255, 255, 255, 0.07),
        0 22px 44px rgba(3, 15, 45, 0.45) !important;
    animation: auth-seal-float 5s ease-in-out infinite;
}
@keyframes auth-seal-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
html body .logo-content { text-align: center; margin-top: 8px; }
html body .logo-content h1 {
    font-size: 30px;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
html body .logo-content p {
    display: inline-block;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 6px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

/* ---- Right: form panel ---- */
/* Form spacing scales with the screen height (vh), so the fields spread out
   evenly to fill the panel on roomy screens and only tighten when needed —
   instead of bunching in the middle with empty space above and below.
   --s is a density factor: Register (more fields) uses a smaller one. */
html body .form-section {
    --s: 1;
    position: relative;
    padding: clamp(24px, calc(6vh * var(--s)), 56px) 68px clamp(20px, calc(5vh * var(--s)), 48px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
html body .form-section:has(.step-indicator) { --s: 0.72; }

/* Theme toggle pinned to the panel's top-right corner (takes no space in the flow) */
html body .form-section .bamis-theme-toggle,
html body .form-section .bamis-theme-toggle-minimal {
    position: absolute;
    top: 18px;
    right: 22px;
    margin: 0 !important;
    z-index: 2;
}

html body .form-section h2 {
    position: relative;
    font-size: clamp(21px, 3.9vh, 28px);
    letter-spacing: 0.02em;
    margin-bottom: clamp(20px, calc(5.4vh * var(--s)), 42px);
    line-height: 1.25;
}
/* Small accent bar under the title */
html body .form-section h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -11px;
    width: 46px;
    height: 4px;
    border-radius: 4px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #1d4ed8, #60a5fa);
}
html body .form-section .input-group { margin-bottom: clamp(10px, calc(3vh * var(--s)), 24px); }
html body .form-section .input-group input,
html body .form-section .form-control {
    padding-top: clamp(10px, calc(2.1vh * var(--s)), 17px) !important;
    padding-bottom: clamp(10px, calc(2.1vh * var(--s)), 17px) !important;
    font-size: 16px;
    border-width: 1.5px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
html body .form-section .input-group input:hover,
html body .form-section .form-control:hover { border-color: #93c5fd; }
html body .form-section .input-group input:focus,
html body .form-section .form-control:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18) !important;
}
html body .form-section .input-group > i:not(.toggle-password) { transition: transform 0.2s ease; }
html body .form-section .input-group:focus-within > i:not(.toggle-password) { transform: translateY(-50%) scale(1.12); }
html body .form-section .custom-btn,
html body .form-section button[type="submit"],
html body .form-section .btn {
    padding-top: clamp(10px, calc(2.1vh * var(--s)), 17px);
    padding-bottom: clamp(10px, calc(2.1vh * var(--s)), 17px);
    font-size: 16px;
    letter-spacing: 0.06em;
}
html body .form-section .custom-btn:hover,
html body .form-section button[type="submit"]:hover { transform: translateY(-2px); }
html body .form-section .form-group.mb-4 { margin-bottom: clamp(12px, calc(3vh * var(--s)), 26px) !important; }
html body .form-section .google-login-separator {
    margin: clamp(12px, calc(3vh * var(--s)), 26px) 0 clamp(10px, calc(2.4vh * var(--s)), 20px);
}
html body .form-section .google-login {
    margin-top: 0;
    padding: clamp(9px, calc(1.8vh * var(--s)), 14px);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
html body .form-section .google-login:hover { transform: translateY(-1px); border-color: #93c5fd; }
html body .form-section .utility-links { margin-top: clamp(12px, calc(3vh * var(--s)), 26px); }
html body .form-section p { margin-bottom: clamp(12px, calc(3vh * var(--s)), 24px); }
/* Register */
html body .form-section .step-indicator { margin-bottom: clamp(8px, 2.2vh, 18px); }
html body .form-section .alert { padding: 8px 14px; margin-bottom: clamp(8px, 1.8vh, 14px) !important; }
html body .form-section .mb-3 { margin-bottom: clamp(6px, 1.4vh, 12px) !important; }
html body .form-section .mb-4 { margin-bottom: clamp(8px, 2vh, 16px) !important; }

/* Card + seal sizing per screen height (form spacing above already adapts) */
@media (min-width: 769px) and (max-height: 880px) {
    html body .main-container { min-height: min(620px, calc(100vh - 120px)); }
    html body .logo-section { padding: 40px 40px; }
    html body .logo-circle-wrapper { width: 170px; height: 170px; margin-bottom: 20px; }
    html body .logo-content h1 { font-size: 27px; }
}
@media (min-width: 769px) and (max-height: 760px) {
    html body { padding-top: 12px !important; padding-bottom: 12px !important; }
    html body .main-container { min-height: min(540px, calc(100vh - 110px)); }
    html body .logo-circle-wrapper { width: 140px; height: 140px; }
    html body .logo-content h1 { font-size: 24px; }
    html body .logo-content p { font-size: 13px; }
    html body .form-section { padding-left: 56px; padding-right: 56px; }
    html body .form-section:has(.step-indicator) { --s: 0.6; }
}
@media (min-width: 769px) and (max-height: 680px) {
    html body .logo-circle-wrapper { width: 110px; height: 110px; margin-bottom: 14px; }
    html body .logo-content h1 { font-size: 20px; }
    html body .form-section:has(.step-indicator) { --s: 0.45; }
}

/* Below 1180px the Back-to-Home pill sits above the card instead of beside it */
@media (min-width: 769px) and (max-width: 1180px) {
    html body .main-container {
        max-width: calc(100vw - 48px) !important;
        min-height: 0;
    }
}

@media (max-width: 768px) {
    html body { padding: 72px 14px 28px !important; }
    html body .main-container { max-width: 450px !important; min-height: 0; }
    html body .logo-section {
        display: flex !important;
        flex-direction: row;
        gap: 18px;
        padding: 24px 20px;
    }
    html body .logo-circle-wrapper {
        width: 72px;
        height: 72px;
        margin-bottom: 0;
        box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.16), 0 10px 20px rgba(3, 15, 45, 0.4) !important;
    }
    html body .logo-content { text-align: left; margin-top: 0; }
    html body .logo-content p { padding: 3px 10px; }
    html body .logo-content h1 { font-size: 19px; }
    html body .logo-content p { font-size: 12px; }
    html body .form-section { padding: 28px 22px; }
}

@media (prefers-reduced-motion: reduce) {
    html body .main-container,
    html body .logo-circle-wrapper,
    html body .logo-section::before,
    html body .logo-section::after { animation: none !important; }
}