/* --- Ogólne style tabeli --- */
table.pociagi {
  border-collapse: collapse;
  width: 100%;
  font-family: 'Poppins', sans-serif;
  font-weight: 400; /* normalna grubość */
}

table.pociagi th,
table.pociagi td {
  text-align: center;      /* poziome wyśrodkowanie tekstu */
  vertical-align: middle;  /* pionowe wyśrodkowanie zawartości */
  padding: 6px 8px;        /* przestrzeń w komórkach */
  border: 1px solid #ccc;
}

table.pociagi th {
  font-weight: 600; /* pogrubione nagłówki */
}

/* --- Nagłówki i body strony --- */
/*h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;   
  font-size: 2.5rem;
  color: #2c3e50;
  margin-bottom: 20px;
  text-align: center;
  letter-spacing: 1px;
}*/

/* --- Inputy w tabeli --- */
/* Domyślne dla wszystkich inputów */
input.pociagi {
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  padding: 4px 6px;
  font-family: 'Poppins', sans-serif; /* domyślny font w inputach */
}

/* Inputy typu number */
input.pociagi[type="number"] {
  width: 60px;
  font-family: monospace; /* monospace dla cyfr */
}

/* Numer pociągu - string z cyframi i / */
input.pociagi[data-field="numer"] {
  width: 90px;
  font-family: monospace;
}

/* Pole odjazdu - czas HH:MM */
input.pociagi[data-field="odjazd"] {
  width: 60px;
  font-family: monospace;
  text-align: center;
}

/* Nazwa pociągu */
input.pociagi[data-field="nazwa"],
input.pociagi[data-field="relacja"] {
  min-width: 150px;
  max-width: 300px;
  width: 100%;
  font-family: monospace;
}

/* Przewoźnik */
input.pociagi[data-field="przewoznik"] {
  width: 180px;
  font-family: monospace;
}

/* --- Labelki w tabeli --- */

td.pociagi label {
  display: inline-block;
  margin-right: 4px;
  white-space: nowrap;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
}

/* Specjalny styl dla dni (checkboxy) */
.dni-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
}

/* --- Style dla kolumny kierunek (radio) --- */

td.kierunek-cell {
  padding: 4px 8px;
  white-space: nowrap; /* zapobiega łamaniu linii */
  /* jeśli chcesz ułożyć pionowo, rozważ flexbox (tutaj zostawiam na razie bez flex) */
}

td.kierunek-cell label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 14px;
  cursor: pointer;
}

td.kierunek-cell label:last-child {
  margin-bottom: 0;
}

td.kierunek-cell input[type="radio"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* --- Przyciski --- */

button.pociagi {
  font-size: 14px;
  padding: 4px 6px;
  margin: 0 2px;
  cursor: pointer;
}

/* --- Animacje fade-in / fade-out --- */

.fade-out {
  opacity: 0;
  transition: opacity 0.4s ease-out;
}

.fade-in {
  opacity: 0;
  animation: fadeIn 0.4s ease-out forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}