/* ===================== freeagent_bid.php + fa_auctions.php ("fab-" prefix) =====================
   Moved out of both pages' near-identical inline <style> blocks 2026-08-11 (continuing the
   page-by-page cleanup, see css/dyne.css's own header for the project). Unlike fap-/plp- (which
   look alike but are genuinely separate per-page classes), fab- is explicitly ONE shared prefix
   for these two sibling pages (fa_auctions.php's own comment: "reuses ... freeagent_bid.php
   rather than a new visual language") — most rules were byte-identical between the two inline
   blocks, so this is one shared file linked by both instead of two near-duplicate files.

   Where the two blocks disagreed, took the union rather than picking one:
   - .fab-page: fa_auctions.php added "position: relative" (needed for its live leading-team-logo
     overlay) on top of freeagent_bid.php's version — harmless addition on freeagent_bid.php too
     (no unpositioned-child layout there depends on .fab-page NOT being a positioning context).
   - .fab-btn:disabled: only existed in fa_auctions.php's copy — kept, inert on freeagent_bid.php
     since it has no disabled .fab-btn elements today, but no reason two pages sharing the same
     component class should have it work differently if one adds a disabled button later.
   Classes used by only one of the two pages (e.g. .fab-tabs / .fab-pill only on freeagent_bid.php;
   .fab-timer- / .fab-admin- / .fab-leadlogo classes only on fa_auctions.php) are simply included
   as-is — inert on the page that doesn't use them. */

.fab-page { max-width: 1360px; margin: 0 auto; background: #ffffff; position: relative; }
.fab-content { padding: 16px 20px 26px; box-sizing: border-box; }
/* Zurueck-Link + Uhrzeit-Anzeige (User-Wunsch 2026-08-10, Uhrzeit nur waehrend FSW/LBR sichtbar
   - siehe $fa_show_clock unten) teilen sich die oberste Zeile der weissen Inhaltsbox statt dass
   die Uhr (wie zunaechst umgesetzt) in der dunklen Nav-Leiste sitzt - User-Wunsch 2026-08-10:
   "rechts oben in der weissen Inhaltsbox". (freeagent_bid.php only) */
.fab-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.fab-topbar p { margin: 0; }
.fab-navclock { font-weight: 700; font-variant-numeric: tabular-nums; color: #66707c; white-space: nowrap; font-size: 12.5px; padding-top: 3px; }
#content .fab-back-link { color: #2c3e50; text-shadow: none; font-size: 12.5px; text-decoration: none; }
#content .fab-back-link:hover { text-decoration: underline; }
#content .fab-msg-error { color: #b00000 !important; text-shadow: none !important; font-size: 13px; background: #fdeceb; border: 1px solid #e79a95; border-radius: 6px; padding: 8px 12px; margin: 0 0 10px; width: fit-content; }
#content .fab-msg-success { color: #1a7a1a !important; text-shadow: none !important; font-size: 13px; background: #e8f8ec; border: 1px solid #9bd6a6; border-radius: 6px; padding: 8px 12px; margin: 0 0 10px; width: fit-content; }

#content .fab-h2 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: #2c3e50 !important; text-shadow: none !important; margin: 20px 0 8px; }
#content .fab-h2:first-child { margin-top: 0; }
#content .fab-title { font-size: 20px; font-weight: 800; color: #1b2733; text-shadow: none; margin: 0 0 10px; }

#content .fab-player-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 2px; }
#content .fab-player-name { font-size: 20px; font-weight: 800; color: #1b2733; text-shadow: none; }
.fab-player-meta { font-size: 12.5px; color: #66707c; }
/* Spielerbild (GM-Wunsch 2026-08-10): identisches Pfad-/Fallback-Muster wie player_profile.php
   ("img/spieler/<img>.png", Fallback "missing.png"), Groesse an den 20px-Namen darueber
   angelehnt statt der kleinen 32px-Tabellenbilder auf freeagents.php. (freeagent_bid.php only) */
.fab-playerpic { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.fab-card { background: #ffffff; border: 1px solid #e2e4e7; border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; }
.fab-hint { font-size: 12.5px; color: #66707c; margin: 0 0 8px; }
.fab-hint:last-child { margin-bottom: 0; }

.fab-tabs { display: inline-flex; background: #1a2733; border-radius: 6px; padding: 3px; gap: 3px; margin: 8px 0 14px; }
.fab-tabs button { font-family: inherit; font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 4px; border: none; background: transparent; color: #c3c9cf; cursor: pointer; }
.fab-tabs button.active { background: #2c3e50; color: #fff; }

/* Spielerbild + grosses Logo des fuehrenden Teams (GM-Wunsch 2026-08-10) - teilen sich die
   Kopfzeile der "Aktuelle Auktion"-Karte: Bild links, Name/Infos in der Mitte, Logo rechts.
   Das Logo wird bei jedem Live-Refresh mitaktualisiert (siehe faUpdateLeadingLogo() weiter
   unten), da sich das fuehrende Team waehrend der Auktion natuerlich aendern kann.
   (fa_auctions.php only) */
.fab-auction-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.fab-auction-head-info { flex: 1 1 220px; min-width: 180px; }
.fab-playerpic-lg { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.fab-leadlogo-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-left: auto; }
.fab-leadlogo { width: 76px; height: 76px; object-fit: contain; flex-shrink: 0; transition: opacity .15s ease; }
.fab-leadlogo-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #66707c; white-space: nowrap; }

.fab-table-wrap { overflow-x: auto; margin-bottom: 14px; }
table.fab-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.fab-table thead th { background: #2c3e50; color: #fff; font-weight: 700; text-align: center; padding: 8px 6px; white-space: nowrap; }
.fab-table thead th.left { text-align: left; padding-left: 12px; }
.fab-table tbody td { padding: 6px 8px; text-align: center; border-bottom: 1px solid #e2e4e7; vertical-align: middle; font-variant-numeric: tabular-nums; }
.fab-table tbody td.left { text-align: left; padding-left: 12px; }
.fab-name-link { color: #2c3e50; font-weight: 600; text-decoration: underline; }
.fab-name-link:hover { color: #1a2733; }
.fab-table tbody tr:nth-child(odd) { background: #fff; }
.fab-table tbody tr:nth-child(even) { background: #f5f6f8; }
.fab-table tbody tr:hover { background: #eaf1f8; }
.fab-table tbody tr.fa-wave-current td { font-weight: 700; }
.fab-table tbody tr.fa-wave-done td { color: #a9b0b8; }

/* Warteschlangen-Tabellen (fsw1/regular/fsw2) sind 3 separate <table>-Elemente mit identischer
   Spaltenstruktur - table-layout:fixed + gemeinsame <colgroup>-Breiten (siehe fa_auctions.php)
   sorgen dafuer, dass die Spalten ueber alle 3 Tabellen hinweg gleich breit sind (GM-Wunsch 2026-08-23). */
table.fab-table.fab-table-queue { table-layout: fixed; }
.fab-table-queue td, .fab-table-queue th { white-space: normal; word-break: break-word; }

/* Mobile (GM-Report 2026-08-23, Screenshot): das obige table-layout:fixed + die %-Colgroup-Breiten
   (fa_auctions.php) quetschen auf schmalen Viewports jede Spalte auf wenige Px zusammen - der
   Tabellenkopf bleibt dabei durch die hoehere Spezifitaet von ".fab-table thead th" (Zeile 71)
   weiterhin white-space:nowrap und läuft dadurch sichtbar über die Zellgrenzen hinweg, statt
   umzubrechen. .fab-table-wrap hat zwar schon overflow-x:auto, kommt aber nicht zum Zug, weil die
   Tabelle selbst width:100% erzwingt. Fix: auf Mobile die Fixed-Breite aufheben und die Tabelle in
   ihrer natuerlichen (breiteren) Groesse rendern lassen - dann scrollt der Wrap sie stattdessen
   seitwaerts, mit lesbarem einzeiligem Header wie am Desktop. */
@media (max-width: 767px) {
	.fab-table-wrap { -webkit-overflow-scrolling: touch; }
	table.fab-table.fab-table-queue { table-layout: auto; width: auto; min-width: 640px; }
	.fab-table-queue col { width: auto !important; }
	.fab-table-queue th, .fab-table-queue td { white-space: nowrap; word-break: normal; }
}

.fab-pill { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 9px; white-space: nowrap; border: 1px solid #c8ccd1; background: #f1eee8; color: #5f5e5a; }
.fab-pill.he { background: #f0e8fb; color: #5a2a92; border-color: #c6a3ec; }
.fab-pill.cap { background: #e7f2ff; color: #0c447c; border-color: #85b7eb; }

/* Gebotsverlauf-Markierung (GM-Wunsch 2026-08-09): fuehrendes Gebot gruen, ueberbotene
   Gebote rot - hell = fremdes Team, dunkel = eigenes Team. Identische Farbwerte wie die
   Gebotsstatus-Faerbung auf freeagents.php/roster.php (design-system.md §1, dort pro
   Spielerzeile "eigenes Team fuehrend/fremd fuehrend"), hier stattdessen pro einzelnem
   Gebotslog-Eintrag "fuehrend/ueberboten" angewendet. */
.fab-table tbody tr.fab-row-lead-foreign, .fab-table tbody tr.fab-row-lead-foreign:hover { background: #e8f8ec; }
.fab-table tbody tr.fab-row-lead-own, .fab-table tbody tr.fab-row-lead-own:hover { background: #2e7d46; color: #fff; }
.fab-table tbody tr.fab-row-outbid-foreign, .fab-table tbody tr.fab-row-outbid-foreign:hover { background: #fdeceb; }
.fab-table tbody tr.fab-row-outbid-own, .fab-table tbody tr.fab-row-outbid-own:hover { background: #b23b30; color: #fff; }
.fab-table tbody tr.fab-row-lead-own .fab-status, .fab-table tbody tr.fab-row-outbid-own .fab-status { color: #fff; }
/* Admin-geloescht (GM-Wunsch 2026-08-19): bleibt im Gebotsverlauf sichtbar statt spurlos zu
   verschwinden, aber deutlich als nicht mehr gueltig erkennbar - grau/durchgestrichen statt
   gruen/rot. */
.fab-table tbody tr.fab-row-deleted, .fab-table tbody tr.fab-row-deleted:hover { background: #f0f0f0; color: #8a8f96; text-decoration: line-through; }
.fab-table tbody tr.fab-row-deleted .fab-hint { text-decoration: none; }

.fab-status { font-weight: 700; }
.fab-status.lead { color: #1d7a30; }
.fab-status.deleted { color: #8a8f96; text-decoration: none; }
.fab-status.outbid { color: #a41f19; }

.fab-btn { font-family: inherit; font-size: 12px; font-weight: 600; padding: 6px 13px; border-radius: 5px; cursor: pointer; border: 1px solid #2c3e50; background: #fff; color: #2c3e50; }
.fab-btn:hover { background: #eef1f4; }
.fab-btn.primary { background: #2c3e50; color: #fff; }
.fab-btn.primary:hover { background: #1a2733; }
.fab-btn.small { padding: 4px 9px; font-size: 11px; }
.fab-btn:disabled { opacity: .4; cursor: default; }
.fab-btn.danger { background: #c0392b; color: #fff; border-color: #c0392b; }
.fab-btn.danger:hover { background: #96291d; border-color: #96291d; }

/* (fa_auctions.php only, admin controls + countdown timer) */
.fab-admin-bar { background: #1a2733; border-radius: 8px; padding: 12px 16px; margin-bottom: 14px; color: #fff; }
.fab-admin-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.fab-admin-row + .fab-admin-row { margin-top: 10px; }
.fab-admin-label { font-size: 12px; }
.fab-admin-bar .fab-btn { border-color: #ffffff; background: transparent; color: #fff; }
.fab-admin-bar .fab-btn:hover { background: rgba(255,255,255,.12); }
.fab-admin-bar .fab-btn.danger { border-color: #e74c3c; background: #c0392b; color: #fff; }
.fab-admin-bar .fab-btn.danger:hover { background: #96291d; }
.fab-admin-bar input[type="number"] { font-family: inherit; font-size: 12px; padding: 5px 7px; border: 1px solid #ccd3da; border-radius: 4px; width: 60px; }

.fab-timer-box { display: inline-block; margin: 10px 0; padding: 10px 24px; border: 2px solid #2c3e50; border-radius: 8px; background: #f4f6f8; text-align: center; }
.fab-timer-label { font-size: 12.5px; color: #66707c; text-transform: uppercase; letter-spacing: .05em; }
.fab-timer-value { font-weight: 800; font-size: 48px; line-height: 1.15; color: #2c3e50; font-variant-numeric: tabular-nums; }
/* Deutlich sichtbarer als die alte 12,5px-graue Version (GM-Wunsch 2026-08-14: "geht sehr unter") -
   fett/gruen wie die Fuehrend-Markierung im Gebotsverlauf, plus kurzer Puls (.flash, per JS bei jedem
   NEU eintreffenden Gebot angestossen) statt nur einer stillen Textaenderung, damit ein frisches Gebot
   auch auffaellt, wenn man gerade nicht direkt hinschaut. */
.fab-timer-bidinfo { font-size: 15px; font-weight: 700; color: #1d7a30; margin-top: 6px; min-height: 19px; transition: color .3s ease; }
.fab-timer-bidinfo:empty { min-height: 0; margin-top: 0; }
.fab-timer-bidinfo.flash { animation: fabBidFlash 1.6s ease-out; }
@keyframes fabBidFlash {
	0% { color: #fff; background: #1d7a30; border-radius: 4px; padding: 2px 8px; }
	100% { color: #1d7a30; background: transparent; padding: 2px 8px; }
}

/* "Wer ist online"-Anzeige (fa_auctions.php only, GM-Wunsch 2026-08-23): Puls-Badge, Klick oeffnet die
   volle Liste (Team-Chip + Nutzername) - siehe faPollPresence() dort. Sitzt oben rechts in der weissen
   Inhaltsbox (position:absolute relativ zu .fab-page, siehe oben) - GENAU die Position, die vorher der
   "Auktionsliste kopieren"-Button hatte, bevor der (GM-Wunsch 2026-08-23, 2. Iteration) in die
   Nav-Leiste umgezogen ist (.fab-nav-right/.fab-navbtn unten). */
.fab-presence-wrap { position: absolute; top: 16px; right: 20px; }
.fab-presence-btn { display: none; align-items: center; gap: 7px; background: #e8f8ec; color: #1a7a1a; font-size: 11.5px; font-weight: 700; font-family: inherit; padding: 5px 11px 5px 9px; border-radius: 20px; border: 1px solid #bfe8c8; cursor: pointer; }
.fab-presence-btn:hover { background: #dff4e4; }
.fab-presence-btn:focus-visible { outline: 2px solid #2c3e50; outline-offset: 2px; }
.fab-presence-dot { width: 7px; height: 7px; border-radius: 50%; background: #2fbf4f; box-shadow: 0 0 0 0 rgba(47,191,79,.55); animation: fabPresencePulse 1.8s infinite; flex: 0 0 auto; }
@keyframes fabPresencePulse {
	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) {
	.fab-presence-dot { animation: none; box-shadow: none; }
}
.fab-presence-caret { font-size: 9px; margin-left: 1px; opacity: .7; }
.fab-presence-pop { position: absolute; top: calc(100% + 8px); right: 0; background: #fff; border: 1px solid #dde1e6; 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; }
.fab-presence-wrap.open .fab-presence-pop { display: block; }
.fab-presence-pop-head { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #8b95a1; padding: 4px 6px 6px; border-bottom: 1px solid #e2e4e7; margin-bottom: 4px; position: sticky; top: 0; background: #fff; }
.fab-presence-pop-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #33404a; padding: 4px 6px; border-radius: 5px; }
.fab-presence-pop-row:hover { background: #f4f6f8; }
.fab-presence-pop-row .gm { color: #66707c; font-weight: 500; }

/* Nav-Leisten-Version des "Auktionsliste kopieren"-Buttons (GM-Wunsch 2026-08-23, 2. Iteration):
   1:1 aus dyneplus.php's .dyp-nav-right/.dyp-navbtn kopiert (heller Pill-Button fuer den dunklen
   Nav-Hintergrund) - siehe faSyncNavLocal() in fa_auctions.php fuer das Breiten-Sync-Muster, das die
   margin-left:auto-Falle aus design-system.md §4 umgeht. */
.fab-nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.fab-navbtn { font: inherit; font-size: 12px; font-weight: 700; border-radius: 5px; padding: 7px 14px; cursor: pointer; border: 1px solid transparent; white-space: nowrap; background: #fff; color: #2c3e50; }
.fab-navbtn:hover { background: #e7ecf1; }
.fab-navbtn:disabled { opacity: .6; cursor: default; }