/* === Jednoduchá tabulka (bez záhlaví)  === */




.pk-table-simple{
  --bg:#F8F9FA;
  --cell:#FFFFFF;
  --alt:#F8F9FA;
  --hover:#F1F3F5;
  --b:#E5E7EB;
  --text:#111827;
  --muted:#374151;


  width:100%;
  max-width:860px;
  margin:0 auto;
  border:1px solid var(--b);
  border-radius:6px;
  overflow:hidden;
  background:var(--cell);
}


/* Tabulka uvnitř wrapperu */
.pk-table-simple table{
  width:100%;
  margin:0 auto;
  border-collapse:separate;
  border-spacing:0;
  background:transparent;
  font-size:16px;
  line-height:1.55;
}


/* Buňky */
.pk-table-simple td{
  padding:14px 16px;
  vertical-align:top;
  color:var(--text);
  background:var(--cell);
  border-top:1px solid var(--b);


  /* dlouhé hodnoty (IBAN, texty) */
  word-break:break-word;
  overflow-wrap:anywhere;
}


/* První řádek bez horní linky */
.pk-table-simple tr:first-child td{ border-top:0; }


/* Svislé dělení sloupců */
.pk-table-simple td + td{ border-left:1px solid var(--b); }


/* Střídání řádků */
.pk-table-simple tr:nth-child(even) td{ background:var(--alt); }


/* Hover */
.pk-table-simple tr:hover td{ background:var(--hover); }


/* 1. sloupec jako „štítek“ */
.pk-table-simple td:first-child{
  font-weight:600;
  color:var(--muted);
  white-space:nowrap; /* pro 2 sloupce je to obvykle OK */
}


/* =========================================================
   DESKTOP: pokud jsou 3+ sloupce, upravit chování 1. sloupce,
   aby se nerozjížděl layout (dlouhé labely pak zalamujeme)
   ========================================================= */
@supports selector(.pk-table-simple table:has(td:nth-child(3))){
  .pk-table-simple table:has(td:nth-child(3)){
    table-layout:fixed; /* stabilní šířky sloupců */
  }


  .pk-table-simple table:has(td:nth-child(3)) td:first-child{
    white-space:normal;    /* dlouhé labely se zalomí */
    width:32%;             /* label sloupec drží rozumnou šířku */
  }
}


/* =========================================================
   RESPONSIVITA
   - 2 sloupce: necháme tabulku „normálně“ (když se vejde)
   - 3+ sloupce: přeskládáme po řádcích do kompaktních bloků
                (bez čar uvnitř)
   ========================================================= */
@media (max-width:720px){


  .pk-table-simple{
    max-width:100%;
  }


  .pk-table-simple table{
    width:100%;
    font-size:15px;
    table-layout:auto;
  }


  /* Na mobilu dovolíme labelům zalomení i u 2 sloupců,
     ať se to vejde bez horizontálního posunu */
  .pk-table-simple td:first-child{
    white-space:normal;
  }


  /* --- 3+ sloupců: stacked, ale zachovat logiku sloupců (pořadí) --- */
  @supports selector(.pk-table-simple table:has(td:nth-child(3))){


    /* Aktivuje se jen pokud existuje 3. sloupec */
    .pk-table-simple table:has(td:nth-child(3)){
      table-layout:auto;
    }


    /* z řádků uděláme kompaktní bloky (karty) */
    .pk-table-simple:has(table td:nth-child(3)){
      overflow:visible; /* žádný horizontální scroll */
    }


    .pk-table-simple:has(table td:nth-child(3)) tbody,
    .pk-table-simple:has(table td:nth-child(3)) tr{
      display:block;
      width:100%;
    }


    /* každý řádek jako „karta“ */
    .pk-table-simple:has(table td:nth-child(3)) tr{
      padding:12px 14px;
      border:0; /* bez čar */
    }


    /* zebra po kartách */
    .pk-table-simple:has(table td:nth-child(3)) tr:nth-child(even){
      background:var(--alt);
    }
    .pk-table-simple:has(table td:nth-child(3)) tr:nth-child(odd){
      background:var(--cell);
    }


    /* buňky pod sebe, BEZ čar a bez vlastního pozadí */
    .pk-table-simple:has(table td:nth-child(3)) td{
      display:block;
      width:100%;
      padding:0;
      border:0 !important;        /* zruší i border-left / border-top */
      background:transparent;
    }


    /* label nahoře */
    .pk-table-simple:has(table td:nth-child(3)) td:first-child{
      font-weight:700;
      color:var(--muted);
      margin:0 0 6px 0;
    }


    /* hodnoty (2., 3., … sloupec) pod sebou v původním pořadí */
    .pk-table-simple:has(table td:nth-child(3)) td:not(:first-child){
      margin-top:4px;
    }


    /* hover na mobilu pryč */
    .pk-table-simple:has(table td:nth-child(3)) tr:hover td{
      background:transparent;
    }
  }
}