/* auth.css - shared styles for all auth pages
   (index, resident-login, admin-login, register, forgot-password,
   reset-password, reset-password-success, register-success)

   PALETTE NOTE:
   Colors are pulled from the Barangay Soro-Soro seal — royal blue + gold/amber + white.
   --primary (blue)  = resident-facing accent
   --admin (gold)    = staff/admin-facing accent
   Every other stylesheet references these as CSS variables with fallbacks,
   so changing them here re-themes the whole app from one place. */

:root{
    --bg-1:#e9f1fb;
    --bg-2:#d7e7fa;
    --card:#ffffff;

    /* Resident / primary - barangay blue, closer to the seal */
    --primary:#1b5fae;
    --primary-dark:#134782;
    --primary-soft:#e7f1fc;
    --primary-soft-2:#d2e6fb;

    --ink:#1f2a37;
    --ink-dim:#5b6b7c;
    --border:#e3ebf5;
    --border-strong:#c7dcf2;

    /* Admin / staff - gold, pulled from the logo lettering & stars */
    --admin-soft:#fbf1de;
    --admin:#b9800f;
    --admin-dark:#8f6209;

    --err:#d6453f;
}

*{box-sizing:border-box;}
html,body{height:100%;}

/* Shared background for all plain auth pages (same gradient, blobs and dot-grid as
   the landing page).

   Scoped to body:not(.landing-body):not(.admin-body):not(.resident-body) so the
   landing page, admin dashboard and resident dashboard keep their own backgrounds. */
body{
    margin:0;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px 18px;
    font-family:'Inter',sans-serif;
    font-size:16.5px;
    line-height:1.5;
    color:var(--ink);
    position:relative;
    overflow-x:hidden;
}

body:not(.landing-body):not(.admin-body):not(.resident-body){
    background: linear-gradient(150deg, #14315e 0%, #1b5fae 48%, #0e2547 100%);
}

/* Faint dot-grid texture, purely decorative - sits behind the card via
   position:fixed + z-index:0 (the .rig/.card content has no z-index set,
   which defaults to auto and still paints above a z-index:0 sibling in
   normal stacking order, so no extra z-index is needed on .rig itself). */
body:not(.landing-body):not(.admin-body):not(.resident-body)::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
    background-size:26px 26px;
}

/* Two soft blurred color blobs simulated via box-shadow on a single
   near-invisible pseudo-element - avoids needing extra HTML elements
   on every single auth page just for decoration. */
body:not(.landing-body):not(.admin-body):not(.resident-body)::after{
    content:"";
    position:fixed;
    top:0;
    left:0;
    width:1px;
    height:1px;
    z-index:0;
    pointer-events:none;
    box-shadow:
            8vw -8vh 130px 170px rgba(217,161,37,0.32),
            82vw 88vh 140px 180px rgba(58,134,255,0.28);
}

.rig{width:100%; max-width:400px; position:relative; z-index:1;}

.card{
    background:var(--card);
    border-radius:22px;
    padding:36px 30px 30px;
    box-shadow:0 24px 60px -18px rgba(8,20,45,0.45), 0 4px 16px rgba(8,20,45,0.15);
    border:1px solid var(--border);
}

.logo-circle{
    width:60px;
    height:60px;
    border-radius:50%;
    margin:0 auto 18px;
    background:var(--primary-soft);
    border:1.5px dashed var(--border-strong);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.logo-circle img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.logo-circle span{
    font-family:'Inter',sans-serif;
    font-size:9px;
    font-weight:600;
    letter-spacing:0.08em;
    color:var(--primary);
    text-transform:uppercase;
}

.heading{text-align:center; margin-bottom:26px;}
.heading .eyebrow{
    font-size:12px;
    font-weight:600;
    letter-spacing:0.06em;
    color:var(--primary);
    text-transform:uppercase;
}
.heading h1{
    font-family:'Poppins',sans-serif;
    font-weight:600;
    font-size:23px;
    margin:6px 0 0;
    color:var(--ink);
}
.heading .sub{
    font-size:13px;
    color:var(--ink-dim);
    margin-top:5px;
}

.view{animation:fadeIn .3s ease both;}
@keyframes fadeIn{
    from{opacity:0; transform:translateY(6px);}
    to{opacity:1; transform:translateY(0);}
}

.form-header{display:flex; align-items:center; gap:10px; margin-bottom:20px;}
.back-btn{
    background:var(--primary-soft);
    border:none;
    color:var(--primary);
    width:36px; height:36px;
    border-radius:10px;
    cursor:pointer;
    font-size:15px;
    display:flex; align-items:center; justify-content:center;
    text-decoration:none;
    transition:background .15s ease;
}
.back-btn:hover{background:var(--primary-soft-2);}

.form-title{font-family:'Poppins',sans-serif; font-size:17px; font-weight:600;}
.form-title span{
    display:block;
    font-family:'Inter',sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:0.05em;
    color:var(--primary);
    text-transform:uppercase;
    margin-bottom:2px;
}
.form-title.admin span{color:var(--admin);}

.field{margin-bottom:14px;}
.field label{
    display:block;
    font-size:12.5px;
    font-weight:500;
    color:var(--ink);
    margin-bottom:6px;
}
.field input{
    width:100%;
    background:#f8fafc;
    border:1.5px solid var(--border);
    color:var(--ink);
    padding:12px 14px;
    border-radius:12px;
    font-size:15px;
    font-family:'Inter',sans-serif;
    transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.field input::placeholder{color:#a3b1c2;}
.field input:focus{
    outline:none;
    border-color:var(--primary);
    background:#fff;
}

.password-field{position:relative;}
.password-field input{padding-right:42px;}
.toggle-pass{
    position:absolute;
    right:6px;
    top:50%;
    transform:translateY(-50%);
    width:34px;
    height:34px;
    border:none;
    background:none;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--ink-dim);
    cursor:pointer;
    border-radius:8px;
    transition:color .15s ease, background .15s ease;
}
.toggle-pass:hover{color:var(--primary); background:var(--primary-soft);}
.toggle-pass:focus-visible{outline:2px solid var(--primary); outline-offset:1px;}
.toggle-pass svg{width:18px; height:18px;}
.toggle-pass .icon-eye-off{display:none;}
.toggle-pass.is-visible .icon-eye{display:none;}
.toggle-pass.is-visible .icon-eye-off{display:block;}

.row-split{display:flex; justify-content:space-between; align-items:center; margin:2px 0 20px;}
.remember{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-dim);}
.remember input{accent-color:var(--primary);}
.forgot{font-size:12.5px; color:var(--primary); text-decoration:none; font-weight:500;}
.forgot:hover{text-decoration:underline;}

.submit-btn{
    width:100%;
    min-height:46px;
    padding:13px;
    border-radius:12px;
    border:none;
    background:var(--primary);
    color:#fff;
    font-weight:600;
    font-size:14.5px;
    cursor:pointer;
    box-shadow:0 8px 18px -6px rgba(27,95,174,0.55);
    transition:background .15s ease, transform .1s ease;
}
.submit-btn:hover{background:var(--primary-dark);}
.submit-btn:active{transform:translateY(1px);}
.submit-btn.admin{background:var(--admin); box-shadow:0 8px 18px -6px rgba(185,128,15,0.5);}
.submit-btn.admin:hover{background:var(--admin-dark);}

.status-note{
    text-align:center;
    margin-top:14px;
    font-size:12px;
    color:var(--ink-dim);
    min-height:16px;
}

.switch-note{text-align:center; margin-top:16px; font-size:12.5px; color:var(--ink-dim);}
.switch-note a{
    color:var(--primary); font-weight:600; text-decoration:none;
}
.switch-note a:hover{text-decoration:underline;}

.foot-note{
    text-align:center;
    margin-top:20px;
    font-size:11.5px;
    color:#94a3b8;
}

.field.has-error label{
    color:var(--err);
}

.field.has-error input,
.field.has-error .password-field input{
    border-color:var(--err);
    background:#fdf2f1;
}

.field.has-error input:focus,
.field.has-error .password-field input:focus{
    border-color:var(--err);
    box-shadow:0 0 0 3px rgba(214,69,63,0.15);
}

.error-text{
    display:flex;
    align-items:center;
    gap:6px;
    margin-top:7px;
    font-size:12.5px;
    font-weight:500;
    color:var(--err);
    animation:shakeErr .35s ease;
}

.error-text::before{
    content:"";
    flex:none;
    width:15px;
    height:15px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d6453f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") no-repeat center/contain;
}

.form-error-banner{
    display:flex;
    align-items:center;
    gap:8px;
    background:#fdf2f1;
    border:1.5px solid var(--err);
    color:var(--err);
    font-size:12.5px;
    font-weight:500;
    padding:10px 12px;
    border-radius:10px;
    margin-bottom:16px;
    animation:shakeErr .35s ease;
}

.form-error-banner svg{
    flex:none;
    width:16px;
    height:16px;
}

@keyframes shakeErr{
    10%,90%{transform:translateX(-1px);}
    20%,80%{transform:translateX(2px);}
    30%,50%,70%{transform:translateX(-4px);}
    40%,60%{transform:translateX(4px);}
}

@media (max-width:420px){
    .card{padding:28px 22px 24px; border-radius:18px;}
    .heading h1{font-size:20px;}
}

.date-field .date-picker{position:relative;}

.date-display{
    width:100%;
    background:#f8fafc;
    border:1.5px solid var(--border);
    color:var(--ink);
    padding:12px 42px 12px 14px;
    border-radius:12px;
    font-size:15px;
    font-family:'Inter',sans-serif;
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
}
.date-display::placeholder{color:#a3b1c2;}
.date-display:focus{outline:none; border-color:var(--primary); background:#fff;}
.field.has-error .date-display{border-color:var(--err); background:#fdf2f1;}

.date-icon-btn{
    position:absolute;
    right:6px;
    top:50%;
    transform:translateY(-50%);
    width:34px; height:34px;
    border:none; background:none; padding:0;
    display:flex; align-items:center; justify-content:center;
    color:var(--ink-dim);
    cursor:pointer;
    border-radius:8px;
    transition:color .15s ease, background .15s ease;
}
.date-icon-btn:hover{color:var(--primary); background:var(--primary-soft);}
.date-icon-btn svg{width:17px; height:17px;}

.date-dropdown{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    width:280px;
    max-width:calc(100vw - 40px);
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:0 18px 40px -14px rgba(27,95,174,0.35), 0 4px 14px rgba(15,23,42,0.08);
    padding:14px;
    z-index:50;
    display:none;
}
.date-dropdown.is-open{display:block; animation:fadeIn .18s ease both;}

.dd-header{display:flex; gap:8px; margin-bottom:12px;}
.dd-header select{
    flex:1;
    border:1.5px solid var(--border);
    border-radius:9px;
    padding:7px 8px;
    font-size:12.5px;
    font-family:'Inter',sans-serif;
    color:var(--ink);
    background:#f8fafc;
    cursor:pointer;
}
.dd-header select:focus{outline:none; border-color:var(--primary);}

.dd-weekdays{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    margin-bottom:4px;
}
.dd-weekdays span{
    text-align:center;
    font-size:10.5px;
    font-weight:600;
    color:var(--ink-dim);
    text-transform:uppercase;
}

.dd-days{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:2px;
}
.dd-day{
    aspect-ratio:1;
    border:none;
    background:none;
    border-radius:8px;
    font-size:12.5px;
    color:var(--ink);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .12s ease, color .12s ease;
}
.dd-day:hover{background:var(--primary-soft);}
.dd-day.is-today{font-weight:700; color:var(--primary);}
.dd-day.is-selected{background:var(--primary); color:#fff;}
.dd-day.is-empty{visibility:hidden; cursor:default;}

.auth-container {
    max-width: 400px;
    margin: 80px auto;
    padding: 32px;
    text-align: center;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    background: #ffffff;
    position: relative;
    z-index: 1;
}

.success-box h2 {
    margin: 16px 0 8px;
    color: #1a7f37;
}

.success-box p {
    color: #555;
    margin: 4px 0;
}

.redirect-note {
    font-size: 0.85rem;
    color: #999;
    margin-top: 12px;
}

.btn-link {
    display: inline-block;
    margin-top: 16px;
    color: #1a7f37;
    text-decoration: none;
    font-weight: 600;
}

.btn-link:hover {
    text-decoration: underline;
}

.error-message {
    color: #d32f2f;
    margin-bottom: 12px;
}

.checkmark-circle {
    width: 80px;
    height: 80px;
    margin: 0 auto;
}

.checkmark {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: block;
    stroke-width: 3;
    stroke: #1a7f37;
    stroke-miterlimit: 10;
}

.checkmark-circle-bg {
    stroke: #1a7f37;
    stroke-width: 3;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: circle-draw 0.6s ease-in-out forwards;
}

.checkmark-check {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke: #1a7f37;
    stroke-width: 4;
    animation: check-draw 0.4s 0.6s ease-in-out forwards;
}

@keyframes circle-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes check-draw {
    to { stroke-dashoffset: 0; }
}

/* ---------- Accessibility pass: bigger touch targets, higher contrast ----------
   Residents skew older; make every interactive control easy to tap and read. */

.submit-btn, .search-btn, .btn-sm, .filter-tab {
    min-height: 44px;
}

.form-panel select,
.form-panel textarea,
.search-input {
    min-height: 46px;
    font-size: 15px;
}

.status-pill {
    font-size: 12.5px;
    font-weight: 700;
    padding: 5px 12px;
}

/* Stronger, more visible focus ring for keyboard & low-vision users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}