/*
 * SchoolIS modern theme layer.
 *
 * Loaded LAST in application/views/styles.php so it wins the cascade over
 * AdminLTE/Bootstrap/plugin CSS without !important. To fully revert the
 * visual redesign at any point, comment out that single <link> tag - this
 * file changes nothing else (no markup removed, no other CSS edited).
 *
 * Rollout is phased: rules are scoped to the page/component they've been
 * verified on (currently just .login-page) so untouched pages keep their
 * current appearance until their own phase lands.
 */

:root {
  --sis-accent: #4f46e5;
  --sis-accent-hover: #4338ca;
  --sis-accent-soft: #eef2ff;
  --sis-bg-page: #f1f5f9;
  --sis-surface: #ffffff;
  --sis-text-primary: #0f172a;
  --sis-text-secondary: #64748b;
  --sis-border: #e2e8f0;
  --sis-danger: #dc2626;

  --sis-radius-sm: 8px;
  --sis-radius-md: 14px;
  --sis-radius-lg: 22px;

  --sis-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --sis-shadow-md: 0 20px 45px -20px rgba(15, 23, 42, 0.35);

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

/* ==========================================================================
   Login page (Phase 2, v2 - split-hero direction)
   Scoped to body.login-page only - lockscreen.php uses a different body
   class ("lockscreen"), so it is untouched by these rules.

   This replaces the original "centered white card" pass, which shipped
   and was rejected as looking generic/cheap. New markup: a full-height
   two-panel split (.sis-login-shell > .sis-login-left / .sis-login-right)
   instead of AdminLTE's .login-box card, so those older card-specific
   rules are gone - anything still keyed on plain .form-control/.btn/etc
   below is reused as-is since those classes are still present in the
   new markup.
   ========================================================================== */

body.login-page {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sis-font-sans);
  background: var(--sis-surface);
}

body.login-page .sis-login-shell {
  display: flex;
  min-height: 100vh;
}

body.login-page .sis-login-left {
  flex: 1 1 50%;
  position: relative;
  background: #0b0f19;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 56px;
  overflow: hidden;
}

body.login-page .sis-login-left::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(38% 38% at 20% 20%, rgba(99, 102, 241, 0.55), transparent 60%),
    radial-gradient(45% 45% at 85% 75%, rgba(56, 189, 248, 0.35), transparent 60%),
    radial-gradient(30% 30% at 70% 15%, rgba(236, 72, 153, 0.25), transparent 60%);
  filter: blur(40px);
}

body.login-page .sis-login-left > * {
  position: relative;
  z-index: 1;
}

body.login-page .sis-login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
}

body.login-page .sis-login-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--sis-accent), #a78bfa);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  overflow: hidden;
}

body.login-page .sis-login-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9px;
}

body.login-page .sis-login-hero h1 {
  font-size: 38px;
  line-height: 1.15;
  font-weight: 650;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

body.login-page .sis-login-hero p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
  line-height: 1.6;
  max-width: 380px;
  margin: 0;
}

body.login-page .sis-login-footnote {
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  margin: 0;
}

body.login-page .sis-login-right {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: var(--sis-surface);
}

body.login-page .sis-login-form-wrap {
  width: 100%;
  max-width: 360px;
}

body.login-page .sis-login-form-wrap h2 {
  font-size: 24px;
  font-weight: 650;
  margin: 0 0 6px;
  color: var(--sis-text-primary);
  letter-spacing: -0.01em;
}

body.login-page .sis-login-sub {
  color: var(--sis-text-secondary);
  font-size: 14px;
  margin: 0 0 28px;
}

/* Staff/Student segmented toggle - still two real radio inputs
   (name="user_access", value="on"/"off") for MSession::loginUser(),
   just visually styled as a pill switch instead of bare radio dots. */
body.login-page .sis-segmented {
  display: inline-flex;
  background: var(--sis-bg-page);
  border-radius: 999px;
  padding: 3px;
  margin-bottom: 22px;
}

body.login-page .sis-seg-option {
  position: relative;
  margin: 0;
}

body.login-page .sis-seg-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

body.login-page .sis-seg-option span {
  display: block;
  padding: 7px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sis-text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

body.login-page .sis-seg-option input:checked + span {
  background: var(--sis-text-primary);
  color: #ffffff;
}

body.login-page .sis-seg-option input:focus-visible + span {
  outline: 2px solid var(--sis-accent);
  outline-offset: 2px;
}

@media (max-width: 860px) {
  body.login-page .sis-login-shell {
    flex-direction: column;
  }
  body.login-page .sis-login-left {
    padding: 32px;
    min-height: auto;
  }
  body.login-page .sis-login-hero h1 {
    font-size: 26px;
  }
  body.login-page .sis-login-footnote {
    display: none;
  }
  body.login-page .sis-login-right {
    padding: 32px;
  }
}

body.login-page .form-control {
  height: 46px;
  border-radius: var(--sis-radius-sm);
  border: 1px solid var(--sis-border);
  background: #f8fafc;
  box-shadow: none;
  font-size: 14px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

body.login-page .form-control:focus {
  border-color: var(--sis-accent);
  background: var(--sis-surface);
  box-shadow: 0 0 0 3px var(--sis-accent-soft);
}

body.login-page .form-group.has-feedback .form-control-feedback {
  color: var(--sis-text-secondary);
  top: 2px;
}

body.login-page .form-group {
  margin-bottom: 18px;
}

body.login-page .btn.btn-flat,
body.login-page .btn-block.btn-default {
  background: var(--sis-text-primary);
  border-color: var(--sis-text-primary);
  color: #ffffff;
  height: 46px;
  border-radius: var(--sis-radius-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

body.login-page .btn.btn-flat:hover,
body.login-page .btn.btn-flat:focus,
body.login-page .btn-block.btn-default:hover,
body.login-page .btn-block.btn-default:focus {
  background: #1e293b;
  border-color: #1e293b;
  color: #ffffff;
  box-shadow: var(--sis-shadow-sm);
}

body.login-page .progress {
  background: var(--sis-border);
  border-radius: 999px;
  height: 6px;
  box-shadow: none;
}

body.login-page .progress .loading-progress {
  background: var(--sis-accent);
}

body.login-page label {
  color: var(--sis-text-secondary);
  font-weight: 500;
  font-size: 13px;
}

body.login-page #login_screen_sms .alert,
body.login-page #login_screen_sms {
  border-radius: var(--sis-radius-sm);
}

/* ==========================================================================
   Dashboard shell (Phase 3). .main-footer/.main-header/.main-sidebar only
   exist in main.php's wrapper, never on the login page, so none of this
   can affect login.php. Same tokens as the login page (indigo accent,
   the #0b0f19 dark panel color from the login hero) for visual
   continuity, applied to the EXISTING AdminLTE structure/behavior
   (top navbar + collapsible left sidebar tree) - no layout changes,
   no JS changes, visual refresh only. User explicitly signed off on
   implementing this directly (no separate mockup round) after
   confirming the login page redesign looked right.
   ========================================================================== */

.main-footer {
  background: var(--sis-surface);
  border-top: 1px solid var(--sis-border);
  color: var(--sis-text-secondary);
  font-size: 12px;
  padding: 12px 20px;
}

.main-footer a {
  color: var(--sis-text-secondary);
}

.main-footer a:hover {
  color: var(--sis-accent);
}

/* ---- Header / top navbar ---- */

.main-header .navbar {
  background: var(--sis-surface);
  border-bottom: 1px solid var(--sis-border);
  box-shadow: none;
}

.main-header .logo {
  background: #0b0f19 !important;
  border-bottom: none;
}

.main-header .logo:hover {
  background: #11172a !important;
}

.main-header .navbar .sidebar-toggle {
  color: var(--sis-text-secondary);
}

.main-header .navbar .sidebar-toggle:hover {
  color: var(--sis-accent);
  background: var(--sis-bg-page);
}

.main-header .navbar-custom-menu .nav > li > a {
  color: var(--sis-text-secondary);
}

.main-header .navbar-custom-menu .nav > li > a:hover,
.main-header .navbar-custom-menu .nav > li > a:focus {
  color: var(--sis-accent);
  background: var(--sis-bg-page);
}

.main-header .dropdown-menu {
  border: 1px solid var(--sis-border);
  border-radius: var(--sis-radius-md);
  box-shadow: var(--sis-shadow-md);
}

.main-header .user-header {
  background: var(--sis-bg-page) !important;
  border: none !important;
}

.main-header .user-body {
  background: var(--sis-surface) !important;
  border: none !important;
  border-top: 1px solid var(--sis-border) !important;
  border-bottom: 1px solid var(--sis-border) !important;
}

/* ---- Sidebar ---- */

.main-sidebar,
.left-side {
  background: #0b0f19;
}

.sidebar-menu > li.header {
  background: #0b0f19;
  color: rgba(255, 255, 255, 0.35);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sidebar-menu > li > a {
  color: rgba(255, 255, 255, 0.75);
  border-left: 3px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .glyphicon,
.sidebar-menu > li > a > .ion {
  color: rgba(255, 255, 255, 0.45);
  width: 22px;
}

.sidebar-menu > li:hover > a,
.sidebar-menu > li.active > a {
  background: rgba(99, 102, 241, 0.14);
  color: #ffffff;
  border-left-color: var(--sis-accent);
}

.sidebar-menu > li.active > a > .fa,
.sidebar-menu > li:hover > a > .fa {
  color: var(--sis-accent);
}

.sidebar-menu .treeview-menu {
  background: #05070c;
}

.sidebar-menu .treeview-menu > li > a {
  color: rgba(255, 255, 255, 0.55);
}

.sidebar-menu .treeview-menu > li > a:hover,
.sidebar-menu .treeview-menu > li.active > a {
  color: #ffffff;
  background: rgba(99, 102, 241, 0.12);
}

.sidebar-menu .treeview-menu > li > a > .fa-circle-o {
  font-size: 6px;
  color: rgba(255, 255, 255, 0.35);
}

/* ---- Content area: boxes, KPI cards ----
   CSS-only refinements via existing AdminLTE classes (.box, .small-box) -
   no changes to dashboard.php itself, so its chart JS / PHP data logic
   is untouched. Gradient KPI colors (green/aqua/yellow/maroon) are kept
   as-is since they carry semantic meaning (students/staff/streams/books)
   - only softened borders/radius/shadow for visual consistency with the
   rest of the theme. */

.content-wrapper {
  background: var(--sis-bg-page);
}

.box {
  border-top: none;
  border-radius: var(--sis-radius-md);
  box-shadow: var(--sis-shadow-sm);
}

.box .box-header {
  border-radius: var(--sis-radius-md) var(--sis-radius-md) 0 0;
}

.box .box-header.with-border {
  border-bottom: 1px solid var(--sis-border);
}

.small-box {
  border-radius: var(--sis-radius-md);
  box-shadow: var(--sis-shadow-sm);
}

.small-box > .small-box-footer {
  border-radius: 0 0 var(--sis-radius-md) var(--sis-radius-md);
}

/* ==========================================================================
   Forms (Phase 4, starting pass). Unscoped (not body.login-page) so this
   reaches every form across the whole app - dashboard forms, modals,
   application/views/admin/* and application/views/student_account/*
   view forms - via Bootstrap's existing .form-control/.form-group/.btn
   classes already used throughout, without editing any of those view
   files. The login-page-specific .form-control rules earlier in this
   file still win on the login page since body.login-page selectors are
   more specific than these unscoped ones.

   NOT done in this pass: a per-file spot-check of admin/* and
   student_account/* (39+ files) for custom/inline styles that these
   generic class-based rules can't reach, or any deeper form UX
   restructuring (grouping, layout, validation messaging). That's a
   larger, higher-touch follow-up - this pass is the same low-risk,
   no-markup-change technique already used for the dashboard shell.
   ========================================================================== */

.form-control {
  border-radius: var(--sis-radius-sm);
  border: 1px solid var(--sis-border);
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus {
  border-color: var(--sis-accent);
  box-shadow: 0 0 0 3px var(--sis-accent-soft);
}

.form-group label {
  font-weight: 600;
  color: var(--sis-text-primary);
}

.has-feedback .form-control-feedback {
  color: var(--sis-text-secondary);
}

.btn {
  border-radius: var(--sis-radius-sm);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary {
  background: var(--sis-accent);
  border-color: var(--sis-accent);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--sis-accent-hover);
  border-color: var(--sis-accent-hover);
}

.select2-container--default .select2-selection--single,
.select2-container .select2-selection--single {
  border-radius: var(--sis-radius-sm);
  border: 1px solid var(--sis-border);
}

.modal-content {
  border-radius: var(--sis-radius-md);
  border: none;
  box-shadow: var(--sis-shadow-md);
}

.modal-header {
  border-bottom: 1px solid var(--sis-border);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  border-top: 2px solid var(--sis-accent);
}

/* ==========================================================================
   Dashboard "today's snapshot" stat cards (Phase 6). New markup
   (.sis-stat-*) added to dashboard.php only - distinct from the existing
   AdminLTE .small-box KPI row above it, so both can coexist without
   clashing. Unscoped (main.php-only page, never present on login.php).
   ========================================================================== */

.sis-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 20px;
}

.sis-stat-card {
  flex: 1 1 280px;
  display: flex;
  gap: 14px;
  background: var(--sis-surface);
  border: 1px solid var(--sis-border);
  border-radius: var(--sis-radius-md);
  box-shadow: var(--sis-shadow-sm);
  padding: 18px 20px;
}

.sis-stat-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: var(--sis-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #ffffff;
}

.sis-stat-icon-indigo { background: var(--sis-accent); }
.sis-stat-icon-green { background: #16a34a; }
.sis-stat-icon-maroon { background: #b91c1c; }

.sis-stat-body {
  flex: 1 1 auto;
  min-width: 0;
}

.sis-stat-body h4 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sis-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sis-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--sis-text-primary);
  line-height: 1.2;
}

.sis-stat-unit {
  font-size: 12px;
  font-weight: 500;
  color: var(--sis-text-secondary);
  margin-left: 6px;
  text-transform: none;
  letter-spacing: normal;
}

.sis-stat-meta {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--sis-text-secondary);
}

.sis-stat-empty {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--sis-text-secondary);
  font-style: italic;
}

.sis-progress-track {
  margin-top: 8px;
  height: 6px;
  border-radius: 999px;
  background: var(--sis-bg-page);
  overflow: hidden;
}

.sis-progress-fill {
  height: 100%;
  background: var(--sis-accent);
  border-radius: 999px;
}

.sis-stat-icon-blue { background: #0284c7; }
.sis-stat-icon-yellow { background: #d97706; }

/* ==========================================================================
   Phase 7: unified card header language for every dashboard panel + the
   KPI row. Strips AdminLTE's gradient/color header utility classes back
   to one consistent white-card-with-icon-circle look, regardless of
   which color class a given .box-header happens to carry in the
   existing markup (bg-yellow-gradient, bg-light-blue, etc.) - this is a
   header/container styling pass only, box bodies (AJAX content, chart
   canvas, calendar grid, forms) are completely untouched.
   ========================================================================== */

.box {
  background: var(--sis-surface);
}

.box-header {
  background: var(--sis-surface) !important;
  color: var(--sis-text-primary) !important;
  border-bottom: 1px solid var(--sis-border) !important;
  padding: 16px 20px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.box-header .box-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--sis-text-primary);
  margin: 0;
}

.box-header .box-title > .fa,
.box-header .box-title > .glyphicon {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--sis-accent-soft);
  color: var(--sis-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.box-header .pull-right,
.box-header .box-tools {
  position: static;
  font-size: 12px;
  color: var(--sis-text-secondary);
}

.box-header .label {
  border-radius: 999px;
  font-weight: 500;
}

/* KPI row - converted from AdminLTE's heavy gradient .small-box blocks
   to the same card language as the Phase 6 stat widgets. */

.sis-kpi-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 20px;
}

.sis-kpi-card {
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--sis-surface);
  border: 1px solid var(--sis-border);
  border-radius: var(--sis-radius-md);
  box-shadow: var(--sis-shadow-sm);
  padding: 18px 20px;
}

.sis-kpi-icon {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: var(--sis-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #ffffff;
}

.sis-kpi-body h3 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  color: var(--sis-text-primary);
  line-height: 1.2;
}

.sis-kpi-body p {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--sis-text-secondary);
}

/* ==========================================================================
   School Notifications (Phase 8). Stacked compose-then-feed layout,
   replacing the old side-by-side two-column panel. Functional wiring
   (ajaxInputCall/ajaxSearchCall targets, element IDs) is unchanged -
   this is presentation only.
   ========================================================================== */

.sis-notifications {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
}

.sis-notifications-compose {
  padding: 18px 20px;
  border-bottom: 1px solid var(--sis-border);
  background: var(--sis-bg-page);
}

.sis-notifications-feed {
  max-height: 420px;
  overflow-y: auto;
  padding: 6px 20px;
}

.sis-compose-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.sis-compose-title {
  font-weight: 600;
  color: var(--sis-text-primary);
  font-size: 14px;
}

.sis-compose-title .fa {
  color: var(--sis-accent);
  margin-right: 6px;
}

.sis-compose-clock {
  font-size: 12px;
  color: var(--sis-text-secondary);
}

.sis-compose-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.sis-compose-delete {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--sis-text-secondary);
  margin: 0;
}

.sis-compose-submit {
  padding: 8px 22px;
}

.sis-compose-spinner {
  display: block;
  text-align: center;
  font-size: 12px;
  color: var(--sis-text-secondary);
}

.sis-compose-msg {
  margin-top: 6px;
}

.sis-post-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--sis-border);
}

.sis-post-item:last-child {
  border-bottom: none;
}

.sis-post-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sis-post-badge {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 13px;
}

.sis-post-badge-public { background: #16a34a; }
.sis-post-badge-private { background: #d97706; }

.sis-post-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.sis-post-meta strong {
  font-size: 13px;
  color: var(--sis-text-primary);
}

.sis-post-date {
  font-size: 11px;
  color: var(--sis-text-secondary);
}

.sis-post-body {
  margin: 8px 0 6px;
  font-size: 13px;
  color: var(--sis-text-primary);
  line-height: 1.5;
}

.sis-post-footer {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sis-post-action {
  font-size: 12px;
  color: var(--sis-text-secondary);
  font-weight: 500;
}

.sis-post-action:hover {
  color: var(--sis-accent);
  text-decoration: none;
}

.sis-post-empty {
  text-align: center;
  padding: 30px 0;
  color: var(--sis-text-secondary);
}

.sis-post-empty img {
  max-width: 120px;
  opacity: 0.6;
  margin: 0 auto 10px;
}

.sis-post-empty p {
  margin: 0;
  font-size: 13px;
}

/* ==========================================================================
   Birthdays card (Phase 8). Gradient-ring avatars - one consistent
   brand gradient for everyone, student or staff, per user request.
   ========================================================================== */

.sis-birthday-body {
  max-height: 280px;
  overflow-y: auto;
  padding: 6px 20px !important;
}

.sis-birthday-empty {
  padding: 20px 0;
  text-align: center;
}

.sis-birthday-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sis-birthday-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--sis-border);
}

.sis-birthday-item:last-child {
  border-bottom: none;
}

.sis-birthday-avatar {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, var(--sis-accent) 0%, #a78bfa 55%, #38bdf8 100%);
}

.sis-birthday-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--sis-surface);
  object-fit: cover;
  display: block;
}

.sis-birthday-info {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.sis-birthday-info strong {
  font-size: 13px;
  color: var(--sis-text-primary);
}

.sis-birthday-info span {
  font-size: 12px;
  color: var(--sis-text-secondary);
}

/* ==========================================================================
   Wallpaper, and the lockscreen
   --------------------------------------------------------------------------
   The wallpaper uploaded on System Settings (school_info.wallpaper_url) is
   painted behind the sign-in and lock screens. Every rule here is nested under
   .has-wallpaper, which the views only emit when that column has a value - so
   with no wallpaper set both screens render exactly as they did before.

   lockscreen.php now carries body class "login-page" so it inherits the whole
   split-hero design above rather than restating it; the handful of rules it
   needs on top are at the end of this block. (The note at the top of the login
   section - that the lockscreen is untouched because it uses a different body
   class - stopped being true here.)
   ========================================================================== */

body.login-page .sis-login-shell.has-wallpaper {
  background-image: var(--sis-wallpaper);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Deliberately not background-attachment: fixed - iOS Safari renders that
     unpredictably and it buys nothing on a single-viewport page. */
}

/* The hero panel is opaque navy by default. Over a photo it becomes a scrim
   instead: dark enough on the left, where the white headline sits, and clearing
   towards the right so the picture is actually visible. */
body.login-page .sis-login-shell.has-wallpaper .sis-login-left {
  background: transparent;
}

body.login-page .sis-login-shell.has-wallpaper .sis-login-left::before {
  inset: 0;
  filter: none;
  background:
    linear-gradient(105deg,
      rgba(11, 15, 25, 0.92) 0%,
      rgba(11, 15, 25, 0.78) 45%,
      rgba(11, 15, 25, 0.45) 100%),
    radial-gradient(38% 38% at 20% 20%, rgba(99, 102, 241, 0.38), transparent 60%),
    radial-gradient(45% 45% at 85% 75%, rgba(56, 189, 248, 0.22), transparent 60%);
}

/* Frosted, not transparent. The form has to stay readable - this is the one
   place where "nice opacity" and "usable" pull against each other, so the
   panel keeps a high-opacity base and the blur does the softening. */
body.login-page .sis-login-shell.has-wallpaper .sis-login-right {
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* Inputs sit on the frosted panel, so they need a touch more contrast than the
   #f8fafc they use against a solid white background. */
body.login-page .sis-login-shell.has-wallpaper .form-control {
  background: rgba(255, 255, 255, 0.92);
}

@media (max-width: 860px) {
  /* Stacked, the hero is short and the picture barely reads, so let the scrim
     go a little heavier and keep the text legible over whatever was uploaded. */
  body.login-page .sis-login-shell.has-wallpaper .sis-login-left::before {
    background:
      linear-gradient(180deg,
        rgba(11, 15, 25, 0.88) 0%,
        rgba(11, 15, 25, 0.80) 100%),
      radial-gradient(38% 38% at 20% 20%, rgba(99, 102, 241, 0.38), transparent 60%);
  }
  body.login-page .sis-login-shell.has-wallpaper .sis-login-right {
    background: rgba(255, 255, 255, 0.95);
  }
}

/* --------------------------------------------------------------------------
   Lockscreen specifics
   -------------------------------------------------------------------------- */

/* The locked user's avatar, above the password field. */
body.login-page .sis-lock-user {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
}

body.login-page .sis-lock-user img {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--sis-border);
  background: var(--sis-bg-page);
}

body.login-page .sis-lock-user-name {
  font-weight: 650;
  font-size: 15px;
  color: var(--sis-text-primary);
  word-break: break-word;
}

body.login-page .sis-lock-user-role {
  font-size: 13px;
  color: var(--sis-text-secondary);
}

/* "or sign in as a different user" - a quiet secondary action, so it must not
   compete with the unlock button. */
body.login-page .sis-lock-alt {
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--sis-border);
  font-size: 13px;
  color: var(--sis-text-secondary);
}

body.login-page .sis-lock-alt a {
  color: var(--sis-accent);
  font-weight: 600;
  text-decoration: none;
}

body.login-page .sis-lock-alt a:hover,
body.login-page .sis-lock-alt a:focus {
  text-decoration: underline;
}