/* ==========================================================================
   Ghana Audit Service — InfoSys authentication design system
   Deep institutional green + heritage gold on ivory. Both light & dark themes.
   Shared by: login, applicant sign-up, verification, change password,
   self-reset request, and set-new-password. Ported verbatim from the approved
   design artifact.
   ========================================================================== */

:root{
  --forest:#0e4d3a; --forest-2:#0a3b2c; --forest-deep:#072a20;
  --gold:#a9761f; --gold-2:#c79333; --gold-soft:#f3e8cf;
  --ivory:#f6f4ec; --paper:#fffdf8; --ink:#1c2620; --ink-soft:#4f5d54; --ink-faint:#8a968d;
  --line:#e4e0d3; --line-soft:#eeebe1;
  --crit:#8a2318; --ok:#1c6b46;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --serif:"Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ivory:#0d130f; --paper:#141c17; --ink:#eaf0ea; --ink-soft:#a9b8ae; --ink-faint:#75857a;
    --line:#26332b; --line-soft:#1f2a23;
    --forest:#3f9c78; --forest-2:#2f7d5f; --gold:#d4a54a; --gold-2:#e0b45c; --gold-soft:#2a2213;
    --crit:#e08a7e; --ok:#5cc08a;
  }
}
:root[data-theme="dark"]{
  --ivory:#0d130f; --paper:#141c17; --ink:#eaf0ea; --ink-soft:#a9b8ae; --ink-faint:#75857a;
  --line:#26332b; --line-soft:#1f2a23;
  --forest:#3f9c78; --forest-2:#2f7d5f; --gold:#d4a54a; --gold-2:#e0b45c; --gold-soft:#2a2213;
  --crit:#e08a7e; --ok:#5cc08a;
}

*{box-sizing:border-box;}
/* Full-viewport split: the auth screens fill the entire browser window edge-to
   edge -- no ivory margin, no rounded card. The green brand panel is the
   full-height left half, the form the full-height right half. */
.auth-body{margin:0; font-family:var(--sans); background:var(--ivory); color:var(--ink); line-height:1.55;
     min-height:100vh;}
.auth-shell{width:100%; min-height:100vh;}

/* ------- the two-panel frame (login/signup/verify/change/reset/setnew) ------- */
.login-frame{border:none; border-radius:0; overflow:hidden; display:grid;
             grid-template-columns:1.05fr .95fr; min-height:100vh; background:var(--paper);}
@media (max-width:780px){ .login-frame{grid-template-columns:1fr; min-height:auto;} }

/* left: branded panel */
.brand-panel{position:relative; background:
    radial-gradient(120% 140% at 15% 10%, var(--forest) 0%, var(--forest-2) 45%, var(--forest-deep) 100%);
    color:#f4f1e6; padding:52px 54px; display:flex; flex-direction:column; overflow:hidden;}
.brand-panel::after{content:""; position:absolute; inset:0;
    background-image:radial-gradient(circle at 1px 1px, rgba(212,165,74,.14) 1px, transparent 0);
    background-size:22px 22px; opacity:.6; pointer-events:none;}
.brand-panel .kente{position:absolute; left:0; right:0; bottom:0; height:6px;
    background:repeating-linear-gradient(90deg, var(--gold) 0 22px, var(--forest-deep) 22px 30px, #b21f1f 30px 44px, var(--forest-deep) 44px 52px);}
.bp-seal{width:60px; height:60px; margin-bottom:auto; background:rgba(255,255,255,.92); border-radius:14px; padding:6px; object-fit:contain;}
.bp-eyebrow{font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
            color:var(--gold-2); font-weight:700; margin-top:26px;}
.bp-title{font-family:var(--serif); font-size:34px; line-height:1.15; margin:10px 0 14px; color:#fbf8ee;}
.bp-sub{font-size:14px; color:#c9d6cb; max-width:36ch; line-height:1.65;}
.bp-motto{font-family:var(--serif); font-style:italic; font-size:14px; color:var(--gold-2); margin-top:22px;}

/* right: form panel -- content held in a readable column, CENTRED both
   vertically (justify-content) and horizontally (align-items) in the full-height
   right half, so the form sits in the middle of the panel rather than hard
   against one edge. Children stretch to the column's own width, not the panel's. */
.form-panel{padding:40px 24px; display:flex; flex-direction:column;
            justify-content:center; align-items:center;}
.form-panel > *{width:100%; max-width:380px;}
/* the sign-up form is a two-column grid, so it gets a wider column */
.form-panel.signup-panel > *{max-width:540px;}
.fp-head{font-family:var(--serif); font-size:24px; font-weight:600; margin:0 0 3px;}
.fp-sub{font-size:12.5px; color:var(--ink-faint); margin:0 0 22px;}
.fld{margin-bottom:15px;}
.fld label{display:block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
           color:var(--ink-soft); margin-bottom:6px;}
.ipt{width:100%; border:1.5px solid var(--line); border-radius:9px; background:var(--ivory); color:var(--ink);
     font-family:inherit; font-size:13.5px; padding:11px 13px; outline:none; transition:border-color .15s, box-shadow .15s;}
.ipt:focus{border-color:var(--forest); box-shadow:0 0 0 3px color-mix(in srgb, var(--forest) 15%, transparent);}
.ipt::placeholder{color:var(--ink-faint);}
select.ipt{appearance:none; -webkit-appearance:none;}
.btn{width:100%; border:none; cursor:pointer; font-family:inherit; font-weight:700; font-size:13.5px;
     color:#fbf8ee; background:linear-gradient(180deg, var(--forest) 0%, var(--forest-2) 100%);
     border-radius:9px; padding:12px; margin-top:6px; letter-spacing:.02em; transition:transform .1s, box-shadow .2s;
     box-shadow:0 6px 16px -8px var(--forest);}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 22px -10px var(--forest);}
.btn.gold{background:linear-gradient(180deg, var(--gold-2) 0%, var(--gold) 100%); box-shadow:0 6px 16px -8px var(--gold); color:#2a1e06;}
.fp-links{display:flex; justify-content:space-between; margin-top:16px; font-size:11.5px;}
.fp-links a{color:var(--forest); text-decoration:none; font-weight:600; cursor:pointer;}
.fp-links a:hover{text-decoration:underline;}
.divider{display:flex; align-items:center; gap:10px; margin:18px 0; color:var(--ink-faint); font-size:10.5px;
         text-transform:uppercase; letter-spacing:.08em;}
.divider::before,.divider::after{content:""; height:1px; background:var(--line); flex:1;}

/* ------- countdown banner (login page) ------- */
.window-banner{border:1.5px solid var(--gold); background:var(--gold-soft); border-radius:12px;
               padding:14px 16px; margin-bottom:20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.wb-pulse{width:9px; height:9px; border-radius:50%; background:var(--ok); flex:none; position:relative;}
.wb-pulse::after{content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--ok);
                 animation:auth-pulse 1.8s ease-out infinite; opacity:0;}
@keyframes auth-pulse{0%{transform:scale(.6); opacity:.7;} 100%{transform:scale(1.5); opacity:0;}}
.wb-text{flex:1; min-width:150px;}
.wb-label{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--gold); font-family:var(--mono);}
.wb-headline{font-size:12.5px; color:var(--ink); font-weight:600; margin-top:1px;}
.countdown{display:flex; gap:7px;}
.cd-unit{background:var(--forest); color:#fbf8ee; border-radius:7px; padding:6px 9px; text-align:center; min-width:44px;}
.cd-num{font-family:var(--mono); font-size:17px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums;}
.cd-lbl{font-size:8px; text-transform:uppercase; letter-spacing:.05em; opacity:.75; margin-top:3px;}
.window-banner.scheduled{border-color:var(--gold);}
.window-banner.scheduled .wb-pulse{background:var(--gold);}

/* ------- verification code inputs ------- */
.code-inputs{display:flex; gap:9px; margin:8px 0 18px;}
.code-inputs .ipt{text-align:center; font-size:20px; font-family:var(--mono); padding:12px 0;}

/* ------- password strength meter ------- */
.pw-meter{height:5px; border-radius:3px; background:var(--line); margin:2px 0 14px; overflow:hidden;}
.pw-meter > i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--ok)); transition:width .2s;}

/* ------- show-password toggle + caps-lock hint ------- */
.pw-wrap{position:relative;}
.pw-wrap .ipt{padding-right:56px;}
.pw-eye{position:absolute; right:8px; top:50%; transform:translateY(-50%); border:none; background:none;
    font-family:var(--mono); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    color:var(--forest); cursor:pointer; padding:5px 7px; border-radius:6px;}
.pw-eye:hover{background:var(--ivory);}
.caps-hint{display:none; font-size:10.5px; color:var(--gold); font-weight:700; margin-top:5px; align-items:center; gap:5px;}
.caps-hint.show{display:flex;}
.caps-hint::before{content:"\26A0";}

/* ------- Django messages inside the form panel ------- */
.auth-alert{border-radius:9px; padding:10px 13px; font-size:12px; margin-bottom:14px; line-height:1.5;}
.auth-alert.error,.auth-alert.alert-danger{background:color-mix(in srgb, var(--crit) 12%, transparent); color:var(--crit); border:1px solid color-mix(in srgb,var(--crit) 35%, transparent);}
.auth-alert.success,.auth-alert.alert-success{background:color-mix(in srgb, var(--ok) 14%, transparent); color:var(--ok); border:1px solid color-mix(in srgb,var(--ok) 35%, transparent);}
.auth-alert.info,.auth-alert.alert-info,.auth-alert.warning,.auth-alert.alert-warning{background:var(--gold-soft); color:var(--gold); border:1px solid color-mix(in srgb,var(--gold) 35%, transparent);}
.auth-alert ul{margin:0; padding-left:16px;}

/* Crispy/plain form fields inherit the .ipt look where used directly */
.form-panel input:not([type=checkbox]):not([type=radio]):not(.pw-eye),
.form-panel select,
.form-panel textarea{width:100%; border:1.5px solid var(--line); border-radius:9px; background:var(--ivory);
    color:var(--ink); font-family:inherit; font-size:13.5px; padding:11px 13px; outline:none;}
.form-panel input:focus, .form-panel select:focus, .form-panel textarea:focus{
    border-color:var(--forest); box-shadow:0 0 0 3px color-mix(in srgb, var(--forest) 15%, transparent);}