/* CICO Station — kiosk styling. Loud, high-contrast, portrait-friendly. */

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body.cico-station {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background: #f4f4f5;
	color: #1d2327;
	-webkit-tap-highlight-color: transparent;
}
#cico-app { min-height: 100vh; display: flex; flex-direction: column; }

/* Centered cards (login, pickers) */
.cico-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }
.cico-card { width: 100%; max-width: 520px; background: #fff; border-radius: 14px; padding: 28px; box-shadow: 0 8px 30px rgba(0,0,0,.08); text-align: center; }
.cico-card.cico-clear { background: transparent; box-shadow: none; }
.cico-card h1 { font-size: 1.7rem; margin: 0 0 6px; }
.cico-sub { color: #666; margin: 0 0 18px; }
.cico-huge { font-size: 3.4rem; font-weight: 800; letter-spacing: 1px; margin: 8px 0 4px; }

/* Confirm-on-color screen: bigger, higher-contrast text for older eyes. */
.cico-confirm h1 { font-size: 2rem; }
.cico-confirm .cico-huge { font-size: 4.2rem; }
.cico-confirm .cico-sub { font-size: 1.4rem; opacity: .95; margin: 6px 0 26px; }
.cico-confirm .cico-link { font-size: 1.2rem; font-weight: 600; margin-top: 6px; }

.cico-card input[type="text"], .cico-card input[type="password"], .cico-card input:not([type]) {
	display: block; width: 100%; font-size: 1.2rem; padding: 14px 16px; margin: 0 0 12px;
	border: 2px solid #d7d7db; border-radius: 10px;
}
.cico-remember { display: flex; gap: 8px; align-items: center; justify-content: flex-start; margin: 0 0 16px; color: #555; }
.cico-card button[type="submit"], .cico-big {
	display: block; width: 100%; font-size: 1.4rem; font-weight: 700; padding: 18px; margin: 8px 0;
	border: 0; border-radius: 12px; background: #1d2327; color: #fff; cursor: pointer;
}
.cico-grid { display: grid; gap: 12px; margin: 8px 0 4px; }
.cico-link { background: none; border: 0; color: #2271b1; font-size: 1rem; padding: 12px; cursor: pointer; width: 100%; }
.cico-error { color: #cf222e; min-height: 1.2em; margin-top: 8px; }

/* Banner — the loud school identity bar */
.cico-banner {
	display: flex; align-items: center; gap: 14px; padding: 16px 20px;
	font-size: 1.6rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
	background: #1d2327; color: #fff; border-radius: 12px; width: 100%; max-width: 520px;
}
.cico-kiosk .cico-banner { border-radius: 0; max-width: none; }
.cico-banner .cico-school { flex: 0 0 auto; }
.cico-banner .cico-mode { flex: 1; text-align: center; opacity: .92; }
.cico-exit { margin-left: auto; background: rgba(255,255,255,.18); color: inherit; border: 0; width: 40px; height: 40px; border-radius: 8px; font-size: 1.2rem; cursor: pointer; }

/* Kiosk */
.cico-kiosk { flex: 1; display: flex; flex-direction: column; }
.cico-back { background: rgba(255,255,255,.2); color: inherit; border: 0; width: 40px; height: 40px; border-radius: 8px; font-size: 1.7rem; line-height: 1; cursor: pointer; margin-right: 10px; }

.cico-today { background: #1d2327; color: #fff; text-align: center; font-size: 1.15rem; font-weight: 600; letter-spacing: .3px; padding: 10px 14px; }
.cico-today:empty { display: none; }
.cico-today em { font-style: normal; color: #ffd27d; font-weight: 700; }
.cico-today.nosched { background: #7a5b00; }
/* Event mode, and the chosen event is not today's — same amber as "no schedule". */
.cico-today.offdate { background: #7a5b00; }

/* Event picker: today's date up top, events grouped Today / Upcoming / Yesterday */
.cico-evtoday { text-align: center; font-size: 1.2rem; color: #333; margin: 0 0 6px; }
.cico-evtoday strong { font-size: 1.35rem; }
.cico-evlist { text-align: left; }
.cico-evlist .cico-empty { text-align: center; margin: 4px 0 8px; }
.cico-evgroup { font-size: .95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #555; margin: 18px 0 2px; }
.cico-evgroup.future { color: #7a5b00; }
.cico-evgroup.past { color: #666; }
.cico-evlist .cico-grid { margin-top: 4px; }

/* "Both" mode picker: two big, clearly different targets. */
.cico-bothgrid { display: flex; flex: 1; gap: 18px; padding: 22px; }
.cico-pick { flex: 1; min-height: 44vh; font-size: 2.6rem; font-weight: 800; letter-spacing: 1px; border: 0; border-radius: 18px; color: #fff; cursor: pointer; }
.cico-pick.in { background: #1a7f37; }
.cico-pick.out { background: #b35900; }
.cico-pick:active { transform: scale(.99); }

.cico-result { margin: 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height .15s ease; display: flex; align-items: center; gap: 20px; }
.cico-result.show { max-height: 360px; padding: 24px 28px; }
.cico-result.ok, .cico-result.approved { background: #d7f5dd; }
.cico-result.late { background: #fdf0c8; }
.cico-result.denied, .cico-result.bad_id { background: #fbdcdc; }
.cico-result.wait { background: #eef; }
.cico-photo { width: 130px; height: 160px; object-fit: cover; border-radius: 8px; background: #fff; }
.cico-rstatus { font-size: 2.4rem; font-weight: 800; }
.cico-rname { font-size: 1.8rem; font-weight: 700; margin: 2px 0; }
.cico-rmsg { font-size: 1.2rem; color: #333; }
/* Why the scan was permitted — the KIND of rule only, never a dismissal's
   reason or note (there are students queued behind this one). Quieter than the
   verdict: it explains, it doesn't announce. */
.cico-rwhy { font-size: 1rem; color: #555; margin-top: 4px; }
/* The tardy-count line under a LATE verdict (per-school opt-in). */
.cico-rcount { font-size: 1rem; color: #555; margin-top: 4px; }
/* When the escalating LATE banner inline-tints the box, child lines inherit the
   computed contrast color instead of their fixed grays — a saturated top-tier
   red otherwise leaves #333/#555 text unreadable. (.cico-rstatus/.cico-rname
   already inherit.) */
.cico-tinted .cico-rmsg, .cico-tinted .cico-rwhy, .cico-tinted .cico-rcount { color: inherit; opacity: .9; }

.cico-scanform { padding: 24px 28px; }
.cico-scanform label { display: block; font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; }
.cico-scanform input { width: 100%; font-size: 2rem; padding: 18px 20px; border: 3px solid #1d2327; border-radius: 12px; }
/* The required self-check-out reason box (Both mode): visually secondary to the ID. */
.cico-scanform .cico-notelabel { font-size: 1.05rem; margin: 16px 0 6px; }
.cico-scanform input#note { font-size: 1.35rem; padding: 12px 16px; border-width: 2px; }
/* Hidden default submit — keeps Enter working with two fields in the form.
 * Visually-hidden clip (NOT display:none: some engines won't use a display:none
 * button as the implicit-submission default). */
.cico-scanform .cico-scansubmit { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }

.cico-status { margin-top: auto; padding: 14px 20px; color: #666; font-size: .95rem; display: flex; gap: 10px; }
/* Unsent scans: .warn is the amber flag; .act marks the states where clicking
   actually does something (push now / sign in) — offline or held stay plain. */
.cico-status #queue.warn { color: #b45309; font-weight: 600; }
.cico-status #queue.act { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.dot.on { background: #1a7f37; }
.dot.mid { background: #b45309; } /* online but holding unsent scans */
.dot.off { background: #cf222e; }

@media (min-width: 640px) {
	.cico-grid { grid-template-columns: 1fr 1fr; }
	.cico-grid .cico-big:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Station lock (shown when ✕ is tapped and a station PIN is set) */
.cico-lock .cico-lock-icon { font-size: 3rem; line-height: 1; margin-bottom: 6px; }
.cico-lock .cico-sub { font-size: 1.15rem; }
.cico-lock-back { background: #1a7f37; }
.cico-lock-staff { margin-top: 22px; padding-top: 18px; border-top: 1px solid #e5e5e5; }
.cico-lock-staff .cico-sub { font-size: 1rem; margin-bottom: 10px; }
.cico-lock-row { display: flex; gap: 8px; align-items: center; justify-content: center; }
.cico-lock-row input { flex: 1; max-width: 220px; text-align: center; letter-spacing: .25em; }
.cico-lock-row .cico-link, .cico-lock-alt .cico-link { width: auto; font-weight: 700; }
.cico-lock-msg { min-height: 1.3em; margin: 8px 0; font-size: 1rem; color: #1a7f37; }
.cico-lock-msg.err { color: #cf222e; font-weight: 700; }
.cico-lock-alt-toggle { font-size: .95rem; opacity: .85; }
.cico-lock-alt { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px; }
.cico-lock-alt input { flex: 1; min-width: 140px; }

/* Empty/loading state inside a choice grid: span full width and center */
.cico-grid .cico-empty { grid-column: 1 / -1; text-align: center; }

/* Unobtrusive station identifier (footer + picker screens) */
.cico-stationid { color: #a7a7ad; font-size: .72rem; letter-spacing: .02em; }
.cico-center .cico-stationid { margin-top: 14px; text-align: center; }
/* The station line is tappable everywhere (opens naming/rename) — signalled
   quietly: this is a staff affordance in a student-facing footer. */
.cico-stationtap { cursor: pointer; }
.cico-stationtap:hover { color: #d5d5da; text-decoration: underline; }

/* Device chooser (Station vs Admin) shown once per device after login */
.cico-chooser .cico-grid { gap: 14px; margin: 10px 0 4px; }
.cico-chooser .cico-big { padding: 22px; }
.cico-chooser-admin { background: #2c3e50; color: #fff; }
.cico-chooser-remember { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 16px 0 4px; color: #666; }