:root {
  --bg: #f4f6fa;
  --panel: #ffffff;
  --text: #1d2433;
  --muted: #667085;
  --border: #e3e7ee;
  --primary: #2952cc;
  --primary-dark: #1e3fa3;
  --primary-soft: #e8eefc;
  --side: #14213d;
  --side-text: #c7d0e3;
  --green: #12805c;
  --green-soft: #e3f5ee;
  --red: #c4372f;
  --red-soft: #fdecea;
  --amber: #a15c07;
  --amber-soft: #fff4e0;
  --radius: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  font-size: 14px; color: var(--text); background: var(--bg); line-height: 1.45;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; margin: 0; }
h2 { font-size: 16px; margin: 0 0 12px; }
h3 { font-size: 14px; margin: 0 0 8px; }

/* Layout */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 230px; flex-shrink: 0; background: var(--side); color: var(--side-text);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 18px 16px; color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand img { width: 34px; height: 34px; object-fit: contain; background: #fff; border-radius: 6px; }
.brand .logo-fallback { width: 34px; height: 34px; border-radius: 6px; background: var(--primary); display: grid; place-items: center; font-weight: 700; }
.nav { padding: 10px 8px; flex: 1; }
.nav .group { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #7d8bab; padding: 14px 10px 4px; }
.nav a { display: block; padding: 7px 10px; border-radius: 7px; color: var(--side-text); }
.nav a:hover { background: rgba(255,255,255,.07); text-decoration: none; color: #fff; }
.nav a.active { background: var(--primary); color: #fff; }
.side-foot { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; }
.side-foot .who { color: #fff; font-weight: 600; }
.side-foot form { display: inline; }
.side-foot button { background: none; border: 0; color: var(--side-text); padding: 0; cursor: pointer; font: inherit; }
.side-foot button:hover, .side-foot a:hover { color: #fff; }
.side-foot a { color: var(--side-text); }
.main { flex: 1; min-width: 0; padding: 22px 28px 40px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.topbar .sub { color: var(--muted); font-size: 13px; }
.btn.menu-btn { display: none; }

/* Cards, grids */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 18px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.stat .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.stat .value { font-size: 24px; font-weight: 700; margin-top: 4px; }
.stat .hint { color: var(--muted); font-size: 12px; margin-top: 2px; }
.stat.red .value { color: var(--red); }
.stat.green .value { color: var(--green); }

/* Tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 600; background: #fafbfd; }
tr:hover td { background: #fafbff; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tfoot td { font-weight: 700; background: #fafbfd; }
.compact th, .compact td { padding: 4px 6px; }

/* Forms */
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
label .req { color: var(--red); }
input[type=text], input[type=password], input[type=date], input[type=number], input[type=email], input[type=tel], input[type=month], input[type=search], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid #cdd3de; border-radius: 7px; font: inherit; background: #fff; color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); }
textarea { min-height: 70px; resize: vertical; }
.field { margin-bottom: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-3 { grid-column: 1 / -1; }
.inline-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.inline-form .field { margin-bottom: 0; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.filters .field { margin-bottom: 0; min-width: 130px; }
.help { color: var(--muted); font-size: 12px; margin-top: 3px; }
.checkbox { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.choice { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; border: 1px solid #cdd3de; border-radius: 8px; padding: 12px; cursor: pointer; margin: 0; }
.choice:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.choice input { margin-top: 3px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 7px; border: 1px solid transparent;
  background: var(--primary); color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--primary-dark); text-decoration: none; }
.btn.secondary { background: #fff; color: var(--text); border-color: #cdd3de; }
.btn.secondary:hover { background: #f3f5f9; }
.btn.danger { background: var(--red); }
.btn.success { background: var(--green); }
.btn.sm { padding: 4px 10px; font-size: 13px; }
.btn.lg { padding: 11px 20px; font-size: 15px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Badges & alerts */
.badge { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; background: #eef0f4; color: var(--muted); }
.badge.green { background: var(--green-soft); color: var(--green); }
.badge.red { background: var(--red-soft); color: var(--red); }
.badge.amber { background: var(--amber-soft); color: var(--amber); }
.badge.blue { background: var(--primary-soft); color: var(--primary); }
.alert { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; border: 1px solid; }
.alert.success { background: var(--green-soft); border-color: #b5e2cf; color: #0b5c41; }
.alert.error { background: var(--red-soft); border-color: #f3c1bc; color: #8c231d; }
.alert.info { background: var(--primary-soft); border-color: #c5d3f6; color: #1e3fa3; }
.muted { color: var(--muted); }
.text-red { color: var(--red); }
.text-green { color: var(--green); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.mt { margin-top: 16px; }
.mb0 { margin-bottom: 0; }
.cancelled td { color: #9aa1ad; text-decoration: line-through; }

/* Student profile */
.profile { display: flex; gap: 18px; align-items: flex-start; }
.photo { width: 110px; height: 130px; border-radius: 8px; object-fit: cover; background: #eef0f4; border: 1px solid var(--border); display: grid; place-items: center; color: var(--muted); font-size: 34px; font-weight: 700; flex-shrink: 0; }
dl.details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 18px; margin: 0; flex: 1; }
dl.details dt { font-size: 12px; color: var(--muted); }
dl.details dd { margin: 0; font-weight: 500; }

/* Collect */
.period-row.paid td { color: var(--muted); }
.collect-box { position: sticky; top: 16px; }
.big-total { font-size: 28px; font-weight: 700; }
details summary { cursor: pointer; color: var(--primary); }

/* Attendance */
.att-opts { display: flex; gap: 4px; }
.att-opts input { display: none; }
.att-opts label { margin: 0; padding: 5px 10px; border-radius: 6px; border: 1px solid #cdd3de; cursor: pointer; font-weight: 600; min-width: 34px; text-align: center; background: #fff; }
.att-opts input:checked + label.P { background: var(--green); color: #fff; border-color: var(--green); }
.att-opts input:checked + label.A { background: var(--red); color: #fff; border-color: var(--red); }
.att-opts input:checked + label.L { background: var(--amber); color: #fff; border-color: var(--amber); }
.att-opts input:checked + label.H { background: var(--primary); color: #fff; border-color: var(--primary); }
.att-grid td, .att-grid th { padding: 4px 3px; text-align: center; font-size: 12px; min-width: 22px; }
.att-grid td:first-child, .att-grid th:first-child { text-align: left; min-width: 150px; }
.att-grid .sun { background: #f3f4f7; }
.att-P { color: var(--green); font-weight: 700; }
.att-A { color: var(--red); font-weight: 700; }
.att-L { color: var(--amber); font-weight: 700; }
.att-H { color: var(--primary); font-weight: 700; }

/* Auth pages */
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: linear-gradient(135deg, #14213d, #2952cc); }
.auth-card { background: #fff; border-radius: 14px; padding: 30px; width: 100%; max-width: 400px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.auth-card .head { text-align: center; margin-bottom: 20px; }
.auth-card .head img { max-width: 80px; max-height: 80px; }
.auth-card .btn { width: 100%; justify-content: center; }

.pagination { display: flex; gap: 6px; align-items: center; margin-top: 12px; }

/* Attendance kiosk (tablet) */
body.kiosk { background: #0f1a33; color: #fff; min-height: 100vh; -webkit-user-select: none; user-select: none; }
.kiosk-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px; background: #14213d; border-bottom: 1px solid rgba(255,255,255,.08); }
.kiosk-brand { display: flex; align-items: center; gap: 12px; }
.kiosk-brand img { width: 46px; height: 46px; object-fit: contain; background: #fff; border-radius: 8px; }
.kiosk-school { font-size: 20px; font-weight: 700; }
.kiosk-sub { color: #9fb0d4; font-size: 14px; }
.kiosk-clock { text-align: right; }
#kiosk-time { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kiosk-main { padding: 18px 22px 30px; }
.kiosk-bar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.kiosk-bar input { max-width: 360px; font-size: 18px; padding: 12px 14px; border-radius: 10px; border: 0; }
.kiosk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.kiosk-person { display: block; background: #1d2c50; border: 2px solid transparent; border-radius: 12px; padding: 16px; color: #fff; text-decoration: none; min-height: 96px; }
.kiosk-person:hover, .kiosk-person:active { border-color: #5b83ff; text-decoration: none; }
.kiosk-person .kp-name { display: block; font-size: 18px; font-weight: 700; }
.kiosk-person .kp-desig { display: block; color: #9fb0d4; font-size: 13px; margin-bottom: 8px; }
.kiosk-person .kp-state { display: inline-block; font-size: 13px; padding: 2px 8px; border-radius: 99px; background: rgba(255,255,255,.08); color: #c7d0e3; }
.kiosk-person.in .kp-state { background: #12805c; color: #fff; }
.kiosk-person.out .kp-state { background: #475569; color: #fff; }
.kiosk-pin { max-width: 420px; margin: 0 auto; text-align: center; }
.kiosk-who { margin-bottom: 12px; }
.kiosk-name { font-size: 26px; font-weight: 700; }
.kiosk-action { display: inline-block; margin: 6px 0; padding: 4px 14px; border-radius: 99px; font-weight: 700; font-size: 16px; }
.kiosk-action.in { background: #12805c; }
.kiosk-action.out { background: #b45309; }
.kiosk-cam { width: 200px; height: 150px; border-radius: 10px; background: #000; object-fit: cover; margin-bottom: 10px; }
.kiosk-pin-display { width: 100%; text-align: center; font-size: 34px; letter-spacing: 12px; padding: 10px; border-radius: 10px; border: 0; margin-bottom: 12px; color: var(--text); }
.kiosk-pin-display.shake { outline: 3px solid #c4372f; }
.kiosk-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.kiosk-key { font-size: 28px; font-weight: 700; padding: 16px 0; border-radius: 12px; border: 0; background: #1d2c50; color: #fff; cursor: pointer; }
.kiosk-key:active { background: #2952cc; }
.kiosk-key.muted-key { font-size: 18px; color: #9fb0d4; }
.kiosk-actions { display: flex; gap: 10px; }
.kiosk-btn { flex: 1; display: inline-block; text-align: center; font-size: 20px; font-weight: 700; padding: 16px; border-radius: 12px; border: 0; color: #fff; cursor: pointer; text-decoration: none; }
.kiosk-btn:hover { text-decoration: none; }
.kiosk-btn.in { background: #12805c; }
.kiosk-btn.out { background: #b45309; }
.kiosk-btn.secondary { background: #334155; }
.kiosk-result { max-width: 640px; margin: 40px auto; text-align: center; }
.kiosk-result h1 { font-size: 28px; margin: 12px 0; }
.kiosk-result p { font-size: 20px; color: #c7d0e3; margin-bottom: 26px; }
.kiosk-result a { color: #9fc0ff; }
.kiosk-icon { width: 96px; height: 96px; line-height: 96px; border-radius: 50%; margin: 0 auto; font-size: 52px; font-weight: 700; }
.kiosk-result.ok .kiosk-icon { background: #12805c; }
.kiosk-result.bad .kiosk-icon { background: #c4372f; }
.kiosk-result .kiosk-btn { display: inline-block; flex: none; min-width: 200px; }
.kiosk-register { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.kiosk-register input { font-size: 18px; padding: 12px; border-radius: 10px; border: 0; }

@media (max-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  dl.details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sidebar { position: fixed; left: -240px; z-index: 50; transition: left .2s; }
  .sidebar.open { left: 0; }
  .btn.menu-btn { display: inline-flex; }
  .main { padding: 14px 16px 30px; }
  .grid-2, .grid-3, .grid-4, .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .profile { flex-direction: column; }
  dl.details { grid-template-columns: 1fr 1fr; }
}

@media print {
  .sidebar, .no-print, .topbar .actions, .filters, .menu-btn { display: none !important; }
  body { background: #fff; }
  .main { padding: 0; }
  .card { border: 0; padding: 0; }
  a { color: inherit; }
}