:root{
  --bg:#33A6D6; --surface:#f4fafd; --surface-2:#e1f0f8;
  --ink:#0e2738; --ink-soft:#23516c; --ink-faint:#2c5470;
  --rule:#bfe0ee; --accent:#0f5c86; --accent-ink:#0b4763; --accent-soft:#d3edf7;
  --present:#0f5c86; --departed:#4c7891; --departed-soft:#dceaf2;
  --error:#b6473c; --error-soft:#f6ddd9;
  --success:#2f7d52;
  --shadow: 0 1px 2px rgba(10,40,60,.14), 0 8px 24px rgba(10,40,60,.12);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Avenir Next","Avenir Next LT Pro",Avenir,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.5; font-weight:400;
}
h1,h2{font-weight:500; margin:0;}

/* Kiosk — friendlier, rounder font than the rest of the site, since this is
   the screen students actually type on. */
.kiosk-page{
  max-width:680px; margin:0 auto; padding:32px 20px 60px; min-height:100%;
  display:flex; flex-direction:column;
  font-family:"Nunito","Avenir Next",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.kiosk-page h1{font-size:3.2rem; text-align:center; margin-bottom:4px;}
.kiosk-subtitle{font-size:2.24rem; text-align:center; color:var(--ink-soft); font-weight:500; margin:0 0 32px;}
.kiosk-header{
  position:fixed; top:0; left:0; right:0; z-index:10;
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 20px;
}
.kiosk-main{flex:1; display:flex; flex-direction:column; justify-content:center;}
.kiosk-user{font-size:.78rem; color:var(--ink-faint);}
#search-input{
  width:100%; padding:32px 36px; font-size:2.4rem; border-radius:16px;
  border:1px solid var(--rule); background:var(--surface); color:var(--ink);
  box-shadow:var(--shadow); text-align:center;
}
#search-input:focus{outline:2px solid var(--accent);}
ul.plain-list{list-style:none; margin:20px 0 0; padding:0;}
.result{
  display:flex; justify-content:space-between; align-items:center;
  padding:32px 36px; margin-bottom:12px; border-radius:14px;
  background:var(--surface); border:1px solid var(--rule); box-shadow:var(--shadow);
  font-size:2.1rem; cursor:pointer;
}
.result{transition:background-color .12s ease, transform .08s ease;}
.result:hover{background:var(--surface-2);}
.result:active{background:var(--surface-2); transform:scale(0.99);}
.pill{display:inline-block; font-size:.78rem; font-weight:600; padding:3px 10px; border-radius:999px;}
.pill.present{background:var(--accent-soft); color:var(--accent-ink);}
.pill.departed{background:var(--departed-soft); color:var(--departed);}
.kiosk-page .pill{font-size:1.1rem; padding:6px 16px;}

#confirm{
  margin-top:32px; padding:40px 32px; border-radius:18px; background:var(--surface);
  border:1px solid var(--rule); box-shadow:var(--shadow); text-align:center;
}
#confirm h2{font-size:2.8rem; margin-bottom:28px;}
.btn{
  font-size:2.2rem; font-weight:600; padding:28px 40px; border-radius:14px;
  border:none; cursor:pointer; width:100%; margin-bottom:12px; text-align:center;
  transition:filter .12s ease, transform .08s ease, background-color .15s ease, opacity .15s ease;
}
.btn-primary{background:var(--accent); color:#fff;}
.btn-secondary{background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--rule);}

.status{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  padding:24px 36px; border-radius:14px; font-weight:600; font-size:1.6rem; box-shadow:var(--shadow);
  max-width:90%; text-align:center;
}
.status.success{background:var(--accent-soft); color:var(--accent-ink);}
.status.error{background:var(--error-soft); color:var(--error);}
.status[hidden]{display:none;}

#offline-banner{
  background:var(--error-soft); color:var(--error); text-align:center;
  padding:16px; font-size:1.7rem; font-weight:600; border-radius:8px; margin-bottom:16px;
}
#offline-banner[hidden]{display:none;}

/* Dashboard */
.dash-page{max-width:1000px; margin:0 auto; padding:32px 24px 80px;}
.dash-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;}
.dash-header h1{font-size:1.5rem;}
.dash-user{font-size:.85rem; color:var(--ink-faint);}
nav.dash-tabs{display:flex; gap:8px; margin:20px 0 28px; border-bottom:1px solid var(--rule); flex-wrap:wrap;}
nav.dash-tabs button{
  background:none; border:none; padding:10px 4px; margin-right:16px; font-size:.95rem;
  color:var(--ink-soft); cursor:pointer; border-bottom:2px solid transparent; border-radius:6px 6px 0 0;
  transition:color .12s ease, border-color .12s ease, background-color .1s ease, transform .08s ease;
}
nav.dash-tabs button:hover{color:var(--accent-ink);}
nav.dash-tabs button.active{color:var(--accent-ink); border-bottom-color:var(--accent); font-weight:600;}
.dash-section{display:none;}
.dash-section.active{display:block;}

.table-wrap{overflow-x:auto; border:1px solid var(--rule); border-radius:10px; box-shadow:var(--shadow); margin-top:16px;}
table{width:100%; border-collapse:collapse; background:var(--surface); font-size:.92rem; min-width:520px;}
th,td{text-align:left; padding:10px 14px; border-bottom:1px solid var(--rule);}
thead th{background:var(--surface-2); font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft);}
tbody tr:last-child td{border-bottom:none;}

/* Students tab: wider spacing, zebra striping, and a bolder name column for quick scanning. */
table.students-table{font-size:1rem;}
table.students-table td, table.students-table th{padding:15px 18px;}
table.students-table tbody tr:nth-child(even){background:var(--surface-2);}
table.students-table td:first-child{font-weight:600;}
.row-actions{display:flex; gap:8px; flex-wrap:wrap;}
.roster-count{font-size:.85rem; color:var(--ink-faint);}

.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:end; margin-bottom:8px;}
.field{display:flex; flex-direction:column; gap:4px;}
.field label{font-size:.78rem; color:var(--ink-soft);}
input,select{padding:9px 12px; border-radius:8px; border:1px solid var(--rule); background:var(--surface); color:var(--ink); font-size:.92rem;}
.btn-sm{
  padding:9px 16px; border-radius:8px; border:none; background:var(--accent); color:#fff;
  font-weight:600; cursor:pointer; font-size:.88rem;
  transition:filter .12s ease, transform .08s ease, background-color .15s ease, opacity .15s ease;
}
.btn-sm.outline{background:transparent; border:1px solid var(--rule); color:var(--ink-soft);}
.btn-sm.danger{background:var(--error);}

/* Shared visual feedback for every button: press, hover, disabled/in-flight, and a brief
   success/error flash applied by UI.withFeedback() after an action completes.
   Press state is driven by ui.js (pointerdown/up -> .pressed class) rather than relying
   solely on CSS :active, which iOS Safari and other touch browsers don't reliably fire. */
.btn, .btn-sm, nav.dash-tabs button, li.result{ -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

.btn:hover:not(:disabled), .btn-sm:hover:not(:disabled), nav.dash-tabs button:hover{
  filter:brightness(1.08);
}
.btn.pressed, .btn-sm.pressed, .btn:active:not(:disabled), .btn-sm:active:not(:disabled){
  transform:scale(0.94); filter:brightness(0.85);
}
nav.dash-tabs button.pressed, nav.dash-tabs button:active{
  background:var(--surface-2); transform:scale(0.97);
}
li.result.pressed, li.result:active{
  background:var(--surface-2); transform:scale(0.98);
}
.btn:disabled, .btn-sm:disabled, .btn.is-loading, .btn-sm.is-loading,
li.result.is-loading{
  opacity:.55; cursor:wait; pointer-events:none;
}
.btn.flash-success, .btn-sm.flash-success, li.result.flash-success{background:var(--success) !important; color:#fff !important; filter:none !important;}
.btn.flash-error, .btn-sm.flash-error, li.result.flash-error{background:var(--error) !important; color:#fff !important; filter:none !important;}

/* Dashboard's live-roster check-in search reuses the kiosk's .result/.pill
   markup, but the kiosk sizing (touch-target scale) is too large here. */
.dash-page .plain-list{margin:10px 0 20px;}
.dash-page .result{padding:10px 14px; font-size:.92rem; margin-bottom:6px; border-radius:8px;}
.dash-page .pill{font-size:.72rem; padding:3px 10px;}

.card{background:var(--surface); border:1px solid var(--rule); border-radius:10px; padding:20px; box-shadow:var(--shadow); margin-bottom:20px; max-width:480px;}
.card.wide{max-width:100%;}
.card h3{font-size:1rem; margin-bottom:14px;}
.card .field{margin-bottom:12px;}
.card input{width:100%;}

.hidden{display:none !important;}
a{color:var(--accent-ink);}