:root {
	--bg: #f4f6f8;
	--card: #ffffff;
	--ink: #1f2933;
	--muted: #6b7280;
	--line: #e2e8f0;
	--accent: #2563eb;
	--ok: #16a34a;
	--warn: #d97706;
	--bad: #dc2626;
	--info: #0284c7;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--ink);
	background: var(--bg);
	line-height: 1.5;
}

header.appbar {
	background: var(--card);
	border-bottom: 1px solid var(--line);
	padding: 0.75rem 1.25rem;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

header.appbar h1 { font-size: 1.1rem; margin: 0; }

nav.tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; }

nav.tabs button {
	border: 1px solid var(--line);
	background: var(--card);
	color: var(--ink);
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	cursor: pointer;
	font-size: 0.9rem;
}

nav.tabs button.active { background: var(--accent); color: #fff; border-color: var(--accent); }

main { padding: 1.25rem; max-width: 1100px; margin: 0 auto; }

.card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 1rem 1.25rem;
	margin-bottom: 1.25rem;
}

h2 { font-size: 1.05rem; margin: 0 0 0.75rem; }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; }
.table-scroll { overflow-x: auto; }

.pill { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
.pill.ok { background: #dcfce7; color: var(--ok); }
.pill.open { background: #fef3c7; color: var(--warn); }

button.action, input, select {
	font: inherit;
	padding: 0.45rem 0.6rem;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--card);
	color: var(--ink);
}
button.action { background: var(--accent); color: #fff; border-color: var(--accent); cursor: pointer; }
button.action.ghost { background: var(--card); color: var(--accent); }
.row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: end; margin-bottom: 0.75rem; }
label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.82rem; color: var(--muted); }
.muted { color: var(--muted); }
a { color: var(--accent); }

/* Hinweis-/Ergebnisbox (z. B. CSV-Import-Report) */
.notice { border-radius: 8px; padding: 0.6rem 0.8rem; margin-top: 0.75rem; font-size: 0.9rem; border: 1px solid var(--line); }
.notice.ok { background: #dcfce7; border-color: #bbf7d0; color: #14532d; }
.notice.warn { background: #fef3c7; border-color: #fde68a; color: #7c2d12; }
.notice.bad { background: #fee2e2; border-color: #fecaca; color: #7f1d1d; }
.notice ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.notice li { margin: 0.1rem 0; }
.hint { color: var(--muted); font-size: 0.82rem; margin: 0.25rem 0 0; }

/* Chip-Erfassung */
.enroll-status {
	border-radius: 12px; padding: 1.25rem; text-align: center; font-size: 1.2rem; font-weight: 700;
	transition: background 0.15s;
	background: var(--line); color: var(--muted);
}
.enroll-status.ok { background: #dcfce7; color: #14532d; }
.enroll-status.bad { background: #fee2e2; color: #7f1d1d; }
.enroll-count { font-size: 2rem; font-weight: 800; }
code.reader-url { display: block; background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
	padding: 0.6rem 0.8rem; margin: 0.5rem 0; word-break: break-all; font-size: 0.9rem; }

/* Login-Overlay */
.overlay {
	position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55);
	display: flex; align-items: center; justify-content: center; z-index: 50;
}
.login-card {
	background: var(--card); padding: 1.5rem; border-radius: 12px; width: min(340px, 90vw);
	display: flex; flex-direction: column; gap: 0.75rem;
}
.login-card label { color: var(--ink); }
.login-error { color: var(--bad); min-height: 1.2em; margin: 0; font-size: 0.85rem; }

/* Terminal (Read-only Live-Kiosk, siehe terminal.js) */
body.terminal { background: #0f172a; color: #e2e8f0; }
.terminal-wrap { max-width: 1000px; margin: 0 auto; padding: 1.5rem; }
.terminal-head { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.terminal-head a, .terminal-head .muted { color: #94a3b8; }
body.terminal .live-offering {
	background: #1e293b; border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1rem;
}
body.terminal .offering-head { margin: 0 0 0.5rem; font-size: 1.15rem; color: #e2e8f0; }
body.terminal .offering-head .muted { color: #94a3b8; font-weight: 400; font-size: 0.9rem; }
body.terminal table { color: #e2e8f0; }
body.terminal th { color: #94a3b8; }
body.terminal td, body.terminal th { border-color: #334155; padding: 0.55rem 0.6rem; font-size: 1rem; }
body.terminal .hint { color: #94a3b8; padding: 1rem 0; }
body.terminal .feedback.rejected { color: #fecaca; }

/* Wochenmodell (§15): Angebotsgruppen nach Wochentag, Wochennavigation im Fortschritt. */
.day-head { margin: 0.9rem 0 0.3rem; font-size: 0.95rem; color: var(--muted); }
.week-nav { align-items: center; }
.week-label { font-weight: 600; }

/* Angebote: deaktivierte Zeilen ausgegraut, Aktions-Buttons rechtsbuendig. */
tr.inactive td { color: var(--muted); background: #f9fafb; }
td.actions { white-space: nowrap; text-align: right; }
td.actions button { margin-left: 0.3rem; }

/* Jetzt eingecheckt: pro laufendem Angebot ein eigener Block. */
.live-offering { margin: 0.75rem 0 1.25rem; }
.live-offering .day-head { color: var(--ink); }

/* --- Namentliches Einchecken (Jetzt eingecheckt) --------------------------------------------- */
/* Angebot ausserhalb des Anzeigefensters, aber noch nicht beendet: gedaempft dargestellt, der
   Einchecken-Button bleibt bewusst voll bedienbar (Nachtrag fuer Spaetkommer). */
.live-offering.ending { opacity: 0.6; }
.live-offering.ending .day-head::after {
	content: " · läuft aus";
	color: var(--warn);
	font-weight: 600;
}
.checkin-box { margin: 0.4rem 0 0.6rem; max-width: 26rem; }
/* Der Bezugsrahmen des Dropdowns ist NUR das Eingabefeld - stuende position:relative auf der
   ganzen Box, saesse die Trefferliste (top:100%) unterhalb des Hinweistextes statt am Feld. */
.checkin-field { position: relative; }
.checkin-box input { width: 100%; }
.checkin-results {
	position: absolute; z-index: 5; left: 0; right: 0; top: 100%;
	background: var(--card); border: 1px solid var(--line); border-radius: 8px;
	max-height: 15rem; overflow-y: auto; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
}
.checkin-results button {
	display: block; width: 100%; text-align: left; background: none; border: 0;
	padding: 0.45rem 0.6rem; font: inherit; cursor: pointer; color: var(--ink);
}
.checkin-results button:hover, .checkin-results button.active { background: var(--bg); }
.checkin-results .muted { font-size: 0.8rem; }
.checkin-empty { padding: 0.45rem 0.6rem; color: var(--muted); font-size: 0.85rem; }

/* Passwortverwaltung: Sichtbarkeits-Umschalter. Kasten und Beschriftung nebeneinander -
   die allgemeine label-Regel stellt sie sonst uebereinander. */
.pw-toggle { flex-direction: row; align-items: center; gap: 0.35rem; padding-bottom: 0.55rem; }