/* Shared look for the sign-in, forgot-password and reset-password pages
   (index.html, forgot.html, reset-password.html), so they can't drift apart
   again (project ticket #54). Tenant colours are applied over these
   variables by each page's branding script. */
:root{
  --brand-400:#43ba79; --brand-500:#1f9d57; --brand-600:#167c46; --brand-700:#10613a; --brand-800:#0c4a2e; --brand-50:#eefbf2;
  --brand-gradient: linear-gradient(165deg, #04241a 0%, #0b4a30 42%, #179246 100%);
  --bg:#f4f6f5; --surface:#ffffff; --text:#17211c; --muted:#5c6b62; --border:rgba(15,30,23,.12);
  --danger:#d0374f; --danger-soft:#ffeaf0;
  --glow: 0 10px 26px -8px rgba(16,97,58,.5);
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ font-family: Inter, "Segoe UI", system-ui, sans-serif; color:var(--text); }
/* The grid lives on its own wrapper, not body itself — a browser
   extension (password managers like Bitwarden are the common case) can
   inject its own element straight into body on form submit, and if body
   were the grid container that injected element becomes an unintended
   third grid item, squashing the two real columns to make room for it. */
.login-shell{
  min-height:100vh;
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr);
}
@media (max-width: 880px){ .login-shell{ grid-template-columns: 1fr; } }

/* ---------- Left: brand panel ---------- */
.brand-panel{
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between;
  padding:48px; background: var(--brand-gradient); color:#fff;
}
@media (max-width: 880px){ .brand-panel{ display:none; } }
.brand-panel::before{
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(circle at 30% 25%, black, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 30% 25%, black, transparent 75%);
  pointer-events:none;
}
.brand-glow{ position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; }
/* Neutral white/black shading rather than a fixed color — this panel's
   background can be any tenant's brand color (see the /__tenant-info
   script below), so a hardcoded green glow here would clash the moment
   a tenant isn't green. */
.brand-glow.glow-a{ width:340px; height:340px; top:-80px; right:-100px; background:rgba(255,255,255,.18); }
.brand-glow.glow-b{ width:300px; height:300px; bottom:-100px; left:-80px; background:rgba(0,0,0,.30); }
.brand-top{ position:relative; display:flex; align-items:center; gap:12px; }
.brand-top .badge{
  width:38px; height:38px; border-radius:10px; background:#fff; padding:7px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.brand-top .badge img{ width:100%; height:100%; object-fit:contain; filter: drop-shadow(0 0 20px rgba(255,255,255,.35)); }
.brand-top span{ font-weight:800; font-size:1.15rem; letter-spacing:-.01em; }
.brand-mid{ position:relative; max-width:420px; }
.brand-mid h1{ font-size:2.3rem; font-weight:800; line-height:1.15; letter-spacing:-.02em; margin:0 0 16px; }
.brand-mid p{ font-size:1.02rem; line-height:1.6; color:rgba(255,255,255,.86); margin:0; }
.brand-bottom{ position:relative; font-size:.82rem; color:rgba(255,255,255,.68); }

/* ---------- Right: form panel ---------- */
.form-panel{ display:flex; align-items:center; justify-content:center; padding:24px; background:var(--bg); }
.wrap{ width:100%; max-width:380px; }

.mobile-mark{ display:none; width:52px; height:52px; margin:0 auto 20px; }
.mobile-mark img{ width:100%; height:100%; object-fit:contain; filter: drop-shadow(0 8px 16px rgba(16,97,58,.35)); }
@media (max-width: 880px){ .mobile-mark{ display:block; } }

.wrap h2{ font-size:1.5rem; margin:0 0 6px; font-weight:800; letter-spacing:-.01em; }
.wrap p.sub{ margin:0 0 30px; color:var(--muted); font-size:.9rem; }
.workspace-pill{
  display:inline-flex; align-items:center; gap:6px; background:var(--brand-50); color:var(--brand-800,var(--brand-700));
  border-radius:999px; padding:5px 12px 5px 8px; font-size:.78rem; font-weight:700; margin-bottom:14px;
}
.workspace-pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--brand-gradient); }

.field{ position:relative; margin-bottom:18px; }
.field input{
  width:100%; border:1.5px solid var(--border); border-radius:12px; padding:19px 14px 7px;
  font-size:.95rem; outline:none; background:var(--surface); color:var(--text); font-family:inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus{ border-color:var(--brand-500); box-shadow:0 0 0 4px var(--brand-50); }
.field label{
  position:absolute; left:14px; top:14px; font-size:.92rem; color:var(--muted);
  pointer-events:none; transition: all .15s ease; padding:0 2px;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label{
  top:6px; font-size:.68rem; font-weight:650; color:var(--brand-600);
}

.row-between{ display:flex; align-items:center; justify-content:flex-end; margin:-10px 0 22px; }
.row-between a{ font-size:.82rem; color:var(--brand-700); text-decoration:none; font-weight:600; }
.row-between a:hover{ text-decoration:underline; }

.btn-primary{
  width:100%; border:none; border-radius:12px; background: var(--brand-gradient); background-size:180% 180%; background-position:0% 50%;
  color:#fff; font-weight:700; font-size:.94rem; padding:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px; box-shadow: var(--glow);
  transition: background-position .4s ease, transform .15s ease, box-shadow .15s ease;
}
.btn-primary:hover{ background-position:100% 50%; transform:translateY(-1px); }
.btn-primary:active{ transform:translateY(0) scale(.99); }
.btn-primary:disabled{ opacity:.7; cursor:default; }

.spinner{ display:none; width:15px; height:15px; border-radius:50%; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; animation: spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.banner{
  display:none; align-items:center; gap:8px; background:var(--danger-soft); color:var(--danger); border-radius:12px;
  padding:11px 14px; font-size:.84rem; margin-bottom:18px; font-weight:600;
  opacity:0; transform:translateY(-8px); transition: opacity .25s ease, transform .25s ease;
}
.banner.show{ display:flex; opacity:1; transform:translateY(0); }
.banner.success{ background:var(--brand-50); color:var(--brand-700); }

.foot{ text-align:center; margin-top:26px; font-size:.86rem; color:var(--muted); }
.foot a{ color:var(--brand-700); font-weight:650; text-decoration:none; }
.foot a:hover{ text-decoration:underline; }

.modal-overlay{ position:fixed; inset:0; background:rgba(8,20,14,.45); display:none; align-items:center; justify-content:center; z-index:50; padding:20px; }
.modal-overlay.open{ display:flex; }
.modal{
  width:100%; max-width:340px; background:#fff; border-radius:20px; padding:28px 26px; text-align:center;
  box-shadow:0 30px 70px rgba(8,20,14,.28); animation: fadeInUp .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes fadeInUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
.modal h2{ font-size:1.08rem; margin:0 0 6px; font-weight:800; }
.modal p{ font-size:.85rem; color:var(--muted); margin:0 0 18px; }
.totp-input{
  width:100%; text-align:center; letter-spacing:.4em; font-size:1.3rem; font-weight:700;
  border:1.5px solid var(--border); border-radius:12px; padding:12px; margin-bottom:14px; outline:none; font-family:inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.totp-input:focus{ border-color:var(--brand-500); box-shadow:0 0 0 4px var(--brand-50); }
.totp-input.shake{ animation: shake .4s; }
@keyframes shake{ 25%{ transform:translateX(-6px); } 75%{ transform:translateX(6px); } }
.modal-actions{ display:flex; gap:8px; }
.modal-actions button{ flex:1; }
.btn-ghost{ background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:12px; padding:11px; font-weight:650; font-size:.88rem; cursor:pointer; }

/* ---------- Extras for forgot / reset ---------- */
.field .pw-toggle{ position:absolute; right:10px; top:50%; transform:translateY(-50%); border:none; background:none; color:var(--muted); cursor:pointer; padding:6px; font-size:1rem; }
.state-icon{ width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:var(--brand-50); color:var(--brand-700); font-size:1.5rem; margin-bottom:16px; }
.state-icon.bad{ background:var(--danger-soft); color:var(--danger); }
.hint{ font-size:.78rem; color:var(--muted); margin:-8px 0 18px; }
.legal{ text-align:center; margin-top:28px; padding-top:18px; border-top:1px solid var(--border); font-size:.78rem; color:var(--muted); }
.legal a{ color:var(--muted); text-decoration:none; font-weight:600; }
.legal a:hover{ color:var(--text); }