/* @file    nap-bof-login.css
   @created 2026-07-01 by Claude
   @desc    Standalone styling for the NAP back-office login page — a two-panel
            green-brand card. Scoped under .bof-login so it never leaks into AdminLTE. */

.bof-login{
  --g-900:#0f3d28; --g-700:#15613e; --g-600:#177a52; --g-500:#2e9e6b;
  --g-100:#dbede3; --g-50:#f1f8f4; --ink:#13261d; --ink-faint:#5d7268;
  --line:#e3ece7; --paper:#fff;
  min-height:100vh; margin:0;
  display:flex; align-items:center; justify-content:center;
  padding:32px 18px;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(46,158,107,.16), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(21,97,62,.18), transparent 55%),
    #eef4f0;
  font-family:'Noto Sans Lao','Source Sans Pro',sans-serif;
  color:var(--ink);
}

.bof-login .login-card{
  width:100%; max-width:880px;
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--paper);
  border-radius:24px; overflow:hidden;
  box-shadow:0 30px 70px -25px rgba(15,61,40,.45), 0 4px 14px rgba(15,61,40,.10);
}

/* ── left: brand panel ── */
.bof-login .brand{
  position:relative; padding:46px 40px;
  background:linear-gradient(150deg,var(--g-700) 0%,var(--g-900) 100%);
  color:#fff; display:flex; flex-direction:column; gap:22px; overflow:hidden;
}
.bof-login .brand::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(360px 360px at 85% 15%, rgba(255,255,255,.10), transparent 70%),
    radial-gradient(300px 300px at 0% 100%, rgba(46,158,107,.35), transparent 70%);
  pointer-events:none;
}
.bof-login .brand-logo{
  width:78px; height:78px; border-radius:50%;
  background:#fff; padding:6px; box-shadow:0 6px 18px rgba(0,0,0,.18);
  position:relative; z-index:1;
}
.bof-login .brand-logo img{width:100%; height:100%; border-radius:50%; object-fit:cover}
.bof-login .brand-eyebrow{
  position:relative; z-index:1;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.bof-login .brand h1{
  position:relative; z-index:1; margin:0;
  font-size:27px; font-weight:800; line-height:1.25;
}
.bof-login .brand .brand-sub{
  position:relative; z-index:1; margin:0;
  font-size:14px; color:rgba(255,255,255,.82); line-height:1.55;
}
.bof-login .brand-feats{
  position:relative; z-index:1; list-style:none; padding:0; margin:8px 0 0;
  display:flex; flex-direction:column; gap:13px;
}
.bof-login .brand-feats li{display:flex; align-items:center; gap:11px; font-size:13.5px; color:rgba(255,255,255,.9)}
.bof-login .brand-feats .bf-ic{
  flex:0 0 auto; width:30px; height:30px; border-radius:9px;
  background:rgba(255,255,255,.13); display:flex; align-items:center; justify-content:center;
}
.bof-login .brand-feats svg{width:16px; height:16px; stroke:#fff}

/* ── right: form panel ── */
.bof-login .form-panel{padding:46px 42px; display:flex; flex-direction:column; justify-content:center}
.bof-login .fp-head{margin-bottom:26px}
.bof-login .fp-head h2{margin:0 0 6px; font-size:23px; font-weight:800; color:var(--ink)}
.bof-login .fp-head p{margin:0; font-size:13.5px; color:var(--ink-faint)}

.bof-login .alert{
  border-radius:11px; padding:11px 14px; margin-bottom:16px;
  font-size:13.5px; font-weight:600; border:1px solid transparent;
}
.bof-login .alert-danger{background:#fdecec; color:#b3261e; border-color:#f5c6c2}

.bof-login .field{margin-bottom:17px}
.bof-login .field > label{display:block; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:7px}
.bof-login .input-wrap{position:relative; display:flex; align-items:center}
.bof-login .input-wrap .lead-ic{
  position:absolute; left:13px; width:18px; height:18px;
  color:var(--ink-faint); pointer-events:none;
}
.bof-login .input-wrap input{
  width:100%; box-sizing:border-box;
  padding:12px 14px 12px 42px;
  border:1.6px solid var(--line); border-radius:12px;
  font-size:14.5px; font-family:inherit; color:var(--ink);
  background:var(--g-50); transition:border-color .16s, box-shadow .16s, background .16s;
}
.bof-login .input-wrap input::placeholder{color:#9bb0a6}
.bof-login .input-wrap input:focus{
  outline:none; border-color:var(--g-500); background:#fff;
  box-shadow:0 0 0 4px rgba(46,158,107,.15);
}
.bof-login .input-wrap.has-toggle input{padding-right:44px}
.bof-login .pw-toggle{
  position:absolute; right:8px; width:30px; height:30px; border:0; background:transparent;
  cursor:pointer; color:var(--ink-faint); display:flex; align-items:center; justify-content:center; border-radius:8px;
}
.bof-login .pw-toggle:hover{color:var(--g-600); background:var(--g-50)}
.bof-login .pw-toggle svg{width:18px; height:18px}
.bof-login .field .help-block{display:block; margin-top:6px; font-size:12.5px; color:#b3261e; font-weight:600}

.bof-login .btn-login{
  width:100%; margin-top:6px; padding:13px 16px;
  border:0; border-radius:12px; cursor:pointer;
  background:linear-gradient(135deg,var(--g-600),var(--g-700));
  color:#fff; font-size:15px; font-weight:800; font-family:inherit;
  display:flex; align-items:center; justify-content:center; gap:9px;
  box-shadow:0 10px 22px -8px rgba(21,97,62,.6); transition:transform .14s, box-shadow .14s, filter .14s;
}
.bof-login .btn-login:hover{transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 14px 26px -8px rgba(21,97,62,.65)}
.bof-login .btn-login:active{transform:translateY(0)}
.bof-login .btn-login svg{width:18px; height:18px}

.bof-login .fp-foot{margin-top:26px; text-align:center; font-size:12.5px; color:var(--ink-faint)}
.bof-login .fp-foot a{color:var(--g-600); font-weight:700; text-decoration:none}
.bof-login .fp-foot a:hover{text-decoration:underline}

/* ── responsive ── */
@media (max-width:760px){
  .bof-login .login-card{grid-template-columns:1fr; max-width:440px}
  .bof-login .brand{padding:34px 30px; flex-direction:row; align-items:center; flex-wrap:wrap; gap:16px}
  .bof-login .brand-feats{display:none}
  .bof-login .brand h1{font-size:22px}
  .bof-login .form-panel{padding:34px 30px}
}