* {
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  margin: 0;
  background: radial-gradient(circle at top, #0d3320 0, #020a06 55%, #000000 100%);
  color: #f9fafb;
}

/* HEADER */

.main-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  background: linear-gradient(135deg, #0f172a, #052e16);
  border-bottom: 1px solid rgba(148, 163, 184, 0.3);
  position: relative;
}

.logo-circle {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  border: 3px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, #065f46, #020617);
}

.logo-inner {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 2px solid #22c55e;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-ball {
  font-size: 24px;
}

.header-text h1 {
  margin: 0;
  font-size: 26px;
  letter-spacing: 0.08em;
}

.header-text p {
  margin: 2px 0 0;
  font-size: 13px;
  color: #e5e7eb;
}

/* ADMIN PANEL – jobb felső sarok */

.admin-login-panel {
  position: fixed;
  top: 10px;
  right: 10px;
  background: rgba(15, 23, 42, 0.95);
  border-radius: 14px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7);
  z-index: 50;
  max-width: 260px;
}

.admin-login-panel input {
  width: 120px;
  padding: 4px 6px;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid #4b5563;
  background: #020617;
  color: #f9fafb;
}

.admin-login-panel button {
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 999px;
}

.admin-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #e5e7eb;
  margin-right: 4px;
}

/* NAV */

.top-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 24px;
  background: #020617;
  border-bottom: 1px solid rgba(75, 85, 99, 0.7);
}

.nav-btn {
  border: none;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  background: rgba(15, 118, 110, 0.1);
  color: #e5e7eb;
  transition: background 0.15s ease, transform 0.05s ease;
}

.nav-btn:hover {
  background: rgba(34, 197, 94, 0.35);
  transform: translateY(-1px);
}

.nav-btn.active {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #020617;
}

/* MAIN */

.container {
  max-width: 1100px;
  margin: 16px auto 32px;
  padding: 0 16px;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.card {
  background: rgba(15, 23, 42, 0.9);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 14px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 18px 40px rgba(0,0,0,0.6);
}

.card h2, .card h3 {
  margin-top: 0;
}

.card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* FORMS */

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  align-items: flex-end;
}

.form-field {
  flex: 1 1 180px;
}

.form-field.small {
  flex: 0 0 70px;
}

label {
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
  color: #e5e7eb;
}

input, select {
  width: 100%;
  padding: 6px 9px;
  border-radius: 10px;
  border: 1px solid #4b5563;
  background: #020617;
  color: #f9fafb;
  font-size: 14px;
}

input:focus, select:focus {
  outline: none;
  border-color: #22c55e;
  box-shadow: 0 0 0 1px #22c55e55;
}

button {
  border: none;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #020617;
  transition: transform 0.05s ease, box-shadow 0.05s ease, opacity 0.15s;
  white-space: nowrap;
}

button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(34, 197, 94, 0.35);
  opacity: 0.95;
}

button:active {
  transform: translateY(0);
  box-shadow: none;
}

.danger-btn {
  background: linear-gradient(135deg, #f97316, #ef4444);
  color: #020617;
}

/* TEXT */

.muted {
  font-size: 11px;
  color: #9ca3af;
}

/* LIST / TABLES */

.simple-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  font-size: 14px;
}

.simple-list li {
  padding: 4px 0;
  border-bottom: 1px solid rgba(31, 41, 55, 0.7);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 13px;
}

.data-table th,
.data-table td {
  padding: 6px 5px;
  text-align: center;
  border-bottom: 1px solid rgba(31, 41, 55, 0.9);
}

.data-table thead {
  background: rgba(15, 118, 110, 0.4);
}

.data-table tbody tr:nth-child(even) {
  background: rgba(15, 23, 42, 0.8);
}

.data-table td.left {
  text-align: left;
}

/* Csoporttabella kártyák a főoldalon */

.group-table-card {
  margin-bottom: 14px;
  border-radius: 16px;
  padding: 12px;
  background: linear-gradient(145deg, rgba(6,78,59,0.55), rgba(15,23,42,0.95));
  border: 1px solid rgba(34,197,94,0.35);
}

.group-table-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.group-table-header h3 {
  margin: 0;
}

.group-table-header span {
  font-size: 11px;
  color: #cbd5f5;
}

.data-table tr.highlight {
  background: rgba(34, 197, 94, 0.25);
}

/* FOOTER */

.main-footer {
  text-align: center;
  padding: 10px 16px 18px;
  font-size: 11px;
  color: #6b7280;
}

/* MOBIL */

@media (max-width: 720px) {
  .form-row {
    flex-direction: column;
    align-items: stretch;
  }

  button {
    width: 100%;
    justify-content: center;
    display: inline-flex;
  }

  .admin-login-panel {
    max-width: 220px;
  }
}
/* Bracket stílus (egyszerű fa-szerű tábla) */
.playoff-bracket {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.playoff-round {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.playoff-pair {
  background: rgba(34, 197, 94, 0.15);
  padding: 8px;
  border-radius: 10px;
  text-align: center;
}
/* Playoff bracket */
.playoff-bracket {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.playoff-round {
  min-width: 200px;
  background: rgba(15, 118, 110, 0.2);
  padding: 10px;
  border-radius: 10px;
}

.playoff-pair {
  margin-bottom: 10px;
  padding: 5px;
  border: 1px solid #22c55e;
  border-radius: 5px;
}

/* Admin playoff javítás - átláthatóbb párosítás */
#playin-pair-setup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
}

.playin-pair-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(2, 6, 23, 0.8);
  padding: 8px;
  border-radius: 10px;
}
/* Piros jelzés a büntetett játékosoknak */
.penalty-text {
    color: #ef4444;
    font-size: 0.8em;
    font-weight: bold;
    margin-left: 5px;
}

.penalty-info-card {
    border-left: 4px solid #ef4444;
    background: rgba(239, 68, 68, 0.1);
    padding: 10px;
    margin-top: 20px;
    font-size: 13px;
}
/* --- BÜNTETŐPONT RENDSZER KIEGÉSZÍTÉSEK --- */

/* Az admin táblázatban a beviteli mező */
.penalty-input {
    width: 60px !important; /* Felülírja az alap input szélességet */
    padding: 4px 8px;
    text-align: center;
    border: 1px solid #ef4444; /* Piros keret a figyelemfelkeltésnek */
}

/* Mentés gomb a büntetőponthoz - passzol a zöld stílusodhoz */
.save-penalty-btn {
    padding: 4px 10px;
    font-size: 11px;
    margin-left: 5px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #020617;
    border-radius: 999px;
    cursor: pointer;
    font-weight: bold;
}

/* A levonás szövege a tabellán a név alatt/mellett */
.penalty-badge {
    color: #f87171;
    font-size: 10px;
    font-weight: bold;
    display: block; /* Így a név alá kerül, nem tolja szét a sort oldalra */
    margin-top: 2px;
}

/* Ha a pontszám oszlopban negatív vagy büntetett pont van */
.points-cell.has-penalty {
    color: #f87171;
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

/* A playoff ágrajzodon a meccsek közötti távolság finomítása */
.playoff-pair {
    border: 1px solid rgba(34, 197, 94, 0.4);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.playoff-pair:hover {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.2);
}
.pts-plus { color: #22c55e; font-weight: bold; font-size: 0.8em; } /* Zöld plusz pont */
.pts-minus { color: #ef4444; font-weight: bold; font-size: 0.8em; } /* Piros bunti */
.playin-pair-row { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.playin-pair-row select { flex: 1; padding: 5px; }
/* Tábla cellák egységes igazítása – MINDEN szám középre! */
.data-table th,
.data-table td {
  padding: 6px 5px;
  text-align: center !important;  /* Erősebb, hogy felülírja az esetleges inline-t */
  vertical-align: middle;
}

/* Kivétel csak a név oszlop (balra igazítás) */
.data-table td.left {
  text-align: left !important;
}

/* Extra biztosíték: a pont oszlop ne legyen piros/zöld tolódás miatt furcsa */
 say.data-table td {
  white-space: nowrap;  /* Ne törjön sort a név + badge miatt */
}