/* =========================================================
   UI 2025 — Executive+ · Mint · White · Glass
   Login CSS (drop-in, no HTML changes)
   ========================================================= */

/* ---------------- 0) TOKENS ---------------- */
:root{
  /* Brand (Mint) */
  --brand:#22C55E;
  --brand-600:#16A34A;
  --brand-700:#15803D;
  --brand-50:#ECFDF5;

  /* Base / Ink */
  --bg:#F8FAFC;           /* bright canvas */
  --ink:#1E293B;          /* slate-800 */
  --ink-2:#334155;        /* slate-700 */
  --ink-3:#475569;        /* slate-600 */
  --muted:#64748B;        /* slate-500 */

  /* Surfaces */
  --surface:rgba(255,255,255,.72);
  --surface-strong:#FFFFFF;

  /* Accents / State */
  --danger:#EF4444;

  /* Elevation / Radii */
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 24px 60px rgba(2,6,23,.10);
  --shadow-sm:0 10px 24px rgba(2,6,23,.06);

  --ring:0 0 0 3px rgba(34,197,94,.25);
}

/* ---------------- 1) BASE / RESET ---------------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, -apple-system, Segoe UI, Inter, Roboto, Arial, "Noto Sans";
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea{ font:inherit; color:inherit; }

/* ---------------- 2) BACKGROUND (White · Grid · Mint Aura) ---------------- */
.bg{ position:fixed; inset:0; z-index:-1; }
.bg-gradient{
  position:absolute; inset:0;
  background:
    radial-gradient(1100px 600px at 12% 8%, rgba(34,197,94,.10), transparent 60%),
    radial-gradient(900px 520px at 85% 92%, rgba(2,132,199,.10), transparent 60%);
}
.bg-grid{
  position:absolute; inset:0; opacity:.55;
  background-image:
    linear-gradient(to right, rgba(15,23,42,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,.04) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(1200px 1200px at 50% 50%, #000 55%, transparent 100%);
}

/* ---------------- 3) LAYOUT (Glass Card) ---------------- */
.login-wrapper{
  min-height:100dvh;
  display:grid; place-items:center;
  padding:30px;
}
.card{
  width:100%; max-width:480px;
  padding:32px 30px 26px;
  border-radius:var(--radius);
  background:var(--surface);
  backdrop-filter: blur(18px) saturate(1.15);
  border:1px solid rgba(15,23,42,.08);
  box-shadow: var(--shadow);
  position:relative; overflow:hidden;
}
/* soft mint glow on top */
.card::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit;
  background: radial-gradient(600px 220px at 50% -40px, rgba(34,197,94,.22), transparent 70%);
  pointer-events:none;
}

/* ---------------- 4) HEADER ---------------- */
.logo{
  width:74px; height:74px; object-fit:contain;
  display:block; margin:0 auto 10px;
  border-radius:16px; background:rgba(255,255,255,.65);
  box-shadow: var(--shadow-sm);
}
h2{
  margin:6px 0 6px; text-align:center;
  font-weight:800; font-size:22px; letter-spacing:.2px;
}
.subtitle{
  margin:0 0 18px; text-align:center;
  color:var(--ink-3); font-size:14px;
}

/* ---------------- 5) ALERT (errors) ---------------- */
.alert{
  display:flex; gap:10px; align-items:center;
  background:#FEF2F2; color:#991B1B;
  border:1px solid #FCA5A5;
  border-radius:12px; padding:10px 12px; margin-bottom:12px;
}
.alert-icon{
  width:18px;height:18px; display:grid; place-items:center;
  background:#FCA5A5; color:#7F1D1D; border-radius:999px;
  font-weight:700; font-size:12px;
}

/* ---------------- 6) INPUTS (with icons + eye) ---------------- */
.input{ position:relative; margin-bottom:12px; }
.input input{
  width:100%; height:50px;
  border-radius:14px;
  border:1px solid rgba(2,6,23,.12);
  background:var(--surface-strong);
  padding:0 46px 0 46px;              /* space for icons (left+right) */
  color:var(--ink); font-size:15px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.input input::placeholder{ color:#94A3B8; }
.input input:focus{
  outline:0; border-color:var(--brand); box-shadow: var(--ring); background:#fff;
}

/* left icons (inline SVG) */
.icon{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; opacity:.78;
  background-repeat:no-repeat; background-size:20px 20px;
}
.icon.email{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2364758B' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16v12H4z'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E");
}
.icon.lock{
  background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2364758B' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Crect x='5' y='10' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E\");
}

/* right eye (if JS adds .eye button; works with Bootstrap Icons) */
.input .eye{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border:0; background:transparent; cursor:pointer;
  border-radius:10px; display:grid; place-items:center;
}
.input .eye i{ font-size:18px; color:#64748B; }
.input .eye:hover i{ color:#334155; }

/* ---------------- 7) META ROW ---------------- */
.meta{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin:4px 0 14px;
}
.link{ color:var(--ink-2); text-decoration:none; font-weight:700; }
.link:hover{ color:var(--ink); text-decoration:underline; }

/* Remember me — Executive+ switch */
.switch{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.switch input{ appearance:none; width:0; height:0; position:absolute; }
.switch .track{
  position:relative; width:46px; height:26px;
  background:#E2E8F0; border-radius:999px;
  box-shadow: inset 0 0 0 1px rgba(2,6,23,.08);
  transition: background .15s ease;
}
.switch .track::after{
  content:""; position:absolute; top:3px; left:3px;
  width:20px; height:20px; border-radius:50%;
  background:#FFFFFF; box-shadow:0 1px 2px rgba(0,0,0,.18);
  transition: transform .18s cubic-bezier(.2,.65,.3,1);
}
.switch input:checked + .track{
  background:linear-gradient(180deg, var(--brand) 0%, var(--brand-600) 100%);
}
.switch input:checked + .track::after{ transform: translateX(18px); }
.switch .label{ color:var(--ink-3); font-size:14px; }

/* ---------------- 8) PRIMARY BUTTON ---------------- */
.btn-primary{
  width:100%; display:block; height:50px;
  border:0; border-radius:14px;
  background:linear-gradient(180deg, var(--brand) 0%, var(--brand-600) 100%);
  color:#fff; font-weight:800; font-size:16px; letter-spacing:.2px;
  box-shadow: 0 14px 28px rgba(34,197,94,.25), inset 0 -1px 0 rgba(255,255,255,.25);
  cursor:pointer; transition: transform .06s ease, filter .15s ease;
}
.btn-primary:hover{ filter:brightness(1.05); }
.btn-primary:active{ transform: translateY(1px); }

/* ---------------- 9) FOOTER TEXT ---------------- */
.register{
  margin-top:12px; text-align:center; color:var(--ink-3); font-size:14px;
}
.register .link{ font-weight:800; }

/* ---------------- 10) ACCESSIBILITY ---------------- */
@media (prefers-reduced-motion: reduce){
  .btn-primary, .switch .track::after { transition:none; }
}

/* ---------------- 11) SMALL SCREENS ---------------- */
@media (max-width:420px){
  .card{ padding:26px 22px; }
  .logo{ width:66px; height:66px; }
}