/* ════════════════════════════════════════════════════════════════
   KLMIS — account pages (django-allauth: sign in, sign up, passwords,
   email & phone verification, re-authentication)
   Path:   static/finalfrontend/css/account/account.css
   Used by templates/account/*.html, loaded after klmis.css.
   Plain CSS: no Tailwind build step needed.

   The allauth templates use Bootstrap class names (row, col-lg-6, btn,
   alert, badge, d-flex, mb-3 …). The new base has no Bootstrap, so the
   classes those templates need are defined here, scoped to .acct so
   they never affect other pages.
   ════════════════════════════════════════════════════════════════ */

.acct{
  --a-ink:#0b1b30; --a-ink2:#33455c; --a-muted:#5b6b80; --a-line:#e3e9f1; --a-soft:#f4f7fb;
  --a-brand:#0a56a1; --a-brand2:#1f8fe0; --a-sky:#4fb3f6; --a-tint:#eef6ff;
  --a-green:#0f9f6e; --a-gold:#d98a06; --a-red:#e11d48;
  --a-ease:cubic-bezier(.22,1,.36,1);
  position:relative; isolation:isolate; overflow:hidden;
  padding:48px 0 72px;
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(79,179,246,.20), transparent 60%),
    radial-gradient(700px 380px at 100% 0%, rgba(10,86,161,.10), transparent 60%),
    linear-gradient(180deg,#f4f8fd 0%,#f4f7fb 100%);
  color:var(--a-ink2);
}
.acct::before{ /* dotted texture */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(10,86,161,.10) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 55%); mask-image:linear-gradient(180deg,#000 0%,transparent 55%);
}
@media (max-width:575px){ .acct{padding:24px 0 48px} }

/* ── Bootstrap-style grid & helpers used by the templates ── */
.acct .row{display:flex; flex-wrap:wrap; margin:0 -12px; row-gap:24px}
.acct .row > [class*="col-"]{width:100%; padding:0 12px; min-width:0}
@media (min-width:992px){
  .acct .row > .col-lg-4{width:33.3333%} .acct .row > .col-lg-6{width:50%} .acct .row > .col-lg-7{width:58.3333%} .acct .row > .col-lg-8{width:66.6667%}
}
.acct .justify-content-center{justify-content:center} .acct .justify-content-between{justify-content:space-between}
.acct .justify-content-end{justify-content:flex-end}
.acct .align-items-stretch{align-items:stretch} .acct .align-items-center{align-items:center} .acct .align-items-start{align-items:flex-start}
.acct .d-flex{display:flex} .acct .d-inline-flex{display:inline-flex} .acct .d-grid{display:grid} .acct .d-block{display:block}
.acct .flex-wrap{flex-wrap:wrap} .acct .flex-column{flex-direction:column}
.acct .gap-2{gap:.5rem} .acct .gap-3{gap:1rem}
.acct .mt-1{margin-top:.25rem} .acct .mt-2{margin-top:.5rem} .acct .mt-3{margin-top:1rem} .acct .mt-4{margin-top:1.5rem}
.acct .mb-0{margin-bottom:0} .acct .mb-2{margin-bottom:.5rem} .acct .mb-3{margin-bottom:1rem}
.acct .me-1{margin-right:.3rem} .acct .me-2{margin-right:.5rem} .acct .px-3{padding-left:1rem; padding-right:1rem}
.acct .w-100{width:100%} .acct .h-100{height:100%}
.acct .text-end{text-align:right} .acct .text-muted{color:var(--a-muted)!important} .acct .text-dark{color:var(--a-ink)!important}
.acct .text-danger{color:var(--a-red)!important} .acct .small,.acct small{font-size:.82rem}
.acct .fw-semibold{font-weight:600} .acct .text-decoration-none{text-decoration:none}
.acct .rounded-3{border-radius:14px} .acct .rounded-pill{border-radius:999px}
.acct .shadow-sm{box-shadow:0 1px 3px rgba(11,27,48,.06)}
.acct .acct-ico{color:var(--a-brand2)}
.acct a:not(.btn):not(.klmis-auth-link):not(.list-group-item){color:var(--a-brand); font-weight:600; text-decoration:underline; text-decoration-color:#a9d3f5; text-underline-offset:3px}
.acct a:not(.btn):hover{text-decoration-color:var(--a-brand)}
.acct strong{color:var(--a-ink)}

/* ── Auth card ── */
.acct .card.klmis-auth-card{
  position:relative; height:100%; overflow:hidden;
  border:1px solid var(--a-line); border-radius:26px; background:#fff;
  box-shadow:0 1px 2px rgba(11,27,48,.04), 0 40px 70px -48px rgba(10,86,161,.55);
  animation:acct-rise .5s var(--a-ease) both;
}
.acct .klmis-auth-card::before{ /* KLMIS flag-style accent bar */
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg,var(--a-brand) 0 40%,var(--a-sky) 40% 70%,var(--a-green) 70% 85%,var(--a-gold) 85%);
}
.acct .klmis-auth-card .card-header{
  padding:30px 32px 22px; border-bottom:1px solid #eef3f9;
  background:linear-gradient(180deg,#f7fbff,#fff);
}
.acct .klmis-auth-badge{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
  padding:6px 12px; border-radius:999px; font-size:.74rem; font-weight:700; letter-spacing:.02em;
  color:var(--a-brand); background:var(--a-tint); border:1px solid #d6e9fb;
}
.acct .klmis-auth-badge i{font-size:.72rem; color:var(--a-brand2)}
.acct .klmis-auth-title{
  margin:0; font-family:Outfit,system-ui,sans-serif; font-weight:700;
  font-size:clamp(1.55rem,1.2rem + 1vw,2rem); line-height:1.15; letter-spacing:-.02em; color:var(--a-ink);
}
.acct .klmis-auth-sub{margin:8px 0 0; font-size:.93rem; line-height:1.6; color:var(--a-muted)}
.acct .acct-recipient:not(:empty){margin-top:14px}
.acct .klmis-auth-body{padding:24px 32px 30px; font-size:.93rem; line-height:1.65}
.acct .klmis-auth-body > p{margin:0 0 1rem}
@media (max-width:575px){
  .acct .klmis-auth-card .card-header{padding:24px 20px 18px}
  .acct .klmis-auth-body{padding:20px 20px 24px}
}
.acct .klmis-auth-help{margin:0; color:var(--a-muted)}
.acct .klmis-auth-link,.acct .klmis-auth-link a{color:var(--a-brand); font-weight:700; text-decoration:none}
.acct .klmis-auth-link:hover,.acct .klmis-auth-link a:hover{text-decoration:underline; text-underline-offset:3px}
.acct p.klmis-auth-link{font-weight:500; color:var(--a-muted)}
.acct .klmis-auth-divider{
  display:flex; align-items:center; gap:12px; margin:22px 0 14px;
  font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#8796aa;
}
.acct .klmis-auth-divider::before,.acct .klmis-auth-divider::after{content:""; flex:1; height:1px; background:var(--a-line)}
.acct .klmis-auth-actions{align-items:center}
.acct .klmis-auth-actions.flex-column{align-items:stretch}

/* ── Form fields (Django's default widgets) ── */
.acct .form-label{display:block; margin:0 0 6px; font-size:.84rem; font-weight:600; color:var(--a-ink)}
.acct input[type="text"],.acct input[type="email"],.acct input[type="password"],.acct input[type="tel"],
.acct input[type="number"],.acct input[type="search"],.acct input[type="url"],.acct select,.acct textarea,.acct .form-control{
  display:block; width:100%; min-height:48px; padding:12px 14px;
  border:1px solid #dde5ef; border-radius:13px; background:#f7f9fc;
  font:inherit; font-size:.95rem; color:var(--a-ink);
  transition:border-color .2s, box-shadow .2s, background-color .2s;
}
.acct input::placeholder,.acct textarea::placeholder{color:#94a3b8}
.acct input:focus,.acct select:focus,.acct textarea:focus,.acct .form-control:focus{
  outline:none; border-color:var(--a-brand2); background:#fff; box-shadow:0 0 0 4px rgba(31,143,224,.14);
}
.acct input[aria-invalid="true"],.acct .is-invalid{border-color:var(--a-red); background:#fff5f7}
.acct input[type="checkbox"],.acct input[type="radio"],.acct .form-check-input{
  display:inline-block; width:18px; height:18px; min-height:0; margin:0; padding:0; flex-shrink:0; accent-color:var(--a-brand);
}
.acct label:has(> input[type="checkbox"]){display:inline-flex; align-items:center; gap:8px; font-weight:500}
/* "Remember me": the template prints the label above the box; show them side by side */
.acct .mb-3:has(> input[type="checkbox"]){display:flex; flex-direction:row-reverse; justify-content:flex-end; align-items:center; gap:10px}
.acct .mb-3:has(> input[type="checkbox"]) .form-label{margin:0; font-weight:500; cursor:pointer}
.acct .helptext,.acct .help-block{display:block; margin-top:6px; font-size:.78rem; color:var(--a-muted)}
.acct ul.errorlist{margin:6px 0 0; padding:0; list-style:none; font-size:.8rem; color:var(--a-red)}

/* password show/hide + match status */
.acct .password-wrap{position:relative}
.acct .password-wrap input{padding-right:48px}
.acct .password-toggle{
  position:absolute; top:50%; right:8px; transform:translateY(-50%);
  display:grid; place-items:center; width:36px; height:36px; border-radius:10px;
  color:var(--a-muted); cursor:pointer; transition:color .2s, background-color .2s;
}
.acct .password-toggle:hover{color:var(--a-brand); background:var(--a-tint)}
.acct .password-toggle:focus-visible{outline:2px solid var(--a-brand2); outline-offset:1px}
.acct .password-status{margin-top:6px; font-size:.8rem; font-weight:600}
.acct .password-status:empty{display:none}
.acct .password-status.success{color:var(--a-green)}
.acct .password-status.error{color:var(--a-red)}
.acct .password-mismatch-alert{display:none}
.acct .password-mismatch-alert.show{display:block}

/* ── Buttons ── */
.acct .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:46px; padding:11px 20px; border-radius:13px; border:1px solid transparent;
  font:inherit; font-size:.92rem; font-weight:700; line-height:1.2; text-align:center; text-decoration:none; cursor:pointer;
  transition:background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.acct .btn:focus-visible{outline:2px solid var(--a-brand2); outline-offset:2px}
.acct .btn:disabled,.acct .btn[disabled]{opacity:.55; cursor:not-allowed; transform:none!important; box-shadow:none!important}
.acct .btn-sm{min-height:36px; padding:7px 13px; font-size:.82rem; border-radius:10px}
.acct .btn.w-100{width:100%}
/* the primary action is KLMIS blue (the templates still say btn-danger) */
.acct .btn-danger,.acct .klmis-auth-primary-btn{
  color:#fff; background:linear-gradient(135deg,var(--a-brand),var(--a-brand2)); border-color:transparent;
  box-shadow:0 14px 26px -16px rgba(10,86,161,.85);
}
.acct .btn-danger:hover,.acct .klmis-auth-primary-btn:hover{transform:translateY(-1px); box-shadow:0 18px 30px -16px rgba(10,86,161,.9)}
.acct .klmis-auth-actions.flex-column .klmis-auth-primary-btn,.acct .klmis-auth-actions:not(.d-flex) > .klmis-auth-primary-btn{width:100%}
.acct .btn-outline-primary{color:var(--a-brand); background:#fff; border-color:#cfe3f7}
.acct .btn-outline-primary:hover{color:#fff; background:var(--a-brand); border-color:var(--a-brand)}
.acct .btn-outline-secondary{color:var(--a-ink2); background:#fff; border-color:var(--a-line)}
.acct .btn-outline-secondary:hover{background:var(--a-soft); border-color:#cfd9e6}
.acct .btn-outline-danger{color:var(--a-red); background:#fff; border-color:#fbd0d8}
.acct .btn-outline-danger:hover{color:#fff; background:var(--a-red); border-color:var(--a-red)}

/* ── Alerts, badges, lists ── */
.acct .alert{
  position:relative; margin-bottom:1rem; padding:12px 14px; border-radius:14px;
  font-size:.88rem; line-height:1.55; border:1px solid #d6e9fb; background:var(--a-tint); color:#0a4a8a;
}
.acct .alert > div + div{margin-top:4px}
.acct .alert-info{border-color:#d6e9fb; background:var(--a-tint); color:#0a4a8a}
.acct .alert-success{border-color:#bfe9d8; background:#ecfdf5; color:#0f7a55}
.acct .alert-warning{border-color:#fde3b0; background:#fff7e6; color:#7a4a00}
.acct .alert-danger{border-color:#fbd0d8; background:#fff1f3; color:#be123c}
.acct .alert-light{border-color:var(--a-line); background:#f9fbfd; color:var(--a-ink2)}
.acct .alert a{color:inherit}
.acct .badge{display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; font-size:.72rem; font-weight:700; line-height:1.2}
.acct .badge.bg-success{color:#fff; background:var(--a-green)}
.acct .badge.bg-warning{color:#5c3a00; background:#fde68a}
.acct .badge.bg-danger{color:#fff; background:var(--a-brand)} /* "Primary" email badge, in brand blue */
.acct .badge.text-bg-light{color:var(--a-ink2); background:#fff}
.acct .badge.border{border:1px solid var(--a-line)}
.acct .list-group{display:grid; gap:10px; margin:0 0 1rem; padding:0}
.acct .list-group-item{
  display:flex; padding:14px 16px; border:1px solid var(--a-line); border-radius:16px; background:#fff; cursor:pointer;
  transition:border-color .2s, box-shadow .2s, background-color .2s;
}
.acct .list-group-item:hover{border-color:#cfe3f7}
.acct .list-group-item:has(input:checked){border-color:var(--a-brand2); background:#f7fbff; box-shadow:0 0 0 3px rgba(31,143,224,.12)}
.acct .list-group-item.mb-2{margin-bottom:0}

/* ── Side panel (sign-up "Why register?") ── */
.acct .klmis-side{
  position:relative; overflow:hidden; border-radius:26px; color:#fff;
  background:
    radial-gradient(500px 260px at 100% 0%, rgba(79,179,246,.45), transparent 60%),
    linear-gradient(160deg,#0a56a1 0%,#0b1b30 100%);
  box-shadow:0 40px 70px -48px rgba(10,86,161,.9);
  animation:acct-rise .5s .08s var(--a-ease) both;
}
.acct .klmis-side::after{
  content:""; position:absolute; right:-60px; bottom:-60px; width:200px; height:200px; border-radius:50%;
  border:28px solid rgba(255,255,255,.06);
}
.acct .klmis-side-inner{position:relative; z-index:1; padding:30px 28px}
.acct .klmis-side-kicker{
  display:inline-flex; align-items:center; gap:8px; padding:5px 11px; border-radius:999px;
  font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:#cfe8ff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);
}
.acct .klmis-side-title{
  display:flex; align-items:center; gap:10px; margin:16px 0 18px;
  font-family:Outfit,system-ui,sans-serif; font-size:1.35rem; font-weight:700; color:#fff;
}
.acct .klmis-side-title i{font-size:1rem; color:#fcd34d}
.acct .klmis-side-list{display:grid; gap:12px}
.acct .klmis-side-item{
  display:grid; grid-template-columns:40px minmax(0,1fr); gap:12px; align-items:flex-start;
  padding:12px; border-radius:16px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  transition:background-color .2s, transform .2s;
}
.acct .klmis-side-item:hover{background:rgba(255,255,255,.12); transform:translateX(2px)}
.acct .klmis-side-ico{display:grid; place-items:center; width:40px; height:40px; border-radius:12px; color:#0b1b30; background:var(--a-sky)}
.acct .klmis-side-item h6{margin:0 0 2px; font-family:Outfit,system-ui,sans-serif; font-size:.95rem; font-weight:600; color:#fff}
.acct .klmis-side-item p{margin:0; font-size:.82rem; line-height:1.5; color:rgba(255,255,255,.75)}

@keyframes acct-rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.acct .klmis-auth-card,.acct .klmis-side{animation:none}}