/* draft.php - Live-Draft. Eigener 3-Buchstaben-Praefix "drp-" (Design-System-Konvention, siehe
   docs/design-system.md). Team-Identitaet (Logo-Badge + Kuerzel-Chip) nutzt die globalen
   .team-chip/.team-chip-badge-Klassen aus dyne.css, nicht neu definiert - deren teamfarbige
   Inline-Styles bleiben bewusst vom Dark Mode unangetastet (siehe dyne.css's Dark-Mode-Kommentar).
   Alle sonstigen Farben ueber die zentralen --token-Variablen aus dyne.css (Dark Mode via
   html[data-theme="dark"], gesetzt aus users.theme - siehe page_bg.php/nav.php), analog zu
   css/fab.css. */

.drp-outer {
	max-width: 1360px;
	margin: 0 auto;
	position: relative;
}

.drp-page {
	background: var(--bg-card);
	padding: 22px 24px 30px;
}

/* "Wer ist online" - identisches Muster wie .fab-presence-* (css/fab.css), nur "drp-" statt "fab-". */
.drp-presence-wrap { position: absolute; top: 16px; right: 20px; z-index: 3; }
.drp-presence-btn { display: none; align-items: center; gap: 7px; background: var(--good-bg); color: var(--good-text); font-size: 11.5px; font-weight: 700; font-family: inherit; padding: 5px 11px 5px 9px; border-radius: 20px; border: 1px solid var(--pill-rs-border); cursor: pointer; }
.drp-presence-btn:hover { filter: brightness(0.97); }
.drp-presence-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.drp-presence-dot { width: 7px; height: 7px; border-radius: 50%; background: #2fbf4f; box-shadow: 0 0 0 0 rgba(47,191,79,.55); animation: drpPresencePulse 1.8s infinite; flex: 0 0 auto; }
@keyframes drpPresencePulse {
	0% { box-shadow: 0 0 0 0 rgba(47,191,79,.5); }
	70% { box-shadow: 0 0 0 6px rgba(47,191,79,0); }
	100% { box-shadow: 0 0 0 0 rgba(47,191,79,0); }
}
@media (prefers-reduced-motion: reduce) {
	.drp-presence-dot { animation: none; box-shadow: none; }
}
.drp-presence-caret { font-size: 9px; margin-left: 1px; opacity: .7; }
.drp-presence-pop { position: absolute; top: calc(100% + 8px); right: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.16); padding: 8px; display: none; width: 240px; max-height: 280px; overflow-y: auto; z-index: 5; }
.drp-presence-wrap.open .drp-presence-pop { display: block; }
.drp-presence-pop-head { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted-2); padding: 4px 6px 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; position: sticky; top: 0; background: var(--bg-card); }
.drp-presence-pop-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-muted); padding: 4px 6px; border-radius: 5px; }
.drp-presence-pop-row:hover { background: var(--bg-section); }
.drp-presence-pop-row .gm { color: var(--text-muted); font-weight: 500; }

.drp-title-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
#content .drp-title { font-size: 22px; font-weight: 800; color: var(--navy-text) !important; text-shadow: none !important; }
.drp-subtitle { font-size: 12.5px; color: var(--text-muted); }

#content .drp-msg-success { color: var(--good-text) !important; text-shadow: none !important; font-size: 13px; }
#content .drp-msg-error { color: var(--bad-text) !important; text-shadow: none !important; font-size: 13px; }

.drp-paused-banner {
	background: var(--bad-bg); border: 1px solid var(--pill-sperre-border); color: var(--bad-text);
	font-size: 12.5px; font-weight: 600; padding: 8px 12px; border-radius: 8px; margin-bottom: 14px;
}

.drp-admin-bar { background: var(--amber-bg); border: 1px solid var(--amber-border); border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; }
#content .drp-admin-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--amber-text) !important; text-shadow: none !important; margin-bottom: 8px; }
.drp-admin-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.drp-admin-row:last-child { margin-bottom: 0; }
.drp-admin-label { font-size: 12px; color: var(--amber-text); }

.drp-pending-item {
	display: flex; align-items: center; gap: 10px; background: var(--bg-card); border: 1px solid var(--border);
	border-radius: 8px; padding: 8px 10px; flex-wrap: wrap; margin-top: 6px;
}
.drp-pending-item .who { font-size: 12.5px; color: var(--text); }
.drp-pending-item .meta { font-size: 11px; color: var(--text-muted); }

.drp-clock-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; margin-bottom: 18px; }
.drp-clock-grid { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.drp-clock-left { flex: 1 1 320px; min-width: 280px; }
.drp-onclock-cols { display: flex; align-items: flex-start; gap: 36px; flex-wrap: wrap; }
.drp-onclock-col { flex: 1 1 220px; min-width: 200px; }
#content .drp-pick-heading { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--navy-text) !important; text-shadow: none !important; margin-bottom: 10px; }
.drp-onclock-logocol { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; margin-bottom: 8px; }
.drp-team-biglogo { width: 100px; height: 100px; object-fit: contain; flex-shrink: 0; }
.drp-lastpick-box { background: var(--bg-section); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
.drp-lastpick-row { display: flex; align-items: flex-start; gap: 14px; }
.drp-lastpick-logo { width: 50px; height: 50px; object-fit: contain; flex-shrink: 0; }
.drp-lastpick-playerpic { width: 50px; height: 50px; object-fit: cover; border-radius: 8px; flex-shrink: 0; border: 1px solid var(--border); }
.drp-next-row { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.drp-next-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
#content .drp-hint { font-size: 12px; color: var(--text-muted) !important; text-shadow: none !important; margin: 6px 0 0; line-height: 1.5; }

.drp-timer-box { flex: 0 0 150px; text-align: center; background: var(--bg-section); border: 1px solid var(--border); border-radius: 8px; padding: 12px 10px; }
.drp-timer-box.paused { border-color: var(--pill-sperre-border); background: var(--bad-bg); }
.drp-timer-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 4px; }
.drp-timer-value { font-size: 30px; font-weight: 800; color: var(--navy-text); font-variant-numeric: tabular-nums; line-height: 1; }
.drp-timer-value.low { color: var(--bad-text); }
.drp-timer-paused-note { font-size: 11px; font-weight: 700; color: var(--bad-text); margin-top: 4px; }

.drp-announce { display: none; align-items: center; gap: 16px; padding: 10px 4px; }
.drp-announce.show { display: flex; }
.drp-announce-teamlogo { width: 100px; height: 100px; object-fit: contain; flex-shrink: 0; }
.drp-announce-pic { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); flex-shrink: 0; }
.drp-announce .big .team-chip { vertical-align: middle; margin-right: 4px; }
.drp-announce .big { font-size: 18px; font-weight: 800; color: var(--navy-text); display: block; margin-bottom: 2px; }
.drp-announce .sub { font-size: 12.5px; color: var(--text-muted); }

.drp-select-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.drp-select-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.drp-picked-name { font-size: 13px; font-weight: 600; color: var(--text); }
.drp-input, .drp-select { font-family: inherit; font-size: 12.5px; padding: 7px 10px; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--text); }
.drp-select { min-width: 260px; }
.drp-btn { font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 6px; border: 1px solid var(--navy); background: var(--navy); color: #fff; cursor: pointer; }
.drp-btn:hover { background: var(--navy-dark); }
.drp-btn:disabled { opacity: .45; cursor: not-allowed; }
.drp-btn.ghost { background: var(--bg-card); color: var(--navy-text); }
.drp-btn.small { padding: 4px 9px; font-size: 11.5px; }
.drp-btn.danger { background: var(--bg-card); color: var(--bad-text); border-color: var(--pill-sperre-border); }

.drp-freetext-toggle { font-size: 11.5px; color: var(--rec-blue); cursor: pointer; text-decoration: underline; margin-top: 8px; display: inline-block; background: none; border: none; padding: 0; font-family: inherit; }
.drp-freetext-row { display: none; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; background: var(--bg-section); padding: 10px; border-radius: 8px; }
.drp-freetext-row.show { display: flex; }
.drp-freetext-row input { width: 150px; }
.drp-freetext-note { font-size: 11px; color: var(--text-muted); flex-basis: 100%; }

#content .drp-spectator-note { margin-top: 16px; padding: 12px 14px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-muted) !important; text-shadow: none !important; background: var(--bg-section); border-radius: 8px; }

.drp-layout { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.drp-board-col { flex: 1 1 620px; min-width: 320px; }
.drp-side-col { flex: 0 0 320px; min-width: 280px; }

.drp-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; }
#content .drp-h2 { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--navy-text) !important; text-shadow: none !important; margin: 0 0 10px; }

table.drp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.drp-table thead th { background: var(--navy); color: #fff; font-weight: 700; text-align: center; padding: 7px 8px; }
.drp-table thead th.left { text-align: left; }
.drp-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); text-align: center; vertical-align: middle; color: var(--text); }
.drp-table td.left { text-align: left; }
.drp-table tbody tr:nth-child(odd) { background: var(--bg-card); }
.drp-table tbody tr:nth-child(even) { background: var(--bg-card-alt); }
.drp-table tbody tr:hover { background: var(--row-hover); }
.drp-table tbody tr.on-clock { background: var(--pill-bird-bg); }
.drp-table tbody tr.on-clock:hover { background: var(--pill-bird-bg); filter: brightness(0.96); }
.drp-team-cell { display: inline-flex; align-items: center; gap: 8px; }
.drp-board-player { display: flex; align-items: center; gap: 8px; }

.status-pill { display: inline-block; padding: 2px 8px; border-radius: 9px; font-size: 10.5px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; }
.status-pill.done { background: var(--pill-rs-bg); color: var(--pill-rs-text); border-color: var(--pill-rs-border); }
.status-pill.clock { background: var(--pill-bird-bg); color: var(--pill-bird-text); border-color: var(--pill-bird-border); }
.status-pill.pending { background: var(--pill-bonus-bg); color: var(--pill-bonus-text); border-color: var(--pill-bonus-border); }
.status-pill.forfeit { background: var(--pill-sperre-bg); color: var(--pill-sperre-text); border-color: var(--pill-sperre-border); }
.status-pill.upcoming { background: var(--pill-bg); color: var(--pill-text); border-color: var(--pill-border); }
.drp-via-tag { font-size: 10px; color: var(--text-muted-2); display: block; margin-top: 1px; }

.drp-edit-details { margin-top: 4px; }
.drp-edit-details summary { font-size: 11px; color: var(--rec-blue); cursor: pointer; list-style: none; }
.drp-edit-details summary::-webkit-details-marker { display: none; }
.drp-edit-panel { background: var(--bg-section); border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-top: 6px; font-size: 12px; }
.drp-edit-panel .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }

.drp-avail-item { padding: 5px 4px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text); border-radius: 5px; }
.drp-avail-item:last-child { border-bottom: none; }
.drp-avail-item.clickable { cursor: pointer; padding-left: 8px; padding-right: 8px; }
.drp-avail-item.clickable:hover { background: var(--row-hover); }
.drp-avail-item.selected { background: var(--pill-bird-bg); color: var(--pill-bird-text); font-weight: 700; }
.drp-avail-pos { display: inline-block; min-width: 22px; margin-right: 6px; color: var(--text-muted-2); font-size: 11px; font-weight: 700; text-align: right; }

#content .drp-empty { text-align: center; color: var(--text-muted-2) !important; text-shadow: none !important; font-size: 12.5px; padding: 20px 0; }

/* ===================== Lottery-Reiter (User-Wunsch 2026-09-19) =====================
   Eigene "drp-lot-"-Unterklassen statt Wiederverwendung von standings.php's "stp-"-Klassen (die
   liegen in css/standings.css, das draft.php nicht laedt) - Farbtoken weiterhin aus dyne.css. */
.drp-lot-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 11.5px; color: var(--text-muted); }
.drp-lot-legend .sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

.drp-lot-oddscell { font-weight: 600; }
.drp-lot-oddscell.zero { font-weight: 700; }
.drp-lot-avgcell { font-weight: 700; color: var(--navy-text); }

.drp-lot-admin-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }

.drp-lot-revealgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 6px; }
.drp-lot-card { background: var(--bg-section); border: 1px solid var(--border); border-radius: 8px; padding: 10px 8px; text-align: center; }
.drp-lot-card.pending { opacity: .5; }
.drp-lot-card .pickno { font-size: 10.5px; font-weight: 700; color: var(--text-muted-2); text-transform: uppercase; letter-spacing: .04em; }
.drp-lot-card .logo { width: 100px; height: 100px; object-fit: contain; margin: 4px auto; display: block; }
.drp-lot-card .drp-team-cell { justify-content: center; margin-top: 2px; }
.drp-lot-diff { font-size: 11px; font-weight: 700; margin-top: 2px; }
.drp-lot-card .drp-lot-diff { margin-top: 2px; }
.drp-lot-diff.up { color: var(--good-text); }
.drp-lot-diff.down { color: var(--bad-text); }
.drp-lot-diff.flat { color: var(--text-muted-2); }

.drp-lot-resultgroup { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); background: var(--bg-section) !important; }

/* Protection-Kurzlabel ("Top 1"/"Top 4"/"Top 5"/"Top 8") im Endergebnis, rechts vom Team-Chip -
   User-Wunsch 2026-09-19 (ersetzt den urspruenglichen reinen Farbpunkt, keine Legende mehr noetig). */
.drp-lot-protlabel { font-size: 10.5px; font-weight: 700; margin-left: 6px; }

/* "Hoeher gelost, aber durch Protection abgerutscht"-Hinweis - rechts neben dem Protection-Label
   (User-Wunsch 2026-09-19), gleiche Amber-Token wie .drp-admin-bar. */
.drp-lot-demoted-pill { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 600; color: var(--amber-text); background: var(--amber-bg); border: 1px solid var(--amber-border); border-radius: 5px; padding: 1px 6px; }

@media (max-width: 720px) {
	.drp-page { padding: 16px 14px 24px; }

	/* "Am Zug"-Logo+Chip linksbuendig, Timer rechtsbuendig daneben (User-Wunsch 2026-09-16) -
	   die drei Zwischen-Wrapper werden per display:contents "plattgeklopft", damit Logo-Spalte
	   und Timer-Box (die im Markup zwei Ebenen auseinanderliegen) als direkte Flex-Geschwister im
	   selben .drp-clock-grid landen und sich per order/flex-basis neu anordnen lassen. Der Rest
	   der "Am Zug"-Spalte (Auswahl/Spectator-Hinweis) sowie "Letzter Pick" ruecken je auf eine
	   eigene volle Zeile darunter (flex-basis:100% erzwingt den Umbruch).
	*/
	.drp-clock-left, .drp-onclock-cols, .drp-onclock-col:not(.drp-lastpick-col) { display: contents; }
	.drp-onclock-col:not(.drp-lastpick-col) > .drp-pick-heading { order: 1; flex-basis: 100%; }
	.drp-onclock-col:not(.drp-lastpick-col) > .drp-onclock-logocol { order: 2; }
	.drp-timer-box { order: 3; align-self: flex-start; margin-left: auto; }
	.drp-onclock-col:not(.drp-lastpick-col) > .drp-hint,
	.drp-onclock-col:not(.drp-lastpick-col) > .drp-select-block,
	.drp-onclock-col:not(.drp-lastpick-col) > .drp-spectator-note { order: 4; flex-basis: 100%; }
	.drp-lastpick-col { order: 5; flex-basis: 100%; }

	.drp-layout { flex-direction: column; }
	.drp-side-col { flex-basis: auto; width: 100%; }

	.drp-col-runde, .drp-col-status { display: none; }
	.drp-table td.left .team-chip { display: none; }
	.drp-edit-details .drp-edit-label { display: none; }
	.drp-edit-details summary { font-size: 15px; }
	.drp-player-forename, .drp-player-name { display: block; }
}