/* Eduzep admin + recovery UI-kit — one source of truth for the super-admin surfaces.
   Brand tokens, Django-admin theme overrides, branded login, and shared .ez-* card
   components used by the standalone recovery pages. */

:root {
  /* Brand tokens */
  --ez-navy:#1E3A8A; --ez-ink:#16357D; --ez-royal:#2563EB; --ez-bright:#3B82F6;
  --ez-cloud:#EAF1FC; --ez-slate:#475569; --ez-line:#cbd5e1; --ez-coral:#CF534B;
  --ez-grad:linear-gradient(135deg,#3B82F6 0%,#2563EB 55%,#1E3A8A 100%);
  --ez-font:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;

  /* Django admin theme overrides */
  --primary:#1E3A8A; --secondary:#2563EB; --accent:#3B82F6; --primary-fg:#ffffff;
  --header-bg:var(--ez-grad); --header-color:#ffffff; --header-branding-color:#ffffff;
  --header-link-color:#ffffff;
  --link-fg:#2563EB; --link-hover-color:#1E3A8A; --link-selected-fg:#1E3A8A;
  --button-bg:#2563EB; --button-fg:#ffffff; --button-hover-bg:#1E3A8A;
  --default-button-bg:#2563EB; --default-button-hover-bg:#1E3A8A;
  --object-tools-bg:#16357D; --object-tools-hover-bg:#1E3A8A;
  --selected-row:#EAF1FC; --breadcrumbs-bg:#16357D;
}

body { font-family:var(--ez-font); }

/* ── Header / branding (whole admin) ───────────────────────────────────── */
#header { background:var(--ez-grad) !important; color:#fff !important; padding:14px 40px;
  box-shadow:0 2px 12px rgba(30,58,138,.18); }
/* Force every header text element solid white — Django defaults colour the
   site-name with --accent (blue), which is invisible on the blue gradient. */
#header, #branding, #site-name, #site-name a, #site-name a:link, #site-name a:visited,
#site-name a:hover, #site-name span, #header #user-tools, #header #user-tools a,
#header a:link, #header a:visited { color:#fff !important; }
#site-name { font-weight:700; font-size:20px; }
#site-name a { display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
#site-name span { color:#fff !important; }
img.ez-logo { height:30px; width:auto; }
div.breadcrumbs { background:var(--ez-ink); color:#dbe6fb; }
div.breadcrumbs a, div.breadcrumbs a:link, div.breadcrumbs a:visited { color:#fff; }

/* ── Branded login card — pinned to LIGHT brand in both themes ───────────── */
.login { background:var(--ez-cloud) !important; color:var(--ez-ink) !important; color-scheme:light; }
.login #container {
  max-width:420px; border:none; border-radius:16px; overflow:hidden;
  box-shadow:0 14px 48px rgba(30,58,138,.16); margin-top:6vh; background:#fff !important;
}
.login #header { justify-content:center; text-align:center; padding:22px 24px; }
.login #content, .login #content-main, .login .form-row { background:#fff !important; }
.login #content { padding:28px 30px 30px; }
.login #content-main { width:100%; }
.login form .form-row { padding:9px 0; border:none; }
.login form .form-row label, .login label { display:block; font-weight:600; font-size:13px;
  color:var(--ez-ink) !important; margin-bottom:5px; }
.login input[type=text], .login input[type=password],
.login #id_otp_token, .login #id_otp_device {
  width:100%; box-sizing:border-box; padding:11px 13px; border:1px solid var(--ez-line);
  border-radius:10px; font-size:15px; font-family:var(--ez-font);
  background:#fff !important; color:#0F1F4D !important;
}
.login input[type=text]:focus, .login input[type=password]:focus, .login #id_otp_token:focus {
  outline:none; border-color:var(--ez-royal); box-shadow:0 0 0 3px rgba(37,99,235,.15);
}
.login #id_otp_token { letter-spacing:4px; font-weight:600; }
.login .submit-row { padding:16px 0 0; margin:0; border:none; background:none; }
.login .submit-row input[type=submit] {
  width:100%; background:var(--ez-royal); color:#fff; border:0; border-radius:10px;
  padding:12px; font-weight:600; font-size:15px; cursor:pointer; transition:background .15s;
}
.login .submit-row input[type=submit]:hover { background:var(--ez-navy); }
.login .submit-row input[name=otp_challenge] { background:#fff; color:var(--ez-royal);
  border:1px solid var(--ez-royal); margin-top:8px; }
.login .password-reset-link { text-align:center; margin-top:16px; }
.login .password-reset-link a { color:var(--ez-royal); font-size:13px; text-decoration:none; }
.login .password-reset-link a:hover { text-decoration:underline; }
.errornote, .login .errornote { border-radius:10px; border:none; background:#fdecea;
  color:var(--ez-coral); font-weight:500; }

/* ── Shared card components (recovery pages) ───────────────────────────── */
.ez-page { margin:0; min-height:100vh; background:var(--ez-cloud); font-family:var(--ez-font);
  color:var(--ez-ink); display:flex; align-items:flex-start; justify-content:center;
  color-scheme:light; }  /* always light brand, even if the OS is in dark mode */
.ez-card { width:100%; max-width:420px; margin:8vh 16px; background:#fff; border-radius:16px;
  overflow:hidden; box-shadow:0 14px 48px rgba(30,58,138,.16); }
.ez-card .ez-head { background:var(--ez-grad); color:#fff; padding:22px 26px; text-align:center; }
.ez-card .ez-head img { height:26px; margin-bottom:10px; display:block; margin-left:auto; margin-right:auto; }
.ez-card .ez-head h1 { margin:0; font-size:18px; font-weight:600; }
.ez-card .ez-body { padding:24px 26px 26px; }
.ez-intro { color:var(--ez-slate); font-size:14px; margin:0 0 16px; }
.ez-body label { display:block; font-size:13px; font-weight:600; margin:12px 0 5px; color:var(--ez-ink); }
.ez-body input { width:100%; box-sizing:border-box; padding:11px 13px; border:1px solid var(--ez-line);
  border-radius:10px; font-size:15px; font-family:var(--ez-font); background:#fff; color:#0F1F4D; }
.ez-body input:focus { outline:none; border-color:var(--ez-royal); box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.ez-btn { margin-top:18px; width:100%; background:var(--ez-royal); color:#fff; border:0;
  border-radius:10px; padding:12px; font-size:15px; font-weight:600; cursor:pointer; transition:background .15s; }
.ez-btn:hover { background:var(--ez-navy); }
.ez-err { color:var(--ez-coral); font-size:13px; margin:6px 0 0; }
.ez-err ul, ul.errorlist { list-style:none; padding:0; margin:4px 0 0; color:var(--ez-coral); font-size:13px; }
.ez-foot { margin-top:16px; text-align:center; }
.ez-foot a, .ez-link { color:var(--ez-royal); text-decoration:none; font-size:13px; }
.ez-foot a:hover { text-decoration:underline; }
.ez-qr { display:block; margin:6px auto 12px; width:200px; height:200px; border-radius:10px; }
.ez-key { font-family:ui-monospace,Menlo,monospace; background:var(--ez-cloud); color:var(--ez-ink);
  padding:8px 10px; border-radius:8px; word-break:break-all; font-size:13px; text-align:center; }

/* ── Keep brand chrome consistent in dark mode ─────────────────────────── */
html[data-theme="dark"] {
  --header-bg:var(--ez-grad); --header-color:#fff; --header-branding-color:#fff;
  --header-link-color:#fff; --button-bg:#2563EB; --button-hover-bg:#3B82F6;
  --default-button-bg:#2563EB; --default-button-hover-bg:#3B82F6;
  --object-tools-bg:#16357D; --object-tools-hover-bg:#1E3A8A;
  /* Links/selection readable on the dark body — don't leave these at light values */
  --link-fg:#8ab4ff; --link-hover-color:#bcd4ff; --link-selected-fg:#bcd4ff;
  --selected-row:#1e293b; --breadcrumbs-bg:#16357D; --accent:#3B82F6;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --header-bg:var(--ez-grad); --header-color:#fff; --header-link-color:#fff;
    --object-tools-bg:#16357D; --selected-row:#1e293b;
    --link-fg:#8ab4ff; --link-hover-color:#bcd4ff; --link-selected-fg:#bcd4ff;
  }
}