/* Strona atestow i pomiarow wlasnych. Utworzony 07.09.2026.

   Plik musi istniec, nawet pusty: head.html linia 73 laduje
   `css/pages/${file}.css` dla KAZDEJ strony.

   Naglowki i ramka powtarzaja wyglad ze stron /reach/, /ppwr/
   i /dokumenty/ - te same kolory, te same promienie, ta sama
   ikona przed naglowkiem. Zadnej nowej wartosci w palecie.

   Siatka 8 px: odstepy to 8, 16, 24 - nic pomiedzy. */

.cert-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #111827;
}

.cert-title i {
  color: #0066FF;
  font-size: 18px;
  width: 22px;
  text-align: center;
}

.cert-opis {
  color: #374151;
  margin-bottom: 16px;
}

/* --- ramka wstepu: udzwig katalogowy a rzeczywisty --- */
.cert-note {
  background: #F9FAFB;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px;
}

.cert-note p { color: #374151; margin: 0; }

/* --- warunki pomiaru ---------------------------------------------
   Para nazwa-wartosc w jednej linii. Bez tych warunkow liczba udzwigu
   nie znaczy nic, wiec stoja NAD tabela, nie pod nia. */
.cert-metoda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0 0 16px;
  padding: 16px;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
}

.cert-metoda-para { display: flex; gap: 8px; align-items: baseline; }

.cert-metoda dt {
  color: #6B7280;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}

.cert-metoda dd {
  margin: 0;
  color: #111827;
  font-size: 14px;
  font-weight: 600;
}

/* Wartosc jeszcze niezmierzona: mysznik, nie pusty prostokat. Pustka
   w komorce czyta sie jak blad renderowania; mysznik jest znakiem, ze
   ktos tu byl i wie, czego brakuje. Opis dla czytnika ekranu wchodzi
   przez .visually-hidden obok - samo "—" nic nie mowi.

   Kontrast #6B7280 na #F9FAFB to 4,83 przy wymaganym 4,5 (WCAG AA). */
.cert-pusty {
  color: #6B7280;
  cursor: help;
}

.cert-wartosc { color: #111827; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Zdanie o stanie pomiarow, nad tabela. Ma byc widoczne, ale nie ma
   krzyczec - to informacja, nie ostrzezenie. */
.cert-status {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 16px;
  color: #6B7280;
  font-size: 14px;
}

.cert-status i { color: #0066FF; flex: 0 0 auto; }

/* --- tabela parametrow -------------------------------------------
   Powyzej 768 px zwykla tabela. Ponizej kazdy wiersz zamienia sie
   w karte, a naglowki kolumn wchodza przez `data-label`. Jedna petla
   w PHP, dwa uklady, zero JS. */
.cert-tabela-wrap { overflow-x: auto; }

.cert-tabela { --bs-table-bg: transparent; margin: 0; }

.cert-tabela th,
.cert-tabela td {
  color: #374151;
  border-color: #E5E7EB;
}

.cert-tabela thead th {
  color: #6B7280;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.cert-tabela tbody th { color: #111827; font-weight: 600; }

.cert-col-unit { color: #6B7280; white-space: nowrap; }

@media (max-width: 767.98px) {
  .cert-tabela-wrap { overflow-x: visible; }

  .cert-tabela thead { display: none; }

  .cert-tabela,
  .cert-tabela tbody,
  .cert-tabela tr,
  .cert-tabela th,
  .cert-tabela td { display: block; width: auto; }

  .cert-tabela tr {
    padding: 16px;
    margin-bottom: 8px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #fff;
  }

  .cert-tabela th,
  .cert-tabela td {
    border: 0;
    padding: 0 0 8px;
  }

  .cert-tabela tr > *:last-child { padding-bottom: 0; }

  /* Naglowek kolumny nad wartoscia, skoro naglowka tabeli juz nie ma. */
  .cert-tabela td::before {
    content: attr(data-label);
    display: block;
    color: #6B7280;
    font-size: 12px;
    margin-bottom: 8px;
  }

  .cert-metoda { gap: 8px; flex-direction: column; }
}