:root {
  --navy-900: #0C1633;
  --navy-800: #12204A;
  --navy-700: #182C5E;
  --navy-600: #22397A;
  --navy-500: #2E4A93;

  --brass: #5FA82E;
  --brass-light: #8CC63F;
  --brass-soft: #DCF0C4;
  --brass-tint: #EFF9E4;

  --ink: #101526;
  --ink-soft: #29304A;
  --muted: #666F8C;
  --line: #DCE2F0;
  --line-soft: #EEF1F8;
  --canvas: #EEF2FA;
  --surface: #FFFFFF;
  --surface-soft: #F6F8FD;

  --success: #2F8F5B;
  --success-tint: #E4F4EB;
  --danger: #C0463A;
  --danger-tint: #FBEAE8;
  --late: #C2841F;
  --late-tint: #FBF1DF;
  --info: #2C6FA8;
  --info-tint: #E6F0F8;

  --display: 'Sora', 'Inter', sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: 'JetBrains Mono', monospace;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(12,22,51,.06), 0 1px 1px rgba(12,22,51,.04);
  --shadow: 0 8px 24px -8px rgba(12,22,51,.16), 0 2px 6px rgba(12,22,51,.06);
  --shadow-lg: 0 24px 60px -20px rgba(12,22,51,.35);
}

*,*::before,*::after{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--body);
  background: var(--canvas);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
.hidden{ display:none !important; }
a{ color: inherit; }
button{ font-family: inherit; cursor:pointer; }
input, select, textarea{ font-family: inherit; font-size:14px; }

.checkbox-row{ display:flex; gap:10px; align-items:flex-start; margin:14px 0; cursor:pointer; }
.checkbox-row input{ margin-top:3px; flex-shrink:0; width:16px; height:16px; accent-color: var(--brass); }
.checkbox-row span{ font-size:12.5px; color: var(--muted); line-height:1.5; }

/* ---------------- Footer ---------------- */
.app-footer{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:14px 28px; margin-top:auto; border-top:1px solid var(--line);
  font-size:12px; color: var(--muted); background: var(--surface);
}
.app-footer-credit strong{ color: var(--ink-soft); font-weight:700; }
.app-footer-auth{
  max-width:420px; width:100%; margin:14px auto 0; padding:12px 4px; border-top:none;
  background:transparent; color:#B9C2E6; justify-content:center; gap:18px;
}
.app-footer-auth .app-footer-credit strong{ color:#EAEEFB; }
@media (max-width:560px){ .app-footer{ justify-content:center; text-align:center; padding:14px 16px; } }

/* ---------------- Auth screen ---------------- */
.auth-shell{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background: #081026; padding:24px;
}
.auth-split{
  width:100%; max-width:1040px; min-height:600px; display:flex; border-radius:20px; overflow:hidden;
  box-shadow: 0 30px 80px rgba(4,8,24,.55); background: var(--surface);
}
.auth-left{
  flex:1.1; position:relative; padding:40px 44px; display:flex; flex-direction:column; justify-content:space-between;
  background: radial-gradient(circle at 15% 8%, #1B2F63 0%, #101E45 45%, #081026 100%);
  color:#fff; overflow:hidden; min-width:0;
}
.auth-left-noise{
  position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 16px 16px;
}
.auth-left > *{ position:relative; z-index:1; }
.auth-left-mid{ max-width:440px; }
.auth-left .eyebrow{ font-size:11.5px; font-weight:700; letter-spacing:.08em; color:#8CC63F; margin-bottom:14px; }
.auth-left h1{ font-family:var(--display); font-size:clamp(26px,3vw,34px); line-height:1.2; margin:0 0 16px; color:#fff; }
.auth-left-mid p{ font-size:14px; line-height:1.65; color:#B9C2E6; margin:0; }
.auth-left-stats{ display:flex; gap:36px; flex-wrap:wrap; }
.auth-left-stats .num{ font-family:var(--display); font-size:26px; font-weight:700; color:#fff; }
.auth-left-stats .lbl{ font-size:10.5px; letter-spacing:.06em; color:#8B96C2; margin-top:2px; }
.auth-right{ flex:1; min-width:0; display:flex; align-items:center; justify-content:center; padding:44px 36px; background: var(--surface); }
.auth-card{ width:100%; max-width:360px; }
.auth-brand{ display:flex; align-items:center; gap:12px; }
.auth-left .auth-brand .name{ color:#fff; }
.auth-left .auth-brand .sub{ color:#9BA6D1; }
.auth-brand .mark{
  width:42px; height:42px; border-radius:12px; background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
  display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--display); font-weight:700; font-size:16px;
  box-shadow: 0 4px 12px rgba(18,32,74,.35); overflow:hidden; flex-shrink:0;
}
.auth-brand .name{ font-family:var(--display); font-weight:700; font-size:18px; color: var(--navy-900); line-height:1.15; }
.auth-brand .sub{ font-size:11.5px; color: var(--muted); letter-spacing:.02em; }
.auth-card h2{ font-family:var(--display); font-size:24px; margin:22px 0 4px; color: var(--navy-900); }
.auth-card .sub{ font-size:13.5px; color: var(--muted); margin-bottom:26px; }
.auth-card-foot{ font-size:11.5px; color: var(--muted); text-align:center; margin:22px 0 0; }
.auth-error{ display:none; background: var(--danger-tint); color: var(--danger); font-size:13px; padding:10px 14px; border-radius: var(--radius-sm); margin-bottom:16px; }
.auth-error.show{ display:block; }
.role-tabs{ display:flex; gap:6px; background: var(--surface-soft); padding:4px; border-radius:11px; margin-bottom:22px; }
.role-tabs .tab{ flex:1; text-align:center; padding:9px 0; border-radius:8px; font-size:13px; font-weight:600; color: var(--muted); }
.role-tabs .tab.active{ background: var(--surface); color: var(--navy-900); box-shadow: var(--shadow-sm); }
@media (max-width:820px){
  .auth-left{ display:none; }
  .auth-split{ box-shadow:none; background:transparent; }
  .auth-right{ background: var(--surface); border-radius:20px; box-shadow: 0 20px 60px rgba(4,8,24,.4); }
}

/* ---------------- Form fields ---------------- */
.field{ margin-bottom:18px; min-width:0; }
.field label{ display:block; font-size:12.5px; font-weight:600; color: var(--ink-soft); margin-bottom:7px; letter-spacing:.01em; }
.field input, .field select, .field textarea{
  width:100%; padding:11px 13px; border-radius:10px; border:1.5px solid var(--line);
  background: var(--surface); color: var(--ink); transition: border-color .15s, box-shadow .15s; box-sizing:border-box;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--navy-600); box-shadow: 0 0 0 4px rgba(46,74,147,.1); }
.field textarea{ min-height:80px; resize:vertical; }
.field-row{ display:flex; gap:12px; flex-wrap:wrap; }
.field-row .field{ flex:1 1 160px; }
@media (max-width:480px){ .field-row .field{ flex-basis:100%; } }
.select{ padding:10px 12px; border-radius:9px; border:1.5px solid var(--line); background:var(--surface); flex-shrink:0; }
.checkbox-list{
  display:flex; flex-direction:column; gap:2px; max-height:180px; overflow-y:auto;
  border:1.5px solid var(--line); border-radius:10px; padding:8px 10px; background:var(--surface);
}
.checkbox-list label{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:500; color:var(--ink); padding:6px 4px; margin:0; cursor:pointer; border-radius:6px; }
.checkbox-list label:hover{ background:var(--surface-soft); }
.checkbox-list input[type="checkbox"]{ width:auto; flex-shrink:0; accent-color: var(--navy-600); }
.checkbox-list .empty{ font-size:13px; color:var(--muted); padding:6px 4px; }

/* ---------------- Buttons ---------------- */
.btn{ border:none; border-radius:10px; padding:11px 20px; font-size:14px; font-weight:600; transition: transform .1s, box-shadow .15s, background .15s; }
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--navy-800); color:#fff; }
.btn-primary:hover{ background: var(--navy-700); }
.btn-gold{ background: var(--brass); color:#fff; }
.btn-gold:hover{ background:#54962A; }
.btn-ghost{ background: var(--surface-soft); color: var(--ink-soft); }
.btn-ghost:hover{ background: var(--line-soft); }
.btn-danger-ghost{ background: var(--danger-tint); color: var(--danger); }
.btn-danger-ghost:hover{ background:#F6D9D5; }
.btn-sm{ padding:7px 14px; font-size:12.5px; border-radius:8px; }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn-spinner{
  display:inline-block; width:12px; height:12px; margin-right:7px; vertical-align:-1.5px;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  animation: btn-spin .6s linear infinite; opacity:.85;
}
@keyframes btn-spin{ to{ transform:rotate(360deg); } }
.btn-icon{ padding:8px 10px; display:inline-flex; align-items:center; justify-content:center; line-height:1; flex-shrink:0; }
.btn-icon svg{ width:15px; height:15px; }
.btn-icon.spinning svg{ animation: btn-spin 0.7s linear infinite; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---------------- App shell ---------------- */
.app-shell{ display:flex; min-height:100vh; }
.sidebar{
  width:250px; flex-shrink:0; background: linear-gradient(180deg, var(--navy-900), #0F1B3D);
  color:#fff; display:flex; flex-direction:column; padding:22px 16px; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar .brand{ display:flex; align-items:center; gap:11px; padding:6px 8px 22px; }
.sidebar .brand .mark{ width:36px; height:36px; border-radius:10px; background: var(--brass); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700; font-size:14px; overflow:hidden; flex-shrink:0; }
/* Any uploaded school logo is injected as <img> inside a .mark badge — this
   is what previously blew out the layout: an unconstrained native-size
   image (e.g. a 3000x2000 upload) rendered at full size and pushed/cut off
   the rest of the interface. Every .mark is a fixed-size badge, so any img
   inside one must fill it exactly and crop to fit, never overflow it. */
.mark{ position:relative; }
.mark img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }
.sidebar .brand .name{ font-family:var(--display); font-weight:700; font-size:15.5px; line-height:1.2; }
.sidebar .brand .sub{ font-size:10.5px; color:#9AA6CC; }
.nav-section-label{ font-size:10.5px; letter-spacing:.08em; color:#7885B3; text-transform:uppercase; padding:16px 12px 6px; }
.nav-item{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px; font-size:13.5px; font-weight:500;
  color:#C6CEE8; cursor:pointer; margin-bottom:2px; position:relative; transition: background .12s, color .12s;
}
.nav-item svg{ width:17px; height:17px; flex-shrink:0; }
.nav-item:hover{ background: rgba(255,255,255,.06); color:#fff; }
.nav-item.active{ background: rgba(95,168,46,.18); color:#fff; }
.nav-item.active svg{ color: var(--brass-light); }
.nav-badge{ margin-left:auto; background: var(--danger); color:#fff; font-size:10.5px; font-weight:700; padding:1.5px 7px; border-radius:999px; }
.sidebar .spacer{ flex:1; }
.sidebar-foot{ border-top:1px solid rgba(255,255,255,.1); padding-top:14px; margin-top:10px; }
.sidebar-user{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px; cursor:pointer; }
.sidebar-user:hover{ background: rgba(255,255,255,.06); }
.sidebar-user .nm{ font-size:13px; font-weight:600; color:#fff; }
.sidebar-user .role{ font-size:10.5px; color:#9AA6CC; }
.logout-link{ display:flex; align-items:center; gap:9px; padding:9px 10px; font-size:12.5px; color:#9AA6CC; cursor:pointer; border-radius:8px; }
.logout-link:hover{ background: rgba(255,255,255,.06); color:#fff; }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; min-height:100vh; }
.topbar{
  display:flex; align-items:center; justify-content:space-between; padding:20px 32px; background: var(--surface);
  border-bottom:1px solid var(--line-soft); position:sticky; top:0; z-index:5;
}
.topbar h1{ font-family:var(--display); font-size:20px; margin:0; color: var(--navy-900); }
.topbar .sub{ font-size:12.5px; color: var(--muted); margin-top:2px; }
.menu-toggle{ display:none; background:none; border:none; padding:6px; flex-shrink:0; }
.content{ padding:28px 32px 60px; max-width:1400px; }

.avatar{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:13.5px; flex-shrink:0; overflow:hidden; }
.avatar img{ width:100%; height:100%; object-fit:cover; }

/* ---------------- Cards / grids ---------------- */
.card{ background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); border:1px solid var(--line-soft); }
.card-pad{ padding:24px; }
.grid-stats{ display:grid; grid-template-columns: repeat(5, 1fr); gap:16px; margin-bottom:24px; }
.stat-card{ padding:20px; }
.stat-card .ic{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.stat-card .num{ font-family:var(--display); font-size:26px; font-weight:700; color: var(--navy-900); }
.stat-card .lbl{ font-size:12px; color: var(--muted); margin-top:2px; }
.grid-2{ display:grid; grid-template-columns: 1.4fr 1fr; gap:20px; }
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
@media (max-width:1180px){ .grid-stats{ grid-template-columns: repeat(3,1fr);} .grid-2{ grid-template-columns:1fr; } .grid-3{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .grid-stats{ grid-template-columns: repeat(2,1fr); } .grid-3{ grid-template-columns:1fr; } }

.section-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.section-head h3{ font-family:var(--display); font-size:16.5px; margin:0 0 3px; color: var(--navy-900); }
.section-head .sub{ font-size:12.5px; color: var(--muted); }

/* ---------------- Tables ---------------- */
.table-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:13px; }
thead th{ text-align:left; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color: var(--muted); padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
tbody td{ padding:12px; border-bottom:1px solid var(--line-soft); vertical-align:middle; color: var(--ink-soft); }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background: var(--surface-soft); }
.mono{ font-family: var(--mono); font-size:12px; }
.muted{ color: var(--muted); }
.row-person{ display:flex; align-items:center; gap:10px; }
.row-person .nm{ font-weight:600; font-size:13px; color: var(--ink); }
.row-person .sub{ font-size:11px; color: var(--muted); }

.item-thumb{ width:34px; height:34px; border-radius:8px; object-fit:cover; background: var(--surface-soft); flex-shrink:0; }
.item-thumb-ph{ width:34px; height:34px; border-radius:8px; background: var(--surface-soft); display:flex; align-items:center; justify-content:center; color:var(--muted); flex-shrink:0; }

/* ---------------- Badges ---------------- */
.badge{ display:inline-block; padding:4px 11px; border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:.01em; white-space:nowrap; }
.badge-present, .badge-good, .badge-new, .badge-approved, .badge-completed, .badge-repaired{ background: var(--success-tint); color: var(--success); }
.badge-late, .badge-fair, .badge-under_repair, .badge-in_repair, .badge-in_review{ background: var(--late-tint); color: var(--late); }
.badge-absent, .badge-damaged, .badge-rejected, .badge-not_repairable{ background: var(--danger-tint); color: var(--danger); }
.badge-pending, .badge-reported{ background: var(--info-tint); color: var(--info); }
.badge-onleave, .badge-disposed, .badge-cancelled, .badge-neutral{ background: var(--surface-soft); color: var(--muted); }
.badge-not_required{ background: var(--surface-soft); color: var(--muted); }
.badge-asset{ background:#EEE7F8; color:#6B4FA0; }
.badge-stock{ background: var(--brass-tint); color:#4A7A22; }
.badge-low{ background: var(--late-tint); color: var(--late); }
.badge-urgent, .badge-high{ background: var(--danger-tint); color: var(--danger); }
.badge-medium{ background: var(--late-tint); color: var(--late); }
.badge-low-priority{ background: var(--info-tint); color: var(--info); }
.badge-active{ background: var(--success-tint); color: var(--success); }
.badge-inactive{ background: var(--surface-soft); color: var(--muted); }

/* ---------------- Tabs ---------------- */
.tab-row{ display:flex; gap:4px; background: var(--surface-soft); padding:4px; border-radius:11px; width:fit-content; margin-bottom:22px; flex-wrap:wrap; }
.tab-row .tab{ padding:9px 16px; border-radius:8px; font-size:13px; font-weight:600; color: var(--muted); cursor:pointer; }
.tab-row .tab.active{ background: var(--surface); color: var(--navy-900); box-shadow: var(--shadow-sm); }

/* ---------------- Modals ---------------- */
.modal-backdrop{
  position:fixed; inset:0; background: rgba(12,22,51,.5); display:flex; align-items:center; justify-content:center;
  z-index:100; padding:20px; backdrop-filter: blur(2px);
}
.modal{
  background: var(--surface); border-radius: var(--radius-lg); width:100%; max-width:440px;
  padding:28px; box-shadow: var(--shadow-lg); animation: modalIn .18s ease;
  max-height: calc(100vh - 40px); overflow-y:auto;
}
.modal-wide{ max-width:640px; }
.modal h3{ font-size:19px; margin-bottom:6px; font-family:var(--display); color:var(--navy-900); }
.modal .sub{ font-size:13px; color: var(--muted); margin-bottom:20px; }
@keyframes modalIn{ from{ opacity:0; transform: translateY(8px) scale(.98);} to{ opacity:1; transform:none; } }
.modal-actions{ display:flex; gap:10px; margin-top:20px; }
.modal-actions .btn{ flex:1; }

/* ---------------- Misc ---------------- */
.flex{ display:flex; } .center{ align-items:center; } .between{ justify-content:space-between; }
.gap-8{ gap:8px; } .gap-12{ gap:12px; } .gap-16{ gap:16px; }
.info-list{ display:flex; flex-direction:column; }
.info-row{ display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line-soft); font-size:13.5px; }
.info-row:last-child{ border-bottom:none; }
.info-row .k{ color: var(--muted); }
.info-row .v{ font-weight:600; color: var(--ink); }
.empty-state{ text-align:center; color: var(--muted); font-size:13.5px; padding:10px 0; }
.search-input{ padding:9px 13px; border-radius:9px; border:1.5px solid var(--line); background: var(--surface); font-size:13px; min-width:220px; }
.shift-pill{ background: var(--surface-soft); color: var(--ink-soft); padding:4px 10px; border-radius:8px; font-size:12px; font-weight:600; }
.progress-bar{ height:8px; border-radius:999px; background: var(--line-soft); overflow:hidden; }
.progress-bar .fill{ height:100%; background: var(--brass); border-radius:999px; }

.toast{
  position:fixed; bottom:24px; right:24px; background: var(--navy-900); color:#fff; padding:13px 20px;
  border-radius:11px; font-size:13.5px; box-shadow: var(--shadow-lg); z-index:200; animation: toastIn .2s ease;
  max-width:360px;
}
.toast.error{ background: var(--danger); }
.toast.success{ background: var(--success); }
@keyframes toastIn{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:none; } }

@media (max-width:900px){
  .sidebar{ position:fixed; left:-260px; top:0; z-index:50; transition: left .2s; box-shadow: var(--shadow-lg); }
  .sidebar.open{ left:0; }
  .menu-toggle{ display:block; }
  .content{ padding:20px 16px 60px; }
  .topbar{ padding:16px; }
  .search-input{ min-width:0; width:100%; }
}

/* A 14" laptop at 100% browser zoom has noticeably less usable height
   than this layout assumes — compact the stat cards and content padding
   so the dashboard fits without the person needing to scroll or zoom out. */
@media (max-height:820px){
  .content{ padding-top:18px; padding-bottom:24px; }
  .grid-stats{ gap:12px; margin-bottom:16px; }
  .stat-card{ padding:14px; }
  .card-pad{ padding:18px; }
}