/* --------------------------------------------------------------------------
   .objTable - seznam objednávek (stránka "Moje objednávky").

   Skutečná <table> - na rozdíl od dřívějšího řešení s CSS grid a ručně
   syncovanou šířkou sloupců napříč nezávislými řádky (opakovaně se
   rozjíždělo), tabulkový layout prohlížeče šířku sloupců počítá
   automaticky napříč VŠEMI řádky najednou, takže se nemůže stát, že
   se řádek s prázdnou buňkou zúží oproti ostatním.

   Na mobilu (≤1049px) se řádky přepnou na karty čistě přes CSS
   (display: block na tr/td), popisek sloupce se doplní pomocí
   atributu data-label a CSS ::before.
   -------------------------------------------------------------------------- */

.objednavkyNadpis {
  font-size: var(--font-size-medium);
  font-weight: 700;
  color: var(--color-text);
  margin: var(--space-xl) 0 var(--space-sm) 0;
}

.visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.objTable {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-xl);
}

.objTable th,
.objTable td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  vertical-align: middle;
}

.objTable thead tr {
  border: 1px solid var(--color-border);
}

.objTable thead th {
  background-color: var(--color-bg-light);
  color: var(--color-text);
  font-size: var(--font-size-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.objTable th.objHead--dokumenty {
  text-align: center;
}

.objTable tbody tr {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.objTable tbody td {
  color: var(--color-text);
  font-size: var(--font-size-body);
}

.objTable .text-center {
  text-align: center;
}

.objTable .text-end {
  text-align: right;
}

.objCislo a,
.objCislo a:link,
.objCislo a:visited,
.objCislo a:active {
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: none;
}

.objCislo a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   .objBtn - tlačítko sdílené formulářem (button) i odkazy (a).
   --primary: upravit / zopakovat (stejná barva pro obě akce)
   --secondary: objednávka / faktura

   Šířka je "auto" - na rozdíl od dřívějšího CSS grid řešení tu není
   potřeba nic ručně vynucovat na 100 %/pevnou šířku, protože šířku
   sloupce (a tedy i prázdné buňky bez tlačítka) hlídá tabulka sama.
   -------------------------------------------------------------------------- */
.objBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-md);
  border-radius: 4px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: var(--font-size-body);
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.objBtn--primary {
  color: var(--color-white);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.objBtn--primary:hover {
  background-color: #066cae; /* ztmavená --color-primary pro hover */
  border-color: #066cae;
}

.objBtn--secondary {
  color: var(--color-text);
  background-color: var(--color-bg-light);
  border-color: var(--color-border);
}

.objBtn--secondary:hover {
  background-color: var(--color-white);
  box-shadow: var(--shadow-hover);
}

.objOdkazy {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   Layout: mobil (override, ≤1049px) - karta.
   Klasický vzor "responsive table": tr/td na display:block, popisek
   sloupce se vygeneruje z atributu data-label.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1049px) {

  .objTable thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .objTable,
  .objTable tbody,
  .objTable tr,
  .objTable td {
    display: block;
    width: 100%;
  }

  .objTable tbody tr {
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    margin-bottom: var(--space-md);
    padding: var(--space-md);
  }

  .objTable td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-xs) 0;
    border: none;
    text-align: right;
  }

  .objTable td::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-size: var(--font-size-small);
    font-weight: 500;
    color: var(--color-text);
    text-align: left;
  }

  /* Číslo objednávky - vizuálně "nadpis karty": label i hodnota mají
     stejnou (větší) velikost a řez písma, oddělené spodní linkou od
     zbytku karty. */
  .objTable td.objCislo {
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
  }

  .objTable td.objCislo::before {
    font-size: var(--font-size-medium);
    font-weight: 500;
  }

  .objTable td.objCislo a {
    font-size: var(--font-size-medium);
  }

  /* Akce a odkazy - tlačítka na celou šířku karty, bez popisku sloupce. */
  .objTable td.objAkce,
  .objTable td.objOdkazyCell {
    justify-content: stretch;
  }

  .objTable td.objAkce::before,
  .objTable td.objOdkazyCell::before {
    display: none;
  }

  .objTable td.objAkce form {
    width: 100%;
  }

  .objTable td.objAkce .objBtn {
    width: 100%;
  }

  .objOdkazy {
    width: 100%;
  }

  .objOdkazy .objBtn {
    flex: 1;
  }

  /* .objBtn--secondary má na desktopu stejné pozadí jako karta na
     mobilu (--color-bg-light) - na kartě by tak vizuálně zanikalo.
     Na mobilu proto logiku otočíme: bílá výchozí (odliší se od karty),
     světle šedá při hoveru. */
  .objBtn--secondary {
    background-color: var(--color-white);
  }

  .objBtn--secondary:hover {
    background-color: var(--color-bg-light);
    box-shadow: none;
  }
}