/* ============================================================================
   ut-lineups.css — Postave (lineups) PHOTO-PITCH.
   Ported verbatim from css/tip-details-new.css so utakmica-new's Postave matches
   tip-details exactly (owner 2026-07-27). Rendered by sections/bet-centar/lineups.php
   (.pitch__* markup). Loaded LAST by utakmica-new.php so these rules win same-
   specificity ties against the .ut-page * reset. Hardcoded pitch colors are
   intentional (lineup exemption — do not tokenise).
   ============================================================================ */

.lineups-field { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; min-width: 0; max-width: 100%; }

.lineups-team { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 10px 12px; color: var(--kl-ink); border: 1px solid var(--kl-border); box-sizing: border-box; }
.lineups-team__logo { width: 22px; height: 22px; object-fit: contain; flex: 0 0 22px; }
.lineups-team__name { font-weight: 500; font-size: 14px; }
.lineups-team__formation { margin-left: auto; font-size: 13px; opacity: 0.85; }
.lineups-team--home { flex: 1 1 50%; order: 1; border-radius: 8px 0 0; }
.lineups-team--away { flex: 1 1 50%; order: 2; border-radius: 0 8px 0 0; flex-direction: row-reverse; text-align: right; }
.lineups-team--away .lineups-team__formation { margin-left: 0; margin-right: auto; }

.pitch { flex: 1 1 100%; order: 3; display: flex; flex-direction: row; min-width: 0; max-width: 100%; min-height: 360px; padding: 12px 0; box-sizing: border-box; border-radius: 0 0 8px 8px; position: relative; overflow: hidden; background: repeating-linear-gradient(90deg, var(--kl-pitch-green) 0, var(--kl-pitch-green) 48px, var(--kl-pitch-green-2) 48px, var(--kl-pitch-green-2) 96px); }
.pitch::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--kl-on-dark-30); }
.pitch::after { content: ""; position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; border: 2px solid var(--kl-on-dark-30); border-radius: 50%; transform: translate(-50%, -50%); }

.pitch__half { flex: 1 1 0; display: flex; min-width: 0; position: relative; z-index: 1; }
.pitch__half--home { flex-direction: row; }
.pitch__half--away { flex-direction: row-reverse; }
.pitch__half--home::before, .pitch__half--away::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 58%; border: 2px solid var(--kl-on-dark-30); pointer-events: none; }
.pitch__half--home::before { left: 0; border-left: 0; border-radius: 0 6px 6px 0; }
.pitch__half--away::before { right: 0; border-right: 0; border-radius: 6px 0 0 6px; }
.pitch__half--home::after, .pitch__half--away::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 16px; height: 30%; border: 2px solid var(--kl-on-dark-30); pointer-events: none; }
.pitch__half--home::after { left: 0; border-left: 0; border-radius: 0 4px 4px 0; }
.pitch__half--away::after { right: 0; border-right: 0; border-radius: 4px 0 0 4px; }

.pitch__line { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: space-around; gap: 6px; min-width: 0; }
.pitch__player { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 74px; max-width: 100%; text-align: center; }
.pitch__avatar { position: relative; width: 32px; height: 32px; flex: 0 0 32px; }
.pitch__photo { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--kl-on-dark); background: var(--kl-surface); }
.pitch__num { font-weight: 700; color: rgba(255,255,255,0.75); }
.pitch__name { max-width: 74px; font-size: 10px; color: var(--kl-on-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: var(--kl-scrim-50) 0 1px 2px; }

/* Klupa (bench) strip — sits between the pitch and the coach cards. Carries the
   substitutes so live event markers have somewhere to land for players who
   aren't on the pitch (owner 2026-08-12). */
.ut-lu-bench { display: flex; gap: var(--kl-sp-12); margin: var(--kl-sp-12) 0; }
.ut-lu-bench-col { flex: 1 1 0; min-width: 0; padding: var(--kl-sp-8); border: 1px solid var(--kl-border); border-radius: var(--kl-r-10); background: var(--kl-surface); }
.ut-lu-bench-head { margin: 0 0 var(--kl-sp-8); font-size: var(--kl-fs-11); font-weight: 600; color: var(--kl-text-3); text-transform: uppercase; letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ut-lu-bench-empty { font-size: var(--kl-fs-12); color: var(--kl-text-3); }
.ut-lu-bench-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ut-lu-sub { display: flex; align-items: center; gap: var(--kl-sp-8); min-width: 0; font-size: var(--kl-fs-12); color: var(--kl-ink); }
.ut-lu-sub-num { flex: 0 0 20px; text-align: center; font-weight: 700; font-size: var(--kl-fs-11); color: var(--kl-text-3); }
.ut-lu-sub-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ut-lu-sub .ut-ev-marks { margin-left: auto; }

/* Live event markers (goal / card / on / off). Same visual language as the
   timeline's .mtl-icon; filled by the poller in utakmica.php. On the pitch they
   float over the avatar, on the bench they sit at the end of the row. */
.ut-ev-marks { display: inline-flex; align-items: center; gap: 2px; }
.pitch__avatar .ut-ev-marks { position: absolute; top: -4px; right: -8px; z-index: 2; }
.ut-ev { display: inline-flex; align-items: center; justify-content: center; font: 700 9px "Red Hat Display", sans-serif; line-height: 1; }
/* The ball is a dark icon and the pitch behind it is dark green, so on its own
   it all but disappeared (owner 2026-08-25). Sitting it on a white disc gives it
   the same contrast the cards get from their own fill. */
.ut-ev.is-goal, .ut-ev.is-og {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  padding: 1.5px;
  border-radius: 50%;
  background: var(--kl-surface);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.ut-ev.is-goal img, .ut-ev.is-og img { width: 100%; height: 100%; display: block; }
.ut-ev b { margin-left: 1px; font-size: 9px; color: var(--kl-on-dark); text-shadow: rgba(0,0,0,0.6) 0 1px 2px; }
.ut-lu-sub .ut-ev b { color: var(--kl-ink); text-shadow: none; }
.ut-ev.is-yellow, .ut-ev.is-red { width: 9px; height: 12px; border-radius: 2px; border: 1px solid rgba(0,0,0,0.15); }
.ut-ev.is-yellow { background: var(--kl-amber-bright); }
.ut-ev.is-red { background: var(--kl-red); }
.ut-ev.is-in, .ut-ev.is-out { width: 13px; height: 13px; border-radius: 50%; background: var(--kl-surface-4); color: var(--kl-text-2); }
.ut-ev.is-in { color: var(--kl-green); }
.ut-ev.is-out { color: var(--kl-red); }

/* Coach cards — restored to the ORIGINAL utakmica lineup styling (28px avatar,
   bordered chip, --kl-* tokens); only the PITCH was meant to change (owner). */
/* Coach block — owner 2026-08-13 picked this card treatment for both the match
   page and the tip page, and asked for the career panel (previously tip-page
   only) on both. Kept in each page sheet rather than promoted to global.css:
   sp2026.css and kl-tip-details.css style the same .sastav__trener names for
   the World Cup pages, so an unscoped global rule would leak a card border onto
   them. Those two copies are flagged for the site-wide pass. */
.lineups-coaches { display: flex; gap: var(--kl-sp-12); margin-top: 0; padding: 0; }
.lineups-coaches .sastav__trener {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: var(--kl-sp-8);
  padding: var(--kl-sp-8); border: 1px solid var(--kl-border); border-radius: var(--kl-r-10);
  background: var(--kl-surface); font-family: "Red Hat Display", sans-serif;
  /* anchors the career panel below */
  position: relative; outline: none;
}
.lineups-coaches .sastav__trener:focus-visible { box-shadow: var(--kl-focus-ring); }

/* Career panel: opens on hover and on keyboard focus (the card is tabbable). */
.sastav__trenerCareer {
  position: absolute; left: 0; right: 0; top: calc(100% + var(--kl-sp-8)); z-index: 5;
  display: grid; gap: var(--kl-sp-8); padding: var(--kl-sp-12);
  border: 1px solid var(--kl-border); border-radius: var(--kl-r-8);
  background: var(--kl-surface); box-shadow: var(--kl-shadow-card);
  opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: opacity var(--kl-dur-medium) var(--kl-ease), transform var(--kl-dur-medium) var(--kl-ease);
}
.sastav__trener:hover .sastav__trenerCareer,
.sastav__trener:focus-within .sastav__trenerCareer { opacity: 1; pointer-events: auto; transform: translateY(0); }
.sastav__trenerCareer > strong { font: 700 var(--kl-fs-12) var(--kl-font-display); color: var(--kl-ink); }
.sastav__trenerCareer ul { display: grid; gap: var(--kl-sp-6); margin: 0; padding: 0; list-style: none; }
/* Club and dates wrap instead of the club name being cut off (owner
   2026-08-25): the panel is narrow, and "Borussia Mönchengladbach" next to
   "2019 - danas" never fit on one line, so the half that carries the meaning
   was the half that got the ellipsis. Wrapped, the dates drop to their own line
   under the club — a single item on a space-between line sits at the start. */
.sastav__trenerCareer li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px var(--kl-sp-8); min-width: 0; font: 500 var(--kl-fs-12) var(--kl-font-ui); color: var(--kl-text); }
.sastav__trenerCareer li span { min-width: 0; }
.sastav__trenerCareer li small { color: var(--kl-text-4); white-space: nowrap; flex: 0 0 auto; }
.sastav__trenerCareer p { margin: 0; font: 400 var(--kl-fs-12) var(--kl-font-ui); color: var(--kl-text-3); }
@media (prefers-reduced-motion: reduce) { .sastav__trenerCareer { transition: none; } }
.sastav__trenerImg { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: 0 0 28px; }
.sastav__trenerMain { display: flex; flex-direction: column; min-width: 0; }
.sastav__trenerMain span { font-size: var(--kl-fs-11); color: var(--kl-text-3); }
.sastav__trenerMain strong { font-size: var(--kl-fs-13); color: var(--kl-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Expected-lineups (1xBet) numbered-circle pitch. Copied from global.css because
   the naked .ut-page * reset strips its background/border/padding on a tie, so
   the pale F1F6F2 pitch never showed on the match page. Loaded last → wins. */
.kl-luc-forms { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; font: 500 12px var(--kl-font-ui); color: var(--kl-text-2); }
.kl-luc-forms b { font-weight: 800; color: var(--kl-ink); }
.kl-luc-sep { color: var(--kl-text-2); }
/* min-width: 0, plus an EXPLICIT width: 100% on the pitch — the pitch must
   always resolve to the field's real width; left at its own ~370px
   max-content width a 5-player defensive line pushes past a narrower field
   and .kl-luc-field's overflow:hidden clips it there instead of the line
   actually fitting (owner report 2026-08-25, live: Valencia-Real Betis 5-4-1).
   Desktop lays the pitch out LEFT TO RIGHT (home half on the left, like the
   confirmed photo pitch); the vertical stack is the mobile layout in the
   max-width:768px MQ below. */
.kl-luc-pitch { position: relative; display: flex; flex-direction: row; gap: 8px; padding: 12px 16px; background: var(--kl-pitch); border: 1px solid var(--kl-border); border-radius: 16px; min-width: 0; width: 100%; min-height: 360px; }
.kl-luc-pitch::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 50%; width: 1px; background: var(--kl-pitch-line); }
.kl-luc-pitch::after { content: ""; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; border: 1px solid var(--kl-pitch-line); border-radius: 50%; transform: translate(-50%, -50%); }
.kl-luc-line { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-around; gap: 6px; padding: 8px 0; flex: 1 1 0; min-width: 0; }
.kl-luc-p { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 62px; min-width: 0; }
.kl-luc-circle { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; box-sizing: border-box; font: 700 11px var(--kl-font-display); font-variant-numeric: tabular-nums; }
.kl-luc-circle.is-home { background: var(--kl-navy); color: var(--kl-pitch-num); border: 2px solid #fff; }
.kl-luc-circle.is-away { background: #fff; color: var(--kl-ink); border: 2px solid var(--kl-navy-text); }
.kl-luc-name { max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font: 500 9.5px var(--kl-font-ui); color: var(--kl-text); }
/* Framed expected pitch — the confirmed lineups' container around the light
   numbered pitch. Desktop mirrors the photo pitch: both team headers share the
   top edge and the pitch runs left to right beneath them. Mobile stacks: home
   header, vertical pitch, away header (MQ below). Scoped to .kl-luc-field
   (two classes) so these hold against the plain .lineups-team rules and their
   mobile MQs at BOTH widths. */
.kl-luc-field { display: flex; flex-wrap: wrap; flex-direction: row; align-items: stretch; gap: 0; border: 1px solid var(--kl-border); border-radius: 12px; overflow: hidden; }
.kl-luc-field .lineups-team { border: 0; border-radius: 0; }
.kl-luc-field .lineups-team--home { order: 1; flex: 1 1 50%; border-bottom: 1px solid var(--kl-border); }
.kl-luc-field .lineups-team--away { order: 2; flex: 1 1 50%; border-bottom: 1px solid var(--kl-border); flex-direction: row-reverse; text-align: right; }
.kl-luc-field .lineups-team--away .lineups-team__formation { margin-left: 0; margin-right: auto; }
.kl-luc-field .kl-luc-pitch { order: 3; flex: 1 1 100%; border: 0; border-radius: 0; }
/* A side with no XI: its "sastav još nije poznat" line grows to roughly the
   missing half's width instead of squeezing into one player-sized column. */
.kl-luc-line.kl-luc-empty { flex-grow: 4; justify-content: center; }
.kl-luc-empty span { max-width: 200px; font: 500 12px var(--kl-font-ui); color: var(--kl-text-2); text-align: center; white-space: normal; }

@media (max-width: 768px) {
  .lineups-field { flex-direction: column; }
  .kl-luc-field { flex-direction: column; }
  .kl-luc-field .lineups-team--home { flex: 1 1 auto; border-bottom: 1px solid var(--kl-border); }
  .kl-luc-field .lineups-team--away { order: 3; flex: 1 1 auto; border-top: 1px solid var(--kl-border); border-bottom: 0; flex-direction: row; text-align: left; }
  .kl-luc-field .lineups-team--away .lineups-team__formation { margin-left: auto; margin-right: 0; }
  .kl-luc-field .kl-luc-pitch { order: 2; flex: 0 0 auto; }
  .kl-luc-pitch { flex-direction: column; gap: 14px; padding: 16px 10px; min-height: 0; }
  .kl-luc-pitch::before { top: 50%; bottom: auto; left: 10px; right: 10px; width: auto; height: 1px; }
  .kl-luc-line { flex-direction: row; justify-content: space-around; padding: 0 8px; flex: 0 0 auto; }
  .kl-luc-line.kl-luc-empty { flex-grow: 0; }
  /* Bench stays side-by-side on mobile (owner) — two tighter columns rather
     than one stacked list. */
  .ut-lu-bench { gap: var(--kl-sp-8); }
  .ut-lu-bench-col { padding: var(--kl-sp-8) var(--kl-sp-6); }
  .lineups-team--home { flex: 1 1 100%; border-radius: 8px 8px 0 0; }
  .lineups-team--away { flex: 1 1 100%; order: 3; border-radius: 0 0 8px 8px; flex-direction: row; text-align: left; }
  .lineups-team--away .lineups-team__formation { margin-left: auto; margin-right: 0; }
  .pitch { order: 2; flex-direction: column; border-radius: 0; min-height: 540px; padding: 0 12px; background: repeating-linear-gradient(var(--kl-pitch-green) 0, var(--kl-pitch-green) 48px, var(--kl-pitch-green-2) 48px, var(--kl-pitch-green-2) 96px); }
  .pitch::before { inset: 50% 0 auto; width: auto; height: 2px; }
  .pitch__half--home { flex-direction: column; }
  .pitch__half--away { flex-direction: column-reverse; }
  .pitch__line { flex-direction: row; }
  .pitch__line .pitch__player { width: auto; flex: 1 1 0; min-width: 0; }
  .pitch__line .pitch__name { max-width: 100%; }
  .pitch__half--home::before, .pitch__half--away::before { inset: auto auto auto 50%; transform: translateX(-50%); width: 58%; height: 34px; }
  .pitch__half--home::before { top: 0; border-width: 0 2px 2px; border-style: none solid solid; border-color: transparent var(--kl-on-dark-30) var(--kl-on-dark-30); border-radius: 0 0 6px 6px; }
  .pitch__half--away::before { bottom: 0; border-width: 2px 2px 0; border-style: solid solid none; border-color: var(--kl-on-dark-30) var(--kl-on-dark-30) transparent; border-radius: 6px 6px 0 0; }
  .pitch__half--home::after, .pitch__half--away::after { inset: auto auto auto 50%; transform: translateX(-50%); width: 30%; height: 16px; }
  .pitch__half--home::after { top: 0; border-width: 0 2px 2px; border-style: none solid solid; border-color: transparent var(--kl-on-dark-30) var(--kl-on-dark-30); border-radius: 0 0 4px 4px; }
  .pitch__half--away::after { bottom: 0; border-width: 2px 2px 0; border-style: solid solid none; border-color: var(--kl-on-dark-30) var(--kl-on-dark-30) transparent; border-radius: 4px 4px 0 0; }
}