/* ============================================================================
   Schoolix Admin — elite theme
   Brand purple #7c5cad (primary) / #634393 (deep) / #f5f1fb (tint)
   Overrides Django 4.2 admin CSS custom properties + polishes login & chrome.
   ========================================================================== */

:root {
  --sx-purple: #7c5cad;
  --sx-purple-deep: #634393;
  --sx-purple-dark: #4e3475;
  --sx-tint: #f5f1fb;
  --sx-ink: #1f1633;

  /* Django admin variable overrides */
  --primary: #7c5cad;
  --secondary: #634393;
  --accent: #c9b6e8;
  --primary-fg: #ffffff;

  --header-color: #ffffff;
  --header-branding-color: #ffffff;
  --header-bg: linear-gradient(100deg, #634393 0%, #7c5cad 60%, #8e6bc4 100%);
  --header-link-color: #ffffff;

  --breadcrumbs-fg: #6b5b8a;
  --breadcrumbs-link-fg: var(--sx-purple-deep);
  --breadcrumbs-bg: var(--sx-tint);

  --link-fg: #6f4fa6;
  --link-hover-color: #4e3475;
  --link-selected-fg: #4e3475;

  --button-bg: var(--sx-purple);
  --button-fg: #fff;
  --button-hover-bg: var(--sx-purple-deep);
  --default-button-bg: var(--sx-purple-deep);
  --default-button-hover-bg: var(--sx-purple-dark);
  --close-button-bg: #8d7aa8;
  --close-button-hover-bg: #6b5b8a;

  --object-tools-bg: var(--sx-purple-deep);
  --object-tools-fg: #fff;
  --object-tools-hover-bg: var(--sx-purple-dark);

  --selected-row: #f0e9fb;
  --selected-bg: #efe7fb;

  --message-success-bg: #e9f9ef;
  --message-error-bg: #fdecec;

  --font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* Force a consistent light brand theme; hide the auto/light/dark toggle that
   was rendering as black squares behind the proxy. */
.theme-toggle { display: none !important; }

html, body { font-family: var(--font-family-primary); color: var(--sx-ink); }

/* ----- Header / branding ----- */
#header {
  background: var(--header-bg);
  box-shadow: 0 2px 14px rgba(78, 52, 117, 0.28);
  padding: 14px 40px;
}
#branding #site-name { margin: 0; font-weight: 600; }
#branding #site-name a { display: inline-flex; align-items: center; gap: 12px; color: #fff; }
.sx-logo-mark {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 9px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-weight: 800; font-size: 18px; color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.sx-logo-text { font-size: 19px; letter-spacing: .2px; font-weight: 500; }
.sx-logo-text strong { font-weight: 800; }

#user-tools { font-size: 13px; color: rgba(255,255,255,.9); }
#user-tools a { color: #fff; border-bottom-color: rgba(255,255,255,.5); }
#user-tools a:hover { color: #fff; border-bottom-color: #fff; }

/* ----- Breadcrumbs ----- */
div.breadcrumbs {
  background: var(--sx-tint); color: var(--breadcrumbs-fg);
  border-bottom: 1px solid #e7dcfa; padding: 12px 40px;
}
div.breadcrumbs a { color: var(--sx-purple-deep); }

/* ----- Buttons ----- */
.button, input[type=submit], input[type=button], .submit-row input, a.button {
  background: var(--sx-purple); color: #fff; border: 0;
  border-radius: 9px; padding: 9px 18px; font-weight: 600;
  box-shadow: 0 1px 2px rgba(78,52,117,.25); transition: all .15s ease;
}
.button:hover, input[type=submit]:hover, input[type=button]:hover,
.submit-row input:hover, a.button:hover {
  background: var(--sx-purple-deep); box-shadow: 0 4px 12px rgba(78,52,117,.32);
  transform: translateY(-1px);
}
.button.default, input[type=submit].default, .submit-row input.default {
  background: var(--sx-purple-deep);
}
.button.default:hover, input[type=submit].default:hover { background: var(--sx-purple-dark); }

/* Object tools (Add buttons, history) */
.object-tools a { border-radius: 8px; font-weight: 600; }

/* ----- Module cards (dashboard + change list) ----- */
.module { border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(31,22,51,.07); border: 1px solid #ece6f6; }
.module h2, .module caption, .inline-group .tabular caption {
  background: var(--sx-purple-deep);
  color: #fff; font-weight: 600; letter-spacing: .2px;
}
.dashboard .module table th { font-weight: 600; }
#content-related .module h2 { background: var(--sx-purple-deep); }
a.section, .dashboard .module table caption a { color: #fff; }

/* Rows */
.change-list #changelist table thead th { background: #faf7fe; }
tr:hover > td, tr:hover > th { background: var(--selected-row); }

/* ----- Form inputs ----- */
input[type=text], input[type=password], input[type=email], input[type=url],
input[type=number], input[type=tel], textarea, select, .vTextField {
  border: 1px solid #d8cdf0; border-radius: 9px; padding: 9px 11px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus, select:focus, .vTextField:focus {
  border-color: var(--sx-purple); outline: 0;
  box-shadow: 0 0 0 3px rgba(124,92,173,.18);
}

/* Selected/active nav in sidebar */
.sidebar .current-model, #nav-sidebar .current-model { border-left: 3px solid var(--sx-purple); }
#nav-sidebar a:hover { background: var(--sx-tint); }

/* Links */
a:link, a:visited { color: var(--link-fg); }
a:hover { color: var(--link-hover-color); }

/* ============================================================================
   LOGIN PAGE — centered elite card on a purple gradient
   ========================================================================== */
body.login {
  background: radial-gradient(1200px 600px at 20% -10%, #8e6bc4 0%, transparent 60%),
              linear-gradient(135deg, #4e3475 0%, #634393 45%, #7c5cad 100%);
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
}
body.login #container {
  width: 400px; max-width: 92vw; background: #fff;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(31,22,51,.35), 0 2px 8px rgba(31,22,51,.2);
  border: 1px solid rgba(255,255,255,.5);
}
body.login #header {
  flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 26px 30px 22px; background: var(--header-bg);
}
body.login #content { padding: 28px 30px 8px; }
body.login #content-main { width: 100%; }
body.login .form-row { padding: 9px 0; border: 0; }
body.login .form-row label { display: block; margin-bottom: 6px; font-weight: 600; color: #4a3b66; font-size: 13px; }
body.login input[type=text], body.login input[type=password] {
  width: 100%; box-sizing: border-box; padding: 11px 13px; font-size: 14px;
}
body.login .submit-row { padding: 14px 0 26px; margin: 0; border: 0; background: none; text-align: stretch; }
body.login .submit-row input {
  width: 100%; padding: 12px; font-size: 15px; font-weight: 700;
  border-radius: 10px; letter-spacing: .3px;
}
body.login .password-reset-link { text-align: center; padding-bottom: 22px; }
body.login .password-reset-link a { color: var(--sx-purple-deep); font-weight: 600; }
body.login #footer { display: none; }

/* Error notes on login */
body.login .errornote, .errornote {
  background: #fdecec; border: 1px solid #f4c4c4; color: #a12b2b;
  border-radius: 10px; padding: 12px 14px;
}

/* Messages */
ul.messagelist li.success { background-color: var(--message-success-bg); }
ul.messagelist li { border-radius: 8px; }