/**
 * WhatsApp-Status-Planer — Frontend-Styles (Phase 3.1).
 *
 * Vollbild-App, geschuetzte Seite (Slug status-planer). Designsprache + Farbpalette aus dem
 * abgestimmten UI-Mockup (docs/Entwurf/whatsapp-status-planer-ui-mockup.html). Mobil-first; die
 * Eingabefelder tragen >=16px / min-height 46px gegen iOS-Auto-Zoom + flache Tap-Flaeche
 * (vgl. Stundenerfassung-Lektion).
 */

#rsw-status-app {
	--navy: #0b1e3f;
	--navy2: #16315e;
	--ink: #1c2530;
	--muted: #6b7785;
	--line: #e2e7ee;
	--bg: #eef1f5;
	--card: #fff;
	--wa: #25d366;
	--wa-d: #128c47;
	--baufi: #2f6fb0;
	--modern: #c8772e;
	--pv: #3f9d52;
	--gewerbe: #7d5ba6;
	--immo: #1f9b96;
	--erst: #c0567f;
	--recruit: #5a6b86;
	--brand: #0b1e3f;

	min-height: 100vh;
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	text-size-adjust: 100%;
}

#rsw-status-app.rsw-status-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--muted);
}

.rsw-status-wrap {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 0 90px;
}

/* ── Kopfzeile ─────────────────────────────────────────────────────── */
.rsw-status-head {
	background: linear-gradient(135deg, var(--navy), var(--navy2));
	color: #fff;
	padding: 18px 18px 16px;
}

.rsw-status-head .row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.rsw-status-head .t {
	font-size: 19px;
	font-weight: 600;
}

.rsw-status-head .s {
	font-size: 12.5px;
	color: #aebfd8;
	margin-top: 2px;
}

.rsw-status-logout {
	background: rgb(255 255 255 / 14%);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 13px;
	cursor: pointer;
}

.rsw-status-headbtns {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
}

.rsw-status-cockpit {
	background: rgb(255 255 255 / 14%);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

/* ── Navigation (segmentiert) ─────────────────────────────────────── */
.rsw-status-nav {
	display: flex;
	background: #e7edf4;
	margin: 14px 16px 4px;
	border-radius: 9px;
	padding: 3px;
}

.rsw-status-nav button {
	flex: 1;
	border: none;
	background: transparent;
	color: var(--muted);
	font-size: 13.5px;
	padding: 9px 6px;
	border-radius: 7px;
	cursor: pointer;
	min-height: 44px;
}

.rsw-status-nav button.on {
	background: #fff;
	color: var(--navy);
	font-weight: 600;
}

.rsw-status-view {
	padding: 12px 16px 0;
}

/* ── Generische Bausteine ─────────────────────────────────────────── */
.rsw-status-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 12px 14px;
	margin-bottom: 10px;
}

.rsw-status-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.rsw-status-muted {
	color: var(--muted);
	font-size: 13px;
}

.rsw-status-day {
	font-weight: 600;
	color: var(--navy);
	font-size: 15px;
}

.rsw-status-slot {
	display: flex;
	align-items: center;
	gap: 9px;
	background: #f1f5fa;
	border-radius: 8px;
	padding: 9px 11px;
	margin-top: 8px;
	cursor: pointer;
	min-height: 44px;
}

.rsw-status-time {
	font-weight: 700;
	color: var(--navy2);
	font-variant-numeric: tabular-nums;
}

.rsw-status-slot.inaktiv {
	opacity: .5;
}

.rsw-status-add {
	display: inline-block;
	margin-top: 9px;
	color: var(--baufi);
	font-size: 13.5px;
	font-weight: 600;
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px 0;
}

.rsw-status-chip {
	display: inline-block;
	font-size: 11.5px;
	color: #fff;
	border-radius: 999px;
	padding: 3px 10px;
	line-height: 1.5;
	white-space: nowrap;
}

.rsw-status-c-baufi { background: var(--baufi); }
.rsw-status-c-modern { background: var(--modern); }
.rsw-status-c-pv { background: var(--pv); }
.rsw-status-c-gewerbe { background: var(--gewerbe); }
.rsw-status-c-immo { background: var(--immo); }
.rsw-status-c-erst { background: var(--erst); }
.rsw-status-c-recruit { background: var(--recruit); }
.rsw-status-c-brand { background: var(--brand); }

/* ── Schalter ──────────────────────────────────────────────────────── */
.rsw-status-toggle {
	width: 46px;
	height: 26px;
	border-radius: 999px;
	position: relative;
	flex: none;
	border: none;
	cursor: pointer;
	background: #c3ccd8;
	padding: 0;
}

.rsw-status-toggle.on {
	background: var(--wa);
}

.rsw-status-toggle .knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 50%;
	transition: left .15s ease;
}

.rsw-status-toggle.on .knob {
	left: 23px;
}

/* ── Buttons ───────────────────────────────────────────────────────── */
.rsw-status-btn {
	display: block;
	width: 100%;
	text-align: center;
	border: none;
	border-radius: 11px;
	padding: 14px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
	margin-top: 10px;
	min-height: 48px;
}

.rsw-status-btn-wa { background: var(--wa); }
.rsw-status-btn-navy { background: var(--navy); }

.rsw-status-btn-ghost {
	background: #eaeef4;
	color: var(--navy);
}

.rsw-status-btn-danger {
	background: #fff;
	color: #b3261e;
	border: 1px solid #e7c3bf;
}

/* ── Vorschau / Redaktionsplan ────────────────────────────────────── */
.rsw-status-ev {
	display: flex;
	gap: 11px;
	align-items: center;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 10px;
	margin-bottom: 10px;
}

.rsw-status-thumb {
	width: 58px;
	height: 58px;
	border-radius: 9px;
	object-fit: cover;
	flex: none;
	background: #dde4ee;
}

.rsw-status-ev .meta {
	flex: 1;
	min-width: 0;
}

.rsw-status-ev .when {
	font-size: 12.5px;
	color: var(--muted);
}

.rsw-status-ev .cat {
	font-weight: 700;
	color: var(--navy);
	font-size: 14.5px;
}

.rsw-status-ev .notiz {
	font-size: 12.5px;
	color: var(--muted);
	margin-top: 2px;
}

.rsw-status-ev-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.rsw-status-ev-actions button {
	flex: 1 1 auto;
	border: 1px solid var(--line);
	background: #f7f9fc;
	color: var(--navy);
	border-radius: 9px;
	padding: 9px 10px;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	min-height: 42px;
}

.rsw-status-ev-actions button.share {
	background: var(--wa);
	color: #fff;
	border-color: var(--wa-d);
	flex-basis: 100%;
}

/* ── Bildpool / Rotation ──────────────────────────────────────────── */
.rsw-status-pool-cat {
	margin: 4px 0 14px;
}

.rsw-status-pool-cat h3 {
	margin: 0 0 8px;
	font-size: 14px;
	color: var(--navy);
}

.rsw-status-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
}

.rsw-status-gcell {
	position: relative;
	border-radius: 9px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border: none;
	padding: 0;
	cursor: pointer;
	background: #dde4ee;
}

.rsw-status-gcell img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rsw-status-gcell.aus img {
	opacity: .35;
}

.rsw-status-gcell .badge {
	position: absolute;
	top: 5px;
	right: 5px;
	font-size: 10px;
	color: #fff;
	background: rgb(0 0 0 / 55%);
	border-radius: 999px;
	padding: 2px 7px;
}

/* Lösch-Knopf auf eigenen Bildern (oben rechts). */
.rsw-status-gdel {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 26px;
	height: 26px;
	border: none;
	border-radius: 50%;
	background: rgb(179 38 30 / 92%);
	color: #fff;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ── Abschnitte (zentrale vs. eigene Bilder) ──────────────────────────── */
.rsw-status-sec {
	font-size: 15px;
	color: var(--navy);
	margin: 6px 0 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--line);
}

.rsw-status-myimg {
	margin-top: 22px;
}

.rsw-status-myimg-bar {
	margin: 4px 0 12px;
}

.rsw-status-btn-inline {
	display: inline-block;
	width: auto;
	margin-top: 0;
	padding: 11px 16px;
	min-height: 44px;
}

.rsw-status-file {
	display: none;
}

/* ── Sammlungen ───────────────────────────────────────────────────────── */
.rsw-status-strip {
	display: flex;
	gap: 6px;
	margin-top: 10px;
	overflow-x: auto;
}

.rsw-status-strip-img {
	width: 46px;
	height: 46px;
	border-radius: 7px;
	object-fit: cover;
	flex: none;
	background: #dde4ee;
}

/* Segmentierter Umschalter (Bildquelle / Reihenfolge-Modus). */
.rsw-status-modus {
	display: flex;
	gap: 8px;
}

.rsw-status-modusbtn {
	flex: 1;
	border: 1px solid var(--line);
	background: #f7f9fc;
	color: var(--muted);
	border-radius: 9px;
	padding: 10px 8px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	min-height: 44px;
}

.rsw-status-modusbtn.on {
	background: var(--navy);
	color: #fff;
	border-color: var(--navy);
}

/* Sammlung-Auswahl im Slot-Editor. */
.rsw-status-setpick {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.rsw-status-setopt {
	text-align: left;
	border: 1px solid var(--line);
	background: #f7f9fc;
	color: var(--ink);
	border-radius: 9px;
	padding: 11px 12px;
	font-size: 14px;
	cursor: pointer;
	min-height: 46px;
}

.rsw-status-setopt.on {
	background: var(--navy);
	color: #fff;
	border-color: var(--navy);
}

/* Ausgewählte Bilder (in Reihenfolge) im Sammlungs-Editor. */
.rsw-status-chosen {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.rsw-status-chosen-cell {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	background: #f1f5fa;
	border-radius: 9px;
	padding: 6px;
}

.rsw-status-chosen-img {
	width: 52px;
	height: 52px;
	border-radius: 7px;
	object-fit: cover;
	flex: none;
}

.rsw-status-chosen-num {
	font-weight: 700;
	color: var(--navy2);
	min-width: 22px;
	text-align: center;
}

.rsw-status-chosen-ctr {
	margin-left: auto;
	display: flex;
	gap: 6px;
}

.rsw-status-mini {
	width: 38px;
	height: 38px;
	border: 1px solid var(--line);
	background: #fff;
	border-radius: 8px;
	font-size: 15px;
	cursor: pointer;
	color: var(--navy);
}

.rsw-status-mini:disabled {
	opacity: .4;
	cursor: default;
}

.rsw-status-mini-x {
	color: #b3261e;
}

/* ── Editor (Bottom-Sheet) ────────────────────────────────────────── */
.rsw-status-sheet-bg {
	position: fixed;

	/* Dynamische Viewport-Hoehe statt inset:0 — sonst dockt das Sheet auf iOS an den
	   GROSSEN Layout-Viewport-Boden (unter der ausblendbaren Safari-Leiste / in der
	   Home-Indicator-Zone), und die untersten Buttons (Speichern/Abbrechen) landen im
	   nicht-tappbaren Ueberhang: sichtbar, aber Taps kommen nicht an. */
	top: 0;
	left: 0;
	right: 0;
	height: 100dvh;
	background: rgb(11 30 63 / 45%);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	z-index: 30;
}

.rsw-status-sheet {
	background: #fff;
	width: 100%;
	max-width: 760px;
	border-radius: 20px 20px 0 0;
	padding: 18px 18px calc(20px + env(safe-area-inset-bottom));
	box-shadow: 0 -10px 30px rgb(11 30 63 / 25%);
	max-height: 90dvh;
	overflow-y: auto;
}

.rsw-status-sheet h3 {
	margin: 2px 0 14px;
	color: var(--navy);
	font-size: 17px;
}

.rsw-status-field {
	margin-bottom: 14px;
}

.rsw-status-field .lab {
	font-size: 12.5px;
	color: var(--muted);
	margin-bottom: 5px;
}

.rsw-status-field input[type="time"],
.rsw-status-field input[type="text"],
.rsw-status-field input[type="date"] {
	width: 100%;
	border: 1px solid var(--line);
	border-radius: 9px;
	padding: 11px 12px;
	font-size: 16px;
	min-height: 46px;
	color: var(--ink);
	background: #f7f9fc;
}

/* Uhrzeit ist ein kompaktes Pflichtfeld — nicht ueber die volle Bildschirmbreite ziehen. */
.rsw-status-field input[type="time"] {
	width: auto;
	min-width: 8.5em;
	max-width: 100%;
}

/* Rot umrandetes Feld bei fehlender/ungueltiger Pflichteingabe. */
.rsw-status-field input.rsw-invalid {
	border-color: #dc2626;
	background: #fff5f5;
}

/* Pflichtfeld-Hinweis im Editor (rote Box oben im Sheet, sichtbar statt nur Toast unten). */
.rsw-status-ed-err {
	display: none;
	background: #fee2e2;
	color: #991b1b;
	border: 1px solid #fca5a5;
	border-radius: 8px;
	padding: 9px 11px;
	font-size: 13px;
	margin-bottom: 12px;
}

.rsw-status-ed-err.show {
	display: block;
}

.rsw-status-chips-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.rsw-status-chip-sel {
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 8px 13px;
	font-size: 12.5px;
	color: var(--muted);
	background: #f7f9fc;
	cursor: pointer;
	min-height: 40px;
}

.rsw-status-chip-sel.on {
	background: var(--navy);
	color: #fff;
	border-color: var(--navy);
}

/* ── Status-Hinweis / Leerzustand ─────────────────────────────────── */
.rsw-status-empty {
	text-align: center;
	color: var(--muted);
	padding: 30px 10px;
}

.rsw-status-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	background: var(--navy);
	color: #fff;
	padding: 11px 18px;
	border-radius: 999px;
	font-size: 13.5px;
	z-index: 40;
	max-width: 90vw;
}

/* ── PWA: Installations-Hinweis (Phase 3.2) ───────────────────────── */
.rsw-status-a2hs {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: calc(12px + env(safe-area-inset-bottom));
	max-width: 736px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--navy);
	color: #fff;
	border-radius: 14px;
	padding: 12px 14px;
	box-shadow: 0 8px 26px rgb(11 30 63 / 35%);
	z-index: 45;
}

.rsw-status-a2hs-txt {
	flex: 1;
	min-width: 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: #d6e0f0;
}

.rsw-status-a2hs-txt strong {
	display: block;
	color: #fff;
	font-size: 14px;
	margin-bottom: 2px;
}

.rsw-status-a2hs-btn {
	flex: none;
	border: none;
	background: var(--wa);
	color: #fff;
	font-weight: 600;
	font-size: 13.5px;
	border-radius: 9px;
	padding: 10px 14px;
	cursor: pointer;
	min-height: 42px;
}

.rsw-status-a2hs-x {
	flex: none;
	border: none;
	background: rgb(255 255 255 / 14%);
	color: #fff;
	font-size: 18px;
	line-height: 1;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	cursor: pointer;
}

@media (width >= 720px) {
	.rsw-status-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}