/* ================================================================
   auth.css — Shared styles for all Logistics Engine auth pages
   (login · register · forgot_password · reset_password)
   ================================================================ */

*{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg0:#080C10; --bg1:#0D1219; --bg2:#121920; --bg3:#1A2330; --bg4:#1F2A38;
  --border:#253040; --border-lit:#2E3D50;
  --amber:#F5A623; --amber-dim:#C4841A; --amber-glow:rgba(245,166,35,0.12);
  --green:#00D97E; --red:#FF4D4D; --blue:#4DA8FF;
  --text1:#E8EDF2; --text2:#99AABB; --text3:#627A8F;
  --mono:'IBM Plex Mono',monospace; --sans:'IBM Plex Sans',sans-serif;
}

html,body{
  min-height:100%;background:var(--bg0);color:var(--text1);
  font-family:var(--sans);display:flex;flex-direction:column;
}

/* ── Topbar ─────────────────────────────────────────────────── */
.topbar{
  height:52px;background:var(--bg1);border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 24px;gap:16px;flex-shrink:0;
}
.logo{display:flex;align-items:center;gap:10px}
.logo-box{
  width:28px;height:28px;background:var(--amber);border-radius:4px;
  display:flex;align-items:center;justify-content:center;
}
.logo-l{font-family:var(--mono);font-weight:600;font-size:14px;color:#000}
.logo-name{font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:0.12em;color:var(--text1)}
.logo-tag{font-family:var(--mono);font-size:10px;color:var(--text3);letter-spacing:0.14em;text-transform:uppercase}

/* ── Page centring ───────────────────────────────────────────── */
.page{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 24px}

/* ── Card ────────────────────────────────────────────────────── */
.card{
  width:100%;max-width:420px;background:var(--bg1);
  border:1px solid var(--border);border-radius:8px;overflow:hidden;
}
.card-header{padding:24px 28px 20px;border-bottom:1px solid var(--border)}
.card-title{
  font-family:var(--mono);font-size:13px;font-weight:600;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--amber);
}
.card-sub{font-size:13px;color:var(--text3);margin-top:4px;line-height:1.5}
.card-body{padding:24px 28px 28px;display:flex;flex-direction:column;gap:18px}

/* ── Form fields ─────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:6px}
.field label{
  font-family:var(--mono);font-size:10px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--text3);
}
.field input,
.field select{
  background:var(--bg3);border:1px solid var(--border);border-radius:4px;
  padding:10px 12px;font-family:var(--mono);font-size:13px;color:var(--text1);
  transition:border-color 0.15s;width:100%;appearance:none;
}
.field input:focus,
.field select:focus{border-color:var(--amber-dim);outline:none;background:var(--bg4)}
.field input::placeholder{color:var(--text3)}
.field input.invalid,
.field select.invalid{border-color:rgba(255,77,77,0.6)}
.field-hint{font-family:var(--mono);font-size:10px;color:var(--text3);margin-top:2px}

/* ── Horizontal divider inside card ─────────────────────────── */
.divider{height:1px;background:var(--border);margin:4px 0}

/* ── Feedback / message box ──────────────────────────────────── */
.msg-box{
  border-radius:4px;padding:10px 14px;
  font-family:var(--mono);font-size:12px;line-height:1.5;display:none;
}
.msg-box.error{background:rgba(255,77,77,0.08);border:1px solid rgba(255,77,77,0.3);color:var(--red)}
.msg-box.success{background:rgba(0,217,126,0.08);border:1px solid rgba(0,217,126,0.3);color:var(--green)}
.msg-box.warning{background:rgba(245,166,35,0.08);border:1px solid rgba(245,166,35,0.3);color:var(--amber)}
.msg-box.visible{display:block}

/* error-box variant (login.php) */
.error-box{
  background:rgba(255,77,77,0.08);border:1px solid rgba(255,77,77,0.3);
  border-radius:4px;padding:10px 14px;
  font-family:var(--mono);font-size:12px;color:var(--red);
}

/* ── Primary submit button ───────────────────────────────────── */
.btn-submit{
  width:100%;padding:12px;background:var(--amber);border:none;border-radius:4px;
  font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:0.1em;text-transform:uppercase;color:#000;cursor:pointer;
  transition:opacity 0.15s;margin-top:4px;
}
.btn-submit:hover{opacity:0.88}
.btn-submit:active{opacity:0.75}
.btn-submit:disabled{opacity:0.5;cursor:not-allowed}

/* ── Footer bar ──────────────────────────────────────────────── */
.card-footer{
  padding:16px 28px;border-top:1px solid var(--border);
  background:var(--bg2);display:flex;justify-content:space-between;align-items:center;
}
.card-footer-row{display:flex;align-items:center;width:100%;justify-content:space-between}
.card-footer a{
  font-family:var(--mono);font-size:11px;color:var(--text3);
  text-decoration:none;letter-spacing:0.05em;transition:color 0.15s;
}
.card-footer a:hover{color:var(--amber)}
.back-arrow{margin-right:6px}
.powered{font-family:var(--mono);font-size:10px;color:var(--text3);letter-spacing:0.06em;opacity:0.7}

/* ── Org hint (login.php) ────────────────────────────────────── */
.org-hint{
  font-family:var(--mono);font-size:10px;color:var(--text3);
  padding:14px 28px;border-top:1px solid var(--border);background:var(--bg2);
}
.org-id-display{color:var(--amber);word-break:break-all}

/* ── Terms line (register.php) ───────────────────────────────── */
.terms{
  font-family:var(--mono);font-size:10px;color:var(--text3);
  text-align:center;line-height:1.6;padding:0 4px;
}
.terms a{color:var(--text2);text-decoration:underline;text-decoration-color:var(--border)}
.terms a:hover{color:var(--amber);text-decoration-color:var(--amber)}

/* ── Success (check-email) state (register.php) ──────────────── */
.success-state{
  padding:36px 28px;display:none;flex-direction:column;
  align-items:center;gap:16px;text-align:center;
}
.success-state.visible{display:flex}
.success-icon{
  width:52px;height:52px;border-radius:50%;
  background:rgba(0,217,126,0.1);border:1px solid rgba(0,217,126,0.3);
  display:flex;align-items:center;justify-content:center;font-size:22px;
}
.success-title{
  font-family:var(--mono);font-size:13px;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--green);
}
.success-body{font-size:13px;color:var(--text2);line-height:1.6;max-width:300px}
.success-email{
  font-family:var(--mono);font-size:12px;color:var(--amber);
  background:var(--bg3);border:1px solid var(--border);
  border-radius:4px;padding:8px 14px;word-break:break-all;
}
.success-hint{
  font-family:var(--mono);font-size:10px;color:var(--text3);line-height:1.7;
}
.success-hint a{color:var(--amber);text-decoration:none}
.success-hint a:hover{text-decoration:underline}

/* ── Password strength bar (reset_password.php) ──────────────── */
.strength-bar{height:3px;border-radius:2px;background:var(--bg3);overflow:hidden;margin-top:2px}
.strength-fill{height:100%;width:0%;border-radius:2px;transition:width 0.2s,background 0.2s}
.strength-label{font-family:var(--mono);font-size:10px;color:var(--text3);text-align:right;margin-top:3px}

/* ── Invalid-token warning (reset_password.php) ──────────────── */
.token-invalid{
  padding:28px;text-align:center;display:none;flex-direction:column;gap:14px;align-items:center;
}
.token-invalid.visible{display:flex}
.token-invalid-icon{font-size:28px}
.token-invalid-text{font-family:var(--mono);font-size:12px;color:var(--text3);line-height:1.6}

/* ── Session-expiry banner ───────────────────────────────────── */
#session-expiry-banner{
  position:fixed;bottom:0;left:0;right:0;
  background:var(--bg2);border-top:1px solid var(--border);
  padding:12px 20px;display:flex;align-items:center;gap:16px;
  font-family:var(--mono);font-size:11px;color:var(--text2);
  z-index:9999;transform:translateY(100%);transition:transform .25s ease;
}
#session-expiry-banner.visible{transform:translateY(0)}
#session-expiry-banner strong{color:var(--amber)}
#session-expiry-banner .session-extend-btn{
  background:var(--amber);color:#000;border:none;border-radius:4px;
  padding:5px 14px;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.06em;cursor:pointer;text-transform:uppercase;
}
#session-expiry-banner .session-dismiss-btn{
  background:none;border:none;color:var(--text3);font-size:14px;
  cursor:pointer;padding:2px 4px;margin-left:auto;
}