/* login.css — extracted from accounts/login.html */

* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --ink: #0a0f1e; --gold: #c9a84c; --accent: #c9a84c;
  --border: #2a2f45; --muted: #64748b; --surface: #111827;
}
body {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--ink);
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(201,168,76,0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(201,168,76,0.08) 0%, transparent 50%);
  font-family: 'Barlow', sans-serif;
}
.login-wrap { width: 100%; max-width: 440px; padding: 20px; }
.logo { text-align: center; margin-bottom: 40px; }
.logo h1 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.8rem; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: white; }
.logo span { color: var(--gold); }
.logo .sub { font-size: 0.65rem; letter-spacing: 4px; color: var(--muted); text-transform: uppercase; margin-top: 6px; }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 36px; position: relative; overflow: hidden;
}
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* TABS */
.login-tabs { display: flex; gap: 0; margin-bottom: 28px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.login-tab { flex: 1; padding: 10px; text-align: center; font-size: 0.72rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background: none; border: none; color: var(--muted); cursor: pointer; transition: all 0.2s; }
.login-tab.active { background: var(--accent); color: #000; }

/* FORMS */
.form-section { display: none; }
.form-section.active { display: block; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 0.65rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.field input {
  width: 100%; padding: 12px 14px; background: rgba(255,255,255,0.12);
  border: 1px solid var(--border); border-radius: 8px; color: #ffffff !important; caret-color: #c9a84c; -webkit-text-fill-color: #ffffff;
  font-size: 0.9rem; font-family: 'Barlow', sans-serif; transition: border-color 0.2s; outline: none;
}
.field input:focus { border-color: var(--gold); background: rgba(201,168,76,0.12); box-shadow: 0 0 0 3px rgba(201,168,76,0.15); }
.field input::placeholder { color: #6b7280; }

.btn-primary {
  width: 100%; padding: 13px; background: var(--accent); color: white;
  border: none; border-radius: 8px; font-family: 'Barlow', sans-serif;
  font-weight: 700; font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer; transition: all 0.2s; margin-top: 4px;
}
.btn-primary:hover { background: #b8983f; transform: translateY(-1px); }

.divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.divider span { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }

.btn-sso {
  width: 100%; padding: 11px; background: rgba(255,255,255,0.04);
  border: 1px solid var(--border); border-radius: 8px; color: #ffffff !important; caret-color: #c9a84c; -webkit-text-fill-color: #ffffff;
  font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 0.82rem;
  cursor: pointer; transition: all 0.15s; text-decoration: none;
  display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 8px;
}
.btn-sso:hover { background: rgba(255,255,255,0.08); border-color: #4b5563; }

.link-row { text-align: center; margin-top: 16px; font-size: 0.78rem; color: var(--muted); }
.link-row a { color: var(--gold); text-decoration: none; }
.link-row a:hover { text-decoration: underline; }

.messages { margin-bottom: 16px; }
.msg { padding: 10px 14px; border-radius: 8px; font-size: 0.82rem; margin-bottom: 6px; }
.msg.error { background: rgba(220,38,38,0.2); border: 1px solid rgba(220,38,38,0.5); color: #fecaca; font-weight: 600; }
.msg.success { background: rgba(22,163,74,0.15); border: 1px solid rgba(22,163,74,0.3); color: #86efac; }
.msg.info { background: rgba(59,130,246,0.15); border: 1px solid rgba(59,130,246,0.3); color: #93c5fd; }

.role-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 20px; }
.role-badge { padding: 3px 10px; border-radius: 20px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.5px; border: 1px solid; }

.footer-note { text-align: center; margin-top: 24px; font-size: 0.7rem; color: #374151; }
.footer-note a { color: var(--muted); text-decoration: none; }


.pwd-wrap{position:relative;display:block}
.pwd-wrap input{width:100%;padding-right:40px;box-sizing:border-box}
.pwd-eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);
background:none;border:none;cursor:pointer;color:var(--gold);font-size:18px;padding:0}

/* F1 Audit: Login mobile fixes */
@media(max-width:480px){
  .card{padding:24px 20px;border-radius:12px}
  .login-tabs{flex-wrap:wrap}
  .login-tab{flex:1 1 48%;font-size:.65rem;padding:8px 6px}
  .logo h1{font-size:1.5rem}
  .field input{padding:14px;font-size:1rem}
  .btn-primary{padding:14px;font-size:.9rem}
  .role-badges{display:none}
}

/* Force visible text in ALL inputs — nuclear option */
.field input,
.card input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"] {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #c9a84c !important;
}

/* Autofill override — Chrome/Safari inject their own bg+color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0px 1000px #111827 inset !important;
    box-shadow: 0 0 0px 1000px #111827 inset !important;
    caret-color: #c9a84c !important;
}

/* PIN input (trikey tab) */
input.text-center {
    color: #c9a84c !important;
    -webkit-text-fill-color: #c9a84c !important;
}