/* the tables of the whole application: one set of rules, so that the heading, the values and the buttons stand on the same axes */
/* One file for one part of the application: a change of that part touches only this file. */

/* every cell on the middle of its row (as in Finance): the heading, the text, the badge and the buttons on one line */
th,
td {
  vertical-align: middle;
}
th {
  font-weight: 600;
  color: var(--muted);
  font-size: 13px;
}
/* the alignment of a column is given by a class on the heading and on its cells alike: the heading is never on another side than its values */
th.c,
td.c {
  text-align: center;
}
th.r,
td.r {
  text-align: right;
}
td.nowrap,
th.nowrap,
td.num {
  white-space: nowrap;
}
/* a bracket in the head of a column keeps the letters as written (the look may put the rest of the head in capitals) */
th .th-note {
  text-transform: none;
  letter-spacing: normal;
}
/* a number below zero (a loss) */
td.num.loss {
  color: #8a1c1c;
}
html[data-theme='dark'] td.num.loss {
  color: #f3a6a6;
}
/* a long e-mail or name never pushes the buttons out of the table */
td a[href^='mailto:'] {
  overflow-wrap: normal;
  word-break: normal;
}
/* the column of the buttons: as narrow as the buttons, the buttons in a row with one gap, always whole */
td.act,
th.act {
  width: 1%;
  white-space: nowrap;
}
td.act {
  display: table-cell;
}
/* no space from the line breaks of the markup between the buttons: the gap is only the margin, equal between all of them (a button, a link or a form) */
td.act {
  font-size: 0;
}
td.act > *,
td.act > form {
  margin: 0 0 0 6px;
  font-size: 14px;
}
td.act > :first-child {
  margin-left: 0;
}
/* a table in a card never leaves the card: wider than the card, it scrolls inside */
.card:has(> table),
.card:has(> .contact-section) {
  overflow-x: auto;
}
.contact-section table {
  min-width: 0;
}
/* the badge in a cell does not stretch the row */
td .badge {
  vertical-align: middle;
}

/* on a phone the table is a list of cards: every card has its lines "label : value" on the same left and right edge, the buttons in one row in the middle */
@media (max-width: 640px) {
  table.cards td {
    align-items: center;
    min-height: 32px;
  }
  table.cards td.act {
    justify-content: center;
    gap: 10px;
    padding-top: 8px;
  }
  table.cards td.act > * {
    margin-left: 0;
  }
  table.cards td.c,
  table.cards td.r {
    text-align: right;
  }
  table.cards td.num::before {
    font-family: inherit;
  }
  /* a long label ("Cena prodeje (bez DPH)") wraps instead of pushing the number out of the card */
  table.cards td.num {
    white-space: normal;
    overflow-wrap: normal;
  }
  table.cards td.num::before {
    flex: 0 1 auto;
    white-space: normal;
  }
}

/* the heading of the column of the buttons says "Akce" (as in Finance), on the right over the buttons */
th.act .sr {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
}