/* ----------------------------------------------------------------- table
 * templates/_table.html (the list table; becomes templates/ui/table.html
 * with the dossier tables in Etappe 3). The table's anatomy and its phone
 * cards are still in corum.css; here what the list pages share since the
 * page types (Etappe 2): cells with several links or a small form. */
@layer ui {
.cell-links { white-space: nowrap; }
.cell-links a + a { margin-left: .75rem; }
.cell-form { display: inline; margin: 0; }
/* The search page: the field is the whole toolbar. */
.toolbar--search { margin-bottom: var(--s-7); }
/* A short code field in a toolbar (object id). */
.toolbar__narrow input { width: 7rem; }
/* The date range of a toolbar (templates/ui/date_range.html, K-33): the
   select, and «Eigener …» opening the panel of the charts under it. The
   day fields are the portal's field, wide enough for a date in the form
   TT.MM.JJJJ (WEB-MIK-03). */
.toolbar__range { position: relative; }
.range-pop input[type="text"], .ctl-pop input[data-range] { width: 8.5rem; }
.range-pop input[aria-invalid="true"], .ctl-pop input[aria-invalid="true"] { border-color: var(--rule-brand); }
/* The note that explains a state label under its table (DAT-FEH-05). */
.table-note { margin: var(--s-2) 0 0; font-size: var(--t-micro); color: var(--text-secondary); max-width: var(--measure); }
/* The empty row of a list on the phone: one line, left, no label
   (WEB-ZUS-01, WEB-TAB-12); it beats the view state .empty (ui/states.css). */
@media (max-width: 720px) {
  .table-wrap td.empty { grid-template-columns: 1fr; text-align: left; padding: var(--s-5) 0; }
  .table-wrap td.empty::before { content: none; }
}
/* «Sortieren nach» for the cards of a phone (static/js/table.js): the
   heads with their sort buttons are not shown there, the order stays
   available (WEB-GRU-07). Above 720 px the heads do it. */
.toolbar__sort { display: none; }
@media (max-width: 720px) {
  .toolbar__sort { display: block; }
}
/* A toolbar that holds nothing but that select does not stand on a desktop. */
.toolbar--sort-only { display: none; }
@media (max-width: 720px) {
  .toolbar--sort-only { display: flex; }
}
/* The sort button in a head (WEB-TAB-10, WEB-BAR-09): the label and a
   drawn pair of chevrons in silver; the sorted direction keeps its one
   chevron in corum. No arrow characters: the only control signs are
   «›», «·» and «×» (WEB-MIK-08). aria-sort on the th carries the state. */
.table-sort { display: inline-flex; align-items: center; gap: .4em; border: 0; padding: 0; background: transparent;
  color: inherit; font: inherit; text-align: inherit; cursor: pointer; }
.table-sort:hover { color: var(--text-primary); }
.table-sort:focus-visible { outline: 2px solid var(--rule-brand); outline-offset: 1px; }
.table-sort__icon { flex: none; width: 10px; height: 10px; fill: none; stroke: var(--silver);
  stroke-width: 1.3; }
th[aria-sort="ascending"] .table-sort__icon, th[aria-sort="descending"] .table-sort__icon { stroke: var(--corum); }
th[aria-sort="ascending"] .table-sort__down, th[aria-sort="descending"] .table-sort__up { display: none; }
/* The one chevron left stands in the middle of its box. */
th[aria-sort="ascending"] .table-sort__up { transform: translateY(2.25px); }
th[aria-sort="descending"] .table-sort__down { transform: translateY(-2.25px); }
}  /* @layer ui */