/* =====================================================================
   SMART ATTENDANCE — Dashboard styles
   ===================================================================== */
:root {
  --bg: #f3f5f2;
  --surface: #ffffff;
  --surface-2: #f8faf8;
  --ink: #18241f;
  --ink-2: #3a4943;
  --muted: #6a7871;
  --line: #e2e8e4;
  --primary: #145c47;
  --primary-2: #1b7a5e;
  --primary-soft: #e3f1ea;
  --side: #e2f4ea;
  --side-ink: #2f5a47;
  /* Light green used for buttons, the sidebar and avatars (same as the success message) */
  --green-light: #e2f4ea;
  --green-light-2: #cdebd9;
  --green-line: #bfe3cf;
  --green-ink: #13603d;
  --accent: #13603d;

  --present: #1d8f5a;  --present-bg: #e2f4ea;
  --late: #b9770e;     --late-bg: #fcf0d9;
  --absent: #c43d3d;   --absent-bg: #fbe4e2;
  --pending: #5f6d78;  --pending-bg: #eceff2;

  --radius: 12px;
  --shadow: 0 1px 2px rgba(16, 40, 30, .06), 0 4px 16px rgba(16, 40, 30, .05);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; margin: 0; }
h2 { font-size: 1.05rem; font-weight: 650; }
h3 { font-size: .95rem; font-weight: 650; }
small, .muted { color: var(--muted); }
.icon { width: 18px; height: 18px; flex: none; }
.tabular, td, .stat-value { font-variant-numeric: tabular-nums; }

/* ---------- Sidebar layout ---------- */
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: 264px;
  background: var(--side); color: var(--side-ink);
  display: flex; flex-direction: column; z-index: 40;
}
.brand { display: flex; gap: 12px; align-items: center; padding: 24px 22px 22px; color: inherit; min-width: 0; }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none;
  background: var(--accent); color: var(--green-light);
}
.brand-mark .icon { width: 25px; height: 25px; }
.brand-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; min-width: 0; }
.brand-text strong { font-size: 1.02rem; color: var(--green-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-text small { color: inherit; opacity: .75; font-size: .8rem; }
.sidebar nav { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; flex: 1; }
.sidebar nav a {
  display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: 10px;
  color: var(--side-ink); font-weight: 500; font-size: 1rem;
}
.sidebar nav a .icon { width: 20px; height: 20px; }
.sidebar nav a:hover { background: rgba(19,96,61,.08); text-decoration: none; color: var(--green-ink); }
.sidebar nav a.active { background: #fff; color: var(--green-ink); box-shadow: inset 3px 0 0 var(--accent); }
.sidebar-foot { padding: 18px 16px; border-top: 1px solid var(--green-line); }
.me { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; padding: 0 4px; min-width: 0; }
.me strong { display: block; color: var(--green-ink); font-size: .94rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me small { color: inherit; opacity: .75; font-size: .8rem; display: block; margin-top: 1px; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--green-light-2); color: var(--green-ink); font-weight: 700; font-size: .8rem;
}
.logout {
  display: flex; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 10px;
  color: var(--side-ink); background: rgba(19,96,61,.06); font-weight: 500; font-size: 1rem;
}
.logout:hover { background: rgba(19,96,61,.12); text-decoration: none; color: var(--green-ink); }

.main { margin-left: 264px; min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 14px; padding: 18px 28px 0;
}
.topbar h1 { font-size: 1.45rem; font-weight: 700; letter-spacing: -.01em; }
.subtitle { margin: 2px 0 0; color: var(--muted); font-size: .9rem; }
.topbar-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.content { padding: 14px 28px 18px; flex: 1; display: flex; flex-direction: column; gap: 14px; }
/* One consistent gap between page sections (inline margins on direct children are ignored) */
.content > *, .plain-main > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.content > [data-refresh]:empty, .plain-main > [data-refresh]:empty { display: none; }
.foot { padding: 8px 28px 12px; color: var(--muted); font-size: .76rem; }
/* Menu button only exists on small screens, where the sidebar is hidden (it slides the sidebar in) */
.icon-btn.nav-toggle { display: none; }
.sidebar-scrim { display: none; }

@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .sidebar-scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 30; }
  .main { margin-left: 0; }
  .icon-btn.nav-toggle { display: inline-grid; }
  .topbar { padding: 16px 16px 4px; flex-wrap: wrap; }
  .topbar-actions { width: 100%; margin-left: 0; }
  .content { padding: 12px 16px 20px; gap: 12px; }
  .foot { padding: 8px 16px 12px; }
}

/* ---------- Plain layout (login, parents) ---------- */
.plain-actions { display: flex; justify-content: flex-end; gap: 8px; align-items: center; }
.plain-main { max-width: 1080px; margin: 0 auto; padding: 20px 16px 24px; display: flex; flex-direction: column; gap: 14px; }
body.plain .foot { text-align: center; }

/* ---------- Cards / grid ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px;
}
.card + .card { margin-top: 14px; }
.grid > .card + .card, .grid > * + .card { margin-top: 0; }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.card-head .spacer { flex: 1; }
.card-flush { padding: 0; overflow: hidden; }
.card-flush .card-head { padding: 14px 18px 0; }
.grid { display: grid; gap: 14px; }
.grid + .grid, .grid + .card, .card + .grid { margin-top: 14px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
@media (max-width: 1100px) { .g-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .g-2, .g-3 { grid-template-columns: minmax(0, 1fr); }
  .g-4, .g-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-2 { grid-column: auto; }
}

/* ---------- Stat tiles ---------- */
.stat { padding: 12px 16px; position: relative; }
.stat-label { color: var(--muted); font-size: .84rem; font-weight: 600; }
.stat-value { font-size: 1.65rem; font-weight: 750; letter-spacing: -.02em; margin-top: 2px; line-height: 1.15; }
.stat-note { color: var(--muted); font-size: .78rem; margin-top: 2px; }
.stat::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--line); }
.stat.s-present::before { background: var(--present); }
.stat.s-late::before { background: var(--late); }
.stat.s-absent::before { background: var(--absent); }
.stat.s-primary::before { background: var(--primary); }
.stat.s-pending::before { background: var(--pending); }

.meter { height: 8px; border-radius: 99px; background: var(--pending-bg); overflow: hidden; display: flex; margin-top: 10px; }
.meter span { display: block; height: 100%; }
.meter .m-present { background: var(--present); }
.meter .m-late { background: var(--late); }
.meter .m-absent { background: var(--absent); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th {
  text-align: left; font-weight: 600; font-size: .8rem;
  color: var(--muted); padding: 9px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2);
  white-space: nowrap;
}
.table td { padding: 9px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #fafcfb; }
.table .num { text-align: right; }
.table .actions { white-space: nowrap; text-align: right; }
.person { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.person .avatar { width: 32px; height: 32px; font-size: .72rem; background: var(--primary-soft); color: var(--primary); }
.person strong { display: block; font-weight: 600; }
.person small { display: block; font-size: .78rem; }
.empty { padding: 28px 20px; text-align: center; color: var(--muted); }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px;
  font-size: .78rem; font-weight: 600; white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-present { color: var(--present); background: var(--present-bg); }
.badge-late { color: var(--late); background: var(--late-bg); }
.badge-absent { color: var(--absent); background: var(--absent-bg); }
.badge-pending, .badge-muted { color: var(--pending); background: var(--pending-bg); }
.badge-plain::before { display: none; }
.chip { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--pending-bg); color: var(--ink-2); font-size: .74rem; font-weight: 600; }
.chip-qr { background: #ece8fb; color: #5b45b0; }
.chip-rfid { background: #fdeedd; color: #a65d0a; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: 9px; border: 1px solid var(--green-line);
  font: inherit; font-weight: 600; font-size: .88rem; cursor: pointer; line-height: 1.2;
  background: var(--green-light); color: var(--green-ink); text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--green-light-2); text-decoration: none; }
.btn .icon { width: 16px; height: 16px; }
.btn-ghost { background: var(--surface); color: var(--ink-2); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn-danger { background: var(--absent); color: #fff; border-color: transparent; }
.btn-danger:hover { background: #a83131; }
.btn-sm { padding: 6px 10px; font-size: .8rem; border-radius: 8px; }
.btn-block { width: 100%; }
.icon-btn {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; padding: 0;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.icon-btn.danger:hover { color: var(--absent); border-color: #f0c4c1; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
form.inline { display: inline; }

/* ---------- Forms ---------- */
label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: 5px; color: var(--ink-2); }
.field { margin-bottom: 14px; }
.hint { font-size: .78rem; color: var(--muted); margin-top: 4px; }
input[type=text], input[type=password], input[type=email], input[type=date], input[type=time],
input[type=tel], input[type=search], input[type=number], select, textarea {
  width: 100%; padding: 9px 12px; border: 1px solid #cfd8d3; border-radius: 9px;
  font: inherit; font-size: .92rem; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(27,122,94,.25); border-color: var(--primary-2); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
@media (max-width: 700px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.form-section { font-size: .9rem; font-weight: 700; color: var(--primary); margin: 4px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); grid-column: 1 / -1; }
.checkline { display: flex; gap: 8px; align-items: center; font-weight: 500; }
.checkline input { width: auto; }

.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.filters .field { margin: 0; min-width: 150px; }
.filters .grow { flex: 1; min-width: 200px; }
.seg { display: inline-flex; background: var(--pending-bg); border-radius: 10px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg a, .seg button {
  padding: 7px 12px; border-radius: 8px; color: var(--ink-2); font-weight: 600; font-size: .82rem;
  border: 0; background: none; cursor: pointer; font-family: inherit;
}
.seg a:hover { text-decoration: none; background: rgba(255,255,255,.6); }
.seg .on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* ---------- Alerts ---------- */
.alert { padding: 10px 14px; border-radius: 10px; margin-bottom: 12px; font-weight: 500; border: 1px solid; }
.alert-success { background: var(--present-bg); color: #13603d; border-color: #bfe3cf; }
.alert-error { background: var(--absent-bg); color: #8f2626; border-color: #f0c4c1; }
.alert-warn { background: var(--late-bg); color: #7c4f06; border-color: #f1d9a8; }
.alert-info { background: var(--primary-soft); color: var(--primary); border-color: #c4e1d3; }
/* auto-hiding messages: fade and fold to nothing before they are removed */
.alert[data-autohide] { overflow: hidden; transition: opacity .3s ease, max-height .35s ease, padding .35s ease, border-width .35s ease; }
.alert.is-hiding { opacity: 0; max-height: 0 !important; padding-top: 0; padding-bottom: 0; border-width: 0; }

/* ---------- Charts ---------- */
.chart-box { position: relative; height: 260px; }
.chart-box.tall { height: 320px; }
.chart-box.short { height: 200px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .8rem; color: var(--ink-2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* ---------- Login ---------- */
.auth-wrap { min-height: calc(100vh - 130px); display: grid; place-items: center; align-content: center; gap: 14px; padding: 8px 0; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card h1 { font-size: 1.4rem; margin-bottom: 4px; }
.btn-role { background: var(--green-light); color: var(--green-ink); border-color: var(--green-line); padding: 10px 18px; font-size: .95rem; font-weight: 700; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.btn-role:hover { background: var(--green-light-2); color: var(--green-ink); }
.auth-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.auth-card-head .btn-role { padding: 8px 14px; font-size: .88rem; }
@media (max-width: 480px) {
  .auth-card-head .btn-role { padding: 7px 12px; font-size: .82rem; }
}
.auth-card .seg { width: 100%; margin: 14px 0 16px; }
.auth-card .seg a { flex: 1; text-align: center; }
.parent-mini { padding: 16px 18px; margin-top: 0 !important; }
.parent-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.parent-icon { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.parent-head h2 { font-size: 1rem; margin: 0; }
.parent-head p { margin: 2px 0 0; font-size: .82rem; }
.parent-mini .alert { margin: 0 0 10px; font-size: .85rem; }
.parent-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.parent-mini .field { margin-bottom: 0; }
.parent-mini input { padding: 8px 10px; }
.parent-mini .hint { margin: 6px 0 12px; }
@media (max-width: 420px) { .parent-fields { grid-template-columns: 1fr; } }

/* ---------- Landing ---------- */
.hero { text-align: center; padding: 20px 0 6px; }
.hero h1 { font-size: 2rem; letter-spacing: -.02em; }
.hero p { color: var(--muted); max-width: 560px; margin: 8px auto 0; }
.portal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 800px) { .portal-grid { grid-template-columns: minmax(0, 1fr); } }
.portal {
  display: flex; flex-direction: column; gap: 10px; padding: 24px; color: var(--ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.portal:hover { transform: translateY(-2px); text-decoration: none; box-shadow: 0 8px 28px rgba(16,40,30,.1); }
.portal .p-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.portal .p-icon .icon { width: 24px; height: 24px; }
.portal h2 { font-size: 1.1rem; }
.portal p { margin: 0; color: var(--muted); font-size: .9rem; }
.portal .go { margin-top: auto; font-weight: 600; color: var(--primary-2); }

/* ---------- Profile / parent ---------- */
.profile { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.profile .avatar { width: 58px; height: 58px; font-size: 1.15rem; background: var(--primary-soft); color: var(--primary); }
.profile h2 { font-size: 1.25rem; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 8px 12px; font-size: .9rem; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 500; }
.today-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.today-panel > div { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.today-panel .big { font-size: 1.35rem; font-weight: 700; margin-top: 4px; }
@media (max-width: 600px) { .today-panel { grid-template-columns: minmax(0, 1fr); } .kv { grid-template-columns: 110px 1fr; } }

.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal .dow { text-align: center; font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; padding-bottom: 2px; }
.cal .day {
  aspect-ratio: 1 / 1; border-radius: 9px; border: 1px solid var(--line); padding: 6px;
  display: flex; flex-direction: column; justify-content: space-between; font-size: .8rem; background: #fff; min-width: 0;
}
.cal .day .n { font-weight: 700; }
.cal .day .t { font-size: .66rem; color: inherit; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal .day.blank { border: 0; background: none; }
.cal .day.present { background: var(--present-bg); border-color: #bfe3cf; color: #13603d; }
.cal .day.late { background: var(--late-bg); border-color: #f1d9a8; color: #7c4f06; }
.cal .day.absent { background: var(--absent-bg); border-color: #f0c4c1; color: #8f2626; }
.cal .day.off { background: var(--surface-2); color: #a7b1ac; }
.cal .day.future { color: #a7b1ac; }
.cal .day.is-today { outline: 2px solid var(--primary-2); outline-offset: 1px; }
@media (max-width: 520px) { .cal .day .t { display: none; } .cal { gap: 4px; } }

.qr-box { text-align: center; }
.qr-box img { width: 180px; height: 180px; image-rendering: pixelated; border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: #fff; }

.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--present); margin-right: 6px; animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(29,143,90,.5); } 70% { box-shadow: 0 0 0 8px rgba(29,143,90,0); } 100% { box-shadow: 0 0 0 0 rgba(29,143,90,0); } }

.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.feed li:last-child { border-bottom: 0; }
.feed .when { margin-left: auto; color: var(--muted); font-size: .82rem; white-space: nowrap; }

.rate-bar { display: flex; align-items: center; gap: 10px; min-width: 140px; }
.rate-bar .track { flex: 1; height: 6px; background: var(--pending-bg); border-radius: 99px; overflow: hidden; }
.rate-bar .fill { height: 100%; background: var(--present); border-radius: 99px; }
.rate-bar .fill.warn { background: var(--late); }
.rate-bar .fill.bad { background: var(--absent); }
.rate-bar span { font-weight: 600; font-size: .85rem; min-width: 46px; text-align: right; }

@media print {
  .sidebar, .topbar-actions, .nav-toggle, .filters, .no-print, .foot { display: none !important; }
  .main { margin: 0; }
  .card { box-shadow: none; }
  body { background: #fff; }
}
.table td.tabular { white-space: nowrap; }
@media (max-width: 600px) {
  .plain-actions .btn { padding: 6px 10px; }
  .table th, .table td { padding: 9px 10px; }
  .table td strong { white-space: nowrap; }
}
.table td small { white-space: nowrap; }
.table td > strong:only-child { white-space: nowrap; }

/* ---------- Dashboards that fit the screen (no page scroll) ---------- */
.dash-main {
  display: grid; gap: 14px;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-areas: "chart feed" "sec feed";
}
.dash-chart { grid-area: chart; }
.dash-feed { grid-area: feed; }
.dash-sections { grid-area: sec; }
.dash-main > .card + .card { margin-top: 0; }
@media (max-width: 1023px) {
  .dash-main { grid-template-columns: minmax(0, 1fr); grid-template-areas: "chart" "feed" "sec"; }
}
.table thead th { position: sticky; top: 0; z-index: 1; }

@media (min-width: 1024px) and (min-height: 560px) {
  .main.fit { height: 100vh; min-height: 0; }
  .main.fit .content { min-height: 0; overflow: hidden; }
  .main.fit .fill { flex: 1; min-height: 0; }
  .main.fit .dash-main { grid-template-rows: minmax(0, 1.15fr) minmax(0, 1fr); }
  .main.fit .dash-main > .card, .main.fit .card.fill { display: flex; flex-direction: column; min-height: 0; }
  .main.fit .scroll, .main.fit .fill .table-wrap { flex: 1; min-height: 0; overflow: auto; }
  .main.fit .dash-chart .chart-box { flex: 1; height: auto; min-height: 0; overflow: hidden; }
}

/* ---------- Login pages that fit the screen ---------- */
body.auth-page .plain-main { padding: 12px 16px; }
/* Exactly one screen tall: cards centred on the page */
body.auth-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.auth-page .plain-main { flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: center; }
body.auth-page .auth-wrap { min-height: 0; padding: 0; gap: 12px; }
body.auth-page > .foot { display: none; }
body.auth-page .auth-card { padding: 16px 20px; }
body.auth-page .auth-card .seg { margin: 10px 0 12px; }
body.auth-page .field { margin-bottom: 10px; }
body.auth-page input[type=text], body.auth-page input[type=password] { padding: 8px 12px; }
body.auth-page .parent-mini .hint { margin: 4px 0 10px; }
body.auth-page .foot { padding: 6px 16px 10px; }
.dash-sections .table th, .dash-sections .table td { padding-left: 10px; padding-right: 10px; }
.dash-sections .rate-bar { min-width: 100px; }

/* ---------- Live attendance student list ---------- */
/* Always scrolls inside its own box; on large screens it fills the space left on the page */
.student-list { max-height: 65vh; overflow: auto; overscroll-behavior: contain; }
@media (min-width: 1024px) and (min-height: 560px) { .main.fit .student-list { max-height: none; } }
.row-actions { display: inline-flex; gap: 6px; align-items: center; }
.detail-row td { background: var(--surface-2); padding-top: 10px; padding-bottom: 12px; }
.detail-row:hover { background: none; }
.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; margin: 0; }
.detail-grid dt { color: var(--muted); font-size: .78rem; font-weight: 600; }
.detail-grid dd { margin: 2px 0 0; font-weight: 500; }
@media (max-width: 700px) { .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Shorter laptop screens: tighten the top of fit-to-screen pages so lists get more room */
@media (min-width: 1024px) and (min-height: 560px) and (max-height: 820px) {
  .main.fit .topbar { padding-top: 12px; }
  .main.fit .subtitle { font-size: .84rem; }
  .main.fit .content { padding-top: 10px; gap: 10px; }
  .main.fit .filters { padding: 10px 14px; }
  .main.fit .filters label { margin-bottom: 3px; font-size: .8rem; }
  .main.fit .filters input, .main.fit .filters select { padding: 7px 10px; }
  .main.fit .filters .btn { padding: 7px 14px; }
  .main.fit .stat { padding: 8px 14px; }
  .main.fit .stat-value { font-size: 1.35rem; }
  .main.fit .stat-note { display: none; }
  .main.fit .stat::before { top: 8px; bottom: 8px; }
  .main.fit .card.fill .card-head { padding-top: 10px; margin-bottom: 8px; }
  .main.fit .card.fill .seg a { padding: 5px 10px; }
  .main.fit .student-list .table td { padding-top: 7px; padding-bottom: 7px; }
}

/* ---------- Live attendance header: section label + sort ---------- */
.section-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px;
  background: var(--primary-soft); color: var(--primary); font-size: .8rem; font-weight: 600; white-space: nowrap;
}
.section-tag .icon { width: 14px; height: 14px; }
.sort-inline { margin: 0; }
.sort-inline select { width: auto; padding: 5px 30px 5px 10px; font-size: .82rem; font-weight: 600; border-radius: 8px; }

/* No footer on sidebar pages: the content area keeps an even bottom margin */
.main > .content { padding-bottom: 20px; }
@media (max-width: 900px) { .main > .content { padding-bottom: 16px; } }

/* Short screens (small laptops, zoomed browsers): tighter login cards */
@media (max-height: 720px) {
  body.auth-page .plain-main { padding: 8px 16px; }
  body.auth-page .auth-wrap { gap: 10px; }
  body.auth-page .auth-card { padding: 12px 18px; }
  body.auth-page .auth-card h1 { font-size: 1.25rem; }
  body.auth-page .auth-card .seg { margin: 8px 0 10px; }
  body.auth-page .auth-card .seg a { padding: 5px 12px; }
  body.auth-page label { margin-bottom: 3px; }
  body.auth-page .field { margin-bottom: 8px; }
  body.auth-page input[type=text], body.auth-page input[type=password] { padding: 7px 12px; }
  body.auth-page .btn-block { padding: 8px 16px; }
  body.auth-page .parent-head { margin-bottom: 8px; }
  body.auth-page .parent-mini .hint { margin: 3px 0 8px; }
}
/* Parent portal grid: two inputs, then hint, then button (default stacked layout) */
.parent-fields { grid-template-areas: "id last4" "hint hint" "go go"; row-gap: 0; }
.parent-fields > .field:nth-child(1) { grid-area: id; }
.parent-fields > .field:nth-child(2) { grid-area: last4; }
.parent-fields > .hint { grid-area: hint; }
.parent-fields > .btn { grid-area: go; }
/* Short screens: put fields side by side so the whole login page fits without scrolling */
@media (max-height: 720px) and (min-width: 560px) {
  body.auth-page .auth-card { max-width: 540px; }
  body.auth-page .staff-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  body.auth-page .parent-fields { grid-template-columns: 1fr 1fr auto; grid-template-areas: "id last4 go" "hint hint hint"; align-items: end; }
  body.auth-page .parent-fields > .btn { width: auto; margin-bottom: 8px; }
  body.auth-page .parent-mini .hint { margin: 0; }
}
/* Very short windows: one more step of compaction */
@media (max-height: 560px) {
  body.auth-page .plain-main { padding: 6px 16px; }
  body.auth-page .auth-wrap { gap: 8px; }
  body.auth-page .auth-card { padding: 10px 18px; }
  body.auth-page .auth-card .seg { margin: 6px 0 8px; }
  body.auth-page .alert { padding: 6px 12px; margin-bottom: 8px; font-size: .85rem; }
  body.auth-page .parent-icon { width: 30px; height: 30px; }
}

/* Edit buttons turn green on hover, on every page */
.icon-btn.edit:hover { background: var(--present-bg); color: var(--present); border-color: #bfe3cf; }

/* Teachers table */
code.username { font-size: .88rem; background: var(--surface-2); border: 1px solid var(--line); padding: 2px 8px; border-radius: 6px; }
.person .badge { margin-top: 3px; }

/* Students table: parent mobile number, easier to read */
.sub-mobile { display: inline-block; margin-top: 2px; font-size: .9rem; color: var(--ink-2); white-space: nowrap; letter-spacing: .01em; }
/* Messages on the login pages (e.g. "You have been signed out") line up with the cards */
body.auth-page .plain-main > .alert { width: 100%; max-width: 420px; align-self: center; }
@media (max-height: 720px) and (min-width: 560px) { body.auth-page .plain-main > .alert { max-width: 540px; } }

/* ---------- Analytics filter bar: aligned grid that fills the row ---------- */
.range-filters {
  display: grid; gap: 12px 14px; align-items: end;
  grid-template-columns: minmax(290px, 2fr) minmax(128px, 1fr) minmax(128px, 1fr) minmax(150px, 1.2fr) auto;
  grid-template-areas: "range from to section actions";
}
.range-filters .field { min-width: 0; }
.range-filters .f-range { grid-area: range; }
.range-filters .f-from { grid-area: from; }
.range-filters .f-to { grid-area: to; }
.range-filters .f-section { grid-area: section; }
.range-filters .f-actions { grid-area: actions; flex-wrap: nowrap; }
/* Range buttons: full width of their column, same height as the inputs beside them */
.range-filters .seg { display: flex; width: 100%; height: 44px; flex-wrap: nowrap; }
.range-filters .seg a { flex: 1; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.range-filters .f-actions .btn { height: 44px; }
/* Narrow laptop / tablet widths: two full rows */
@media (max-width: 1279px) {
  .range-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "range range from to" "section section actions actions"; }
  .range-filters .f-actions .btn { flex: 1; }
}
/* Phones */
@media (max-width: 760px) {
  .range-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "range range" "from to" "section section" "actions actions"; }
}
/* Labels line up along the top; buttons sit on the input line */
.range-filters { align-items: start; }
.range-filters .f-actions { align-self: end; }
.range-filters label { line-height: 1.5; }
@media (max-width: 760px) {
  .range-filters .seg a { padding: 7px 4px; font-size: .78rem; min-width: 0; }
  .range-filters .f-actions .btn { padding-left: 8px; padding-right: 8px; }
}

/* Student tables on long pages (Analytics): fixed-height scroll box with pinned headings */
.student-list.list-short { max-height: 420px; }

/* ---------- Hover & focus feedback for everything clickable ---------- */
.btn, .icon-btn, .seg a, .seg button, .sidebar nav a, .logout, .chip, .checkline.chip {
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .08s ease;
}
.btn:hover { background: var(--green-light-2); box-shadow: 0 3px 10px rgba(19, 96, 61, .15); }
.btn:active, .icon-btn:active { transform: translateY(1px); box-shadow: none; }
.btn-ghost:hover { background: var(--primary-soft); color: var(--primary); border-color: #b7d6c7; box-shadow: none; }
.btn-danger:hover { background: #a83131; box-shadow: 0 3px 10px rgba(196, 61, 61, .3); }
.icon-btn:hover { background: var(--primary-soft); color: var(--primary); border-color: #b7d6c7; }
.icon-btn.danger:hover { background: var(--absent-bg); color: var(--absent); border-color: #f0c4c1; }
.seg a:hover, .seg button:hover { background: rgba(255, 255, 255, .75); color: var(--ink); }
.seg .on:hover { background: #fff; }
.checkline.chip { cursor: pointer; }
.checkline.chip:hover { background: var(--primary-soft); color: var(--primary); }
/* Keyboard users can see where they are */
.btn:focus-visible, .icon-btn:focus-visible, .seg a:focus-visible, .sidebar nav a:focus-visible,
.logout:focus-visible, a:focus-visible, button:focus-visible {
  outline: 2px solid var(--primary-2); outline-offset: 2px;
}

/* Landing page: the three portal cards line up (cancel the stacked-card top margin) */
.portal-grid > .card + .card { margin-top: 0; }
/* Settings: all seven school-day checkboxes fit on one row */
.days-row { gap: 6px; flex-wrap: nowrap; }
.days-row .checkline.chip { margin: 0; padding: 6px 9px; gap: 6px; font-size: .8rem; }
@media (max-width: 1200px) { .days-row { flex-wrap: wrap; } }

/* ---------- Form pages: full-width, balanced two-column cards ---------- */
.form-card { width: 100%; }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-grid .form-section:not(:first-child) { margin-top: 8px; }
.form-actions {
  display: flex; justify-content: flex-end; align-items: center; gap: 8px;
  margin: 4px -18px -16px; padding: 14px 18px; border-top: 1px solid var(--line);
  background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius);
}
/* Checkbox styled as a box the same height as the text inputs */
.toggle-box {
  display: flex; align-items: center; gap: 10px; height: 44px; margin: 0; padding: 0 12px;
  border: 1px solid #cfd8d3; border-radius: 9px; background: #fff; font-weight: 500; color: var(--ink); cursor: pointer;
}
.toggle-box:hover { border-color: var(--primary-2); }
.toggle-box input { width: 16px; height: 16px; accent-color: var(--primary); }

/* Two equal cards side by side (My Account) */
.panel { display: flex; flex-direction: column; }
.panel-head { display: flex; align-items: center; gap: 14px; min-height: 58px; margin-bottom: 14px; }
.panel-head .avatar { width: 54px; height: 54px; font-size: 1.05rem; background: var(--primary-soft); color: var(--primary); }
.panel-head h2 { font-size: 1.15rem; }
.panel-body { flex: 1; }
.panel-form { display: flex; flex-direction: column; flex: 1; }
.panel-foot { margin-top: auto; }
.panel-foot .hint { margin: 0; margin-right: auto; }
.account-grid .kv { align-content: start; gap: 12px 12px; }
/* My Account: both cards share one structure — header, divider, two rows of boxes, footer */
.panel-head { min-height: 0; margin: -16px -18px 16px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.panel-icon {
  flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary); font-weight: 700; font-size: 1.05rem;
}
.panel-icon .icon { width: 24px; height: 24px; }
.panel-head small { display: block; margin-top: 2px; }
.panel-body.form-grid, .panel-body .form-grid { align-content: start; }
.readonly-box {
  display: flex; align-items: center; height: 44px; padding: 0 12px; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--line); font-weight: 500; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.panel-foot { min-height: 64px; }
.account-grid { align-items: stretch; }
/* Role picker: fill the space below the top bar, content centred, sizes grow with the screen */
body.home-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.home-page .plain-main {
  flex: 1; width: 100%; max-width: 1240px; justify-content: center;
  gap: clamp(24px, 5vh, 56px); padding-top: clamp(20px, 4vh, 48px); padding-bottom: clamp(20px, 4vh, 48px);
}
body.home-page .hero { padding: 0; }
body.home-page .hero h1 { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.1rem); }
body.home-page .hero p { font-size: clamp(1rem, .9rem + .35vw, 1.2rem); max-width: 680px; margin-top: 12px; }
body.home-page .portal-grid { gap: clamp(16px, 2vw, 28px); }
body.home-page .portal { padding: clamp(24px, 3.4vh, 38px) clamp(22px, 2.2vw, 34px); gap: 14px; min-height: clamp(230px, 33vh, 330px); }
body.home-page .portal .p-icon { width: clamp(52px, 6vh, 68px); height: clamp(52px, 6vh, 68px); border-radius: 16px; }
body.home-page .portal .p-icon .icon { width: 30px; height: 30px; }
body.home-page .portal h2 { font-size: clamp(1.2rem, 1rem + .5vw, 1.5rem); }
body.home-page .portal p { font-size: clamp(.92rem, .85rem + .2vw, 1.05rem); line-height: 1.6; }
body.home-page .portal .go { font-size: 1.02rem; padding-top: 6px; }
@media (max-width: 800px) { body.home-page .portal { min-height: 0; } }

/* ---------- Parent dashboard: one screen, no page scroll on laptops/desktops ---------- */
body.parent-page .plain-main { max-width: 1240px; width: 100%; }
.parent-summary { padding: 14px 18px; }
.parent-summary .profile { gap: 14px; }
.parent-summary .profile .avatar { width: 48px; height: 48px; font-size: 1rem; }
.parent-summary .profile h2 { font-size: 1.15rem; }
.profile-info { flex: 1; min-width: 0; }
.profile-info > small { display: block; margin-top: 4px; }
/* name with today's status beside it */
.profile-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.profile-today { display: inline-flex; align-items: center; gap: 8px; }
.profile-today small { font-size: .8rem; white-space: nowrap; }
.parent-summary .btn-signout { margin-left: auto; align-self: center; }
.mini-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.mini-stats > div { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; min-width: 0; position: relative; }
.mini-stats small { display: block; color: var(--muted); font-size: .76rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-stats strong { display: block; font-size: 1.25rem; font-weight: 750; line-height: 1.25; margin-top: 1px; }
.mini-stats span { display: block; color: var(--muted); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* coloured boxes: the thicker left border eats into the padding so all labels line up */
.mini-stats .m-present, .mini-stats .m-late, .mini-stats .m-absent { padding-left: 10px; }
.mini-stats .m-present { border-left: 3px solid var(--present); }
.mini-stats .m-late { border-left: 3px solid var(--late); }
.mini-stats .m-absent { border-left: 3px solid var(--absent); }
.history-fill { margin-top: 12px; }
.parent-help { text-align: center; margin: 0; padding: 10px 16px 12px; border-top: 1px solid var(--line); }
@media (max-width: 1000px) { .mini-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Calendar and Recent Attendance headings line up (same row height and top padding) */
.parent-main .card-head { min-height: 32px; }
.parent-main .card-flush .card-head { padding-top: 16px; min-height: 48px; }
/* Tablets: calendar and history stack so the calendar is wide enough for its labels; cells wider than tall */
@media (max-width: 1023px) { .parent-main { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 521px) and (max-width: 1023px) { .parent-main .cal .day { aspect-ratio: 3 / 2; } }
@media (max-width: 520px) {
  .mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Sign Out gets its own full-width row under the name */
  .parent-summary .btn-signout { width: 100%; margin-left: 0; }
  /* month switcher gets its own full-width row under the Calendar heading */
  .parent-main .cal-fill .card-head .btn-row { width: 100%; justify-content: space-between; }
}

@media (min-width: 1024px) and (min-height: 600px) {
  body.parent-page { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
  body.parent-page .plain-main { flex: 1; min-height: 0; padding-top: 14px; padding-bottom: 14px; gap: 12px; }
  .parent-main { flex: 1; min-height: 0; }
}
/* short screens: cell colour already shows the status, so drop the small word under the date */
@media (min-width: 1024px) and (min-height: 560px) and (max-height: 640px) { .cal-split .cal .day .t { display: none; } }
/* Parent sign out: always visible in the student summary card */
.btn-signout { background: var(--absent); color: #fff; border-color: transparent; padding: 10px 18px; font-size: .92rem; font-weight: 700; box-shadow: 0 2px 8px rgba(196, 61, 61, .25); }
.btn-signout:hover { background: #a83131; color: #fff; box-shadow: 0 3px 10px rgba(196, 61, 61, .3); }
.btn-signout .icon { width: 18px; height: 18px; }

/* ---------- Calendar + history side by side, filling the screen (student profile, parent dashboard) ---------- */
@media (min-width: 1024px) and (min-height: 560px) {
  .main.fit .cal-split, body.parent-page .cal-split { grid-template-rows: minmax(0, 1fr); }
  .main.fit .cal-split > .card, body.parent-page .cal-split > .card { display: flex; flex-direction: column; min-height: 0; }
  .main.fit .cal-split .card-head, body.parent-page .cal-split .card-head { margin-bottom: 8px; }
  /* calendar rows share whatever height is left instead of being square */
  .main.fit .cal-fill .cal, body.parent-page .cal-fill .cal { flex: 1; min-height: 0; grid-auto-rows: minmax(0, 1fr); grid-template-rows: auto; gap: 5px; }
  .main.fit .cal-fill .cal .day, body.parent-page .cal-fill .cal .day { aspect-ratio: auto; min-height: 0; padding: 4px 6px; }
  .main.fit .cal-fill .legend, body.parent-page .cal-fill .legend { margin-top: 8px !important; }
  .main.fit .history-fill, body.parent-page .history-fill { flex: 1; min-height: 0; overflow: auto; }
  .main.fit .history-fill .table-wrap, body.parent-page .history-fill .table-wrap { overflow: visible; }
}

/* ---------- Student profile ---------- */
.sv-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 14px; }
.sv-top > .card + .card { margin-top: 0; }
.sv-profile .profile .avatar { width: 48px; height: 48px; font-size: 1rem; }
.sv-profile .profile h2 { font-size: 1.15rem; }
.kv-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 12px 0 0; font-size: .88rem; }
.kv-row dt { color: var(--muted); font-size: .76rem; font-weight: 600; }
.kv-row dd { margin: 1px 0 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-cred { display: flex; flex-direction: column; gap: 10px; }
.sv-qr { display: flex; gap: 14px; align-items: center; }
.sv-qr img, .sv-noqr { width: 116px; height: 116px; flex: none; border: 1px solid var(--line); border-radius: 10px; padding: 6px; background: #fff; image-rendering: pixelated; }
.sv-noqr { display: grid; place-items: center; text-align: center; font-size: .8rem; }
.sv-qr-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; min-width: 0; }
.sv-qr-actions .btn, .sv-qr-actions form .btn { width: 100%; justify-content: flex-start; }
.sv-rfid { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 10px; margin-top: auto; }
@media (max-width: 1100px) { .sv-profile .mini-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kv-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sv-top { grid-template-columns: minmax(0, 1fr) 300px; } }
@media (max-width: 1023px) { .sv-top { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .kv-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Shorter laptop screens: slightly tighter spacing on every sidebar page so they fit without scrolling ---------- */
@media (min-width: 901px) and (max-height: 820px) {
  .topbar { padding-top: 12px; }
  .content { padding-top: 10px; gap: 10px; }
  .main > .content { padding-bottom: 12px; }
  .main .grid { gap: 10px; }
  .main .card { padding: 12px 16px; }
  .main .card-flush { padding: 0; }
  .main .card-flush .card-head { padding: 12px 16px 0; }
  .main .field { margin-bottom: 10px; }
  .main label { margin-bottom: 4px; }
  .main input[type=text], .main input[type=password], .main input[type=email], .main input[type=date], .main input[type=time],
  .main input[type=tel], .main input[type=search], .main input[type=number], .main select { padding: 7px 12px; }
  .main .form-section { margin: 2px 0 8px; padding-bottom: 4px; }
  .main .form-grid .form-section:not(:first-child) { margin-top: 4px; }
  .main .range-filters { gap: 8px 12px; }
  .main .range-filters .seg, .main .range-filters .f-actions .btn { height: 38px; }
  .main .hint { margin-top: 3px; }
  .main .form-actions { margin: 2px -16px -12px; padding: 10px 16px; }
}

/* ---------- Settings: rules + account side by side (same height), terminals full width below ---------- */
.settings-grid { align-items: stretch; }
.settings-grid > .card { display: flex; flex-direction: column; min-width: 0; }
/* the Save / Update buttons sit on the same line at the bottom of both cards */
.settings-grid > .card > form { flex: 1; display: flex; flex-direction: column; }
.settings-grid > .card > form > .btn { margin-top: auto; align-self: flex-start; }
.account-hint { margin: 0 0 14px; }
/* Attendance Rules: the Morning / Afternoon fields sit centered in the space above the Save button */
.settings-grid .rules-grid { flex: 1; align-content: center; padding-bottom: 14px; }
.settings-grid .rules-grid .form-section { text-align: center; }
.terminals-card { grid-column: 1 / -1; }
.terminals-card .table-wrap { margin-top: 12px; }
.terminals-card .table th, .terminals-card .table td { padding-top: 8px; padding-bottom: 8px; }
.terminals-card .table td { white-space: nowrap; }
/* Tablets and narrow laptops: one card per row so the forms and the terminal table have room */
@media (max-width: 1100px) { .settings-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Analytics: one tab = one screen ---------- */
.an-panel[hidden] { display: none !important; }
.an-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.an-overview .an-daily { grid-column: span 2; }
/* Arrival Times is wide so the bottom row is full (2 + 1, like the top row) */
.an-overview { grid-auto-flow: row dense; }
.an-overview .an-arrive { grid-column: span 2; }
.an-students { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.an-panel > .card + .card { margin-top: 0; }
.an-tabs a { min-width: 92px; text-align: center; }
.range-filters .seg a { padding-left: 6px; padding-right: 6px; min-width: 0; }
@media (max-width: 1100px) { .an-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .an-overview, .an-students { grid-template-columns: minmax(0, 1fr); }
  .an-overview .an-daily, .an-overview .an-arrive { grid-column: auto; }
  .an-tabs { width: 100%; } .an-tabs a { flex: 1; min-width: 0; }
}
@media (min-width: 901px) and (max-height: 820px) { .an-overview, .an-students { gap: 10px; } }
@media (min-width: 1024px) and (min-height: 560px) {
  .main.fit .an-panels { display: flex; flex-direction: column; min-height: 0; }
  .main.fit .an-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .main.fit .an-overview { display: grid; grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr); }
  .main.fit .an-students { display: grid; grid-template-rows: minmax(0, 1fr); }
  .main.fit .an-panel .card { display: flex; flex-direction: column; min-height: 0; }
  .main.fit .an-sections { flex: 1; }
  .main.fit .an-panel .card-head { margin-bottom: 6px; }
  /* charts and tables take whatever height their card has */
  .main.fit .an-panel .chart-box { flex: 1; height: auto !important; min-height: 0; }
  .main.fit .an-panel .student-list.list-short { flex: 1; min-height: 0; max-height: none; }
}
/* Dashboard "Today by Section": narrower columns on laptop widths so the row actions stay visible */
@media (max-width: 1400px) {
  .dash-sections .table th, .dash-sections .table td { padding-left: 7px; padding-right: 7px; }
  .dash-sections .rate-bar { min-width: 70px; }
}
/* Student profile on tablet-size windows: too much to fit legibly, so scroll normally with full-size calendar squares */
@media (max-width: 1100px), (max-height: 600px) {
  .main.fit:has(.sv-top) { height: auto; }
  .main.fit:has(.sv-top) .content { overflow: visible; }
  .main.fit .sv-top ~ .cal-split { grid-template-rows: none; }
  .main.fit .sv-top ~ .cal-split .cal-fill .cal { grid-auto-rows: auto; }
  .main.fit .sv-top ~ .cal-split .cal-fill .cal .day { aspect-ratio: 1 / 1; }
  .main.fit .sv-top ~ .cal-split .history-fill { overflow: visible; }
}

/* ---------- Teacher "My Account": cards centred in the page, roomier so the screen is used ---------- */
.account-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 8px 0 24px; }
.account-wrap .account-grid { width: 100%; gap: 20px; }
.account-wrap .panel { padding: 24px 28px; }
.account-wrap .panel-head { margin: -24px -28px 24px; padding: 22px 28px; gap: 16px; }
.account-wrap .panel-icon { width: 62px; height: 62px; font-size: 1.2rem; }
.account-wrap .panel-icon .icon { width: 28px; height: 28px; }
.account-wrap .panel-head h2 { font-size: 1.3rem; }
.account-wrap .panel-head small { font-size: .88rem; margin-top: 3px; }
.account-wrap .form-grid { gap: 0 20px; }
.account-wrap .field { margin-bottom: 20px; }
.account-wrap label { font-size: .9rem; margin-bottom: 7px; }
.account-wrap .readonly-box { height: 50px; padding: 0 14px; font-size: .98rem; }
.account-wrap input[type=password] { height: 50px; padding: 0 14px; font-size: .98rem; }
.account-wrap .form-actions { margin: 4px -28px -24px; padding: 16px 28px; min-height: 76px; }
.account-wrap .form-actions .hint { font-size: .85rem; }
.account-wrap .form-actions .btn { padding: 11px 20px; font-size: .92rem; }
@media (max-width: 1100px) { .account-wrap .account-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .account-wrap { justify-content: flex-start; padding-top: 0; } }

/* ---------- Filter bars: inputs, selects and the button share one height ---------- */
.filters input, .filters select, .filters .btn { height: 40px; }
.filters .btn { padding-top: 0; padding-bottom: 0; min-width: 96px; }
.main .filters .field { margin: 0; }   /* beats ".main .field" so fields line up with the button */
.search-row { display: flex; gap: 8px; }
.search-row input { flex: 1; min-width: 0; }

/* ---------- List tables (admin Students, Teachers) ---------- */
.list-table th, .list-table td { padding: 10px 7px; white-space: nowrap; }
.list-table th { font-size: .76rem; }
.list-table td { font-size: .84rem; }
/* only genuinely long names wrap to a second line */
.list-table td.wrap { white-space: normal; min-width: 150px; max-width: 200px; }
.list-table td .btn-sm { height: 28px; padding: 0 10px; font-size: .78rem; }
.list-table .chip { font-size: .72rem; }
.list-table th { white-space: normal; line-height: 1.25; }
/* every column centered, headers and cells, vertically and horizontally */
.list-table th, .list-table td, .list-table .actions { text-align: center; vertical-align: middle; }
/* Actions stay visible on the right while the rest of the table scrolls sideways */
.list-table .actions { position: sticky; right: 0; background: var(--surface); box-shadow: -10px 0 10px -10px rgba(0, 0, 0, .15); }
.list-table thead .actions { background: var(--surface-2); z-index: 2; }
/* .cell-grid: gridlines between every cell + light zebra rows (admin Students, teacher Live Attendance) */
.cell-grid th, .cell-grid td { border: 1px solid #d9e2dd; }
.cell-grid th:first-child, .cell-grid td:first-child { border-left: 0; }
.cell-grid th:last-child, .cell-grid td:last-child { border-right: 0; }
.cell-grid thead th { border-top: 0; border-bottom: 2px solid #cbd6d0; }
.cell-grid tbody tr:last-child td { border-bottom: 0; }
.cell-grid tbody tr:nth-child(even) td { background: #f7faf8; }
/* tables where every row is followed by a hidden "Details" row: stripe every other student instead */
.cell-grid.has-details tbody tr:nth-child(even) td { background: none; }
.cell-grid.has-details tbody tr:nth-child(4n+3) td, .cell-grid.has-details tbody tr:nth-child(4n+4) td { background: #f7faf8; }
.cell-grid tbody tr:not(.detail-row):hover td { background: #eef6f1; }
.list-table td { padding-top: 12px; padding-bottom: 12px; }
.list-table th:first-child, .list-table td:first-child { padding-left: 14px; }
.list-table th:last-child, .list-table td:last-child { padding-right: 14px; }
.list-table .student-name { color: var(--ink); font-weight: 600; text-decoration: none; }
.list-table .student-name:hover { color: var(--primary); text-decoration: underline; }
.list-table .today-cell { display: flex; align-items: center; justify-content: center; gap: 8px; }
.list-table .today-cell small { font-size: .8rem; }
.list-table .row-actions { gap: 5px; }
.topbar-actions .btn { height: 40px; padding-top: 0; padding-bottom: 0; }

/* ---------- Student profile: less clutter, even buttons ---------- */
.kv-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mini-stats > div { padding: 10px 12px; }
.mini-stats strong { margin-top: 4px; }
.sv-cred { gap: 14px; }
.sv-cred h2 { margin-bottom: 2px; }
.sv-qr { gap: 16px; align-items: center; }
.sv-qr-actions { flex: 1; gap: 8px; }
.sv-qr-actions form { margin: 0; }
.sv-qr-actions .btn, .sv-qr-actions form .btn { width: 100%; height: 32px; padding: 0 12px; justify-content: center; }
.sv-rfid { padding-top: 14px; margin-top: 0; }
.sv-rfid small { display: block; margin-bottom: 4px; }
.sv-rfid-actions { display: flex; gap: 8px; }
.sv-rfid-actions form { margin: 0; }
.sv-rfid-actions .btn { height: 32px; min-width: 110px; padding: 0 12px; justify-content: center; }
.sv-remove { color: var(--absent); }
.sv-remove:hover { background: var(--absent-bg); color: var(--absent); border-color: #f0c4c1; }
@media (max-width: 1100px) { .kv-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ---------- Page titles in caps, everywhere ---------- */
.topbar h1 { text-transform: uppercase; letter-spacing: .02em; }

/* ---------- Add / Edit forms: centered card, no empty space below ---------- */
.main .content:has(> .form-card) { display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - 96px); }
.main .content > .form-card { max-width: 920px; margin: 0 auto; }
/* Live search hides rows, which would throw the zebra stripes out of step: plain rows while filtering */
.cell-grid.is-filtering tbody tr:nth-child(n) td { background: none; }
.cell-grid.is-filtering tbody tr:not(.detail-row):hover td { background: #eef6f1; }
/* .cols-center: every header and cell centered in its column (teacher Class Attendance) */
.table.cols-center th, .table.cols-center td, .table.cols-center .actions { text-align: center; vertical-align: middle; }
.table.cols-center .row-actions { justify-content: center; }
.table.cols-center tr.detail-row td { text-align: left; }
/* Title inside a form card (Add/Edit Student, Add/Edit Teacher): centered, caps like page titles */
.form-card .form-title { text-align: center; margin: 4px 0 18px; }
.form-card .form-title h1 { font-size: 1.45rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin: 0; }
.form-card .form-title p { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }
/* Half Day badge (afternoon only) */
.badge-half { color: #4b5fb0; background: #e8ecfb; }