/* ==========================================================================
   Redesign 2026 — Bet Centar listing (/bet-centar/), screens 11a / 11a2.
   All values from css/design-tokens.css. Mobile-first; desktop at 1024px.
   ========================================================================== */

.kl-fixtures {
  max-width: 1360px;
  margin: 0 auto;
  padding: var(--kl-sp-16) var(--kl-sp-16) var(--kl-sp-24) var(--kl-sp-16);
  background: var(--kl-surface);
  min-height: 60vh;
}

/* Owner: the listing is a full WHITE page (like the match page), not the grey
   "card on canvas" desktop device. League cards carry their own 1px borders,
   so separation still reads on white. Since the site-wide canvas went white
   (global.css `body:has(.kl-appbar)`, owner 2026-08-02) global already sets the
   same value, so the local override that used to sit here was removed. */

/* --- Page head -------------------------------------------------------- */
/* .kl-page-title and .kl-page-lead now live in global.css — three sheets
   carried their own identical copy. */
.kl-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kl-sp-16);
}

/* Detalji view toggle (link styled as switch) */
.kl-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--kl-sp-8);
  font: 600 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-text-2);
  text-decoration: none;
  flex-shrink: 0;
}

.kl-toggle-track {
  width: 32px;
  height: auto;
  border-radius: var(--kl-r-pill);
  background: var(--kl-border-strong);
  padding: 2px;
  display: inline-flex;
  align-items: center;
  transition: background var(--kl-dur-short) var(--kl-ease);
}

.kl-toggle-track.is-on {
  background: var(--kl-blue);
  justify-content: flex-end;
}

.kl-toggle-knob {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--kl-surface);
  box-shadow: 0 1px 2px rgba(20, 23, 28, 0.2);
}

/* --- Date navigation --------------------------------------------------- */
/* Day picker on the left, the Detalji toggle pinned to the right end of the
   same row (owner 2026-08-21; Uživo moved down beside the status rail). */
.kl-datenav {
  display: flex;
  align-items: stretch;
  gap: var(--kl-sp-8);
  margin-top: var(--kl-sp-12);
}
/* The toggle is shorter than the day chips — centre it against them. */
.kl-datenav .kl-view-toggle {
  align-self: center;
  margin-left: auto;
}
/* Kept in the DOM so its box still claims width in the row — .kl-datenav-days
   is flex:1 1 auto and would stretch to fill the space this leaves otherwise
   (e.g. the Uskoro tab, which has nothing to show a detailed view of). */
.kl-datenav .kl-view-toggle.is-hidden { visibility: hidden; }

/* Arrows are bordered rounded buttons sitting between the day chips (reference
   layout, owner 2026-08-12). Fixed 24px height rather than stretching to the
   chips (owner 2026-08-25) — with a definite cross-size, align-self: stretch
   would be inert anyway, so it is gone rather than left as a rule that looks
   like it does something.
   The glyph inside is an SVG (kl_icon_chevron), not a ‹ / › character: a text
   glyph sits on its font's baseline and cannot be optically centred by flex
   alignment, which is what left it sitting low in the box. */
.kl-datenav-arrow {
  width: 32px;
  height: 24px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-8);
  color: var(--kl-text-4);
  line-height: 1;
  text-decoration: none;
}

.kl-datenav-arrow.is-disabled { color: var(--kl-text-disabled); opacity: 0.5; }

/* Day picker = both arrows + the strip, moving as one unit. On a phone it takes
   the rest of the row (unchanged); the desktop cap lives in the 1024px block. */
.kl-datenav-days {
  flex: 1 1 auto;
  min-width: 0;
  /* Leaves room for what shares the row (owner 2026-08-25) instead of the strip
     growing until it pushes a sibling out. Hard cap on a phone: past ~204px the
     single day chip just stretches, and the Uživo chip beside it loses room. */
  max-width: 204px;
  display: flex;
  align-items: stretch;
  gap: var(--kl-sp-8);
}


.kl-datenav-strip {
  /* One day only (owner 2026-08-18): the strip fills the row between the arrows
     and each chip is a full strip-width, so exactly one day shows and it stretches
     to fill. The arrows step to the prev/next day; scroll snaps to chip edges. */
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  gap: var(--kl-sp-8);
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.kl-datenav-strip::-webkit-scrollbar { display: none; }

/* One day only (owner 2026-08-18, reconfirmed 2026-08-25): each chip is a
   full strip-width so exactly one day shows at rest, no visible scrollbar —
   the arrows step to the prev/next day. Day + date read inline on one line
   within that width now instead of stacked (owner 2026-08-25). */
.kl-datechip {
  box-sizing: border-box;
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  border-radius: var(--kl-r-10);
  padding: var(--kl-sp-4) var(--kl-sp-8);
  background: none;
  scroll-snap-align: start;
  text-decoration: none;
  white-space: nowrap;
}

/* Weekday reads as a small uppercase eyebrow ahead of the date (owner
   2026-08-21: full names, replacing the three-letter abbreviations). Absent
   on today's chip — "Danas" is the whole label there. */
.kl-datechip small {
  font: 600 9px var(--kl-font-ui);
  color: var(--kl-text-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}

.kl-datechip time {
  font: 700 var(--kl-fs-12) var(--kl-font-display);
  color: var(--kl-text-4);
  line-height: 1.2;
}

/* One-day strip (owner 2026-08-18): the selected day is marked by the blue
   text only — the chip border is gone (owner 2026-08-21), so no border cue. */
.kl-datechip.is-active { background: none; }
.kl-datechip.is-active small { color: var(--kl-navy-text); }
.kl-datechip.is-active time { color: var(--kl-blue); }

/* Today stays findable even when it isn't the selected view — on Uživo no day is
   selected, and without this the strip gives no clue where "now" sits. Weaker
   than .is-active on purpose: a marker, not a selection (owner 2026-08-02). */
.kl-datechip.is-today:not(.is-active) time { color: var(--kl-blue); }

/* Uživo is not a filter crossing days (there is no such thing as "live on
   Thursday"), so it sits beside the status rail instead of in it — at the
   right end of the rail's row, where the Detalji toggle used to be. Stretched
   to the rail's height and on the rail's 12px radius so the two read as one
   control group (owner 2026-08-21). Visually it is the old segmented-control
   item, kept intact: grey track, red dot, "Uživo", count badge. */
.kl-datechip--live {
  flex: 0 0 auto;
  /* the base chip's min-width is for day chips only — the pill is content-width */
  min-width: 0;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--kl-sp-6);
  padding: var(--kl-sp-8) var(--kl-sp-10);
  border: 0;
  border-radius: var(--kl-r-12);
  background: var(--kl-surface-3);
}
/* In the util row: push it to the right end and stretch it to the rail's
   height (align-items on .kl-fx-util is center). */
.kl-fx-util .kl-datechip--live {
  margin-left: auto;
  align-self: stretch;
}
.kl-datechip--live .kl-live-label {
  font: 600 12px var(--kl-font-ui);
  line-height: 1;
  color: var(--kl-text-2);
}
.kl-datechip--live .kl-live-count {
  font: 700 9px var(--kl-font-ui);
  line-height: 1;
  color: var(--kl-red);
  background: var(--kl-surface);
  border-radius: var(--kl-r-pill);
  padding: 3px 6px;
}
.kl-datechip--live.is-active { background: var(--kl-red-tint); }
.kl-datechip--live.is-active .kl-live-label { color: var(--kl-red); font-weight: 700; }
/* Nothing in play: stays tappable (people tap it to check) but drops the alarm
   colours and the pulse, so a quiet afternoon doesn't shout. */
.kl-datechip--live.is-empty .kl-live-count { color: var(--kl-text-3); }
.kl-datechip--live.is-empty .kl-seg-livedot {
  background: var(--kl-text-disabled);
  animation: none;
}

/* Utility row between the day controls and the listing: the status rail (or,
   on dated views, the "Vrati na danas" link) on the left, the Uživo pill on
   the right (owner 2026-08-21 — it took the Detalji toggle's old spot; the
   toggle moved up to the day row). */
.kl-fx-util {
  display: flex;
  align-items: center;
  gap: var(--kl-sp-8);
  margin-top: var(--kl-sp-12);
}
/* The chips take the free space; the Uživo pill keeps the right end whether
   the left slot holds the chips or the "Vrati na danas" link. */
.kl-fx-util .kl-seg { flex: 1 1 auto; min-width: 0; margin-top: 0; }

.kl-datenav-today {
  text-align: right;
}

.kl-datenav-today a {
  font: 600 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-blue);
  text-decoration: none;
}


/* --- Segmented tabs ----------------------------------------------------- */
/* Today-only status chips: Sve · Uskoro · Završeno. Uživo is not one of them
   — it sits beside the rail at the right end of this row (owner 2026-08-21). */
.kl-seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--kl-sp-4);
  background: var(--kl-surface-3);
  border-radius: var(--kl-r-12);
  padding: var(--kl-sp-4);
  margin-top: var(--kl-sp-12);
}

.kl-seg-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--kl-sp-4);
  font: 600 12px var(--kl-font-ui);
  color: var(--kl-text-2);
  padding: 7px 0;
  text-align: center;
  text-decoration: none;
  border-radius: 9px;
}

.kl-seg-item.is-active {
  font-weight: 700;
  color: var(--kl-ink);
  background: var(--kl-surface);
  box-shadow: var(--kl-shadow-sm);
}

/* Under Uživo none of the three is selected — the selection sits on the pill in
   the day strip. Dim the whole control so it reads as available-but-inactive
   rather than as a segmented control that lost its selection; hover brings it
   back to full strength to confirm it is still live. Owner 2026-08-02. */
.kl-seg.is-muted {
  opacity: 0.7;
  transition: opacity var(--kl-dur-short) var(--kl-ease);
}
.kl-seg.is-muted:hover,
.kl-seg.is-muted:focus-within { opacity: 1; }

.kl-seg-livedot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--kl-red);
  animation: klLivePulse 1.6s ease-in-out infinite;
}

/* Match count next to a status chip. Desktop only: on a phone the three chips
   already fill the row and the numbers push the labels into ellipsis. */
.kl-seg-count {
  display: none;
  font: 700 9px var(--kl-font-ui);
  color: var(--kl-red);
  background: var(--kl-red-tint);
  border-radius: var(--kl-r-pill);
  padding: 1px 5px;
}

@keyframes klLivePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* --- Listing / league groups ------------------------------------------- */
.kl-fixtures-content { margin-top: var(--kl-sp-16); }

.kl-listing {
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-8);
}

.kl-league { display: flex; flex-direction: column; gap: var(--kl-sp-8); }

.kl-league-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kl-sp-8);
}

.kl-league-id {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.kl-league-id img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: contain;
  background: var(--kl-surface-3);
  flex-shrink: 0;
}

/* Two stacked lines beside the badge: competition (+ count), then country. */


/* The country flag fills its circle rather than letterboxing. */
.kl-league-flag { object-fit: cover; }

/* International competitions show their own crest here instead of the globe.
   A flag is a rectangle and fills the badge happily; a crest is a tall shape
   that has to be shown whole, or the circle crops the middle band out of it. */
.kl-league-flag.is-crest { object-fit: contain; background: transparent; }

/* Stands in for a missing flag — same 20px slot as the badge it replaces. */
.kl-league-ini {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--kl-navy);
  color: var(--kl-on-dark);
  font: 800 8px var(--kl-font-display);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* League name keeps its bold display type; it truncates before the count. */

/* Country is the quiet second line under the competition name. */

/* Match count sits beside the league name, always — with the groups now
   folding by default it answers "is it worth opening this one", which is
   exactly when it is needed (owner 2026-08-06). It used to appear only while
   collapsed. */

/* --- League collapse toggle (chevron on the right) --------------------- */
.kl-league-head {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: var(--kl-sp-8) var(--kl-sp-12) var(--kl-sp-2);
  /* Transparent border reserved so only its colour animates on collapse. */
  border: 1px solid transparent;
  border-radius: var(--kl-r-14);
}

.kl-league-head:focus-visible {
  outline: 2px solid var(--kl-blue);
  outline-offset: 3px;
}



/* Collapsible body: its height is animated in JS (measured px ⇄ 0) so the
   collapse is smooth and exactly content-height; overflow hides clipped rows. */
.kl-league-collapse { overflow: hidden; }

.kl-league.kl-collapsed .kl-league-toggle svg { transform: rotate(180deg); }

/* Collapsed head adopts the 11e card look (only the animatable props change). */
.kl-league.kl-collapsed .kl-league-head {
  padding: var(--kl-sp-8) var(--kl-sp-12);
  border-color: var(--kl-border);
  background: var(--kl-surface-2);
}

.kl-league.kl-collapsed { gap: 0; }

/* Transitions are enabled only after the initial collapsed state is applied
   (JS adds .kl-fx-anim), so restored-collapsed leagues don't animate on load. */
.kl-fx-anim .kl-league { transition: gap var(--kl-dur-medium) var(--kl-ease); }

.kl-fx-anim .kl-league-head {
  transition: padding var(--kl-dur-medium) var(--kl-ease),
              background var(--kl-dur-medium) var(--kl-ease),
              border-color var(--kl-dur-medium) var(--kl-ease);
}

.kl-fx-anim .kl-league-collapse {
  transition: height var(--kl-dur-medium) var(--kl-ease);
}

@media (prefers-reduced-motion: reduce) {
  .kl-fx-anim .kl-league,
  .kl-fx-anim .kl-league-head,
  .kl-fx-anim .kl-league-collapse,
  .kl-league-toggle svg { transition: none; }
}

/* --- Compact rows (11a) -------------------------------------------------- */
.kl-league-rows {
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-14);
  overflow: hidden;
}

.kl-fx-row {
  display: flex;
  align-items: center;
  gap: var(--kl-sp-10);
  padding: var(--kl-sp-12) var(--kl-sp-14);
  text-decoration: none;
  transition: background var(--kl-dur-short) var(--kl-ease);
}

.kl-fx-row:hover { background: var(--kl-surface-2); }
.kl-fx-row + .kl-fx-row { border-top: 1px solid var(--kl-divider); }

/* Left column — the match's status: the placeholder before kick-off, then the
   live minute / FT (owner 2026-08-06). */
.kl-fx-status {
  min-width: 20px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* Pre-kick-off placeholder. Quiet on purpose: it marks the slot a "favourite"
   control will take later, and must not compete with the live minute that
   replaces it. */
.kl-fx-pre {
  font: 700 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-text-disabled);
  line-height: 1;
}

/* Right column — kick-off time, replaced by the score once the match starts.
   Fixed width so the two read straight down a mixed listing. */
.kl-fx-end {
  width: 34px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}

.kl-fx-time { font: 700 var(--kl-fs-11) var(--kl-font-ui); color: var(--kl-ink); text-align: center; }

.kl-fx-live { font: 700 10px var(--kl-font-display); color: var(--kl-red); text-align: center; }

.kl-fx-live-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--kl-red);
  animation: klLivePulse 1.6s ease-in-out infinite;
}

.kl-fx-flag { font: 700 10px var(--kl-font-display); color: var(--kl-text-3); }

.kl-fx-teams {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.kl-fx-team {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.kl-fx-team img {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--kl-surface-3);
}

.kl-fx-team-name {
  font: 600 12px var(--kl-font-ui);
  color: var(--kl-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kl-fx-score {
  width: 34px;   /* same slot as .kl-fx-end — the time and the score share it */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  text-align: center;
}

.kl-fx-score b {
  font: 700 12px var(--kl-font-display);
  color: var(--kl-ink);
}

.kl-fx-score.is-live b { color: var(--kl-red); }

.kl-fx-star { color: var(--kl-amber); flex-shrink: 0; }

.kl-fx-chevron {
  font: 600 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-text-disabled);
  flex-shrink: 0;
}

/* --- Detailed cards (11a2) ----------------------------------------------- */
.kl-league-cards {
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-10);
}

.kl-fxd-card {
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-14);
  padding: var(--kl-sp-12) var(--kl-sp-14);
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.kl-fxd-plain {
  display: flex;
  align-items: center;
  gap: var(--kl-sp-10);
  text-decoration: none;
}

.kl-fxd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px 18px 18px 18px 28px;
  column-gap: var(--kl-sp-6);
  align-items: stretch;
  text-decoration: none;
}

/* Cup ties that went past 90 minutes carry one more period column (ET) between
   2P and the score. Only those cards get it — an always-on ET column would be
   an empty stripe down every league listing. */
.kl-fxd-grid.has-et {
  grid-template-columns: minmax(0, 1fr) 18px 18px 18px 18px 18px 28px;
}

.kl-fxd-head {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 0 6px;
}

.kl-fxd-head .kl-fx-time { font: 700 var(--kl-fs-11) var(--kl-font-ui); }

.kl-fxd-col {
  font: 600 8px var(--kl-font-ui);
  color: var(--kl-text-4);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 0 6px;
}

.kl-fxd-grid .kl-fx-team { padding: 6px 0; }

.kl-fxd-cell {
  font: 700 var(--kl-fs-12) var(--kl-font-display);
  color: var(--kl-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 0;
}

/* Corners (KR) + cards (ŽK) sit at the same muted weight as the half-goal
   counts (1P/2P), leaving the full-time score as the only emphasised number. */
.kl-fxd-cell.is-half, .kl-fxd-cell.is-count { color: var(--kl-text-2); }

.kl-fxd-cell.is-score {
  font-weight: 800;
  background: var(--kl-surface-3);
}

.kl-fxd-cell.is-score.is-top { border-radius: var(--kl-r-6) var(--kl-r-6) 0 0; }
.kl-fxd-cell.is-score.is-bottom { border-radius: 0 0 var(--kl-r-6) var(--kl-r-6); }

/* Red means live, and only live (owner 2026-08-25). A finished or postponed
   match is a settled fact, not an alert — FT / AET / PEN / ODG / OTK keep the
   quiet .kl-fx-flag grey the compact rows already use. */
.kl-fxd-head .kl-fx-live { color: var(--kl-red); }
.kl-fxd-head .kl-fx-live-dot { background: var(--kl-red); }

.kl-fxd-red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  color: var(--kl-on-dark);
  font: 700 9px var(--kl-font-ui);
  flex-shrink: 0;
  background: var(--kl-red);
}

.kl-fxd-goals {
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-6);
  border-top: 1px solid var(--kl-divider);
  padding-top: var(--kl-sp-10);
}

.kl-fxd-goals-row { display: flex; gap: var(--kl-sp-4); }

.kl-fxd-goals-team {
  width: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--kl-text-4);
}

.kl-fxd-goals-team span {
  font: 700 var(--kl-fs-10) var(--kl-font-ui);
  letter-spacing: 0.04em;
}

.kl-fxd-goals-list {
  flex: 1;
  font: 400 12px var(--kl-font-ui);
  color: var(--kl-text);
  line-height: 1.5;
}

.kl-fxd-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kl-sp-8);
  border-top: 1px solid var(--kl-divider);
  padding-top: var(--kl-sp-10);
}

.kl-fxd-chips { display: flex; gap: var(--kl-sp-6); flex-wrap: wrap; }

.kl-fxd-chip {
  font: 700 var(--kl-fs-11) var(--kl-font-ui);
  color: var(--kl-ink);
  border: 1px solid var(--kl-border-strong);
  border-radius: var(--kl-r-pill);
  padding: 5px 12px;
  white-space: nowrap;
}

/* Auto-graded on finished matches (kl-fixtures-render.php): correct tips turn
   green, missed ones mute out — mirrors the legacy prediction-won/missed. */
.kl-fxd-chip--won {
  color: var(--kl-green);
  background: var(--kl-green-tint);
  border-color: var(--kl-green-tint);
}
.kl-fxd-chip--missed {
  color: var(--kl-text-disabled);
  background: var(--kl-surface);
  border-color: var(--kl-border);
}

/* Original site badges on fixture cards (kl-fixtures-render.php → kl_fx_badge).
   .premium-badge is ported from kl-match.css (not loaded here); .prediction-
   badge is styled in global.css. */
.premium-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px;
  background: rgb(255, 232, 194);
  flex-shrink: 0;
}

/* "T" — one of our tipsters has posted a tip on this fixture. Same 20×20 chip
   geometry as .prediction-badge so the two sit as a pair. */
.kl-tip-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border-radius: 4px;
  background: var(--kl-blue-soft);
  color: var(--kl-primary-legacy);
  font: 500 11px var(--kl-font-ui);
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Badge slot. Always emitted, and in the compact rows always the width of one
   badge, so the score column lands on one vertical line whether the row carries
   a badge or not. In the detailed card's foot the badge sits at the end of a
   right-aligned row, so no reserved width is needed there. */
.kl-fx-badges {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.kl-fx-row .kl-fx-badges {
  width: 20px;
  justify-content: flex-end;
}

/* --- Empty state / loading ----------------------------------------------- */
.kl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kl-sp-12);
  padding: var(--kl-sp-40) var(--kl-sp-20);
  text-align: center;
  color: var(--kl-text-disabled);
}

.kl-empty p {
  font: 400 var(--kl-fs-14) var(--kl-font-ui);
  color: var(--kl-text-2);
  margin: 0;
  line-height: 1.5;
}

.kl-loading[hidden] { display: none; }

.kl-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--kl-sp-10);
  padding: var(--kl-sp-16);
  font: 500 var(--kl-fs-13) var(--kl-font-ui);
  color: var(--kl-text-2);
}

.kl-loading-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--kl-border);
  border-top-color: var(--kl-blue);
  border-radius: 50%;
  animation: klSpin 0.8s linear infinite;
}

@keyframes klSpin { to { transform: rotate(360deg); } }

/* --- Desktop -------------------------------------------------------------- */
@media (min-width: 1024px) {
  .kl-fixtures { padding: var(--kl-sp-28) var(--kl-sp-40) var(--kl-sp-48) var(--kl-sp-40); }


  .kl-seg {
    display: inline-grid;
    grid-template-columns: repeat(3, 116px);
  }
  /* Content-sized, not stretched, so the rail's box is exactly the day
     picker's width in the row above (owner 2026-08-21) — the fixed 3×116px
     chips already define the track. */
  .kl-fx-util .kl-seg { flex: 0 0 auto; }

  .kl-seg-count { display: inline-block; }

  /* The day selector owns its own full-width row (the status chips live in the
     utility row below, with the Uživo pill), so the strip has room for the
     whole window instead of sharing the line. */
  /* Since 2026-08-21 the whole picker is exactly the width of the status rail
     in the row below: rail = 3 × 116px chips + 2 gaps + 2 paddings. The arrows
     keep their 36px; the strip takes the remainder. Chips are content-width
     (owner 2026-08-25), so the strip usually shows more than one at this size. */
  .kl-datenav-strip { flex: 1 1 0; width: auto; }
  .kl-datechip time { color: var(--kl-text-2); }
  /* No desktop .is-active override at all — it made the selected day solid blue
     (mobile shows a light-blue tint) and, because the Uživo pill shares the
     .kl-datechip base class, it also painted a selected Uživo blue instead of
     red. The base rules now hold at every width: day = blue tint, live = red
     tint. Owner 2026-08-02. */
  .kl-datechip.is-today:not(.is-active) time { color: var(--kl-blue); }

  .kl-datechip--live { flex: 0 0 auto; padding: var(--kl-sp-10) var(--kl-sp-14); background: var(--kl-surface-3); }

  /* Desktop: the day picker on the left, the Detalji toggle at the right end
     of the row (owner 2026-08-21). */
  .kl-datenav { justify-content: space-between; }
  /* Fixed to the status rail's width so the two rows line up (owner 2026-08-21);
     content-sized, NOT capped at a percentage — a 40% ceiling on a column
     narrowed by the Lige rail once pushed the second arrow outside the box
     (owner 2026-08-12). */
  .kl-datenav-days {
    flex: 0 0 auto;
    gap: var(--kl-sp-8);
    /* Desktop shows three days, so the phone cap must not clamp it. */
    max-width: none;
    width: calc(3 * 116px + 2 * var(--kl-sp-4) + 2 * var(--kl-sp-4));
  }

  .kl-datenav-arrow {
    width: 36px;
    color: var(--kl-text-2);
  }

  /* Single-column league list — match cards run full width (owner: cleaner;
     leaves room for a future league sidebar + full league pages). */
  .kl-listing {
    display: flex;
    flex-direction: column;
    gap: var(--kl-sp-16);
  }

  .kl-fx-row { padding: var(--kl-sp-12) var(--kl-sp-16); }
}