/* ux – UX-Durchgang 1.6 (W6b): Kontrast WCAG AA, Touch-Ziele ≥ 44 px, Mehr-Menü, Bestätigungsdialog, Tabellen-Scrollhinweis.
   Wird NACH app.css und den anderen css/*.css geladen und überschreibt nur Farb-Variablen und Grössen.
   Geprüft mit tests/contrast-check.mjs (Text ≥ 4,5:1, Bedienelemente ≥ 3:1). */

/* ---------- Farben: Variablen ---------- */
:root {
	--ok: #117239;               /* war #168947 (4,0–4,5:1) → ≥ 5,2:1 auch auf --ok-soft */
	--muted: #59635e;            /* war #66706b (4,36:1 auf Soft-Flächen) */
	--brand-soft: #fdf3ea;       /* heller, damit Link-Orange #b64f0a ≥ 4,5:1 bleibt */
	--line-strong: #858a82;      /* Rahmen von Bedienelementen ≥ 3:1 (WCAG 1.4.11) */
	--ok-fill: #137a3d;          /* Flächen mit weisser Schrift */
	--danger-fill: #b83227;
	--warn-fill: #8a5200;
}
:root[data-theme="dark"] {
	--line-strong: #668073;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--line-strong: #668073;
	}
}

/* Bedienelemente: sichtbarer Rahmen */
input, select, textarea { border-color: var(--line-strong); }
.icon-btn, .chip, .seg { border-color: var(--line-strong); }
input[type="checkbox"] { outline-color: var(--line-strong); }

/* ---------- Farben: einzelne Stellen ---------- */
.tabbar .active, .add-card, .thumb.add { color: var(--link); }
.btn-go { background: var(--ok-fill); }
.btn-stop { background: var(--danger-fill); }
.bell-count, .cal-day.today .cal-num, .phase-steps .current .dot { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; }
.phase-steps .past .dot { background: var(--ok-fill); border-color: var(--ok-fill); color: #fff; }
.toast-error { background: var(--danger-fill); color: #fff; }
.toast-warn { background: var(--warn-fill); color: #fff; }
.clock-timer.idle { opacity: 1; color: var(--muted); }
.plan-grip { opacity: 1; }
.plan-grid thead th.today { color: var(--ink); }
.plan-ser { color: var(--link); }
:root[data-theme="dark"] .plan-grid thead th.today { color: var(--link); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .plan-grid thead th.today { color: var(--link); } }
.photo-details a { color: #8a3c05; }

/* Status nie nur durch Farbe: Badge-Symbole (zusätzlich zum Text) */
.badge-ok::before { content: "✓"; }
.badge-warn::before { content: "!"; font-weight: 800; }
.badge-danger::before { content: "✕"; }
.badge-info::before { content: "i"; font-weight: 800; font-style: italic; }
.stat-neg .stat-label::before, .stat-warn .stat-label::before { content: "▲ "; }
.statusbar.off::before, .statusbar.warn::before { content: "! "; font-weight: 800; }

/* ---------- Touch-Ziele ≥ 44 px ---------- */
.back { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-left: -8px; padding: 0; }
.icon-btn { width: 44px; height: 44px; }
.btn-sm { min-height: 44px; }
.chip, .seg button, .lang-switch button, .tabbar a, .tabbar button { min-height: 44px; }
.chip { display: inline-flex; align-items: center; }
.seg button { display: inline-flex; align-items: center; justify-content: center; }
.mini { min-height: 44px; }
.link { min-height: 44px; display: inline-flex; align-items: center; }
.table a, .table .link { display: inline-flex; align-items: center; min-height: 44px; }
.table td, .table th { padding-top: 4px; padding-bottom: 4px; }
.check { min-height: 44px; }
.checks { gap: 0 12px; }
.value-field input, .inline-field input { min-height: 44px; }
.kb-next, .pipe-row { min-height: 44px; }
.thumb-x { width: 32px; height: 32px; }
.thumb-x::after { content: ""; position: absolute; top: -6px; right: -6px; bottom: -6px; left: -6px; }
.thumb.add { min-width: 44px; min-height: 44px; }
.inbox-row, .sheet a { min-height: 44px; }
.cal-chip { min-height: 24px; font-size: 0.8125rem; font-weight: 600; }
.cal-hol, .cal-more, .cal-wd, .stat-sub, .photo-info, .budget-text { font-size: 0.8125rem; }
.cal-hol, .cal-more { font-weight: 600; } /* Kalender-Schrift war zu dünn (v. a. im dunklen Modus) */
.kb-meta, .tl-time { font-size: 0.8125rem; }
.field-label { font-size: 0.875rem; }
.hint { font-size: 0.8125rem; }

/* ---------- Pflichtfelder ---------- */
.req-mark { color: var(--danger); font-weight: 700; margin-left: 2px; }
.form-note { font-size: 0.8125rem; color: var(--muted); margin: 0; }

/* ---------- Formular-Fusszeile: Abbrechen + Speichern ---------- */
.form-foot { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; position: sticky; bottom: 0; background: var(--card); padding: 10px 0 4px; border-top: 1px solid var(--line); margin-top: 6px; }
.form-foot .btn { min-width: 120px; }

/* ---------- Mehr-Menü «⋯» ---------- */
.more-wrap { position: relative; display: inline-block; }
.more-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; background: var(--card); border: 1px solid var(--line-strong); border-radius: 10px; cursor: pointer; font-size: 1.25rem; line-height: 1; color: var(--ink); }
.more-bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 40; }
.more-menu { position: fixed; z-index: 41; min-width: 220px; max-width: calc(100vw - 32px); background: var(--card); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); padding: 6px; display: flex; flex-direction: column; }
.more-menu a, .more-menu button { display: flex; align-items: center; min-height: 44px; padding: 0 12px; background: none; border: 0; border-radius: 8px; color: var(--ink); text-align: left; cursor: pointer; text-decoration: none; width: 100%; }
.more-menu a:hover, .more-menu button:hover { background: var(--bg); }
.more-menu .more-sep { height: 1px; background: var(--line); margin: 4px 6px; }
.more-menu .more-danger { color: var(--danger); font-weight: 600; }
.more-menu .more-danger::before { content: "⚠ "; margin-right: 6px; }

/* ---------- Bestätigungsdialog ---------- */
.confirm-text { margin: 0; white-space: pre-line; }
.confirm-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.confirm-actions .btn { min-height: 46px; }
.btn-danger { background: var(--danger-fill); color: #fff; }
.danger-zone { border: 1px solid var(--danger); border-radius: 12px; padding: 12px; background: var(--danger-soft); color: var(--ink); }
.danger-zone h3 { color: var(--danger); margin-bottom: 4px; }

/* ---------- Mitarbeiterliste ---------- */
.user-name { font-weight: 600; }
.user-login { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.8125rem; color: var(--muted); word-break: break-all; }
.user-table td { vertical-align: middle; }
.user-table .col-more { width: 56px; text-align: right; }
.user-table tr.inactive td { color: var(--muted); }
.name-help { margin: 0 0 8px; }

/* ---------- Kayıt defteri (Protokoll) ---------- */
.audit-list { list-style: none; margin: 0; padding: 0; }
.audit-row { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.audit-row:last-child { border-bottom: 0; }
.audit-text { font-weight: 600; }
.audit-meta { color: var(--muted); font-size: 0.8125rem; }
.audit-details summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--link); font-size: 0.875rem; }
.audit-details pre { margin: 0 0 6px; padding: 8px; background: var(--bg); border-radius: 8px; font-size: 0.8125rem; white-space: pre-wrap; word-break: break-all; }
.audit-filter { display: grid; gap: 8px; grid-template-columns: 1fr; margin-bottom: 12px; }
@media (min-width: 560px) { .audit-filter { grid-template-columns: 1fr 1fr auto; align-items: end; } }

/* ---------- Projektphasen: nie breiter als der Bildschirm ---------- */
.phase-card { min-width: 0; max-width: 100%; overflow: hidden; }
.phase-steps { max-width: 100%; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 4px; }
.phase-steps li { scroll-snap-align: center; }
.phase-steps button { min-height: 56px; min-width: 64px; }
.phase-scroll { position: relative; }
.phase-scroll::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 24px; pointer-events: none; background: linear-gradient(to right, transparent, var(--card)); }
.phase-help { margin: 6px 0 0; }

/* ---------- Tabellen auf dem Telefon: Schattenrand zeigt «hier gibt es mehr» ---------- */
.card .table, .plan-wrap, .perm-scroll, .table-scroll {
	background:
		linear-gradient(to right, var(--card) 30%, rgba(255, 255, 255, 0)) 0 0 / 40px 100% no-repeat local,
		linear-gradient(to left, var(--card) 30%, rgba(255, 255, 255, 0)) 100% 0 / 40px 100% no-repeat local,
		radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0)) 0 0 / 14px 100% no-repeat scroll,
		radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0)) 100% 0 / 14px 100% no-repeat scroll;
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll-hint { display: none; font-size: 0.8125rem; color: var(--muted); margin: 0 0 6px; }
@media (max-width: 639px) { .scroll-hint { display: block; } }

/* Entfernte Personen */
.gone { color: var(--muted); font-style: italic; }

/* Stempeluhr: Sperrgrund direkt unter dem Hauptknopf */
.clock-actions .btn { min-height: 64px; font-size: 1.15rem; }

.swatches .hint { grid-column: 1 / -1; }
.btn-danger-ghost { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-danger-ghost::before { content: "⚠"; }