/* ================
   GRC Auth Styles
   File: /assets/css/login.css
   ================ */

/* ---- Design tokens ---- */
:root{
  --brand:        #2563eb;
  --brand-600:    #2563eb;
  --brand-700:    #1d4ed8;
  --brand-50:     #eff6ff;

  --bg:           #f6f7fb;
  --text:         #111827;
  --muted:        #6b7280;

  --success:      #059669;
  --success-50:   #ecfdf5;
  --warning:      #d97706;
  --warning-50:   #fffbeb;
  --danger:       #dc2626;
  --danger-50:    #fef2f2;
  --info:         #0ea5e9;
  --info-50:      #e0f2fe;

  --card:         #ffffff;
  --border:       #e5e7eb;

  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --shadow-sm:    0 2px 10px rgba(0,0,0,.05);
  --shadow-md:    0 6px 22px rgba(0,0,0,.08);

  --font:         Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
}

/* ---- Base reset ---- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 100% -10%, #f3f6ff 0%, rgba(243,246,255,0) 60%),
    radial-gradient(1000px 700px at -10% 0%, #f8fafc 0%, rgba(248,250,252,0) 55%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ---- Layout ---- */
.login-container{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:32px 16px;
}
.login-card{
  width:min(520px, 92vw);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  padding:28px;
}

/* ---- Header ---- */
.login-header{
  text-align:center;
  margin-bottom:20px;
}
.login-logo{
  display:grid;place-items:center;
  width:56px;height:56px;
  margin:0 auto 10px;
  border-radius:14px;
  background:linear-gradient(135deg, var(--brand-600), var(--brand-700));
  color:#fff;
  box-shadow:0 10px 18px rgba(37,99,235,.25);
  font-size:24px;
}
.login-header h1{
  margin:4px 0 4px;
  font-size:22px;
  font-weight:800;
  letter-spacing:.2px;
}
.login-header p{
  margin:0;
  color:var(--muted);
}

/* ---- Alerts ---- */
.alert{
  display:grid;
  grid-auto-flow:column;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  margin-bottom:12px;
  font-size:14px;
}
.alert i{font-size:18px}
.alert-success{background:var(--success-50); color:#065f46; border-color:#a7f3d0}
.alert-error{background:var(--danger-50); color:#991b1b; border-color:#fca5a5}
.alert-warning{background:var(--warning-50); color:#92400e; border-color:#fcd34d}
.alert-info{background:var(--info-50); color:#075985; border-color:#bae6fd}

/* ---- Form ---- */
.login-form .form-group{margin-bottom:14px}
.login-form label{
  display:block;
  margin:0 0 6px;
  font-weight:600;
  font-size:14px;
}
.input-group{
  display:grid;
  grid-template-columns: 24px 1fr auto;
  align-items:center;
  gap:10px;
  border:1px solid var(--border);
  background:#fff;
  border-radius:12px;
  padding:0 12px 0 12px;
  height:48px;
}
.input-group i{color:#94a3b8}

.input-group input{
  border:0; outline:0; background:transparent;
  font-size:16px; height:44px;
  width:100%;
}
.input-group:focus-within{
  border-color:var(--brand-600);
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

/* Toggle password button */
.toggle-password{
  border:0;background:transparent;cursor:pointer;
  height:32px;width:32px;border-radius:8px;
  display:grid;place-items:center;
}
.toggle-password:hover{background:#f3f4f6}

/* Options row */
.form-options{
  display:flex;justify-content:space-between;align-items:center;
  margin:8px 0 14px;
  gap:10px; flex-wrap:wrap;
  font-size:14px;
}
.checkbox{display:flex;gap:8px;align-items:center}
.checkbox input{width:16px;height:16px}
.forgot-link{color:var(--brand-700);text-decoration:none}
.forgot-link:hover{text-decoration:underline}

/* Submit button */
.btn-login{
  width:100%;
  display:grid; grid-auto-flow:column; justify-content:center; align-items:center; gap:10px;
  height:48px;
  border:0; border-radius:12px;
  background:var(--brand);
  color:#fff; font-weight:700; font-size:16px;
  box-shadow:0 10px 20px rgba(37,99,235,.25);
  cursor:pointer;
  transition:transform .02s ease;
}
.btn-login:hover{filter:brightness(1.03)}
.btn-login:active{transform:translateY(1px)}

/* Footer */
.login-footer{margin-top:14px;text-align:center;color:var(--muted);font-size:14px}
.login-footer a{color:var(--brand-700);text-decoration:none}
.login-footer a:hover{text-decoration:underline}

/* Small screens */
@media (max-width:420px){
  .login-card{padding:22px}
}

/* Dark mode (optional, auto) */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1020;
    --card:#0f172a;
    --text:#e5e7eb;
    --muted:#94a3b8;
    --border:#1f2937;
  }
  body{background:#0b1020}
  .input-group{background:#0f172a}
  .toggle-password:hover{background:#0b1222}
  .btn-login{box-shadow:none}
}