/* ==========================================================================
   Presidential Amnesty Programme (PAP) — Auth Pages Redesign Stylesheet
   Consolidated version — includes:
     - Base design system (shell / hero / card / form / links)
     - Responsive clamp()-based padding fix (shrinks to fit small devices)
     - Enlarged back arrow icon
     - CORRECTED scoping for header/logo hiding rule (scoped to .pap-shell)
     - textarea.form-control sizing (for Complaints page)
   Apply to: Login, Register, ForgotPassword, ResendEmailConfirmation,
             Applicant/Complaints/Log
   ========================================================================== */

:root{
  --pap-green:#0f5132;
  --pap-green-dark:#0b3d26;
  --pap-green-2:#14663f;
  --pap-accent:#7fb2ff;
  --pap-cream:#f5f3ec;
  --pap-ink:#1c2b22;
  --pap-muted:#6b7d72;
  --pap-border:#dfe4de;
  --pap-focus:#1a7a4c;
}

/* ---------- Shell layout (two-pane: hero + panel) ---------- */
.pap-shell,
.pap-shell *,
.pap-shell *::before,
.pap-shell *::after{
  box-sizing:border-box;
}

.pap-shell{
  min-height:100vh;
  max-width:100vw;
  overflow-x:hidden;
  display:flex;
  flex-wrap:wrap;
  background:var(--pap-cream);
  font-family:'Segoe UI',Roboto,Arial,sans-serif;
  color:var(--pap-ink);
}

.pap-shell img{ max-width:100%; height:auto; }

.pap-hero{
  flex:1 1 420px;
  min-width:320px;
  background:linear-gradient(160deg,var(--pap-green) 0%,var(--pap-green-dark) 100%);
  color:#fff;
  padding:clamp(24px,4vw,56px) clamp(20px,4vw,48px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  background-image:linear-gradient(160deg,rgba(15,81,50,.92) 0%,rgba(11,61,38,.95) 100%),url('/101/Images/scholars.jpg');
  background-size:cover;
  background-position:center;
}

.pap-hero-back{ margin-bottom:clamp(16px,3vw,32px); }

.pap-back{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.4);
  color:#fff;
  border-radius:999px;
  padding:8px 18px 8px 8px;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  transition:background .2s ease;
}
.pap-back:hover{ background:rgba(255,255,255,.22); color:#fff; text-decoration:none; }

.pap-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:#fff;
  color:var(--pap-green-dark);
  font-size:20px;
  line-height:1;
  font-weight:700;
  padding-bottom:5%;
}

.pap-hero-brand{ display:flex; align-items:center; gap:14px; margin-bottom:clamp(18px,4vw,36px); }
.pap-hero-brand img{ width:48px; height:48px; border-radius:10px; object-fit:cover; background:#fff; }
.pap-hero-brand strong{ display:block; font-size:16px; }
.pap-hero-brand span{ display:block; font-size:12px; opacity:.8; }

.pap-hero-badge{
  display:inline-block;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  padding:4px 14px;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:14px;
}

.pap-hero-copy h1{
  font-size:clamp(22px,3vw,32px);
  font-weight:700;
  line-height:1.25;
  margin-bottom:12px;
}
.pap-hero-copy p{ font-size:14px; opacity:.85; line-height:1.6; max-width:38ch; }

.pap-checklist{ list-style:none; padding:0; margin:20px 0 0; display:flex; flex-direction:column; gap:10px; }
.pap-checklist li{ font-size:13px; opacity:.9; display:flex; align-items:center; gap:8px; }
.pap-checklist li::before{ content:'✓'; color:var(--pap-accent); font-weight:700; }

.pap-hero-foot{ font-size:12px; opacity:.7; margin-top:24px; }

/* ---------- Right panel (form side) ---------- */
.pap-panel{
  flex:1 1 480px;
  min-width:320px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:clamp(20px,4vw,56px) clamp(16px,4vw,48px);
}

.pap-mobileback{ display:none; align-self:flex-start; margin-bottom:16px; }
.pap-mobileback .pap-back{ background:rgba(15,81,50,.08); border-color:var(--pap-border); color:var(--pap-green-dark); }
.pap-mobileback .pap-arrow{ background:var(--pap-green); color:#fff; }

.pap-card{
  width:100%;
  max-width:420px;
  background:#fff;
  border-radius:18px;
  box-shadow:0 20px 45px rgba(15,81,50,.12);
  padding:clamp(20px,4vw,40px);
}
.pap-card--wide{ max-width:480px; }

.pap-card-head{ text-align:center; margin-bottom:20px; }
.pap-card-head img {
  /* width: 56px; */
  height: 100px;
  border-radius: 12px;
  object-fit: cover;
  margin-bottom: 12px;
}
.pap-card-head h2{ font-size:20px; font-weight:700; color:var(--pap-ink); margin-bottom:6px; }
.pap-card-head p{ font-size:13px; color:var(--pap-muted); line-height:1.5; }

/* Hide the original AdminLTE header/logo ONLY when wrapped in our shell
   (scoped fix — prevents breaking pages that haven't been re-templated yet) */
.pap-shell .register-box .card-header,
.pap-shell .register-box .login-box-msg{ display:none; }

.pap-shell .register-box .card{ border:none; box-shadow:none; margin:0; }
.pap-shell .register-box .card-body{ padding:0; }

/* ---------- Form controls ---------- */
.pap-shell .form-control{
  border-radius:10px;
  border:1px solid var(--pap-border);
  padding:10px 14px;
  font-size:14px;
  min-height:44px;
}
.pap-shell .form-control:focus{
  border-color:var(--pap-focus);
  box-shadow:0 0 0 3px rgba(26,122,76,.15);
}
.pap-shell textarea.form-control{
  height:auto;
  min-height:110px;
  padding:12px 16px;
  resize:vertical;
}
.pap-shell .input-group-text{
  background:#fff;
  border:1px solid var(--pap-border);
  border-right:none;
  border-radius:10px 0 0 10px;
  color:var(--pap-muted);
}
.pap-shell .input-group .form-control{ border-left:none; border-radius:0 10px 10px 0; }

.pap-shell .btn-primary{
  width:100%;
  background:var(--pap-green);
  border:none;
  border-radius:10px;
  padding:11px 16px;
  font-weight:600;
  font-size:14px;
  transition:background .2s ease;
}
.pap-shell .btn-primary:hover{ background:var(--pap-green-2); }

/* ---------- Helper links ---------- */
.pap-divider{ height:1px; background:var(--pap-border); margin:20px 0 16px; }
.pap-links{ display:flex; flex-direction:column; gap:10px; text-align:center; }
.pap-links a{ font-size:13px; color:var(--pap-green-dark); font-weight:600; text-decoration:none; }
.pap-links a:hover{ text-decoration:underline; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .pap-hero{ display:none; }
  .pap-mobileback{ display:flex; }
  .pap-panel{ padding:clamp(16px,6vw,32px); }
}

/* ---------- Body override ----------
   AdminLTE's .login-page/.register-page classes pin <body> to a fixed
   height:100vh and vertically center its content. .pap-shell assumes a
   normal, growable body — on tall pages (e.g. Register, with 8 stacked
   fields) that fixed height clips the form instead of letting the page
   scroll, which is why users had to zoom out to see the rest of it. */
body.login-page,
body.register-page{
  height:auto;
  min-height:100vh;
  display:block;
  overflow-y:auto;
}