.jafo-dashboard {
	max-width: 960px;
	margin: 0 auto;
}

.jafo-section {
	margin-bottom: 2.5em;
	padding: 1.5em;
	border: 1px solid #ddd;
	border-radius: 6px;
}

.jafo-section h2 {
	margin-top: 0;
}

.jafo-notice {
	background: #fff8e5;
	border-left: 4px solid #dba617;
	padding: 0.75em 1em;
}

.jafo-notice.jafo-finalized {
	background: #edfaef;
	border-left-color: #46b450;
}

.jafo-notice.jafo-error {
	background: #fdeaea;
	border-left-color: #d63638;
}

.jafo-upload-owner {
	margin-bottom: 1.5em;
	padding-bottom: 1.5em;
	border-bottom: 1px dashed #ccc;
}

.jafo-upload-owner:last-child {
	border-bottom: none;
}

.jafo-existing-photos {
	list-style: none;
	margin: 0 0 1em;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

.jafo-existing-photos li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4em;
	font-size: 0.9em;
}

.jafo-thumb {
	width: 120px;
	height: 120px;
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid #ccc;
}

.jafo-upload-form label {
	display: block;
	margin-bottom: 0.75em;
}

.jafo-upload-form input[type="text"],
.jafo-upload-form input[type="file"] {
	display: block;
	width: 100%;
	max-width: 420px;
	margin-top: 0.3em;
}

.jafo-history-table {
	width: 100%;
	border-collapse: collapse;
}

.jafo-history-table th,
.jafo-history-table td {
	padding: 0.5em;
	border-bottom: 1px solid #eee;
	text-align: left;
	vertical-align: top;
}

/*
 * Same 11 custom properties as .jafo-dash below, declared here at :root too - several rules
 * that reference them (.jafo-btn-upload, .jafo-btn-sm, .jafo-cal-month, .jafo-login-switch a,
 * the login submit button, ...) are used well beyond .jafo-dash-wrapped markup, including the
 * standalone [jafo_upload]/[jafo_voting]/[jafo_history] shortcode pages, whose own wrapper
 * (plain .jafo-section, part of the legacy block above) never gets that class. Without a value
 * in scope, var(--jafo-accent) resolves to nothing there - e.g. .jafo-btn-upload's
 * `background: var(--jafo-accent); color: #fff;` silently became a transparent button with
 * white text on white, i.e. an invisible submit button on the upload form. .jafo-dash's own
 * declaration below is kept too (harmless duplication) rather than removed, in case it's ever
 * meant to diverge from :root's.
 */
:root {
	--jafo-ink: #1A1D21;
	--jafo-muted: #7B828C;
	--jafo-line: #E6E7E9;
	--jafo-panel: #FFFFFF;
	--jafo-accent: #2F5D8A;
	--jafo-accent-soft: #E4ECF3;
	--jafo-good: #2F6B4F;
	--jafo-good-soft: #E4EFE9;
	--jafo-warn: #9A6A1E;
	--jafo-warn-soft: #F4EAD8;
	--jafo-danger: #A23B2E;
	--jafo-danger-soft: #F5E1DD;
}

/* ==========================================================================
   Compact/utility dashboard ([jafo_dashboard]) - scoped under .jafo-dash so
   the rules above (still used by the standalone [jafo_upload]/[jafo_voting]/
   [jafo_history] shortcodes) are left untouched.
   ========================================================================== */

.jafo-dash {
	--jafo-ink: #1A1D21;
	--jafo-muted: #7B828C;
	--jafo-line: #E6E7E9;
	--jafo-panel: #FFFFFF;
	--jafo-accent: #2F5D8A;
	--jafo-accent-soft: #E4ECF3;
	--jafo-good: #2F6B4F;
	--jafo-good-soft: #E4EFE9;
	--jafo-warn: #9A6A1E;
	--jafo-warn-soft: #F4EAD8;
	--jafo-danger: #A23B2E;
	--jafo-danger-soft: #F5E1DD;

	/*
	 * Die drei JAFO-Status-Farben, einheitlich in Kalender, Aufgaben-Hinweisen und den drei
	 * Übersichts-Karten verwendet (Farbe 1/2/3 = Einsenden/Bewerten/Ergebnis: Grün/Blau/Rot).
	 * Alle drei sind bewusst dieselben Farbtöne wie --jafo-good/--jafo-accent/--jafo-danger
	 * (statt eigener, zusätzlicher Töne), damit sich das Farbkonzept ins bestehende Theme
	 * einfügt statt es zu verdoppeln.
	 */
	--jafo-phase-einsenden: var(--jafo-good);
	--jafo-phase-einsenden-soft: var(--jafo-good-soft);
	--jafo-phase-einsenden-fill: #BBDAC7;
	--jafo-phase-bewerten: var(--jafo-accent);
	--jafo-phase-bewerten-soft: var(--jafo-accent-soft);
	--jafo-phase-bewerten-fill: #BBD0E3;
	--jafo-phase-ergebnis: var(--jafo-danger);
	--jafo-phase-ergebnis-soft: var(--jafo-danger-soft);
	--jafo-phase-ergebnis-fill: #E3B7AE;

	max-width: 1040px;
	margin: 0 auto;
	color: var(--jafo-ink);
	font-size: 14px;
}

.jafo-dash * { box-sizing: border-box; }

.jafo-dash-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}
.jafo-dash-brand { font-weight: 800; font-size: 14px; }
.jafo-dash-user {
	color: var(--jafo-muted); font-size: 12.5px; text-decoration: none;
	display: inline-flex; align-items: center; gap: 5px;
}
.jafo-dash-user:hover { color: var(--jafo-accent); }
.jafo-user-icon { width: 15px; height: 15px; flex-shrink: 0; }

/*
 * Three summary cards (Bilder einreichen / Bewertung abgeben / Meine Ergebnisse -
 * dashboard-compact.php): icon + coloured accent when something needs doing, a calm/muted
 * checkmark state when nothing does, and a "Details ansehen ›" line always visible at the
 * bottom - together making the card read unmistakably as a clickable action rather than a
 * static stat tile. Click reveals the matching .jafo-detail-panel below (accordion - see the
 * inline <script> at the end of dashboard-compact.php), which is where the actual "Bild
 * einreichen"/"Jetzt bewerten" button lives. Panels only get hidden once .jafo-js is on <html>
 * (added by that same script) so a no-JS visitor still sees everything, just not collapsed.
 */
/*
 * Jede Karte/jedes Detail-Panel trägt ein data-phase="einsenden|bewerten|ergebnis"-Attribut
 * (siehe dashboard-compact.php) - setzt lokal --jafo-phase(-soft) auf die zugehörige der drei
 * Status-Farben, die die Regeln unten dann statt eines einzelnen fest verdrahteten Akzenttons
 * referenzieren (mit var(--jafo-accent) als Fallback, falls das Attribut mal fehlt).
 */
[data-phase="einsenden"] { --jafo-phase: var(--jafo-phase-einsenden); --jafo-phase-soft: var(--jafo-phase-einsenden-soft); --jafo-phase-fill: var(--jafo-phase-einsenden-fill); }
[data-phase="bewerten"]  { --jafo-phase: var(--jafo-phase-bewerten);  --jafo-phase-soft: var(--jafo-phase-bewerten-soft);  --jafo-phase-fill: var(--jafo-phase-bewerten-fill); }
[data-phase="ergebnis"]  { --jafo-phase: var(--jafo-phase-ergebnis);  --jafo-phase-soft: var(--jafo-phase-ergebnis-soft);  --jafo-phase-fill: var(--jafo-phase-ergebnis-fill); }

.jafo-summary-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.jafo-summary-card {
	background: var(--jafo-panel); border: 1px solid var(--jafo-line);
	border-radius: 8px; padding: 14px 16px; text-align: left; cursor: pointer; font: inherit; color: inherit;
	display: flex; flex-direction: column; gap: 10px; transition: border-color 0.15s ease, background 0.15s ease;
}
.jafo-summary-card:hover { border-color: var(--jafo-phase, var(--jafo-accent)); background: var(--jafo-phase-soft, var(--jafo-accent-soft)); }
.jafo-summary-card.is-active { background: var(--jafo-phase-soft, var(--jafo-accent-soft)); }

/*
 * Kopfzeile jeder Karte farblich hinterlegt (--jafo-phase-fill, dieselbe mittelkräftige
 * Farbstufe wie die Kalender-Balken derselben Phase - siehe .jafo-cal-range--phase-* oben) statt
 * nur bei Hover/aktiv den blassen --jafo-phase-soft-Ton zu zeigen, damit Kalender und
 * Übersichts-Karten auf den ersten Blick als dasselbe Farbkonzept erkennbar sind. Bleeds edge-to-
 * edge via negativer Margin, die die Karten-Innenabstände wieder ausgleicht.
 */
.jafo-summary-card-top {
	display: flex; align-items: center; gap: 10px;
	margin: -14px -16px 0; padding: 10px 16px;
	background: var(--jafo-phase-fill, var(--jafo-line));
	border-radius: 7px 7px 0 0;
}
.jafo-summary-card-icon {
	flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
	background: var(--jafo-panel); color: var(--jafo-muted);
}
.jafo-summary-card--active .jafo-summary-card-icon { background: var(--jafo-phase, var(--jafo-accent)); color: #fff; }
.jafo-summary-card-icon .jafo-ic { width: 18px; height: 18px; }
.jafo-summary-card-title { font-size: 13.5px; font-weight: 700; color: var(--jafo-ink); flex: 1; }
.jafo-summary-card-badge {
	flex-shrink: 0; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
	background: var(--jafo-phase, var(--jafo-accent)); color: #fff; font-size: 12px; font-weight: 800;
	display: grid; place-items: center; font-variant-numeric: tabular-nums;
}

.jafo-summary-card-empty-state {
	display: flex; align-items: center; gap: 6px; margin: 0;
	font-size: 12.5px; color: var(--jafo-muted);
}
.jafo-summary-card-empty-state .jafo-ic { width: 14px; height: 14px; color: var(--jafo-good); flex-shrink: 0; }

.jafo-summary-card-list { list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--jafo-muted); display: flex; flex-direction: column; gap: 4px; }
.jafo-summary-card-list li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 6px; border-radius: 5px; }
.jafo-summary-card--active .jafo-summary-card-list li { background: var(--jafo-phase-soft, var(--jafo-accent-soft)); }
.jafo-summary-card-item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--jafo-ink); font-weight: 600; }
.jafo-summary-card-item-status { flex-shrink: 0; }
.jafo-summary-card-more { font-style: italic; }

.jafo-summary-card-cta {
	display: flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 8px;
	border-top: 1px solid var(--jafo-line); font-size: 12px; font-weight: 700; color: var(--jafo-phase, var(--jafo-accent));
}
.jafo-summary-card-chevron { width: 13px; height: 13px; transition: transform 0.15s ease; }
.jafo-summary-card.is-active .jafo-summary-card-chevron { transform: rotate(90deg); }

.jafo-ic { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.jafo-ic-sm { width: 14px; height: 14px; }

.jafo-detail-panel { margin-bottom: 14px; }
.jafo-js .jafo-detail-panel { display: none; }
.jafo-js .jafo-detail-panel.is-open { display: block; }
/* Same phase tint as the summary card it belongs to (.jafo-summary-card.is-active), so the
   panel reads as that card's own continuation rather than a separate, unrelated block. */
.jafo-detail-panel.is-open { background: var(--jafo-phase-soft, var(--jafo-accent-soft)); border-radius: 8px; padding: 4px 16px; }

.jafo-detail-item { padding: 12px 0; border-bottom: 1px solid var(--jafo-line); }
.jafo-detail-item:last-child { border-bottom: none; }
.jafo-detail-item-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.jafo-detail-item-hd h4 { margin: 0; font-size: 14px; }
.jafo-detail-thema { font-size: 12.5px; font-weight: 400; color: var(--jafo-muted); margin-left: 6px; }
.jafo-detail-item-meta { margin: 4px 0 0; font-size: 12.5px; color: var(--jafo-muted); }
.jafo-detail-item-actions { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.jafo-hint--size { margin-top: 6px; }
.jafo-detail-subsection { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--jafo-line); }
.jafo-detail-subsection h4 { margin: 0 0 6px; font-size: 13px; }

/*
 * "Aufgaben"-Abschnitt (dashboard-compact.php, zwischen Kalender und den drei Übersichts-Karten):
 * eine Zeile je noch nicht beendeter Aufgabe mit bis zu drei phasenfarbenen Hinweis-Chips - Ziel
 * des Kalender-Klicks (siehe #jafo-aufgabe-<id>[-<phase>] und das Inline-<script> am Seitenende).
 */
.jafo-aufgaben-list { list-style: none; margin: 0; padding: 0; }
.jafo-aufgabe-row {
	padding: 10px 0; border-bottom: 1px solid var(--jafo-line);
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px;
	border-radius: 6px; transition: background 0.3s ease;
}
.jafo-aufgabe-row:last-child { border-bottom: none; }
.jafo-aufgabe-row-title { font-size: 13px; }
.jafo-aufgabe-row-hints { display: flex; flex-wrap: wrap; gap: 6px; }
.jafo-aufgabe-hint {
	display: inline-block; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
	white-space: nowrap; transition: box-shadow 0.3s ease;
}
.jafo-aufgabe-hint--phase-einsenden { background: var(--jafo-phase-einsenden-soft); color: var(--jafo-phase-einsenden); }
.jafo-aufgabe-hint--phase-bewerten { background: var(--jafo-phase-bewerten-soft); color: var(--jafo-phase-bewerten); }
.jafo-aufgabe-hint--phase-ergebnis { background: var(--jafo-phase-ergebnis-soft); color: var(--jafo-phase-ergebnis); }

/* Kurzes Aufblitzen als Ziel eines Kalender-Klicks (siehe dashboard-compact.php) - auf der Zeile
   selbst per Hintergrundfarbe, auf einem einzelnen Hinweis-Chip zusätzlich per Ring, da der schon
   eine eigene Hintergrundfarbe hat. */
.jafo-aufgabe-row.jafo-flash { background: var(--jafo-accent-soft); }
.jafo-aufgabe-hint.jafo-flash { box-shadow: 0 0 0 2px currentColor; }

@media (max-width: 720px) {
	.jafo-summary-cards { grid-template-columns: 1fr; }
}

.jafo-panel {
	background: var(--jafo-panel);
	border: 1px solid var(--jafo-line);
	margin-bottom: 14px;
}
.jafo-panel-hd { padding: 9px 14px; border-bottom: 1px solid var(--jafo-line); font-weight: 700; font-size: 12.5px; }
.jafo-panel-bd { padding: 14px; }
.jafo-panel--notice .jafo-panel-hd { color: var(--jafo-warn); }

.jafo-hint { color: var(--jafo-muted); font-size: 13px; margin: 0; }
.jafo-micro-hint { color: var(--jafo-muted); font-size: 11.5px; margin: 4px 0 0; }

/*
 * Mini month calendar - same grid markup/component AND same per-task colouring/behaviour as
 * JAFO-Admin > Übersicht (see public/css/jafo-jury-dashboard.css, public/js/
 * jafo-jury-dashboard.js): one colour per task (Jafo_CPT_Task::calendar_color()), stable lanes
 * for overlapping tasks (assign_calendar_lanes()), centred/overlapping Termin dots, delayed
 * hover tooltip. Copied here rather than shared via a single stylesheet/script because the
 * member dashboard only ever loads jafo-public.css/jafo-public.js, never the jury-dashboard
 * equivalents.
 */
.jafo-cal { margin-bottom: 4px; }
.jafo-cal-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 10px; font-size: 13px; }
.jafo-cal-nav .jafo-btn-sm { padding: 4px 10px; min-width: 0; }
.jafo-cal-multi { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.jafo-cal-month { flex: 0 0 288px; border: 1px solid var(--jafo-accent); border-radius: 8px; padding: 12px 14px; }
.jafo-cal-month-hd { text-align: center; font-size: 12.5px; font-weight: 700; color: var(--jafo-ink); margin-bottom: 6px; }
.jafo-cal-grid {
	display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
	max-width: 288px; width: 100%; margin: 0 auto; position: relative;
}
.jafo-cal-wd { font-size: 10.5px; font-weight: 700; color: var(--jafo-muted); text-align: center; padding-bottom: 4px; }
.jafo-cal-cell {
	aspect-ratio: 1 / 1; min-height: 0; border: 1px solid var(--jafo-line); border-radius: 4px;
	padding: 3px 4px; position: relative;
}
.jafo-cal-cell--pad { border-color: transparent; }
/*
 * Sa/So are always the 6th/7th column of every .jafo-cal-grid row - including the Mo..So
 * weekday-label row itself, so the same nth-child math marks both without a separate rule.
 * Declared before --today below so a day that's also today still shows that (rarer) colour on
 * top, via plain source-order cascade.
 */
.jafo-cal-wd:nth-child(7n+6),
.jafo-cal-wd:nth-child(7n) { color: var(--jafo-danger); }
.jafo-cal-cell:nth-child(7n+6):not(.jafo-cal-cell--pad) .jafo-cal-daynum,
.jafo-cal-cell:nth-child(7n):not(.jafo-cal-cell--pad) .jafo-cal-daynum { color: var(--jafo-danger); }
.jafo-cal-cell--today { border: 2px solid var(--jafo-accent); }
.jafo-cal-cell--today .jafo-cal-daynum { color: var(--jafo-accent); font-weight: 700; }
/*
 * Range fill: one 50% transparent band per task whose date span covers this day, one slot per
 * task actually active that day (not per lane) - flex:1 with no height cap divides the cell's
 * height evenly among however many tasks overlap that day, so a lone task's bar fills the whole
 * day cell. Tasks are still ordered by their stable lane (Jafo_CPT_Task::assign_calendar_lanes())
 * so the same task keeps the same relative (top-to-bottom) position on days it shares with
 * others - see the identical comment in jafo-jury-dashboard.css.
 */
.jafo-cal-fills { position: absolute; top: 1px; bottom: 1px; left: 0; right: 0; display: flex; flex-direction: column; gap: 1px; z-index: 0; }
.jafo-cal-range { flex: 1; min-height: 4px; border: none; padding: 0; display: block; width: 100%; border-radius: 2px; cursor: pointer; opacity: 0.5; transition: filter 0.1s ease; }
/* .jafo-cal-hovered (statt eines einfachen :hover) wird per JS (jafo-public.js) auf ALLE
   Segmente derselben Aufgabe/Phase zugleich gesetzt, nicht nur auf das eine Tages-Segment unter
   dem Mauszeiger - sonst "wandert" die Hervorhebung Tag für Tag statt die ganze Zeitstrahl-Linie
   gemeinsam zu reagieren. */
.jafo-cal-range.jafo-cal-hovered { filter: brightness(0.92); }
/* Farbe 1/2/3 des Status-Farbkonzepts (siehe --jafo-phase-* in .jafo-dash) statt der früheren,
   pro Aufgabe zufällig gewählten Farbe - dieselben drei Töne wie bei den Termin-Punkten unten,
   der Kalender-Legende und den drei Übersichts-Karten weiter unten auf der Seite. */
.jafo-cal-range--phase-einsenden { background: var(--jafo-phase-einsenden-fill); }
.jafo-cal-range--phase-bewerten { background: var(--jafo-phase-bewerten-fill); }
.jafo-cal-range--phase-ergebnis { background: var(--jafo-phase-ergebnis-fill); }
/*
 * Rounded end-caps only at a date range's true start/end (or both, for a one-day range) - every
 * day in between stays square-edged so consecutive days read as one unbroken bar instead of a
 * row of separate blocks. --pos is computed server-side per day (see
 * Jafo_CPT_Task::range_day_position()), same start/middle/end/single convention as the
 * client-side Terminübersicht calendar on the task-edit form (jafo-jury-dashboard.js).
 *
 * "Unbroken" also has to survive .jafo-cal-grid's own gap between day cells: each day is a
 * separate grid cell (see .jafo-cal-cell above, which used to clip this fill to its own rounded
 * corners via overflow:hidden - removed for exactly this reason), so a --middle/--start/--end
 * segment bleeds into the neighbouring cell's gap via a negative margin equal to that gap,
 * meeting the next day's segment in the middle of it instead of leaving a visible seam.
 */
.jafo-cal-range--middle { border-radius: 0; margin-left: -3px; margin-right: -3px; width: calc(100% + 6px); }
.jafo-cal-range--start { border-radius: 999px 0 0 999px; margin-right: -3px; width: calc(100% + 3px); }
.jafo-cal-range--end { border-radius: 0 999px 999px 0; margin-left: -3px; width: calc(100% + 3px); }
.jafo-cal-range--single { border-radius: 999px; }
.jafo-cal-daynum { position: relative; z-index: 1; font-size: 10.5px; color: var(--jafo-muted); }
/*
 * Termin markers sit on top of their own task's range-fill bar, not dead-centre in the cell -
 * .jafo-cal-markers mirrors .jafo-cal-fills exactly (same top/bottom/gap, one flex-column slot
 * per task active that day, same order), so a marker's slot lines up pixel-for-pixel with that
 * same task's fill row regardless of how many tasks overlap that day. Several markers in the
 * same slot still render side by side. See the identical comment in jafo-jury-dashboard.css.
 */
.jafo-cal-markers { position: absolute; top: 1px; bottom: 1px; left: 0; right: 0; z-index: 1; display: flex; flex-direction: column; gap: 1px; }
.jafo-cal-marker-lane { flex: 1; min-height: 4px; display: flex; align-items: center; justify-content: center; gap: 2px; }
.jafo-cal-marker { width: 10px; height: 10px; border-radius: 50%; border: none; padding: 0; cursor: pointer; opacity: 0.65; flex-shrink: 0; transition: opacity 0.1s ease; }
.jafo-cal-marker.jafo-cal-hovered { opacity: 1; }
.jafo-cal-marker--phase-einsenden { background: var(--jafo-phase-einsenden); }
.jafo-cal-marker--phase-bewerten { background: var(--jafo-phase-bewerten); }
.jafo-cal-marker--phase-ergebnis { background: var(--jafo-phase-ergebnis); }
/*
 * Bildbesprechung (Clubabend) is the one date every JAFO-Aufgabe anchors to - full opacity plus
 * a dark ring and a light halo so it reads as clearly more important than the other Termine, not
 * just marginally bigger. See the identical rule/comment in jafo-jury-dashboard.css (this page
 * does define --jafo-ink/--jafo-panel itself via .jafo-dash above, but the explicit fallback is
 * kept for consistency and defends against this component ever being reused outside it).
 */
.jafo-cal-marker--main {
	width: 13px; height: 13px; opacity: 1;
	border: 2px solid var(--jafo-ink, #1A1D21);
	box-shadow: 0 0 0 2px var(--jafo-panel, #fff), 0 1px 3px rgba(0, 0, 0, 0.35);
}
.jafo-cal-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; font-size: 11.5px; justify-content: center; }
.jafo-cal-legend-item { display: inline-flex; align-items: center; gap: 5px; color: var(--jafo-ink); }
.jafo-cal-legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.jafo-cal-legend-dot--phase-einsenden { background: var(--jafo-phase-einsenden); }
.jafo-cal-legend-dot--phase-bewerten { background: var(--jafo-phase-bewerten); }
.jafo-cal-legend-dot--phase-ergebnis { background: var(--jafo-phase-ergebnis); }

/*
 * Delayed hover tooltip for markers/range bars (see jafo-public.js) - position:fixed so it isn't
 * clipped by .jafo-cal-cell's overflow:hidden. Same 0.5s-delay behaviour as the JAFO-Admin
 * calendar's tooltip (jafo-jury-dashboard.js), just using this page's own pre-rendered element
 * (#jafoCalTooltip in dashboard-compact.php) instead of one created/appended by script.
 */
.jafo-cal-tooltip {
	position: fixed; z-index: 40; pointer-events: none;
	background: var(--jafo-ink, #1A1D21); color: #fff; font-size: 11.5px; font-weight: 500;
	padding: 5px 9px; border-radius: 6px; white-space: nowrap;
	opacity: 0; transition: opacity 0.12s ease;
}
.jafo-cal-tooltip.is-visible { opacity: 1; }

.jafo-dash .jafo-upload-owner {
	border-bottom: 1px solid var(--jafo-line);
	margin: 0 0 14px;
	padding: 0 0 14px;
}
.jafo-dash .jafo-upload-owner:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.jafo-owner-label { font-size: 12px; font-weight: 700; color: var(--jafo-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.03em; }
/* "(2 von 6)" next to the label - only rendered (see class-jafo-upload-page.php) once a task
   actually allows more than one photo per member. */
.jafo-owner-count { font-weight: 400; text-transform: none; letter-spacing: normal; margin-left: 4px; }

.jafo-dash .jafo-task-list { list-style: none; margin: 0 0 10px; padding: 0; display: block; }
.jafo-task-row {
	display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
	padding: 12px 0; border-bottom: 1px dashed var(--jafo-line);
}
.jafo-task-row:last-child { border-bottom: none; }
.jafo-thumb-sm { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; border: 1px solid var(--jafo-line); flex-shrink: 0; }
.jafo-thumb-sm.jafo-thumb-clickable {
	width: min(400px, 100%); aspect-ratio: 1 / 1; height: auto; cursor: zoom-in;
}
/* Running number badge (1., 2., … - only for tasks allowing more than one photo per member,
   see $max_allowed in class-jafo-upload-page.php) overlaid on the thumbnail's corner, same
   placement convention as the public gallery's placement badge and the Auswertung's rank badge. */
.jafo-task-row-thumb-wrap { position: relative; display: inline-block; }
.jafo-task-row-num {
	position: absolute; top: 6px; left: 6px; min-width: 20px; height: 20px; padding: 0 5px;
	display: grid; place-items: center; border-radius: 999px; font-size: 11.5px; font-weight: 800;
	background: rgba(20, 22, 26, 0.75); color: #fff; font-variant-numeric: tabular-nums;
}

/* "Meine Einreichungen (Verlauf)" table: current version gets a big clickable thumbnail
   (links to the Upload Page), older versions a row of small dated thumbnails. */
.jafo-hist-main-link { display: block; width: 96px; }
.jafo-hist-thumb-main {
	width: 96px; height: 96px; object-fit: cover; border-radius: 6px;
	border: 1px solid var(--jafo-line); display: block; transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.jafo-hist-main-link:hover .jafo-hist-thumb-main { transform: scale(1.04); box-shadow: 0 2px 10px rgba(0,0,0,0.15); }
.jafo-hist-versions { display: flex; flex-wrap: wrap; gap: 8px; max-width: 220px; }
.jafo-hist-version { display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; }
.jafo-hist-thumb-sm {
	width: 40px; height: 40px; object-fit: cover; border-radius: 4px;
	border: 1px solid var(--jafo-line); transition: transform 0.12s ease;
}
.jafo-hist-version:hover .jafo-hist-thumb-sm { transform: scale(1.08); }
.jafo-hist-version-date { font-size: 10px; color: var(--jafo-muted); white-space: nowrap; }
.jafo-task-row-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.jafo-task-row-meta strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jafo-task-row-meta span { font-size: 11.5px; color: var(--jafo-muted); }
.jafo-task-row-actions { display: flex; gap: 10px; flex-shrink: 0; }

.jafo-lightbox {
	position: fixed; inset: 0; background: rgba(0, 0, 0, .85);
	display: flex; align-items: center; justify-content: center;
	z-index: 100000; padding: 24px;
}
/* touch-action: none lets the pinch-zoom/pan pointer handlers (jafo-public.js) drive the
   gesture themselves instead of the browser's own scroll/zoom fighting for it. */
.jafo-lightbox-scroll {
	max-width: 100%; max-height: 100%; overflow: hidden;
	display: flex; align-items: center; justify-content: center; touch-action: none;
}
.jafo-lightbox-img {
	max-width: 100%; max-height: 90vh; object-fit: contain; cursor: zoom-in;
	transition: transform 0.08s linear; user-select: none; -webkit-user-drag: none;
}
.jafo-lightbox-img.no-transition { transition: none; }
.jafo-lightbox-img.is-zoomed { cursor: grab; }
.jafo-lightbox-scroll.is-dragging .jafo-lightbox-img { cursor: grabbing; transition: none; }
.jafo-lightbox-close,
.jafo-lightbox-fs {
	position: absolute; top: 16px; background: rgba(0, 0, 0, .35); border: none; border-radius: 6px;
	color: #fff; line-height: 1; cursor: pointer; padding: 6px 12px;
}
.jafo-lightbox-close { right: 20px; font-size: 26px; }
.jafo-lightbox-fs { right: 68px; font-size: 18px; padding: 7px 12px; }
.jafo-lightbox-close:hover,
.jafo-lightbox-fs:hover { background: rgba(0, 0, 0, .55); }

.jafo-link-btn {
	background: none; border: none; padding: 0; cursor: pointer;
	font-size: 12px; font-weight: 600; color: var(--jafo-accent); text-decoration: none;
	font-family: inherit;
}
.jafo-link-btn:hover { text-decoration: underline; }
.jafo-link-btn--danger { color: var(--jafo-danger); }

.jafo-hidden { display: none !important; }

.jafo-photo-title-wrap { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jafo-title-edit-row { display: inline-flex; align-items: center; gap: 6px; }
.jafo-title-edit-input { font-size: 13px; padding: 3px 6px; max-width: 160px; }

.jafo-dash .jafo-compact-form {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px;
}
.jafo-dash .jafo-compact-form input[type="text"] {
	flex: 1 1 160px; min-width: 140px;
}
.jafo-dash input[type="text"],
.jafo-dash input[type="email"],
.jafo-dash input[type="password"],
.jafo-dash input[type="file"] {
	border: 1px solid var(--jafo-line); border-radius: 5px; padding: 7px 10px;
	font-size: 13px; font-family: inherit; color: var(--jafo-ink); background: var(--jafo-panel);
}
.jafo-dash input[type="file"] { padding: 5px; max-width: 220px; flex: 1 1 200px; }
.jafo-dash input[type="text"]:focus,
.jafo-dash input[type="email"]:focus,
.jafo-dash input[type="password"]:focus,
.jafo-dash input[type="file"]:focus {
	outline: 2px solid var(--jafo-accent); outline-offset: 1px;
}

.jafo-profile-form { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.jafo-profile-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--jafo-muted); }
.jafo-profile-form input { font-weight: 400; color: var(--jafo-ink); }
.jafo-profile-readonly input { color: var(--jafo-muted); background: var(--jafo-line); }
.jafo-profile-form-actions { display: flex; align-items: center; gap: 12px; }
.jafo-form-status { font-size: 12px; color: var(--jafo-good); }
.jafo-form-status--error { color: var(--jafo-danger); }
.jafo-dash .jafo-upload-status { font-size: 12px; color: var(--jafo-danger); flex-basis: 100%; }

.jafo-btn-sm {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--jafo-panel); border: 1px solid var(--jafo-line); color: var(--jafo-ink);
	font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: 6px;
	cursor: pointer; text-decoration: none; font-family: inherit;
}
.jafo-btn-sm:hover { border-color: var(--jafo-accent); color: var(--jafo-accent); }
.jafo-btn-primary,
.jafo-btn-upload { background: var(--jafo-accent); border-color: var(--jafo-accent); color: #fff; }
.jafo-btn-primary:hover,
.jafo-btn-upload:hover { background: var(--jafo-accent); opacity: 0.9; color: #fff; }
.jafo-btn-sm--danger { color: var(--jafo-danger); border-color: var(--jafo-danger); }
.jafo-btn-sm--danger:hover { background: var(--jafo-danger); border-color: var(--jafo-danger); color: #fff; }

/* Small icon-only action next to a .jafo-btn-sm (e.g. the "eigene Bewertung als PDF" download
   link on a completed task's row) - same footprint/border language, just square and iconic. */
.jafo-icon-btn-sm {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; flex-shrink: 0; margin-left: 6px;
	background: var(--jafo-panel); border: 1px solid var(--jafo-line); border-radius: 6px;
	color: var(--jafo-muted); text-decoration: none;
}
.jafo-icon-btn-sm:hover { border-color: var(--jafo-accent); color: var(--jafo-accent); }
.jafo-icon-btn-sm-ic { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* .jafo-btn-primary's own rule (background: var(--jafo-panel) etc. above) would otherwise win
   on source order alone since both selectors have equal specificity - this combined selector
   is what actually makes the PDF-download icon button match the filled accent look of the
   other Aktion-column buttons instead of staying in its default muted/outline state. */
.jafo-icon-btn-sm.jafo-btn-primary { background: var(--jafo-accent); border-color: var(--jafo-accent); color: #fff; }
.jafo-icon-btn-sm.jafo-btn-primary:hover { background: var(--jafo-accent); opacity: 0.9; color: #fff; border-color: var(--jafo-accent); }

.jafo-list { list-style: none; margin: 0; padding: 0; }
.jafo-list li { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--jafo-line); font-size: 12.5px; }
.jafo-list li:last-child { border-bottom: none; }
.jafo-list-date { color: var(--jafo-muted); font-variant-numeric: tabular-nums; }

.jafo-inline-list { list-style: none; margin: 0; padding: 0; }
.jafo-inline-list li { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 12.5px; }
.jafo-inline-list code { background: var(--jafo-accent-soft); padding: 2px 6px; border-radius: 4px; font-size: 11.5px; }
.jafo-inline-list button { background: none; border: 1px solid var(--jafo-line); border-radius: 5px; padding: 4px 10px; font-size: 11.5px; cursor: pointer; font-family: inherit; }
.jafo-inline-list button:hover { border-color: var(--jafo-accent); color: var(--jafo-accent); }

.jafo-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.jafo-inline-form label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.jafo-inline-form input[type="text"] { flex: 1 1 200px; }

.jafo-pill { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
.jafo-pill--good { background: var(--jafo-good-soft); color: var(--jafo-good); }
.jafo-pill--warn { background: var(--jafo-warn-soft); color: var(--jafo-warn); }
.jafo-pill--info { background: var(--jafo-accent-soft); color: var(--jafo-accent); }
.jafo-pill--neutral { background: var(--jafo-line); color: var(--jafo-muted); }
button.jafo-pill { border: none; cursor: pointer; font: inherit; }

.jafo-table-wrap { overflow-x: auto; }
.jafo-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 480px; }
.jafo-table th {
	text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em;
	color: var(--jafo-muted); padding: 6px 10px; border-bottom: 1px solid var(--jafo-line);
}
.jafo-table td { padding: 7px 10px; border-bottom: 1px solid var(--jafo-line); vertical-align: middle; }
.jafo-table tbody tr:last-child td { border-bottom: none; }
.jafo-jd-table-sub { font-size: 11px; color: var(--jafo-muted); margin-top: 1px; }
.jafo-nowrap { white-space: nowrap; }

.jafo-details { font-size: 12px; }
.jafo-details summary { cursor: pointer; color: var(--jafo-accent); font-weight: 600; }
.jafo-exif-list { list-style: none; margin: 6px 0 0; padding: 0; color: var(--jafo-muted); }
.jafo-exif-list li { padding: 2px 0; }

.jafo-login-gate { max-width: 360px; margin: 2em auto 0; }
.jafo-login-gate form p { margin: 0 0 12px; }
.jafo-login-gate form label {
	display: block; margin-bottom: 5px; font-size: 12.5px; font-weight: 600; color: var(--jafo-ink);
}
.jafo-login-gate form input[type="text"],
.jafo-login-gate form input[type="password"],
.jafo-login-gate form input[type="email"] {
	width: 100%; box-sizing: border-box; padding: 8px 10px;
	border: 1px solid var(--jafo-line); border-radius: 6px;
}
.jafo-login-gate .login-remember label { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.jafo-login-gate .login-remember input { margin: 0; }
.jafo-login-gate .login-submit { display: flex; align-items: center; gap: 12px; }
.jafo-login-gate form input[type="submit"] {
	background: var(--jafo-accent); color: #fff; border: none; border-radius: 6px;
	padding: 9px 18px; font-weight: 600; cursor: pointer;
}
.jafo-login-lostpassword { font-size: 12.5px; margin-top: 4px; }
.jafo-login-register-hint { font-size: 12.5px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--jafo-line); }

/*
 * Honeypot for #jafo-registerform: a field named to tempt scripted bots ("Website") that a
 * real visitor never sees or tabs into (off-screen, not display:none/visibility:hidden, since
 * some bots skip obviously-hidden fields but not off-screen ones) - handle_register() silently
 * drops any submission where it's filled in, without telling the bot anything was detected.
 */
.jafo-hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.jafo-login-switch {
	margin: 0 0 4px; padding: 10px 12px; background: var(--jafo-accent-soft);
	border-radius: 6px; font-size: 12.5px; display: flex; align-items: center;
	justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.jafo-login-switch a { color: var(--jafo-accent); font-weight: 600; text-decoration: none; }
.jafo-login-switch a:hover { text-decoration: underline; }
.jafo-login-switch-hint { font-size: 12px; color: var(--jafo-muted); margin: 0 0 16px; }