/* =========================
   Base tokens (light)
   ========================= */
:root {
  --brd: #e5e7eb;
  --pill: #f3f4f6;
  --winner: #d1e7dd;
  --muted: #6b7280;
  --black: #111827;
  --white: #fff;
}

/* =========================
   Core blocks
   ========================= */
.hero-head {
  border: 1px solid var(--brd);
  border-radius: 16px;
  overflow: hidden;
}
.hero-head .ratio > img {
  object-fit: cover;
}

.meta-pill {
  background: var(--pill);
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  font-weight: 600;
  font-size: 0.85rem;
}
.tab-pane {
  padding-top: 1rem;
}

.team-badge {
  background: var(--black);
  color: var(--white);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-weight: 700;
  font-size: 0.8rem;
}

.group-card {
  border: 1px solid var(--brd);
  border-radius: 12px;
}

.match-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-top: 1px dashed var(--brd);
}
.match-row:first-child {
  border-top: none;
}

/* =========================
   Table accents & subtle badges
   ========================= */
.table-success td,
.table-success th {
  border-color: #d1e7dd !important;
}
.bg-success-subtle {
  background: #d1e7dd !important;
}
.text-success-emphasis {
  color: #0f5132 !important;
}
.bg-warning-subtle {
  background: #fff3cd !important;
}
.text-warning-emphasis {
  color: #664d03 !important;
}
.bg-dark-subtle,
.bg-secondary-subtle {
  background: #e2e3e5 !important;
}
.text-dark-emphasis {
  color: #141619 !important;
}
.text-secondary-emphasis {
  color: #41464b !important;
}

/* =========================
   Playoff bracket — layout & cards
   ========================= */
.ko-col {
  min-width: 260px;
}
.ko-card {
  border: 1px solid var(--brd);
  border-radius: 14px;
  padding: 0.6rem 0.8rem;
  background: var(--white);
  box-shadow: 0 1px 0 rgba(17, 24, 39, 0.04);
}
.ko-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.3rem;
}
.ko-badge {
  font-size: 0.7rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: var(--pill);
}
.ko-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.34rem 0.5rem;
  border-radius: 0.45rem;
}
.ko-row + .ko-row {
  margin-top: 0.22rem;
}
.winner,
.ko-row.winner {
  background: var(--winner);
}
.ko-team {
  font-weight: 600;
}
.ko-score {
  min-width: 24px;
  text-align: right;
  font-weight: 700;
}
.ko-muted {
  color: var(--muted);
  font-size: 0.85rem;
}

/* =========================
   Bracket grid
   ========================= */
.bracket-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 28px;
  align-items: start;
}
.round {
  position: relative;
  min-height: 420px;
}
.round > .slot {
  position: relative;
}

/* =========================
   SVG connectors (curved + glow)
   ========================= */
.bracket-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.bracket-svg path {
  stroke: #94a3b8;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  filter: url(#bracketGlow);
}

/* =========================
   Sponsors grid
   ========================= */
.sponsor-card {
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transition: transform 0.12s ease;
  background: #fff;
}
.sponsor-card:hover {
  transform: translateY(-2px);
}
.sponsor-logo-wrap {
  height: 110px;
  background: #f6f7f9;
  border-radius: 12px;
  display: grid;
  place-items: center;
}
.sponsor-logo {
  max-height: 80px;
  max-width: 90%;
  object-fit: contain;
}
@media (min-width: 768px) {
  .sponsor-logo-wrap {
    height: 130px;
  }
  .sponsor-logo {
    max-height: 100px;
  }
}

/* =========================
   Live pulse/button
   ========================= */
.live-pulse {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1080;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
  animation: livePulse 1.6s infinite;
}
@keyframes livePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(220, 53, 69, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
  }
}
.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dc3545;
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
  animation: liveDotPulse 1.4s infinite;
}
@keyframes liveDotPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(220, 53, 69, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
  }
}

/* =========================
   Medals (final style with emoji)
   ========================= */
.medal-gold,
.medal-silver,
.medal-bronze {
  position: relative;
  border-radius: 0.5rem;
  padding: 0.1rem 0.35rem;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
}
.medal-gold {
  background-image: linear-gradient(
    90deg,
    rgba(255, 215, 0, 0.25),
    rgba(255, 215, 0, 0)
  );
}
.medal-silver {
  background-image: linear-gradient(
    90deg,
    rgba(192, 192, 192, 0.25),
    rgba(192, 192, 192, 0)
  );
  font-weight: bold;
}
.medal-bronze {
  background-image: linear-gradient(
    90deg,
    rgba(205, 127, 50, 0.25),
    rgba(205, 127, 50, 0)
  );
}
.medal-gold::after,
.medal-silver::after,
.medal-bronze::after {
  content: "🏅";
  font-size: 0.9em;
  margin-left: 0.4rem;
  vertical-align: middle;
}
.medal-gold::after {
  filter: hue-rotate(40deg) saturate(1.6) brightness(1.15);
}
.medal-silver::after {
  filter: grayscale(0.1) brightness(1.05);
  content: "🥈";
}
.medal-bronze::after {
  content: "🥉";
}

/* keep medal readability in dark */
:root:not([data-theme="light"]) .medal-gold,
:root:not([data-theme="light"]) .medal-silver,
:root:not([data-theme="light"]) .medal-bronze {
  color: black;
}
:root:not([data-theme="light"]) .ko-card .medal-gold,
:root:not([data-theme="light"]) .ko-card .medal-silver,
:root:not([data-theme="light"]) .ko-card .medal-bronze {
  border-radius: 6px;
  padding: 0.05rem 0.3rem;
  background-color: color-mix(in oklab, #ffffff 6%, transparent) !important;
}

/* =========================
   Players modal & small utilities
   ========================= */
#playersModal .modal-header .btn-close {
  margin: -0.25rem -0.25rem -0.25rem auto;
}
#scorersTBody .text-warning {
  font-size: 1.2em;
}
.player-del-btn {
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0.8;
}
.player-del-btn:hover {
  opacity: 1;
}
[data-can-manage="0"] .js-admin-only {
  display: none !important;
}
.img-fallback {
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  font-size: clamp(16px, 2.2vw, 28px);
  background: #f1f3f5;
  color: #212529;
  width: 100%;
  height: 100%;
}

/* =========================
   Bracket canvas & columns
   ========================= */
#bracketWrap {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable both-edges;
  -webkit-overflow-scrolling: touch;
}
#bracketWrap.drag-scroll {
  cursor: grab;
}
#bracketWrap.drag-scroll.dragging {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

#bracketSvg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
#bracketSvg path {
  fill: none;
  stroke: rgba(13, 110, 253, 0.5);
  stroke-width: 2;
  filter: url(#bracketGlow);
}

#koBracket.row {
  flex-wrap: nowrap !important;
  align-items: stretch;
  gap: 0.75rem;
}
#koBracket > [class*="col-"] {
  display: flex;
  flex: 0 0 320px;
  max-width: 320px;
}
@media (max-width: 768px) {
  #koBracket > [class*="col-"] {
    flex-basis: 280px;
    max-width: 280px;
  }
}

.bracket-col {
  display: grid;
  grid-template-rows: auto 1fr;
  width: 100%;
  min-height: 100%;
}
.round-head {
  font-weight: 600;
  color: var(--bs-secondary-color);
  margin-bottom: 0.5rem;
  padding-left: 0.25rem;
}
#koBracket .round {
  display: flex;
  height: 100%;
}
#koBracket .round > .slots {
  display: flex;
  flex-direction: column;
  gap: 0;
}
#koBracket .slot {
  min-height: 76px;
  margin-block: 12px;
  display: grid;
  place-items: center;
}
#koBracket .slot > * {
  width: 100%;
}

.bronze-section {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--bs-border-color);
}
.bronze-section .round-head {
  font-weight: 600;
  color: var(--bs-secondary-color);
  margin-bottom: 0.5rem;
}

.tz-banner.alert {
  background: linear-gradient(to bottom, #f8fafc, #f3f4f6);
  border-color: var(--brd);
  color: #111827;
  border-radius: 12px;
}

/* Finale stack alignment */
#koBracket .round[data-round="2"] {
  justify-content: flex-start;
}
#koBracket .round[data-round="2"] > .slots {
  justify-content: flex-start;
  margin-bottom: 0;
}
#koBracket .round[data-round="2"] > .slots::after {
  display: none;
  content: none;
}
#koBracket .round[data-round="2"] .slot:last-child {
  margin-bottom: 0;
}

/* =========================
   Skupine (Groups): mobile-first table cards
   ========================= */
@media (max-width: 576px) {
  #skupine .standings-table thead {
    display: none;
  }
  #skupine .standings-table,
  #skupine .standings-table tbody,
  #skupine .standings-table tr,
  #skupine .standings-table td {
    display: block;
    width: 100%;
  }
  #skupine .standings-table tr {
    border: 1px solid var(--brd);
    border-radius: 12px;
    padding: 0.6rem 0.7rem;
    margin-bottom: 0.6rem;
    background: var(--white);
  }
  #skupine .standings-table td:first-child {
    font-weight: 700;
    font-size: 1rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px dashed var(--brd);
    margin-bottom: 0.35rem;
  }
  #skupine .standings-table td:not(:first-child) {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.5rem;
    align-items: center;
    padding: 0.2rem 0;
    border: 0;
  }
  #skupine .standings-table td:not(:first-child)::before {
    content: attr(data-label);
    font-size: 0.78rem;
    color: var(--muted);
  }
  #skupine .standings-table td:not(:first-child) > span {
    justify-self: end;
    font-weight: 700;
  }
  #skupine .standings-table tr.table-success {
    background: var(--g-success-row) !important;
    border-color: var(--g-success-brd) !important;
  }
  #skupine .list-group-item {
    padding: 0.5rem 0.6rem !important;
  }
  #skupine .match-row {
    padding: 0.4rem 0.5rem;
  }
}
/* sticky first col on small tablets */
@media (min-width: 577px) and (max-width: 768px) {
  #skupine .table-responsive {
    overflow-x: auto;
  }
  #skupine .standings-table th:first-child,
  #skupine .standings-table td:first-child {
    position: sticky;
    left: 0;
    background: inherit;
    z-index: 1;
  }
}

/* Matches: 2-row compact on mobile */
@media (max-width: 576px) {
  .list-group-item.js-match:not(.d-none):not(.tz-hide) {
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0.25rem 0.5rem;
  }
  .list-group-item.js-match > .small:first-child {
    grid-column: 1/2;
    grid-row: 1/3;
  }
  .list-group-item.js-match .js-kickoff {
    display: inline-block;
    width: 100%;
    margin: 0 0 0.2rem 0;
  }
  .list-group-item.js-match > .small.text-nowrap {
    grid-column: 2/3;
    grid-row: 2/3;
    justify-self: end;
  }
}

/* =========================
   Light/Dark card baselines
   ========================= */
.card,
.group-card,
.ko-card {
  background: #fff;
  border-color: var(--brd);
}
.group-card,
.ko-card {
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

/* =========================
   DARK MODE — COLOR OVERRIDES ONLY
   ========================= */
:root:not([data-theme="light"]) {
  --dm-surface: #0f141b;
  --dm-surface-2: #121822;
  --dm-border: #273244;
  --dm-text: #e6edf3;
  --dm-muted: #9aa7b8;
  --dm-badge: #192231;
  --dm-head: #141b25;
  --dm-success: #22c55e;
  --dm-warning: #f59e0b;
}
:root:not([data-theme="light"]) .text-muted-2 {
  color: var(--dm-muted) !important;
}
:root:not([data-theme="light"]) .hero-head,
:root:not([data-theme="light"]) .card,
:root:not([data-theme="light"]) .group-card,
:root:not([data-theme="light"]) .ko-card {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}
:root:not([data-theme="light"]) .hero-head .card-body {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text) !important;
}
:root:not([data-theme="light"]) .meta-pill,
:root:not([data-theme="light"]) .ko-badge {
  background-color: var(--dm-badge) !important;
  border: 1px solid var(--dm-border) !important;
  color: var(--dm-text) !important;
}
:root:not([data-theme="light"]) .team-badge {
  background-color: var(--dm-badge) !important;
  color: var(--dm-text) !important;
}

:root:not([data-theme="light"]) .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--dm-text);
  --bs-table-border-color: var(--dm-border);
}
:root:not([data-theme="light"]) .table thead,
:root:not([data-theme="light"]) .table-light {
  background-color: var(--dm-head) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

:root:not([data-theme="light"]) .table-success td,
:root:not([data-theme="light"]) .table-success th,
:root:not([data-theme="light"]) .winner {
  background-color: color-mix(
    in oklab,
    var(--dm-success) 16%,
    transparent
  ) !important;
  border-color: color-mix(
    in oklab,
    var(--dm-success) 28%,
    var(--dm-border)
  ) !important;
}
:root:not([data-theme="light"]) .bg-success-subtle {
  background-color: color-mix(
    in oklab,
    var(--dm-success) 12%,
    transparent
  ) !important;
}
:root:not([data-theme="light"]) .text-success-emphasis {
  color: color-mix(in oklab, var(--dm-success) 86%, white) !important;
}
:root:not([data-theme="light"]) .bg-warning-subtle {
  background-color: color-mix(
    in oklab,
    var(--dm-warning) 12%,
    transparent
  ) !important;
}
:root:not([data-theme="light"]) .text-warning-emphasis {
  color: color-mix(in oklab, var(--dm-warning) 88%, white) !important;
}
:root:not([data-theme="light"]) .bg-dark-subtle,
:root:not([data-theme="light"]) .bg-secondary-subtle {
  background-color: var(--dm-badge) !important;
}
:root:not([data-theme="light"]) .text-dark-emphasis,
:root:not([data-theme="light"]) .text-secondary-emphasis {
  color: var(--dm-muted) !important;
}
:root:not([data-theme="light"]) .list-group-item {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

:root:not([data-theme="light"]) .nav-tabs {
  --bs-nav-tabs-border-color: var(--dm-border);
  --bs-nav-tabs-link-hover-border-color: var(--dm-border);
  border-color: var(--dm-border);
}
:root:not([data-theme="light"]) .nav-tabs .nav-link {
  color: var(--dm-muted) !important;
}
:root:not([data-theme="light"]) .nav-tabs .nav-link.active {
  color: var(--dm-text) !important;
  background-color: var(--dm-head) !important;
  border-color: var(--dm-border) !important;
}

:root:not([data-theme="light"]) .btn-dark {
  background-color: #1f2937 !important;
  color: #fff !important;
  border-color: var(--dm-border) !important;
}
:root:not([data-theme="light"]) .btn-outline-dark {
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
  background-color: transparent !important;
}

:root:not([data-theme="light"]) .modal-content {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}
:root:not([data-theme="light"]) .form-label {
  color: var(--dm-muted) !important;
}
:root:not([data-theme="light"]) .form-control {
  background-color: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}
:root:not([data-theme="light"]) .form-control::placeholder {
  color: color-mix(in oklab, var(--dm-muted) 70%, transparent) !important;
}
:root:not([data-theme="light"]) .match-row {
  border-top-color: var(--dm-border) !important;
}
:root:not([data-theme="light"]) .bracket-svg path {
  stroke: #94a3b8 !important;
  opacity: 0.55 !important;
}

:root:not([data-theme="light"]) .tz-banner.alert {
  background: color-mix(in oklab, #0f141b 88%, #1b2432 12%);
  border-color: var(--dm-border);
  color: var(--dm-text);
}

/* DARK — KO card polish */
:root:not([data-theme="light"]) .ko-card,
:root:not([data-theme="light"]) .ko-card.card {
  border-radius: 14px !important;
  border: 1px solid var(--dm-border) !important;
  background: linear-gradient(180deg, #1a2330 0%, #121a24 100%) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28) !important;
  color: var(--dm-text) !important;
}
:root:not([data-theme="light"]) .ko-card .ko-head {
  color: var(--dm-muted) !important;
}
:root:not([data-theme="light"]) .ko-card .badge.bg-dark,
:root:not([data-theme="light"]) .ko-card .text-bg-dark,
:root:not([data-theme="light"]) .ko-card .badge.bg-secondary {
  background-color: #0b1220 !important;
  color: var(--dm-text) !important;
  border: 1px solid var(--dm-border) !important;
}
:root:not([data-theme="light"]) .ko-card .ko-row {
  background: transparent !important;
  border-radius: 8px;
}
:root:not([data-theme="light"]) .ko-card .ko-row:hover {
  background: color-mix(in oklab, var(--dm-muted) 10%, transparent) !important;
}
:root:not([data-theme="light"]) .ko-card .ko-row.winner {
  background: color-mix(
    in oklab,
    var(--dm-success) 16%,
    transparent
  ) !important;
  border: 1px solid color-mix(in oklab, var(--dm-success) 26%, var(--dm-border)) !important;
}
:root:not([data-theme="light"]) .ko-card .ko-team {
  color: var(--dm-text) !important;
}
:root:not([data-theme="light"]) .ko-card .ko-score {
  color: #e9eef5 !important;
}
:root:not([data-theme="light"]) .ko-card.bg-light,
:root:not([data-theme="light"]) .ko-card .card-body.bg-light {
  background: transparent !important;
}
.ko-card.border-0 {
  border-width: 1px !important;
}

/* =========================
   DARK MODE — Skupine & rezultati
   ========================= */
:root:not([data-theme="light"]) #skupine {
  --g-surface: #101721;
  --g-head: #0f141c;
  --g-border: #273244;
  --g-text: #e6edf3;
  --g-muted: #9aa7b8;
  --g-success: #22c55e;
  --g-success-row: color-mix(in oklab, var(--g-success) 14%, var(--g-surface));
  --g-success-brd: color-mix(in oklab, var(--g-success) 26%, var(--g-border));
  --g-success-pill: color-mix(in oklab, var(--g-success) 18%, transparent);
  --g-success-pill-txt: color-mix(in oklab, var(--g-success) 88%, white);
  --g-warn: #f59e0b;
  --g-warn-pill: color-mix(in oklab, var(--g-warn) 16%, transparent);
  --g-warn-pill-txt: color-mix(in oklab, var(--g-warn) 90%, white);
}
:root:not([data-theme="light"]) #skupine .card {
  background-color: var(--g-surface) !important;
  border-color: var(--g-border) !important;
  color: var(--g-text) !important;
}
:root:not([data-theme="light"]) #skupine .text-muted {
  color: var(--g-muted) !important;
}
:root:not([data-theme="light"]) #skupine .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--g-text);
  --bs-table-border-color: var(--g-border);
}
:root:not([data-theme="light"]) #skupine thead.table-light,
:root:not([data-theme="light"]) #skupine thead.table-light th,
:root:not([data-theme="light"]) #skupine thead.table-light td {
  background-color: var(--g-head) !important;
  color: var(--g-text) !important;
  border-color: var(--g-border) !important;
}
:root:not([data-theme="light"]) #skupine .table > :not(caption) > * > * {
  background-color: transparent !important;
  color: var(--g-text) !important;
  border-bottom-color: var(--g-border) !important;
}
:root:not([data-theme="light"]) #skupine tr.table-success,
:root:not([data-theme="light"]) #skupine tr.table-success > * {
  background-color: var(--g-success-row) !important;
  border-color: var(--g-success-brd) !important;
}
:root:not([data-theme="light"]) #skupine .badge.bg-success {
  background-color: var(--g-success-pill) !important;
  color: var(--g-success-pill-txt) !important;
  border: 1px solid var(--g-success-brd) !important;
}
:root:not([data-theme="light"]) #skupine .bg-success-subtle {
  background-color: var(--g-success-pill) !important;
}
:root:not([data-theme="light"]) #skupine .text-success-emphasis {
  color: var(--g-success-pill-txt) !important;
}
:root:not([data-theme="light"]) #skupine .badge.bg-warning,
:root:not([data-theme="light"]) #skupine .bg-warning-subtle {
  background-color: var(--g-warn-pill) !important;
}
:root:not([data-theme="light"]) #skupine .text-warning-emphasis {
  color: var(--g-warn-pill-txt) !important;
}
:root:not([data-theme="light"]) #skupine .list-group-item {
  background-color: color-mix(
    in oklab,
    var(--g-surface) 86%,
    black 14%
  ) !important;
  color: var(--g-text) !important;
  border-color: var(--g-border) !important;
}

/* =========================
   Tournament standings (tz-standings)
   ========================= */
.tz-standings {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--brd, rgba(0, 0, 0, 0.12));
  background: var(--white);
  font-size: 0.92rem;
}
:root:not([data-theme="light"]) .tz-standings {
  background: var(--g-surface);
  border-color: var(--g-border);
}
.tz-standings thead {
  background: linear-gradient(to bottom, #f8f9fa, #f1f3f5);
  font-weight: 600;
  color: #333;
}
:root:not([data-theme="light"]) .tz-standings thead {
  background: linear-gradient(to bottom, var(--g-surface2), var(--g-surface));
  color: var(--g-fg);
}
.tz-standings th,
.tz-standings td {
  padding: 0.55rem 0.6rem;
  text-align: center;
  vertical-align: middle;
  border-color: var(--brd, rgba(0, 0, 0, 0.1));
}
.tz-standings .col-rank {
  width: 36px;
  font-weight: 600;
}
.tz-standings .col-team {
  text-align: left;
  font-weight: 600;
  color: #222;
}
:root:not([data-theme="light"]) .tz-standings .col-team {
  color: var(--g-fg);
}
.tz-standings .col-gd,
.tz-standings .col-pts {
  font-weight: 700;
}
.tz-standings .col-pts {
  color: #007bff;
}
:root:not([data-theme="light"]) .tz-standings .col-pts {
  color: var(--g-accent);
}
.tz-standings td:not(:first-child),
.tz-standings th:not(:first-child) {
  border-left: 1px solid rgba(0, 0, 0, 0.06);
}
:root:not([data-theme="light"]) .tz-standings td:not(:first-child),
:root:not([data-theme="light"]) .tz-standings th:not(:first-child) {
  border-left-color: var(--g-border);
}
.tz-standings tbody tr:hover {
  background: rgba(0, 123, 255, 0.05);
}
:root:not([data-theme="light"]) .tz-standings tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}
.tz-standings .table-success {
  background: rgba(0, 255, 102, 0.15) !important;
}

/* mobile: hide GF/GA/Badge and tighten */
@media (max-width: 576px) {
  .tz-standings th.col-gf,
  .tz-standings td.col-gf,
  .tz-standings th.col-ga,
  .tz-standings td.col-ga,
  .tz-standings th.col-badge,
  .tz-standings td.col-badge {
    display: none;
  }
  .tz-standings th,
  .tz-standings td {
    padding: 0.45rem 0.4rem;
    font-size: 0.88rem;
  }
}

/* =========================
   Mobile (global)
   ========================= */
@media (max-width: 768px) {
  .bracket-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* =========================
   Extra KO card gradients (light baseline)
   ========================= */
.ko-card,
.ko-card.card {
  border-radius: 14px !important;
  border: 1px solid var(--brd) !important;
  background: linear-gradient(180deg, #fff 0%, #f6f7f9 100%) !important;
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.08) !important;
}

/* === DARK MODE: extra-bright medal chips (stronger hue & contrast) === */
:root:not([data-theme="light"]) .ko-card .medal-gold,
:root:not([data-theme="light"]) .ko-card .medal-silver,
:root:not([data-theme="light"]) .ko-card .medal-bronze {
  background-color: transparent !important; /* remove previous dim wash */
  color: #000 !important; /* max legibility on bright chips */
}

/* vivid, high-alpha gradients */
:root:not([data-theme="light"]) .medal-gold {
  background-image: linear-gradient(
    90deg,
    rgba(255, 215, 0, 0.88),
    rgba(255, 215, 0, 0.42)
  ) !important;
}
:root:not([data-theme="light"]) .medal-silver {
  background-image: linear-gradient(
    90deg,
    rgba(220, 226, 232, 0.9),
    rgba(220, 226, 232, 0.44)
  ) !important;
}
:root:not([data-theme="light"]) .medal-bronze {
  background-image: linear-gradient(
    90deg,
    rgba(205, 127, 50, 0.88),
    rgba(205, 127, 50, 0.4)
  ) !important;
}

/* brighter emoji highlights so they read on dark */
:root:not([data-theme="light"]) .medal-gold::after {
  filter: hue-rotate(40deg) saturate(1.8) brightness(1.6) !important;
}
:root:not([data-theme="light"]) .medal-silver::after {
  filter: grayscale(0) brightness(1.55) !important;
}
:root:not([data-theme="light"]) .medal-bronze::after {
  filter: brightness(1.55) saturate(1.25) !important;
}

/* =========================
   LIGHT MODE — Restore previous medal look
   ========================= */
:root[data-theme="light"] .medal-gold,
:root:not([data-theme]) .medal-gold {
  background: linear-gradient(135deg, #fff6bf, #ffe066) !important;
  border-radius: 0.5rem;
  padding: 0.1rem 0.35rem;
}

:root[data-theme="light"] .medal-silver,
:root:not([data-theme]) .medal-silver {
  background: linear-gradient(135deg, #f1f3f5, #dee2e6) !important;
  border-radius: 0.5rem;
  padding: 0.1rem 0.35rem;
}

:root[data-theme="light"] .medal-bronze,
:root:not([data-theme]) .medal-bronze {
  background: linear-gradient(135deg, #f3d7b6, #e0a88b) !important;
  border-radius: 0.5rem;
  padding: 0.1rem 0.35rem;
}

/* keep your emoji/filters as before in light mode */
:root[data-theme="light"] .medal-gold::after,
:root:not([data-theme]) .medal-gold::after {
  filter: hue-rotate(40deg) saturate(1.6) brightness(1.15);
}
:root[data-theme="light"] .medal-silver::after,
:root:not([data-theme]) .medal-silver::after {
  filter: grayscale(0.1) brightness(1.05);
  content: "🥈";
}
:root[data-theme="light"] .medal-bronze::after,
:root:not([data-theme]) .medal-bronze::after {
  content: "🥉";
}

/* Mobile tabbar: scrollable chips, sticky, pretty */
@media (max-width: 767.98px) {
  .tz-tabs {
    display: flex;
    flex-wrap: nowrap; /* single row */
    overflow-x: auto; /* scroll when needed */
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 8px 10px;
    margin: 0 -12px 6px; /* edge-to-edge feel */
    border: 0; /* remove bootstrap bottom border */
    background: linear-gradient(180deg, #f8fafc, #eef2f7);
    position: sticky;
    top: calc(var(--header-h, 56px) + 0px); /* sits under your navbar */
    z-index: 5;
    scroll-snap-type: x mandatory;
  }
  :root:not([data-theme="light"]) .tz-tabs {
    background: linear-gradient(
      180deg,
      var(--dm-head, #0f141c),
      var(--dm-surface, #0f141b)
    );
  }

  .tz-tabs .nav-item {
    flex: 0 0 auto; /* no stretching, allow scroll */
    scroll-snap-align: start;
  }

  .tz-tabs .nav-link {
    border: 0 !important; /* kill default tab borders */
    background: var(--pill); /* your token */
    color: var(--black);
    border-radius: 999px;
    padding: 0.45rem 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1;
  }
  :root:not([data-theme="light"]) .tz-tabs .nav-link {
    background: var(--dm-badge) !important;
    color: var(--dm-text) !important;
    border: 1px solid var(--dm-border) !important;
  }

  .tz-tabs .nav-link.active {
    background: linear-gradient(
      135deg,
      var(--brand),
      var(--brand-strong)
    ) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  }

  /* Optional: subtle divider below the tabbar */
  .tz-tabs::after {
    content: "";
    display: block;
    height: 1px;
    background: var(--brd, #e5e7eb);
    opacity: 0.6;
    margin-top: 6px;
    margin-left: 12px;
    margin-right: 12px;
  }
}

/* Desktop keeps classic Bootstrap tabs */
@media (min-width: 768px) {
  .tz-tabs {
    border-bottom: 1px solid var(--brd);
  }
}

/* Mobile: keep tab bar in normal flow, no sticking/fixing, no jumps */
@media (max-width: 767.98px) {
  .tz-tabs {
    position: static !important; /* was sticky/fixed before */
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0 0 6px 0; /* regular spacing below */
    /* keep your chip styles: */
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 8px 10px;
    border: 0;
    background: linear-gradient(180deg, #f8fafc, #eef2f7);
    will-change: auto;
    transform: none !important;
  }
  :root:not([data-theme="light"]) .tz-tabs {
    background: linear-gradient(
      180deg,
      var(--dm-head, #0f141c),
      var(--dm-surface, #0f141b)
    );
    border-bottom: 1px solid var(--dm-border);
  }
}

/* Dark mode: make active tab use brand gradient (mobile + desktop) */
:root:not([data-theme="light"]) .nav-tabs .nav-link.active,
:root:not([data-theme="light"]) .tz-tabs .nav-link.active {
  background: linear-gradient(
    135deg,
    var(--brand),
    var(--brand-strong)
  ) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* Also keep hover from dulling it on touch */
@media (hover: hover) {
  :root:not([data-theme="light"]) .nav-tabs .nav-link.active:hover,
  :root:not([data-theme="light"]) .tz-tabs .nav-link.active:hover {
    background: linear-gradient(
      135deg,
      var(--brand),
      var(--brand-strong)
    ) !important;
    color: #fff !important;
  }
}

/* Make hero image look clickable */
.hero-head .ratio {
  cursor: zoom-in;
}

/* Fullscreen lightbox */
.hero-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1085; /* above Bootstrap modals (1055) */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Backdrop */
.hero-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
}

/* Inner content */
.hero-lightbox-inner {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  z-index: 1;
}

/* Image */
.hero-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.5);
}

/* Close button (little X) */
.hero-lightbox-close {
  position: absolute;
  top: -0.75rem;
  right: -0.75rem;
  border: none;
  border-radius: 999px;
  width: 32px;
  height: 32px;
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #000;
  cursor: pointer;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.35);
}

/* Optional: dark theme tweak */
body.dark .hero-lightbox-close {
  background: #111;
  color: #f8f9fa;
}

.hero-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1085; /* above Bootstrap modals */
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
}

.hero-lightbox-inner {
  position: relative;
  z-index: 1;
  /* no fixed size, no overflow – it just wraps the image */
}

.hero-lightbox-img {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.5);
}


.goal-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
}

.goal-home {
  justify-content: flex-start;
  text-align: left;
}

.goal-away {
  justify-content: flex-end;
  text-align: right;
}

.goal-row .minute {
  width: 42px;
  color: #6c757d;
  font-weight: 600;
}

.goal-row .ball {
  font-size: 1.1rem;
}

.goal-row .player {
  font-weight: 600;
}

.goal-row.goal-own .player {
  color: #e15656;
  font-weight: 700;
}


.tz-daybar{
  display:flex;
  gap:.5rem;
  overflow:auto;
  padding:.5rem;
  border:1px solid rgba(0,0,0,.1);
  border-radius:14px;
  background:rgba(255,255,255,.75);
  backdrop-filter: blur(6px);
  position: sticky;
  top: .5rem;
  z-index: 5;
}

.tz-daybtn{
  white-space:nowrap;
  border-radius:999px;
}

.tz-groups-menu {
  position: fixed;
  z-index: 1200;
  min-width: 240px;
  max-width: min(88vw, 320px);
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(12, 15, 20, 0.14);
  background: linear-gradient(135deg, #f4f9ff, #ffffff);
  box-shadow: 0 12px 24px rgba(12, 15, 20, 0.18);
}

.tz-groups-menu .btn {
  border-radius: 10px;
  border: 1px solid rgba(12, 15, 20, 0.14);
  font-weight: 700;
}

.tz-groups-menu .btn:hover {
  background: rgba(106, 169, 255, 0.14);
}

.tz-groups-style-panel {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 1210;
  width: min(360px, calc(100vw - 20px));
  max-height: min(88vh, 820px);
  overflow: auto;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(12, 15, 20, 0.16);
  background: linear-gradient(135deg, #eff6ff, #ffffff);
  box-shadow: 0 18px 36px rgba(12, 15, 20, 0.22);
  color: #0b1b33;
}

.tz-groups-style-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.tz-groups-style-note {
  font-size: 0.76rem;
  color: rgba(12, 15, 20, 0.66);
  margin-bottom: 8px;
}

.tz-groups-style-close {
  border: 0;
  background: transparent;
  color: #0b1b33;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.1rem 0.3rem;
  border-radius: 8px;
}

.tz-groups-style-close:hover {
  background: rgba(59, 130, 246, 0.14);
}

.tz-groups-style-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 0.84rem;
  font-weight: 700;
}

.tz-groups-style-check {
  grid-template-columns: 1fr auto;
}

.tz-groups-style-section {
  margin: 10px 0 6px;
  padding-top: 8px;
  border-top: 1px dashed rgba(12, 15, 20, 0.16);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(12, 15, 20, 0.66);
}

.tz-groups-style-row input[type="range"] {
  width: 150px;
}

.tz-groups-style-row output {
  min-width: 54px;
  text-align: right;
  font-size: 0.76rem;
  color: rgba(12, 15, 20, 0.72);
}

.tz-groups-style-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}

@media (max-width: 767.98px) {
  .tz-groups-style-panel {
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
  }

  .tz-groups-style-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .tz-groups-style-row input[type="range"] {
    width: 100%;
  }

  .tz-groups-style-row output {
    text-align: left;
  }
}

.tz-daybtn.active{
  font-weight:700;
}

.tz-hide { display: none !important; }

/* =========================
   DARK MODE — Daybar (calendar chips)
   ========================= */
:root:not([data-theme="light"]) .tz-daybar{
  border-color: var(--dm-border);
  background: color-mix(in oklab, var(--dm-surface) 86%, black 14%);
  color: var(--dm-text);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* scrollbar polish (WebKit) */
:root:not([data-theme="light"]) .tz-daybar::-webkit-scrollbar{
  height: 10px;
}
:root:not([data-theme="light"]) .tz-daybar::-webkit-scrollbar-track{
  background: transparent;
}
:root:not([data-theme="light"]) .tz-daybar::-webkit-scrollbar-thumb{
  background: color-mix(in oklab, var(--dm-border) 70%, transparent);
  border-radius: 999px;
}
:root:not([data-theme="light"]) .tz-daybar:hover::-webkit-scrollbar-thumb{
  background: color-mix(in oklab, var(--dm-muted) 40%, var(--dm-border));
}

/* pill baseline */
:root:not([data-theme="light"]) .tz-daybtn{
  background: var(--dm-badge);
  color: var(--dm-text);
  border: 1px solid var(--dm-border);
}

/* hover/focus */
@media (hover:hover){
  :root:not([data-theme="light"]) .tz-daybtn:hover{
    background: color-mix(in oklab, var(--dm-muted) 10%, var(--dm-badge));
  }
}
:root:not([data-theme="light"]) .tz-daybtn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand, #0d6efd) 45%, transparent);
}

/* active = brand gradient (matches your tabs) */
:root:not([data-theme="light"]) .tz-daybtn.active{
  background: linear-gradient(135deg, var(--brand), var(--brand-strong));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}

/* optional: slightly stronger sticky separation in dark */
:root:not([data-theme="light"]) .tz-daybar{
  border-bottom-color: color-mix(in oklab, var(--dm-border) 70%, black);
}


/* Losing bracket grid: 2x2 where final spans 2 rows */
#koLosingBracket.lb-grid{
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(240px, 320px);
  grid-template-rows: auto auto;
  column-gap: 40px;
  row-gap: 24px;
  align-items: start;
}

/* place cells */
#koLosingBracket .lb-semi-1 { grid-column: 1; grid-row: 1; }
#koLosingBracket .lb-semi-2 { grid-column: 1; grid-row: 2; }
#koLosingBracket .lb-final  { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

/* da kartice ne "šire" grid */
#koLosingBracket .lb-cell { min-width: 0; }

/* mobile: stack */
@media (max-width: 767.98px){
  #koLosingBracket.lb-grid{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  #koLosingBracket .lb-semi-1,
  #koLosingBracket .lb-semi-2,
  #koLosingBracket .lb-final{
    grid-column: 1;
    grid-row: auto;
    align-self: start;
  }
}


.lb-side-30 { margin-top: .5rem !important; }

/* Losing bracket: nemoj gurat zadnje na dno */
#koLosingBracketWrap .bracket-col{
  display: flex;
  flex-direction: column;
  justify-content: flex-start !important;
  gap: 12px;              /* umjesto ogromnog praznog prostora */
  height: auto !important;
  min-height: 0 !important;
}

#koLosingBracketWrap .lb-side-30{
  margin-top: 8px !important;   /* ili 0 */
}
#koLosingBracketWrap .lb-grid > [class*="col-"]{
  align-items: flex-start;
}

/* ===== LOSING BRACKET: R30 odmah ispod finala ===== */
#koLosingBracketWrap .lb-grid > [class*="col-"]{
  align-items: flex-start !important; /* d-flex col ne smije stretchat */
}

/* kolona se slaže odozgo, bez guranja na dno */
#koLosingBracketWrap .bracket-col{
  display: flex;
  flex-direction: column;
  justify-content: flex-start !important;
  align-items: stretch;
  height: auto !important;
  min-height: 0 !important;
  gap: 12px; /* kontrolirani razmak */
}

/* najbitnije: runda NE SMIJE biti flex:1 (to ti radi ogroman prazni prostor) */
#koLosingBracketWrap .bracket-col > .round{
  flex: 0 0 auto !important;
  min-height: 0 !important;
}

/* sekcija za 7. mjesto */
#koLosingBracketWrap .lb-side-30{
  margin-top: 8px !important;  /* ili 0 ako želiš skroz blizu */
}


/* da losing bracket linije budu iste kao main (bootstrap primary) */
#koLosingBracketWrap { 
  color: var(--bs-primary) !important; 
}

/* ili direktno na path (još sigurnije) */
#losingSvg path {
  stroke: var(--bs-primary) !important;
}

/* LB scroll area */
#lbBracketWrap{
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  position: relative; /* za SVG overlay */
}

/* LB columns: uvijek horizontalno */
#koLosingBracket.lb-grid{
  display:flex;
  flex-wrap:nowrap;
  gap:16px;
  align-items:flex-start;
  min-width:max-content;
}

/* širina jedne LB kolone (kao main kolona) */
#koLosingBracket .lb-col{
  flex:0 0 320px;
  max-width:320px;
}


#koLosingBracketWrap .ko-card {
  margin-bottom: 6px;
}


/* samo losing bracket */
#koLosingBracketWrap .slots {
  gap: 12px !important; /* ili 16px ako hoćeš još više zraka */
}



.tz-po-subtabs .nav-link{
  padding:.35rem .75rem;
  border-radius:999px;
}
.tz-po-subtabs .nav-link.active{
  font-weight:600;
}


/* Losing bracket: nema horizontal scrolla */
#lbBracketWrap {
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

/* neka se grid ne širi u nedogled nego stane u širinu */
#koLosingBracket.lb-grid {
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 40 i 20 u 2 kolone */
  gap: 16px;
}

/* 7. mjesto sekcija ispod finala */
#lbSide30 {
  margin-top: 12px;
}


/* MOBILE: side-scroll samo za Losing bracket */
@media (max-width: 768px) {
  #lbBracketWrap{
    overflow-x: auto !important;
    overflow-y: auto !important;             
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;     
  }

  /* malo “lufta” da swipe radi ljepše */
  #koLosingBracket{
    min-width: max-content !important;
  }
}

.tz-embed-top{
  padding: 12px 14px;
  border-radius: 14px;
}

.tz-embed-icon{
  width: 54px;
  height: 54px;
  border-radius: 12px;
  object-fit: cover;
  flex: 0 0 54px;
}

/* desni blok rasteže sav prostor do kraja */
.tz-embed-right{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* dropdown FULL width (tj. od ikonice do kraja) */
.tz-embed-select{
  width: 100% !important;
  height: 44px;
  border-radius: 12px;
}

/* naslov/meta da se ne razliju */
#embedTitle, #embedMeta{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tz-embed-footer-logo{
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: contain;
  background: #fff; /* da ne izgleda “prazno” oko loga ako ima prozirno */
}



/* =========================
   TEAM MODAL – polish
   ========================= */

/* malo ugodniji modal */
#teamModal .modal-dialog {
  max-width: 640px;
}

#teamModal .modal-content {
  border-radius: 16px;
  border: 0;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

#teamModal .modal-header {
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding: 14px 16px;
  background: rgba(0,0,0,.02);
}

#teamModal .modal-title {
  font-weight: 700;
  letter-spacing: .2px;
}

#teamModal .modal-body {
  padding: 16px;
}

#teamModal .modal-footer {
  border-top: 1px solid rgba(0,0,0,.08);
  padding: 12px 16px;
  background: rgba(0,0,0,.02);
}

#teamModal #teamModalContact {
  font-weight: 600;
}

/* players list: malo kompaktnije i urednije */
#teamPlayersList.list-group {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
}

#teamPlayersList .list-group-item {
  border: 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding: 10px 12px;
}

#teamPlayersList .list-group-item:last-child {
  border-bottom: 0;
}

#teamPlayersList .badge {
  font-weight: 600;
}

/* inline add player form */
#teamModal #addPlayerFirst,
#teamModal #addPlayerLast {
  border-radius: 12px;
}

#teamModal #btnSaveNewPlayer {
  border-radius: 12px;
  font-weight: 600;
}

/* =========================
   INVITE BLOCK
   ========================= */

#teamModal .invite-box {
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  padding: 12px;
  background: rgba(0,0,0,.02);
}

#teamModal .invite-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

#teamModal .invite-title {
  font-weight: 700;
  letter-spacing: .2px;
}

#teamModal .invite-status {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  color: rgba(0,0,0,.75);
  white-space: nowrap;
}

/* akcije: gumbi u liniji */
#teamModal .invite-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

/* output: input + copy button */
#teamModal .invite-output {
  display: flex;
  gap: 10px;
  align-items: center;
}

#teamModal #inviteLink {
  flex: 1;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  padding: 10px 12px;
  background: #fff;
  font-size: 13px;
}

#teamModal .invite-msg {
  margin-top: 8px;
  font-size: 13px;
  color: rgba(0,0,0,.7);
}

/* tvoji custom gumbi: .btn.primary / .btn.danger */
#teamModal .btn.primary {
  background: #111;
  color: #fff;
  border: 1px solid #111;
  border-radius: 12px;
  font-weight: 700;
  padding: 8px 12px;
}

#teamModal .btn.primary:hover {
  background: #000;
  border-color: #000;
}

#teamModal .btn.danger {
  background: rgba(220, 53, 69, 0.08);
  color: #dc3545;
  border: 1px solid rgba(220, 53, 69, 0.35);
  border-radius: 12px;
  font-weight: 700;
  padding: 8px 12px;
}

#teamModal .btn.danger:hover {
  background: rgba(220, 53, 69, 0.14);
  border-color: rgba(220, 53, 69, 0.55);
}

/* "Copy" button malo uredniji */
#teamModal #btnInviteCopy.btn {
  border-radius: 12px;
  font-weight: 700;
  padding: 8px 12px;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
}

#teamModal #btnInviteCopy.btn:hover {
  background: rgba(0,0,0,.04);
}

/* Disabled state da izgleda "zaključano" */
#teamModal .invite-box button:disabled,
#teamModal .invite-box input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* poruke iz TeamInvite modula (inviteMsg ima klase ok/error) */
#teamModal #inviteMsg.ok {
  color: #198754; /* bootstrap success */
  font-weight: 600;
}

#teamModal #inviteMsg.error {
  color: #dc3545; /* bootstrap danger */
  font-weight: 600;
}

/* =========================
   ADMIN gating (js-admin-only)
   koristi: #teamModal[data-can-manage="0"]
   ========================= */

#teamModal[data-can-manage="0"] .js-admin-only {
  display: none !important;
}

/* delete team gumb samo admin */
#teamModal[data-can-manage="0"] #btnDeleteTeam {
  display: none !important;
}

/* invite block: ako nije admin -> sakrij cijeli */
#teamModal[data-can-manage="0"] .invite-box {
  display: none !important;
}

/* responsive: na mobu output ide u stupac */
@media (max-width: 520px) {
  #teamModal .invite-output {
    flex-direction: column;
    align-items: stretch;
  }

  #teamModal #btnInviteCopy {
    width: 100%;
  }

  #teamModal .invite-actions button {
    width: 100%;
  }
}

/* ===== Match modal tabs look better on dark theme ===== */
#matchActionsModal .nav-tabs .nav-link{
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-bottom: 0;
}
#matchActionsModal .nav-tabs .nav-link.active{
  color: #fff;
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.16);
}
#matchActionsModal .tab-content{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  padding: 12px;
}

/* lineups list readability */
#matchActionsModal #luHomeList .list-group-item,
#matchActionsModal #luAwayList .list-group-item{
  background: rgba(255,255,255,0.04);
  color: #fff;
  border-color: rgba(255,255,255,0.08);
}

#matchActionsModal .lu-badge{
  display:inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.90);
  margin-left: 6px;
}

#matchActionsModal .lu-starter{
  font-weight: 700;
}

.lu-block {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
  background: rgba(255,255,255,.03);
}

.lu-block-head {
  padding: 8px 10px;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.lu-list .list-group-item {
  background: transparent;
  color: rgba(255,255,255,.9);
  border-color: rgba(255,255,255,.10);
}

.lu-starter {
  font-weight: 700;
}

.lu-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.20);
  color: rgba(255,255,255,.95);
  background: rgba(255,255,255,.06);
}



/* =========================================================
   Match modal – theme-aware (uses html[data-theme])
   Light: white modal, dark text
   Dark: dark modal, light text
   ========================================================= */

html[data-theme="light"] #matchActionsModal .modal-content,
html[data-theme="light"] #matchActionsModal .modal-header,
html[data-theme="light"] #matchActionsModal .modal-body,
html[data-theme="light"] #matchActionsModal .modal-footer{
  background:#fff !important;
  color:#111 !important;
  border-color: rgba(0,0,0,.12) !important;
}

html[data-theme="light"] #matchActionsModal .btn-close{
  filter:none !important;
}

html[data-theme="light"] #matchActionsModal .text-muted,
html[data-theme="light"] #matchActionsModal .small.text-muted,
html[data-theme="light"] #matchActionsModal .form-text{
  color: rgba(0,0,0,.60) !important;
}

/* tabs */
html[data-theme="light"] #matchActionsModal .nav-tabs{
  border-bottom: 1px solid rgba(0,0,0,.12) !important;
}
html[data-theme="light"] #matchActionsModal .nav-link{
  color: rgba(0,0,0,.70) !important;
}
html[data-theme="light"] #matchActionsModal .nav-link.active{
  color:#111 !important;
  background:#fff !important;
  border-color: rgba(0,0,0,.12) rgba(0,0,0,.12) #fff !important;
  font-weight:700;
}

/* lists + tables */
html[data-theme="light"] #matchActionsModal .list-group-item{
  background:#fff !important;
  color:#111 !important;
  border-color: rgba(0,0,0,.10) !important;
}
html[data-theme="light"] #matchActionsModal .table{
  color:#111 !important;
}
html[data-theme="light"] #matchActionsModal .table thead th{
  background: rgba(0,0,0,.04) !important;
  color:#111 !important;
  border-color: rgba(0,0,0,.10) !important;
}

/* radio/checkbox visibility */
html[data-theme="light"] #matchActionsModal input[type="checkbox"],
html[data-theme="light"] #matchActionsModal input[type="radio"]{
  accent-color:#111;
}

/* lineup badges */
html[data-theme="light"] #matchActionsModal .lu-badge{
  background: rgba(0,0,0,.06) !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  color:#111 !important;
}
html[data-theme="light"] #matchActionsModal .lu-starter{
  background: rgba(0,0,0,.03) !important;
}

/* -------------------- DARK -------------------- */

html[data-theme="dark"] #matchActionsModal .modal-content,
html[data-theme="dark"] #matchActionsModal .modal-header,
html[data-theme="dark"] #matchActionsModal .modal-body,
html[data-theme="dark"] #matchActionsModal .modal-footer{
  background:#111 !important;
  color:#f1f1f1 !important;
  border-color: rgba(255,255,255,.12) !important;
}

html[data-theme="dark"] #matchActionsModal .btn-close{
  filter: invert(1) grayscale(100%) brightness(180%) !important;
}

html[data-theme="dark"] #matchActionsModal .text-muted,
html[data-theme="dark"] #matchActionsModal .small.text-muted,
html[data-theme="dark"] #matchActionsModal .form-text{
  color: rgba(255,255,255,.60) !important;
}

/* tabs */
html[data-theme="dark"] #matchActionsModal .nav-tabs{
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}
html[data-theme="dark"] #matchActionsModal .nav-link{
  color: rgba(255,255,255,.75) !important;
}
html[data-theme="dark"] #matchActionsModal .nav-link.active{
  color:#fff !important;
  background:#111 !important;
  border-color: rgba(255,255,255,.12) rgba(255,255,255,.12) #111 !important;
  font-weight:700;
}

/* lists + tables */
html[data-theme="dark"] #matchActionsModal .list-group-item{
  background:#111 !important;
  color:#f1f1f1 !important;
  border-color: rgba(255,255,255,.10) !important;
}
html[data-theme="dark"] #matchActionsModal .table{
  color:#f1f1f1 !important;
}
html[data-theme="dark"] #matchActionsModal .table thead th{
  background: rgba(255,255,255,.06) !important;
  color:#fff !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* radio/checkbox visibility */
html[data-theme="dark"] #matchActionsModal input[type="checkbox"],
html[data-theme="dark"] #matchActionsModal input[type="radio"]{
  accent-color:#fff;
}

/* lineup badges */
html[data-theme="dark"] #matchActionsModal .lu-badge{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color:#fff !important;
}
html[data-theme="dark"] #matchActionsModal .lu-starter{
  background: rgba(255,255,255,.06) !important;
}

.tz-lineup .list-group-item {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  margin-bottom: 8px;
}

.lu-num {
  display: inline-flex;
  min-width: 28px;
  height: 28px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.04);
}

.lu-num.empty {
  opacity: .55;
}

.lu-name {
  font-weight: 600;
}

[data-theme="dark"] .lu-num {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
}

[data-theme="dark"] .tz-lineup .list-group-item {
  border-color: rgba(255,255,255,.14);
}


/* Center tabs in match modal */
#matchActionsModal #matchTabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  border-bottom: 1px solid var(--bs-border-color);
  flex-wrap: wrap;
}

/* Make each tab look nicer + consistent width */
#matchActionsModal #matchTabs .nav-link {
  border-radius: 10px 10px 0 0;
  padding: 8px 14px;
}

/* Mobile: allow horizontal scroll instead of squishing */
@media (max-width: 576px) {
  #matchActionsModal #matchTabs {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 6px;
  }

  #matchActionsModal #matchTabs::-webkit-scrollbar {
    height: 6px;
  }
}
/* =========================
   BEST XI / FUTSAL PITCH (compact, za novi HTML)
========================= */

.bestxi-card{
  border-radius: 16px;
  overflow: hidden;
}

.bestxi .pitch-wrap{
  position: relative;
}

.bestxi .pitch{
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;   /* isto ko tvoj super primjer */
  border-radius: 18px;
  overflow: hidden;

background:
  linear-gradient(90deg,
    rgba(255,255,255,0.04) 0 10%,
    transparent 10% 20%,
    rgba(255,255,255,0.04) 20% 30%,
    transparent 30% 40%,
    rgba(255,255,255,0.04) 40% 50%,
    transparent 50% 60%,
    rgba(255,255,255,0.04) 60% 70%,
    transparent 70% 80%,
    rgba(255,255,255,0.04) 80% 90%,
    transparent 90% 100%
  ),
  radial-gradient(1200px 600px at 50% 50%, rgba(255,255,255,0.06), transparent 55%),
  linear-gradient(180deg, #0a4f9e, #063a78);

  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 10px 32px rgba(0,0,0,0.16),
    inset 0 0 0 2px rgba(255,255,255,0.08);
}

/* Lines */
.bestxi .pitch-line{
  position: absolute;
  left: 6%;
  right: 6%;
  height: 2px;
  background: rgba(255,255,255,0.65);
  border-radius: 2px;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.22));
}

.bestxi .pitch-line.midline{
  top: 50%;
  transform: translateY(-50%);
}

.bestxi .pitch-circle{
  position: absolute;
  width: 36%;
  aspect-ratio: 1 / 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255,255,255,0.65);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10);
}

/* Goals */
.bestxi .goal{
  position: absolute;
  left: 50%;
  width: 34%;
  height: 7%;
  transform: translateX(-50%);
  border: 2px solid rgba(255,255,255,0.65);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  opacity: 0.85;
}

.bestxi .goal.goal-top{
  top: 2%;
  transform: translateX(-50%) rotate(180deg);
}

.bestxi .goal.goal-bottom{
  bottom: 2%;
}

/* Boxes */
.bestxi .box{
  position: absolute;
  left: 50%;
  width: 62%;
  height: 18%;
  transform: translateX(-50%);
  border: 2px solid rgba(255,255,255,0.50);
  border-radius: 16px;
  opacity: 0.80;
}

.bestxi .box.box-top{ top: 6%; }
.bestxi .box.box-bottom{ bottom: 6%; }

/* =========================
   SLOTS (prilagođeno na .bx-slot)
========================= */

.bestxi .bx-slot{
  position: absolute;
  width: min(34%, 210px);       /* ✅ malo manje */
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: auto;         /* ✅ klik radi na slotu */
  cursor: pointer;
  user-select: none;
}

/* hover/active (lagano, da ne "skače") */
.bestxi .bx-slot:hover .bx-chip{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,0.18);
}
.bestxi .bx-slot:active .bx-chip{
  transform: translateY(0px);
}

/* focus (tabindex=0) */
.bestxi .bx-slot:focus{ outline: none; }
.bestxi .bx-slot:focus-visible .bx-chip{
  outline: 2px solid rgba(255,255,255,0.85);
  outline-offset: 3px;
}

/* slot label (broj gore) */
.bestxi .bx-slot-label{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
  color: rgba(255,255,255,0.92);
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* chip = ime igrača */
.bestxi .bx-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;

  padding: 8px 10px;          /* ✅ compact */
  border-radius: 14px;

  background: rgba(255,255,255,0.92);
  color: #111;
  font-weight: 800;
  font-size: 13px;            /* ✅ mrvu manje */
  box-shadow: 0 9px 18px rgba(0,0,0,0.16);
  border: 1px solid rgba(0,0,0,0.08);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  transition: transform .12s ease, box-shadow .12s ease;
}

.bestxi .bx-chip-empty{
  font-weight: 700;
  opacity: 0.65;
}

/* =========================
   POZICIJE (malo kompaktnije)
========================= */

.bestxi .bx-slot-gk{ left: 50%; top: 84%; width: min(40%, 240px); }

.bestxi .bx-slot-a { left: 26%; top: 64%; }
.bestxi .bx-slot-b { left: 74%; top: 64%; }

.bestxi .bx-slot-c { left: 26%; top: 36%; }
.bestxi .bx-slot-d { left: 74%; top: 36%; }

/* 6. slot (5+1) */
.bestxi .bx-slot-e { left: 50%; top: 26%; width: min(40%, 240px); }

/* =========================
   DESNA LISTA (malo urednije)
========================= */

.bestxi .bestxi-side .list-group-item{
  border-radius: 12px;
  margin-bottom: 8px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
}

.bestxi .bestxi-list .slotno{
  font-weight: 900;
  font-size: 12px;
  opacity: 0.7;
}

.bestxi .bestxi-list .pname{
  font-weight: 800;
}

.bestxi .bestxi-list .pmeta{
  font-size: 12px;
  opacity: 0.75;
}

/* =========================
   DARK MODE friendly (ako imaš)
========================= */
body.dark .bestxi .pitch{
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 12px 40px rgba(0,0,0,0.42), inset 0 0 0 2px rgba(255,255,255,0.10);
}

body.dark .bestxi .bx-chip{
  background: rgba(20,20,20,0.86);
  color: rgba(255,255,255,0.92);
  border-color: rgba(255,255,255,0.10);
}

/* Force pitch height (desktop/tablet) */
.bestxi .pitch-wrap{
  max-width: 520px;       /* da ne raširi previše u širinu */
  margin: 0 auto;         /* centriraj u col-8 */
}

.bestxi .pitch{
  height: 700px;          /* ✅ fiksna visina */
  width: auto;            /* neka se širina računa po aspect-ratio */
  max-width: 100%;
  aspect-ratio: 3 / 4;
}

/* malo smanji slotove da sve stane ljepše u 400px */
.bestxi .bx-slot{ width: min(26%, 150px); }
.bestxi .bx-slot-gk,
.bestxi .bx-slot-e{ width: min(32%, 180px); }

.bestxi .bx-chip{
  padding: 6px 8px;
  font-size: 12px;
  border-radius: 12px;
}
.bestxi .bx-slot-label{
  font-size: 10px;
  padding: 3px 7px;
}

/* na mobu još niže */
@media (max-width: 576px){
  .bestxi .pitch{ height: 320px; }
  .bestxi .bx-slot{ width: min(30%, 160px); }
}

@media (max-width: 576px) {
  /* teren na punu širinu + centriran */
  .pitch-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .pitch {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 576px) {
  #bestXiRoot .card-body {
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (max-width: 576px) {

  /* makni Bootstrap guttere u toj sekciji */
  #najboljaPostava .row.g-3 {
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #najboljaPostava .row.g-3 > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* smanji padding card-body da ne “jede” širinu */
  #najboljaPostava .card-body {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* FULL WIDTH: rastegni teren na 100vw (preko containera) */
  #najboljaPostava .pitch-wrap {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    display: flex;
    justify-content: center;
    height: 500px;
  }

  #najboljaPostava .pitch {
    width: 100% !important;
    max-width: 520px; /* možeš dignut na 560 ako hoćeš */
    height: 100%;
  }
}

/* =========================================================
   Groups + results refresh (What-We-Offer inspired)
========================================================= */
#skupine {
  --offer-ink: #0c0f14;
  --offer-paper: #f6f4ef;
  --offer-card: #ffffff;
  --offer-ring: rgba(12, 15, 20, 0.08);
  --offer-shadow: 0 12px 30px rgba(12, 15, 20, 0.12);
  --offer-accent: #6aa9ff;
  --offer-accent-2: #3b82f6;
  --offer-muted: rgba(12, 15, 20, 0.64);
  color: var(--offer-ink);
}

#skupine #groupsWrap {
  margin-top: 0.9rem !important;
}

#skupine .tz-group-col,
#skupine #groupsWrap > .col-12 {
  animation: tzOfferIn 0.36s ease both;
}

#skupine .group-card,
#skupine #groupsWrap > .col-12 > .card {
  border-radius: 18px;
  border: 1px solid var(--offer-ring);
  background:
    radial-gradient(800px 260px at 14% -8%, rgba(106, 169, 255, 0.14), transparent 66%),
    radial-gradient(680px 240px at 90% -14%, rgba(59, 130, 246, 0.12), transparent 70%),
    var(--offer-card);
  box-shadow: var(--offer-shadow);
  overflow: hidden;
}

#skupine .group-card .card-body,
#skupine #groupsWrap > .col-12 > .card > .card-body {
  padding: 1rem 1.05rem;
}

#skupine h6,
#skupine .card h6 {
  margin-bottom: 0;
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  letter-spacing: 0.01em;
}

#skupine .text-muted,
#skupine .small.text-muted,
#skupine .text-muted-2 {
  color: var(--offer-muted) !important;
}

#skupine .table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(106, 169, 255, 0.05);
  --bs-table-hover-bg: rgba(59, 130, 246, 0.08);
  --bs-table-border-color: rgba(12, 15, 20, 0.08);
  margin-bottom: 0;
}

#skupine .table thead.table-light th {
  background: linear-gradient(135deg, #eef5ff, #ffffff);
  border-bottom: 1px solid rgba(59, 130, 246, 0.2);
  color: #0b1b33;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#skupine .table tbody td {
  border-bottom: 1px solid rgba(12, 15, 20, 0.06);
}

#skupine .table tbody tr:last-child td {
  border-bottom: 0;
}

#skupine .table tbody tr.table-success > * {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1)) !important;
  color: #0b2f1d;
}

#skupine .table tbody tr:hover > * {
  background-color: rgba(59, 130, 246, 0.08);
}

#skupine .badge.bg-success {
  background: var(--offer-accent-2) !important;
  border: 1px solid rgba(59, 130, 246, 0.35);
}

#skupine .bg-success-subtle {
  background: rgba(59, 130, 246, 0.12) !important;
}

#skupine .text-success-emphasis {
  color: #0b3c78 !important;
}

#skupine .badge.bg-warning,
#skupine .bg-warning-subtle {
  background: rgba(255, 193, 7, 0.22) !important;
  border: 1px solid rgba(255, 193, 7, 0.4);
}

#skupine .list-group {
  gap: 0.45rem;
}

#skupine .list-group-item.js-match,
#skupine .list-group-item {
  border-radius: 12px !important;
  border: 1px solid rgba(12, 15, 20, 0.08);
  background: linear-gradient(135deg, #f7fbff, #ffffff);
  box-shadow: 0 6px 16px rgba(12, 15, 20, 0.06);
  transition: transform 0.12s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

#skupine .list-group-item.js-match:hover {
  transform: translateY(-1px);
  border-color: rgba(59, 130, 246, 0.35);
  box-shadow: 0 10px 20px rgba(59, 130, 246, 0.14);
}

#skupine .list-group-item .js-kickoff {
  background: #ffffff !important;
  border-color: rgba(12, 15, 20, 0.1) !important;
  color: #0b1b33 !important;
  font-weight: 700;
}

#skupine .list-group-item.js-match {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.42rem;
  padding: 0.4rem 0.52rem !important;
}

#skupine .tz-match-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.14rem;
}

#skupine .tz-match-kickoff {
  align-self: center;
  margin: 0 !important;
  padding: 0.1rem 0.42rem;
  font-size: 0.78rem;
}

#skupine .tz-match-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
}

#skupine .tz-match-team {
  min-width: 0;
  font-size: 0.95rem;
  color: #111827;
}

#skupine .tz-match-team.tz-home {
  text-align: right;
}

#skupine .tz-match-team.tz-away {
  text-align: left;
}

#skupine .tz-match-score {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  font-size: 0.94rem;
  font-weight: 800;
  color: #0b1b33;
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 999px;
  padding: 0.02rem 0.4rem;
  background: rgba(59, 130, 246, 0.08);
}

#skupine .tz-match-extra {
  color: var(--offer-muted);
  font-size: 0.74rem;
}

#skupine .tz-match-side {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  justify-content: flex-end;
  min-width: 56px;
}

#skupine .tz-match-side .live-dot {
  margin-right: 0;
}

#skupine .tz-banner.alert {
  border-radius: 18px;
  border: 1px solid rgba(59, 130, 246, 0.2);
  background: linear-gradient(135deg, #eaf2ff, #ffffff);
  box-shadow: 0 10px 24px rgba(12, 15, 20, 0.1);
}

#skupine .tz-banner .badge {
  border-radius: 999px;
}

#skupine .tz-daybar {
  gap: 0.55rem;
  padding: 0.5rem;
  border-radius: 14px;
  border: 1px solid rgba(12, 15, 20, 0.09);
  background: linear-gradient(135deg, #f2f7ff, #ffffff);
  box-shadow: 0 8px 20px rgba(12, 15, 20, 0.08);
}

#skupine .tz-daybar .tz-daybtn {
  border-radius: 999px;
  border: 1px solid rgba(12, 15, 20, 0.12) !important;
  background: #fff;
  color: #0b1b33;
  font-weight: 700;
}

#skupine .tz-daybar .tz-daybtn.active,
#skupine .tz-daybar .tz-daybtn.btn-dark {
  background: linear-gradient(135deg, var(--offer-accent), var(--offer-accent-2)) !important;
  border-color: rgba(59, 130, 246, 0.55) !important;
  color: #fff !important;
}

:root:not([data-theme="light"]) #skupine {
  --offer-ink: #e6edf3;
  --offer-card: #111924;
  --offer-ring: rgba(154, 167, 184, 0.22);
  --offer-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
  --offer-muted: #9aa7b8;
}

:root:not([data-theme="light"]) #skupine .group-card,
:root:not([data-theme="light"]) #skupine #groupsWrap > .col-12 > .card {
  background:
    radial-gradient(800px 260px at 12% -10%, rgba(106, 169, 255, 0.16), transparent 66%),
    radial-gradient(680px 240px at 90% -14%, rgba(59, 130, 246, 0.14), transparent 70%),
    linear-gradient(180deg, #121c29 0%, #0f1722 100%);
  border-color: rgba(154, 167, 184, 0.22) !important;
}

:root:not([data-theme="light"]) #skupine .table {
  --bs-table-border-color: rgba(154, 167, 184, 0.22);
  color: #e6edf3;
}

:root:not([data-theme="light"]) #skupine .table thead.table-light th {
  background: linear-gradient(135deg, #1b2738, #111a27) !important;
  color: #dbe7f6;
  border-bottom-color: rgba(59, 130, 246, 0.35);
}

:root:not([data-theme="light"]) #skupine .table tbody tr.table-success > * {
  color: #c7f9d7;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(34, 197, 94, 0.15)) !important;
}

:root:not([data-theme="light"]) #skupine .list-group-item.js-match,
:root:not([data-theme="light"]) #skupine .list-group-item {
  background: linear-gradient(135deg, #192434, #111a28);
  border-color: rgba(154, 167, 184, 0.22) !important;
  color: #e6edf3;
}

:root:not([data-theme="light"]) #skupine .list-group-item.js-match:hover {
  box-shadow: 0 12px 24px rgba(59, 130, 246, 0.24);
}

:root:not([data-theme="light"]) #skupine .list-group-item .js-kickoff {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #dbe7f6 !important;
}

:root:not([data-theme="light"]) #skupine .tz-daybar,
:root:not([data-theme="light"]) #skupine .tz-banner.alert {
  background: linear-gradient(135deg, #1b2738, #111a27);
  border-color: rgba(154, 167, 184, 0.24);
}

:root:not([data-theme="light"]) #skupine .tz-daybar .tz-daybtn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #e6edf3;
}

@media (max-width: 576px) {
  #skupine .group-card .card-body,
  #skupine #groupsWrap > .col-12 > .card > .card-body {
    padding: 0.85rem;
  }

  #skupine .table thead.table-light th {
    font-size: 0.68rem;
    letter-spacing: 0.03em;
  }

  #skupine .list-group-item.js-match {
    grid-template-columns: 1fr;
    gap: 0.3rem;
    padding: 0.4rem 0.48rem !important;
  }

  #skupine .tz-match-line {
    gap: 0.28rem;
  }

  #skupine .tz-match-team {
    font-size: 0.9rem;
  }

  #skupine .tz-match-score {
    font-size: 0.9rem;
    padding: 0.01rem 0.36rem;
  }

  #skupine .tz-match-side {
    width: 100%;
    justify-content: center;
  }
}

@keyframes tzOfferIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========================================================
   Tournament full redesign (What-We-Offer language)
========================================================= */
:root {
  --tzr-paper: #f6f4ef;
  --tzr-ink: #0c0f14;
  --tzr-navy: #0b1b33;
  --tzr-accent: #6aa9ff;
  --tzr-accent-2: #3b82f6;
  --tzr-card: #ffffff;
  --tzr-ring: rgba(12, 15, 20, 0.09);
  --tzr-muted: rgba(12, 15, 20, 0.64);
  --tzr-shadow: 0 14px 34px rgba(12, 15, 20, 0.12);
  --tzr-shadow-soft: 0 8px 20px rgba(12, 15, 20, 0.08);
}

html[data-theme="dark"] {
  --tzr-paper: #0b121b;
  --tzr-ink: #e6edf3;
  --tzr-navy: #dbe7f6;
  --tzr-card: #111b27;
  --tzr-ring: rgba(154, 167, 184, 0.24);
  --tzr-muted: #9aa7b8;
  --tzr-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
  --tzr-shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.28);
}

html[data-theme="light"] body,
html:not([data-theme]) body,
html[data-theme="dark"] body {
  color: var(--tzr-ink);
}

html[data-theme="light"] body::before,
html:not([data-theme]) body::before {
  background:
    radial-gradient(1200px 420px at 20% 0%, #dfeeff 0%, rgba(223, 238, 255, 0) 70%),
    radial-gradient(1000px 520px at 90% 8%, #e6f1ff 0%, rgba(230, 241, 255, 0) 70%),
    var(--tzr-paper) !important;
}

html[data-theme="dark"] body::before {
  background:
    radial-gradient(1200px 520px at 20% 0%, rgba(106, 169, 255, 0.2), rgba(106, 169, 255, 0) 70%),
    radial-gradient(1000px 580px at 90% 10%, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0) 70%),
    var(--tzr-paper) !important;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1035;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--tzr-ring) !important;
  background: color-mix(in oklab, var(--tzr-card) 84%, transparent);
}

.navbar .brand-title {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  letter-spacing: 0.01em;
}

main#page {
  width: min(1160px, 94vw);
  padding-top: 1rem !important;
  padding-bottom: 2.1rem !important;
}

main#page .hero-head {
  border: 1px solid var(--tzr-ring) !important;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--tzr-shadow);
  background:
    radial-gradient(900px 260px at 14% -8%, rgba(106, 169, 255, 0.14), transparent 68%),
    radial-gradient(740px 260px at 92% -10%, rgba(59, 130, 246, 0.14), transparent 72%),
    var(--tzr-card);
}

main#page .hero-head .ratio {
  min-height: 220px;
}

main#page .hero-head .card-body {
  padding: 1.05rem 1.2rem;
  border-top: 1px solid var(--tzr-ring);
  background: linear-gradient(135deg, color-mix(in oklab, var(--tzr-card) 88%, #eaf2ff), var(--tzr-card));
}

main#page #tName {
  font-family: inherit;
  font-size: clamp(1.42rem, 2.2vw, 1.94rem);
  line-height: 1.05;
}

main#page #tMeta,
main#page .text-muted,
main#page .small.text-muted,
main#page .text-muted-2 {
  color: var(--tzr-muted) !important;
}

main#page .meta-pill {
  border-radius: 999px;
  border: 1px solid var(--tzr-ring);
  background: linear-gradient(135deg, #edf4ff, #ffffff);
  color: var(--tzr-navy);
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(12, 15, 20, 0.06);
}

main#page .btn-dark {
  border: 1px solid rgba(59, 130, 246, 0.45);
  background: linear-gradient(135deg, var(--tzr-accent), var(--tzr-accent-2));
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.24);
}

main#page .btn-outline-dark {
  border: 1px solid var(--tzr-ring);
  background: var(--tzr-card);
  color: var(--tzr-navy);
}

main#page .btn-dark:hover,
main#page .btn-outline-dark:hover {
  transform: translateY(-1px);
}

main#page .tz-tabs {
  border: 1px solid var(--tzr-ring) !important;
  border-radius: 18px;
  padding: 0.5rem;
  gap: 0.45rem;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  background: linear-gradient(135deg, #f2f7ff, #ffffff);
  box-shadow: var(--tzr-shadow-soft);
}

main#page .tz-tabs .nav-item {
  flex: 0 0 auto;
}

main#page .tz-tabs .nav-link {
  border: 1px solid transparent !important;
  border-radius: 12px;
  padding: 0.52rem 0.9rem;
  font-weight: 700;
  color: var(--tzr-navy);
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

main#page .tz-tabs .nav-link:hover {
  background: rgba(106, 169, 255, 0.14);
}

main#page .tz-tabs .nav-link.active {
  border-color: rgba(59, 130, 246, 0.45) !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--tzr-accent), var(--tzr-accent-2)) !important;
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.28);
}

main#page .tab-content {
  margin-top: 0.75rem;
}

main#page .tab-content > .tab-pane {
  animation: tzPaneIn 0.26s ease both;
}

main#page .tab-content .card {
  border: 1px solid var(--tzr-ring);
  border-radius: 18px;
  background: var(--tzr-card);
  box-shadow: var(--tzr-shadow-soft);
}

main#page .table {
  --bs-table-border-color: color-mix(in oklab, var(--tzr-ring) 90%, #ffffff);
  --bs-table-bg: transparent;
  --bs-table-hover-bg: rgba(106, 169, 255, 0.1);
}

main#page .table thead.table-light th {
  background: linear-gradient(135deg, #eef5ff, #ffffff);
  border-bottom: 1px solid rgba(59, 130, 246, 0.2);
  color: var(--tzr-navy);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#teamsList .team-badge {
  background: linear-gradient(135deg, #14284a, #0b1b33);
  border: 1px solid rgba(59, 130, 246, 0.38);
  box-shadow: 0 8px 18px rgba(12, 15, 20, 0.18);
}

#sponsorsSection .sponsor-card {
  border: 1px solid var(--tzr-ring);
  border-radius: 16px;
  background: linear-gradient(135deg, #f4f8ff, #ffffff);
  box-shadow: var(--tzr-shadow-soft);
}

#sponsorsSection .sponsor-logo-wrap {
  border: 1px solid rgba(59, 130, 246, 0.14);
  background: linear-gradient(135deg, #edf4ff, #ffffff);
}

footer.border-top {
  border-color: var(--tzr-ring) !important;
  background: linear-gradient(135deg, color-mix(in oklab, var(--tzr-card) 86%, #eaf2ff), var(--tzr-card));
}

footer .social-link {
  color: var(--tzr-navy);
}

html[data-theme="dark"] .site-header {
  background: color-mix(in oklab, #121a24 86%, transparent);
}

html[data-theme="dark"] main#page .hero-head,
html[data-theme="dark"] main#page .tab-content .card,
html[data-theme="dark"] #sponsorsSection .sponsor-card {
  background:
    radial-gradient(900px 260px at 14% -8%, rgba(106, 169, 255, 0.16), transparent 68%),
    radial-gradient(740px 260px at 92% -10%, rgba(59, 130, 246, 0.14), transparent 72%),
    linear-gradient(180deg, #121c29 0%, #0f1722 100%);
  border-color: var(--tzr-ring) !important;
}

html[data-theme="dark"] main#page .hero-head .card-body,
html[data-theme="dark"] #sponsorsSection .sponsor-logo-wrap,
html[data-theme="dark"] footer.border-top,
html[data-theme="dark"] main#page .tz-tabs {
  background: linear-gradient(135deg, #1b2738, #111a27);
}

html[data-theme="dark"] main#page .meta-pill,
html[data-theme="dark"] main#page .btn-outline-dark {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: #dbe7f6;
}

html[data-theme="dark"] main#page .tz-tabs .nav-link {
  color: #dbe7f6;
}

html[data-theme="dark"] main#page .tz-tabs .nav-link:hover {
  background: rgba(106, 169, 255, 0.2);
}

html[data-theme="dark"] main#page .table thead.table-light th {
  background: linear-gradient(135deg, #1b2738, #111a27);
  color: #dbe7f6;
  border-bottom-color: rgba(59, 130, 246, 0.35);
}

html[data-theme="dark"] #teamsList .team-badge {
  background: linear-gradient(135deg, #243954, #17293f);
}

html[data-theme="dark"] footer .social-link,
html[data-theme="dark"] .navbar .brand-title {
  color: #dbe7f6;
}

@media (hover: hover) {
  main#page .tab-content .card:hover,
  #sponsorsSection .sponsor-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(59, 130, 246, 0.16);
  }
}

@media (max-width: 991.98px) {
  main#page {
    width: min(100%, 95vw);
  }

  main#page .hero-head {
    border-radius: 18px;
  }

  main#page .hero-head .ratio {
    min-height: 180px;
  }
}

@media (max-width: 767.98px) {
  main#page .hero-head .card-body {
    padding: 0.9rem;
  }

  main#page .tz-tabs {
    border-radius: 14px;
    padding: 0.42rem;
  }

  main#page .tz-tabs .nav-link {
    border-radius: 10px;
    padding: 0.48rem 0.74rem;
    font-size: 0.86rem;
  }

  main#page .tab-content .card,
  #sponsorsSection .sponsor-card {
    border-radius: 14px;
  }
}

@keyframes tzPaneIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========================================================
   Match Modal Refresh (What-We-Offer inspired)
========================================================= */
html[data-theme="light"] #matchActionsModal {
  --mm-ink: #0c0f14;
  --mm-navy: #0b1b33;
  --mm-muted: rgba(12, 15, 20, 0.64);
  --mm-card: #ffffff;
  --mm-soft: #f2f7ff;
  --mm-ring: rgba(12, 15, 20, 0.1);
  --mm-accent: #6aa9ff;
  --mm-accent-2: #3b82f6;
  --mm-shadow: 0 18px 36px rgba(12, 15, 20, 0.16);
}

html[data-theme="light"] #matchActionsModal .modal-dialog {
  max-width: min(1180px, 96vw);
}

html[data-theme="light"] #matchActionsModal .modal-content {
  border: 1px solid var(--mm-ring) !important;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--mm-shadow);
  background:
    radial-gradient(820px 260px at 12% -14%, rgba(106, 169, 255, 0.16), transparent 68%),
    radial-gradient(760px 280px at 90% -18%, rgba(59, 130, 246, 0.14), transparent 70%),
    var(--mm-card) !important;
}

html[data-theme="light"] #matchActionsModal .modal-header {
  padding: 0.82rem 1rem;
  border-bottom: 1px solid var(--mm-ring) !important;
  background: linear-gradient(135deg, #eef5ff, #ffffff) !important;
}

html[data-theme="light"] #matchActionsModal #matchModalTitle {
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--mm-navy);
}

html[data-theme="light"] #matchActionsModal .modal-body {
  padding: 0.95rem;
  color: var(--mm-ink);
}

html[data-theme="light"] #matchActionsModal .text-muted,
html[data-theme="light"] #matchActionsModal .small.text-muted,
html[data-theme="light"] #matchActionsModal .form-text {
  color: var(--mm-muted) !important;
}

html[data-theme="light"] #matchActionsModal #matchAdminActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

html[data-theme="light"] #matchActionsModal #matchAdminActions .btn {
  border-radius: 12px;
  font-weight: 700;
  border: 1px solid var(--mm-ring);
  padding: 0.56rem 0.72rem;
}

html[data-theme="light"] #matchActionsModal #maBtnStart {
  color: #ffffff;
  border-color: rgba(59, 130, 246, 0.5);
  background: linear-gradient(135deg, var(--mm-accent), var(--mm-accent-2));
  box-shadow: 0 10px 18px rgba(59, 130, 246, 0.22);
}

html[data-theme="light"] #matchActionsModal #maBtnTime {
  color: var(--mm-navy);
  background: #ffffff;
}

html[data-theme="light"] #matchActionsModal #matchTabs {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.48rem;
  border: 1px solid var(--mm-ring) !important;
  border-radius: 14px;
  background: linear-gradient(135deg, #f2f7ff, #ffffff);
  box-shadow: 0 8px 20px rgba(12, 15, 20, 0.08);
}

html[data-theme="light"] #matchActionsModal #matchTabs .nav-link {
  border: 1px solid transparent !important;
  border-radius: 10px;
  padding: 0.46rem 0.74rem;
  color: var(--mm-navy) !important;
  font-weight: 700;
  white-space: nowrap;
  background: transparent !important;
}

html[data-theme="light"] #matchActionsModal #matchTabs .nav-link:hover {
  background: rgba(106, 169, 255, 0.16) !important;
}

html[data-theme="light"] #matchActionsModal #matchTabs .nav-link.active {
  color: #ffffff !important;
  border-color: rgba(59, 130, 246, 0.5) !important;
  background: linear-gradient(135deg, var(--mm-accent), var(--mm-accent-2)) !important;
  box-shadow: 0 8px 18px rgba(59, 130, 246, 0.24);
}

html[data-theme="light"] #matchActionsModal .tab-content {
  margin-top: 0.74rem;
  border: 1px solid var(--mm-ring) !important;
  border-radius: 16px;
  padding: 0.82rem;
  background: linear-gradient(135deg, #f9fcff, #ffffff) !important;
}

html[data-theme="light"] #matchActionsModal .tab-pane {
  animation: mmPaneIn 0.22s ease both;
}

html[data-theme="light"] #matchActionsModal #matchPublicView {
  padding: 0.22rem;
}

html[data-theme="light"] #matchActionsModal #matchMetaText {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--mm-ring);
  border-radius: 999px;
  padding: 0.2rem 0.54rem;
  background: #ffffff;
}

html[data-theme="light"] #matchActionsModal #matchScoreText {
  font-family: inherit;
  color: var(--mm-navy);
  font-size: clamp(2rem, 5vw, 3.05rem);
  line-height: 1;
  margin-top: 0.2rem;
  letter-spacing: 0.01em;
}

html[data-theme="light"] #matchActionsModal #matchTeamsText {
  font-weight: 700;
  color: var(--mm-ink) !important;
}

html[data-theme="light"] #matchActionsModal #btnLiveStream {
  border-radius: 999px;
  border: 1px solid rgba(220, 53, 69, 0.4);
  box-shadow: 0 8px 16px rgba(220, 53, 69, 0.24);
  font-weight: 700;
}

html[data-theme="light"] #matchActionsModal #matchGoalsList {
  display: grid;
  gap: 0.48rem;
}

html[data-theme="light"] #matchActionsModal #matchGoalsList .list-group-item {
  border-radius: 12px !important;
  border: 1px solid var(--mm-ring) !important;
  background: #ffffff !important;
  color: var(--mm-ink) !important;
  box-shadow: 0 8px 16px rgba(12, 15, 20, 0.07);
  padding: 0.56rem 0.64rem;
}

html[data-theme="light"] #matchActionsModal .goal-row {
  gap: 0.45rem;
  font-size: 0.93rem;
}

html[data-theme="light"] #matchActionsModal .goal-row .minute {
  width: 44px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--mm-muted);
  border: 1px solid var(--mm-ring);
  border-radius: 999px;
  text-align: center;
  padding: 0.16rem 0.2rem;
  background: #ffffff;
}

html[data-theme="light"] #matchActionsModal .goal-row .minute.empty {
  width: auto !important;
  min-width: 0;
  border: 0;
  border-radius: 0;
  padding: 0 0.1rem;
  background: transparent;
  color: var(--mm-muted);
}

html[data-theme="light"] #matchActionsModal .goal-row .player {
  font-weight: 700;
  color: var(--mm-ink);
}

html[data-theme="light"] #matchActionsModal .goal-row.goal-own .player {
  color: #c43f3f;
}

html[data-theme="light"] #matchActionsModal #tabPostave .card,
html[data-theme="light"] #matchActionsModal #tabZapisnik .card {
  border: 1px solid var(--mm-ring);
  border-radius: 14px;
  background: linear-gradient(135deg, #f4f9ff, #ffffff);
  box-shadow: 0 8px 18px rgba(12, 15, 20, 0.08);
}

html[data-theme="light"] #matchActionsModal #tabPostave .card .card-body,
html[data-theme="light"] #matchActionsModal #tabZapisnik .card .card-body {
  padding: 0.72rem;
}

html[data-theme="light"] #matchActionsModal .tz-lineup .list-group-item,
html[data-theme="light"] #matchActionsModal #staffHomeList .list-group-item,
html[data-theme="light"] #matchActionsModal #staffAwayList .list-group-item {
  border: 1px solid var(--mm-ring) !important;
  border-radius: 10px;
  background: #ffffff !important;
  color: var(--mm-ink) !important;
  box-shadow: 0 6px 14px rgba(12, 15, 20, 0.06);
}

html[data-theme="light"] #matchActionsModal .lu-num {
  border-color: rgba(59, 130, 246, 0.24);
  background: linear-gradient(135deg, #edf4ff, #ffffff);
  color: var(--mm-navy);
}

html[data-theme="light"] #matchActionsModal .lu-num.empty {
  min-width: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: var(--mm-muted);
  font-weight: 700;
  line-height: 1;
  opacity: 0.85;
}

html[data-theme="light"] #matchActionsModal .lu-name {
  color: var(--mm-ink);
}

html[data-theme="light"] #matchActionsModal .lu-badge {
  border: 1px solid rgba(59, 130, 246, 0.28) !important;
  background: rgba(106, 169, 255, 0.16) !important;
  color: var(--mm-navy) !important;
}

html[data-theme="light"] #matchActionsModal #staffHomeTitle,
html[data-theme="light"] #matchActionsModal #staffAwayTitle,
html[data-theme="light"] #matchActionsModal #luHomeTitle,
html[data-theme="light"] #matchActionsModal #luAwayTitle {
  font-weight: 800;
  color: var(--mm-navy);
}

html[data-theme="light"] #matchActionsModal #matchLineupsEmpty,
html[data-theme="light"] #matchActionsModal #matchStaffEmpty,
html[data-theme="light"] #matchActionsModal #zapisnikNotAvailable {
  border: 1px dashed var(--mm-ring);
  border-radius: 12px;
  padding: 0.62rem 0.72rem;
  background: #ffffff;
}

@media (max-width: 991.98px) {
  html[data-theme="light"] #matchActionsModal {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html[data-theme="light"] #matchActionsModal .modal-dialog {
    --bs-modal-margin: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    min-height: 100dvh;
  }

  html[data-theme="light"] #matchActionsModal .modal-content {
    width: 100%;
    border-radius: 0;
  }
}

@media (max-width: 767.98px) {
  html[data-theme="light"] #matchActionsModal .modal-dialog {
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    min-height: 100dvh;
  }

  html[data-theme="light"] #matchActionsModal .modal-content {
    border-radius: 0;
    min-height: 100dvh;
    width: 100%;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  html[data-theme="light"] #matchActionsModal .modal-header {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 0.74rem 0.84rem;
  }

  html[data-theme="light"] #matchActionsModal .modal-body {
    padding: 0.72rem;
  }

  html[data-theme="light"] #matchActionsModal #matchAdminActions {
    grid-template-columns: 1fr;
  }

  html[data-theme="light"] #matchActionsModal #matchTabs {
    position: sticky;
    top: 0;
    z-index: 9;
    margin-bottom: 0.62rem;
    padding: 0.36rem;
    gap: 0.4rem;
  }

  html[data-theme="light"] #matchActionsModal #matchTabs .nav-link {
    font-size: 0.82rem;
    padding: 0.42rem 0.64rem;
  }

  html[data-theme="light"] #matchActionsModal .tab-content {
    margin-top: 0;
    border-radius: 12px;
    padding: 0.62rem;
  }

  html[data-theme="light"] #matchActionsModal #matchScoreText {
    font-size: clamp(1.9rem, 9vw, 2.35rem);
  }

  html[data-theme="light"] #matchActionsModal #matchGoalsList .list-group-item {
    padding: 0.5rem 0.54rem;
  }

  html[data-theme="light"] #matchActionsModal .goal-row {
    font-size: 0.86rem;
    gap: 0.32rem;
  }

  html[data-theme="light"] #matchActionsModal .goal-row .minute {
    width: 36px;
    font-size: 0.72rem;
  }

  html[data-theme="light"] #matchActionsModal #tabPostave .row,
  html[data-theme="light"] #matchActionsModal #tabStaff .row {
    --bs-gutter-x: 0.56rem;
    --bs-gutter-y: 0.56rem;
  }

  html[data-theme="light"] #matchActionsModal #tabPostave .card .card-body,
  html[data-theme="light"] #matchActionsModal #tabZapisnik .card .card-body {
    padding: 0.62rem;
  }
}

@keyframes mmPaneIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}