/*@charset 'utf-8'; */


/* ====== ZMIENNE KOLORÓW (zielony / szary / biały) ====== */
:root{
  --green: #119c3f;           /* podstawowy zielony */
  --green-dark:#0b7a31;       /* ciemniejszy akcent */
  --gray:#f3f4f6;             /* jasny szary tło wierszy/thead */
  --border:#e5e7eb;           /* obramowania */
  --text:#111827;             /* kolor tekstu */
  --muted:#6b7280;            /* drugorzędowe informacje */
  --white:#ffffff;            /* białe tło */
  --focus-bg:#ecfdf5;         /* subtelne tło dla .focus (zielonkawe) */
  --focus-border:#a7f3d0;     /* obramowanie dla .focus */
}

/* ====== TYPOGRAFIA I KONTENER ====== */
.round{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  margin: 1.25rem auto;
  max-width: 1100px;
  padding: 0 1rem;
}


.round > header {
  background: linear-gradient(90deg, var(--green), var(--green-dark));
  color: #fff;
  padding: 0.35rem 0.9rem;       /* minimalny padding pionowy */
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 36px;                  /* stała, niska wysokość */
  box-sizing: border-box;
  line-height: 1;                /* brak dodatkowego odstępu wewnętrznego */
}


.round > header h2 {
  margin: 0;                     /* usuwa domyślny margines */
  padding: 0;                    /* pewność, że nic nie odstaje */
  font-size: 1.2rem;             /* większy, czytelny napis */
  font-weight: 700;
  color: #fff;
  line-height: 1;                /* perfekcyjne wyrównanie pionowe */
}

/* ====== TABELA ====== */
.obl{
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 0; /* łączy się optycznie z nagłówkiem sekcji */
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.obl thead th{
  background: var(--gray);
  color: var(--text);
  text-align: left;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--border);
}

.obl tbody td{
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  line-height: 1.35;
  font-size: .96rem;
}

.obl tbody tr:nth-child(odd){
  background: var(--white);
}
.obl tbody tr:nth-child(even){
  background: var(--gray);
}

/* ====== ELEMENTY KOMÓREK ====== */
.date{
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  margin-right: .25rem;
}
time{
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.home{
  font-weight: 700;
}
.away{
  font-weight: 600;
}

/* ====== WYRÓŻNIENIE (np. mecze Zastalu) ====== */
.obl tbody tr.focus{
  background: var(--focus-bg) !important;
  box-shadow: inset 0 0 0 9999px rgba(0,0,0,0); /* reset */
}
.obl tbody tr.focus td{
  border-bottom-color: var(--focus-border);
}
.obl tbody tr.focus .home,
.obl tbody tr.focus .away{
  color: var(--green-dark);
}

/* Subtelny pasek akcentu po lewej w wierszu .focus na desktopie */
@media (min-width: 761px){
  .obl tbody tr.focus td:first-child{
    position: relative;
  }
  .obl tbody tr.focus td:first-child::before{
    content: "";
    position: absolute;
    left: -1rem;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--green);
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
  }
}

/* ====== STANY INTERAKCJI ====== */
.obl tbody tr:hover{
  filter: brightness(0.99);
}
.obl tbody tr:active{
  filter: brightness(0.97);
}

/* ====== WERSJA MOBILNA (układ kartowy) ====== */
@media (max-width: 760px){
  .obl thead{
    display: none;
  }
  .obl, .obl tbody, .obl tr, .obl td{
    display: block;
    width: 100%;
  }
  .obl tbody tr{
    background: var(--white);
    border-bottom: 1px solid var(--border);
  }
  .obl tbody td{
    border: 0;
    padding: .35rem 1rem;
  }

  /* “Karta” meczu */
  .obl tbody tr{
    margin: .5rem 0;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
  }
  .obl tbody tr:nth-child(even),
  .obl tbody tr:nth-child(odd){
    background: var(--white);
  }

  /* Siatka pól: 2 kolumny (data + gospodarze), goście niżej */
  .obl tbody tr td:nth-child(1){ /* Data/godz. */
    background: var(--gray);
    font-size: .92rem;
    border-bottom: 1px solid var(--border);
  }
  .obl tbody tr td:nth-child(2){ /* Gospodarz */
    font-size: 1rem;
    padding-top: .5rem;
  }
  .obl tbody tr td:nth-child(3){ /* Gość */
    color: var(--muted);
    padding-bottom: .6rem;
  }

  /* Akcent w kartach .focus */
  .obl tbody tr.focus{
    border-color: var(--focus-border);
    background: var(--focus-bg);
  }
  .obl tbody tr.focus td:nth-child(1){
    background: #d1fae5; /* nieco mocniejszy zielonkawy nagłówek karty */
  }
}

/* ====== STICKY HEADER TABELI (opcjonalnie na szerokich ekranach) ====== */
@supports (position: sticky){
  @media (min-width: 761px){
    .obl thead th{
      position: sticky;
      top: 0;
      z-index: 2;
    }
  }
}

/* ====== TRYB DRUKOWANIA ====== */
@media print{
  .round{
    max-width: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
  }
  .round > header{
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .obl{
    box-shadow: none;
  }
  .obl thead th{
    background: var(--gray);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .obl tbody tr.focus{
    background: var(--focus-bg) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}


.obl .score{
  display:inline-block;
  margin-left:.6rem;
  padding:.15rem .5rem;
  border-radius:999px;           /* kapsułka */
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  background:var(--gray, #f3f4f6);
  color:var(--text, #111827);
  border:1px solid var(--border, #e5e7eb);
}

/* wyróżnienie zwycięzcy – opcjonalnie dodaj klasę .win do <span class="score win"> */
.obl .score.win{
  background:var(--green, #119c3f);
  color:#fff;
  border-color:var(--green-dark, #0b7a31);
}


/* ====== DROBNE UŻYTECZNE KLASY ====== */
.muted{ color: var(--muted); }
.nowrap{ white-space: nowrap; }
.center{ text-align: center; }
.right{ text-align: right; }