/* ext.css — additions for the server version (login, read-only banner, attendance board, re-sync) */
.login-overlay .login-box { max-width: 420px; }
.login-box label { display:block; font-weight:600; font-size:13px; margin:12px 0 6px; }
.login-box input { width:100%; padding:11px 12px; border:1px solid var(--line, #dfe3ea); border-radius:9px; font-size:14px; font-family:inherit; }
.ro-banner { position:sticky; top:0; z-index:50; background:#fff4e5; color:#96580a; border-bottom:1px solid #f3d9a4; padding:8px 14px; font-size:13px; font-weight:600; text-align:center; }
.att-wrap { overflow:auto; max-height:70vh; border:1px solid var(--line, #dfe3ea); border-radius:10px; }
.att-table { border-collapse:collapse; font-size:13px; min-width:100%; }
.att-table th, .att-table td { border-bottom:1px solid #eef0f4; padding:6px 8px; white-space:nowrap; text-align:center; }
.att-table th { position:sticky; top:0; background:#f6f8fb; font-weight:700; z-index:1; }
.att-table td.nm { text-align:start; font-weight:600; position:sticky; right:0; background:#fff; }
.att-table th.nm { position:sticky; right:0; z-index:2; }
.att-table a.mk { text-decoration:none; color:#1e6b34; font-size:16px; }
.att-table span.mk { color:#b6bcc6; font-size:16px; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-size:13px; margin-top:8px; }
.kv b { color:#59626f; font-weight:600; }
.pill-ok { background:#e9f6ec; color:#1e6b34; } .pill-bad { background:#fdeaea; color:#a10000; } .pill-warn { background:#fff4e5; color:#96580a; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size:12px; word-break:break-all; }
.resync-table { width:100%; border-collapse:collapse; font-size:13px; margin-top:8px; }
.resync-table th, .resync-table td { border-bottom:1px solid #eef0f4; padding:5px 8px; text-align:start; }
/* stand-alone password-reset page (/reset) */
.reset-page { background:#f4f6fa; }
.reset-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.reset-card { max-width:440px; width:100%; }
.reset-card label { display:block; font-weight:600; font-size:13px; margin:12px 0 6px; }
.reset-card input { width:100%; padding:11px 12px; border:1px solid var(--line, #dfe3ea); border-radius:9px; font-size:14px; font-family:inherit; }

/* ── account management: users list, mail bar, password fields ───────────
   Built to survive a narrow phone in RTL: nothing is a wide table, every
   action row wraps, and long e-mails/links break instead of pushing the card
   sideways (which is exactly what the first version did). */
.mailbar {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
  border:1px solid var(--line, #e2e6ee); border-radius:11px;
  padding:10px 12px; margin-bottom:12px; font-size:12.5px; line-height:1.6;
}
.mailbar > span { flex:1 1 220px; min-width:0; }
.mailbar.ok   { background:#eef8f1; border-color:#cbe7d5; color:#1e6b34; }
.mailbar.warn { background:#fff8ec; border-color:#f0dcb4; color:#7a5308; }
.mailbar .btn { flex:0 0 auto; }

.btn-sm { padding:7px 11px; font-size:12.5px; border-radius:9px; }

.us-list { display:flex; flex-direction:column; gap:10px; }
.us-row {
  border:1px solid var(--line, #e2e6ee); border-radius:12px; background:#fbfcfe;
  padding:12px 14px; display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}
.us-who { flex:1 1 240px; min-width:0; }
.us-email { font-weight:700; font-size:14px; word-break:break-all; }
.us-meta { color:var(--muted, #59626f); font-size:12px; margin-top:2px; }
.us-acts { display:flex; flex-wrap:wrap; gap:6px; }
.us-pwbox { flex:1 1 100%; border-top:1px dashed var(--line, #e2e6ee); padding-top:10px; }
.us-pwbox label { display:block; font-weight:600; font-size:12.5px; margin-bottom:6px; }
.us-pwbox input {
  width:100%; padding:10px 12px; margin-bottom:8px; font-family:inherit; font-size:14px;
  border:1px solid var(--line, #e2e6ee); border-radius:9px;
}

.us-msg { min-height:0; font-size:12.5px; line-height:1.7; margin-top:10px; overflow-wrap:anywhere; }
.us-msg.ok  { color:#1e6b34; }
.us-msg.bad { color:#a10000; }
.linkbox {
  margin-top:6px; padding:8px 10px; border-radius:9px; background:#f4f6fb;
  border:1px solid var(--line, #e2e6ee); word-break:break-all; user-select:all;
}

.us-add { margin-top:14px; border:1px solid var(--line, #e2e6ee); border-radius:12px; padding:10px 14px; background:#fbfcfe; }
.us-add > summary { cursor:pointer; font-weight:700; font-size:13.5px; }
.us-add[open] > summary { margin-bottom:8px; }
.us-add label { display:block; font-weight:600; font-size:12.5px; margin:10px 0 6px; }
.us-add input {
  width:100%; padding:10px 12px; font-family:inherit; font-size:14px;
  border:1px solid var(--line, #e2e6ee); border-radius:9px;
}
.us-wide { width:100%; margin-top:12px; }

@media (min-width:620px) {
  .us-wide { width:auto; }
}

/* app.js only styles input[type=text|number]; password and e-mail fields are
   just as much form fields and were rendering at the browser default width. */
input[type=password], input[type=email] {
  width:100%; padding:11px 12px; font-size:14px; font-family:inherit;
  border:1px solid var(--line, #e2e6ee); border-radius:9px; background:#fbfcfe;
}
input[type=password]:focus, input[type=email]:focus { outline:none; border-color:var(--blue, #1155cc); background:#fff; }

/* ── Sign-in ──────────────────────────────────────────────────────────────
   The first thing anyone sees, so it gets a real page rather than a bare
   dialog: the app's mark and name, one clear action, and everything else
   (forgot, the note about student pages) kept quiet underneath. */
.login-overlay {
  background: linear-gradient(150deg, #1155cc 0%, #3b82f6 45%, #7aa7f0 100%);
  align-items: center; justify-content: center; padding: 24px 16px;
}
.login-overlay .login-box {
  max-width: 400px; width: 100%; background: #fff; border-radius: 18px;
  padding: 30px 28px 22px; box-shadow: 0 18px 50px rgba(10, 30, 80, .28);
  text-align: center; max-height: none;
}
.login-mark {
  width: 62px; height: 62px; margin: 0 auto 12px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center; font-size: 30px;
  background: linear-gradient(140deg, #eaf1ff, #d7e5ff); box-shadow: inset 0 0 0 1px #cddcf7;
}
.login-title { margin: 0; font-size: 23px; font-weight: 800; letter-spacing: -.2px; color: #12203a; }
.login-sub { margin: 4px 0 20px; color: #59626f; font-size: 13px; }
.login-box form { text-align: start; }
.login-box label { display: block; font-weight: 600; font-size: 13px; margin: 0 0 6px; color: #33415c; }
.login-box input {
  width: 100%; padding: 12px 13px; margin-bottom: 14px; font-family: inherit;
  /* 16px: anything smaller and iOS Safari zooms the page in on focus */
  font-size: 16px; border: 1px solid #dfe3ea; border-radius: 11px; background: #fbfcfe;
  transition: border-color .15s, box-shadow .15s;
}
.login-box input:focus {
  outline: none; border-color: var(--blue, #1155cc); background: #fff;
  box-shadow: 0 0 0 3px rgba(17, 85, 204, .13);
}
.pw-field { position: relative; }
.pw-field input { padding-inline-end: 44px; }
.pw-toggle {
  position: absolute; inset-inline-end: 6px; top: 6px; border: 0; background: transparent;
  font-size: 16px; line-height: 1; padding: 8px; cursor: pointer; border-radius: 8px; opacity: .55;
}
.pw-toggle:hover { opacity: 1; background: #f1f4fa; }
.login-err { color: #a10000; font-size: 12.5px; min-height: 18px; line-height: 1.6; }
.login-submit { width: 100%; padding: 13px; font-size: 15px; margin-top: 4px; border-radius: 11px; }
.linkish {
  display: block; width: 100%; margin-top: 10px; background: none; border: 0; cursor: pointer;
  color: var(--blue, #1155cc); font: inherit; font-size: 13px; font-weight: 600; padding: 6px;
}
.linkish:hover { text-decoration: underline; }
.forgot-box { margin-top: 14px; padding-top: 14px; border-top: 1px solid #eef1f6; text-align: start; }
.login-foot { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid #eef1f6; color: #8a919c; font-size: 11.5px; }

/* iOS zooms any focused field under 16px; only the form controls need the bump. */
@media (max-width: 820px) {
  input[type=text], input[type=email], input[type=password], input[type=number], select, textarea { font-size: 16px; }
}

/* ── Settings sections ────────────────────────────────────────────────────
   Settings was ten cards stacked on one page with no way to see what was on
   it. Each of ours is a collapsible section now, with a chip row that opens
   and scrolls to one; what you leave open is remembered. */
.sectionbar { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.sectionbar .chip {
  border:1px solid #d7e0ef; background:#f4f7fd; color:#0b3d91; cursor:pointer;
  font:inherit; font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:999px;
}
.sectionbar .chip:hover { background:#e7eefb; }
details.sect { padding:0; }
details.sect > summary {
  cursor:pointer; list-style:none; padding:16px 20px; font-size:16px; font-weight:700;
  display:flex; align-items:center; justify-content:space-between; gap:10px; border-radius:14px;
}
details.sect > summary::-webkit-details-marker { display:none; }
details.sect > summary::after { content:'▾'; color:#8a919c; font-size:13px; transition:transform .15s; }
details.sect[open] > summary::after { transform:rotate(180deg); }
details.sect > summary:hover { background:#f7f9fd; }
details.sect[open] > summary { border-bottom:1px solid #eef1f6; margin-bottom:14px; }
details.sect > *:not(summary) { margin-inline:20px; }
details.sect > *:last-child { margin-bottom:18px; }
.us-row.pending { background:#fffaf0; border-color:#f0dcb4; }

/* Connection banner — the app never used to notice a dropped connection. */
.conn-banner {
  display:none; position:fixed; inset-inline:0; bottom:0; z-index:200;
  padding:11px 16px; font-size:13px; font-weight:700; text-align:center;
}
.conn-banner.show { display:block; }
.conn-banner.off { background:#fdeaea; color:#a10000; border-top:1px solid #f3c9c9; }
.conn-banner.on  { background:#e9f6ec; color:#1e6b34; border-top:1px solid #c7e6d1; }

/* Staging badge — staging shares production's hostname, so it says so loudly. */
.instance-badge {
  position:fixed; inset-block-start:0; inset-inline-start:0; z-index:300;
  background:#7a1fa2; color:#fff; font-size:11.5px; font-weight:800;
  padding:5px 12px; border-end-end-radius:10px; letter-spacing:.3px;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
body.is-staging { box-shadow: inset 0 0 0 3px #7a1fa2; }