/* ============================================================
   admin_style_new.css — NEW LOOK for the login pages
   Electric Indigo theme (matches custom_style_new.css).
   Loaded after admin_style.css; disabled automatically when the
   user chose "Old Look" in the admin panel (localStorage.mk_look).
   admin_style.css stays untouched.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* SmartAIx shades — matches custom_style_new.css */
  --mk-canvas:      #edecf2;
  --mk-ink:         #10165c;
  --mk-muted:       #8b8eb0;
  --mk-accent:      #493e81;
  --mk-accent-dark: #423874;
  --mk-accent-soft: #e8e4fb;
  --mk-side:        #493e81;
  --mk-good:        #0e9f6e;
  --mk-warn:        #f59e0b;
  --mk-crit:        #ef4444;
}

body.login-page {
  font-family: 'Inter', 'Source Sans Pro', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ---------- canvas: keep the original .bimg* photo backgrounds
   (from admin_style.css), veiled with a violet tint so the card,
   titles and buttons stay readable and on-brand over any photo */
body.login-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(150deg,
    rgba(16, 22, 92, 0.72) 0%,
    rgba(50, 43, 87, 0.55) 45%,
    rgba(73, 62, 129, 0.55) 100%);
}

/* ---------- login card ---------- */
.login-box, .register-box { position: relative; }
.login-box-body {
  background: #fff !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(20, 12, 60, 0.45) !important;
  padding: 28px 26px !important;
}
.login-logo, .login-logo a, .login-logo b {
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.login-box-msg { color: var(--mk-muted) !important; }

/* headings / role titles placed above the card (inline-coloured in views) */
[style*="color: #7f1ab7"], [style*="color:#7f1ab7"],
[style*="color: #fb0bcb"], [style*="color:#fb0bcb"],
[style*="color: #8c1b76"], [style*="color:#8c1b76"] {
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(20, 12, 60, 0.35);
}
[style*="color: #f15757"], [style*="color:#f15757"],
[style*="color: #ff5089"], [style*="color:#ff5089"] {
  color: #d9d5f0 !important;
}
.admin_text { color: var(--mk-accent-dark) !important; }
.sishu_text { color: var(--mk-accent) !important; }

/* ---------- inputs ---------- */
.login-page .form-control {
  border-radius: 8px;
  border: 1px solid #e4e1f6;
  color: var(--mk-ink);
  box-shadow: none;
}
.login-page .form-control:focus {
  border-color: var(--mk-accent);
  box-shadow: 0 0 0 3px var(--mk-accent-soft);
}
.login-page .has-feedback .form-control-feedback { color: var(--mk-muted); }
.login_input_err {
  border-color: var(--mk-crit) !important;
  box-shadow: 0 0 0 3px #fde5e5 !important;
}
#login_err {
  background: #fde5e5 !important;
  color: var(--mk-crit) !important;
  border-radius: 8px;
  font-weight: 600;
}

/* ---------- buttons ---------- */
.login-page .btn { border-radius: 8px; font-weight: 600; }
.login-page .btn-danger,
.login-page .btn-primary {
  background-color: var(--mk-accent) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(16, 22, 92, 0.45);
}
.login-page .btn-danger:hover, .login-page .btn-danger:focus,
.login-page .btn-primary:hover, .login-page .btn-primary:focus {
  background-color: var(--mk-accent-dark) !important;
}
/* role buttons on the landing page keep distinct — but theme-tuned — hues */
.login-page .btn.bg-maroon { background-color: var(--mk-accent) !important; color: #fff !important; }
.login-page .btn.bg-purple { background-color: #7c3aed !important; color: #fff !important; }
.login-page .btn.bg-orange { background-color: var(--mk-warn) !important; color: #fff !important; }
.login-page .btn.bg-olive  { background-color: var(--mk-good) !important; color: #fff !important; }
.login-page .btn.bg-maroon:hover, .login-page .btn.bg-purple:hover,
.login-page .btn.bg-orange:hover, .login-page .btn.bg-olive:hover {
  filter: brightness(0.92);
}

/* white inline text inside the white card (e.g. "Verifying your
   account…") was written for the old photo background — re-ink it */
#verifying-account p,
.login-box-body [style*="color:#fff"],
.login-box-body [style*="color: #fff"] {
  color: var(--mk-accent-dark) !important;
  text-shadow: none !important;
}

/* Chrome autofill: keep inputs white with theme ink, not yellow */
.login-page input:-webkit-autofill,
.login-page input:-webkit-autofill:hover,
.login-page input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: #10165c !important;
  caret-color: #10165c;
}

/* ---------- misc ---------- */
.login-page a { color: #d9d5f0; }
.login-page a:hover { color: #fff; }
.login-page .checkbox label { color: var(--mk-muted); }
.check-mark { color: var(--mk-good) !important; }