/* Catalog typography, shared by screen tables (including their mobile card layouts)
   and select/search controls. Shared text sizes and column-heading colors take precedence
   over legacy page styles.
   Print media keeps the report-specific type sizes for paper. */
@media screen {
  :root {
    --table-text-size: .88rem;
    --table-note-size: .75rem;
    --table-label-size: .8rem;
    --table-action-size: .85rem;
    --filter-text-size: 1rem;
    --filter-option-size: .9375rem;
  }

  :where(thead, thead th, .calendar-grid > b) {
    background-color: var(--field) !important;
    color: var(--ink) !important;
  }
  :where(thead th > span, thead th > button:not(.ui-select-trigger)) {
    background-color: transparent !important;
    color: var(--ink) !important;
  }

  :where(thead th small) {
    color: var(--muted) !important;
  }

  :where(table th, table td, thead button, .growing-mobile dd, .growing-mobile dd > span,
         .calendar-grid > b, .calendar-cell-head b),
  :where(th:not([colspan]), td:not([colspan])) :where(a, b, strong, span, time, button, input, label, em, summary) {
    font-size: var(--table-text-size) !important;
  }

  :where(table small, table small *, table .stock-code, .growing-mobile dd small, .calendar-cell-head small,
         .stock-mobile-unit, .harvest-mobile-unit, .daily-water-ranges, .daily-water-ranges *) {
    font-size: var(--table-note-size) !important;
  }

  :where(table .ui-badge, table .farm-status, table .stock-status, table .inventory-movement,
         table .harvest-catch-badge, table .users-role, table .pond-register-record,
         table .overview-mobile-label, table .overview-component-label, .growing-mobile dt),
  :where(tbody td, tbody th)::before {
    font-size: var(--table-label-size) !important;
  }

  /* Cards on narrow screens use muted labels beside the values, as in the catalog. */
  :where(.overview-mobile-label, .overview-component-label, .growing-mobile dt),
  :where(tbody td[data-label], tbody td[data-mobile-label])::before {
    color: var(--muted) !important;
  }

  /* Small action buttons in a data row match the catalog edit/delete buttons.
     Buttons used as sortable headings use the column-heading size. */
  :where(tbody td .btn-small, tbody th .btn-small) {
    font-size: var(--table-action-size) !important;
  }

  :where(input[type="search"], .ui-select-search, .ui-select-trigger,
         .ui-select-trigger > span, .ui-select-text, .stock-month-input > span) {
    font-size: var(--filter-text-size) !important;
  }
  :where(.ui-select-option, .ui-select-option > span) {
    font-size: var(--filter-option-size) !important;
  }
}