/* om_to_check_table_html — the To Be Checked table's own rules, kept here because
 * the server strips a template's <style> block.
 *
 * The form root is the .om-check-section div itself, so its rule stays BARE
 * (it is the root's own subject) and every other rule is scoped
 * :where(.om-check-section), which adds no specificity and so cannot change
 * which rule wins.
 *
 * No .themed-scrollbar rule and no .px-grid-* rule of this
 * form's own: those names belong to theme/assets/theme.css and the dependency.
 *
 * No designer gate: nothing in this template is hidden until JavaScript runs.
 * The rows this sheet styles are rendered from server data at runtime, so the
 * designer canvas has none of them and hides nothing.
 */

.om-check-section {
  background: var(--px-bg-card);
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius);
  box-shadow: var(--px-shadow);
  overflow: hidden;
}

/* Compounded rather than :where()-scoped so it beats theme.css's
   .px-grid-card (0,1,0), which declares `overflow: hidden auto`, on
   SPECIFICITY rather than on document order. */
.px-grid-card.om-check-grid {
  max-height: 50vh;
  overflow-y: auto;
  --px-grid-cols: 90px 80px 100px 100px minmax(0,1fr) minmax(0,1fr) 90px 200px 320px;
}

:where(.om-check-section) .om-section-note {
  font-family: var(--px-font);
  font-size: 11px;
  font-style: italic;
  color: var(--px-text-muted);
  text-align: center;
  padding: 6px 0;
  background: var(--px-bg-elevated);
  border-bottom: 1px solid var(--px-border);
}

/* The four cell rules below compound .px-grid-td rather than scope alone. Each
   declares something theme/assets/theme.css's .px-grid-td also declares
   (font-size, color, padding), both sides are (0,1,0), and this head link
   would lose that tie on document order. Compounding wins it on specificity. .om-td-item, .om-td-badge and the base .om-td-actions
   declare nothing .px-grid-td declares, so they stay scoped. */
:where(.om-check-section) .px-grid-td.om-td-narrow {
  font-size: 11px;
  color: var(--px-text-secondary);
}

:where(.om-check-section) .px-grid-td.om-td-instructions {
  font-size: 11px;
  color: var(--px-text-secondary);
  white-space: normal;
  line-height: 1.3;
}

:where(.om-check-section) .px-grid-td.om-td-types {
  padding: 4px;
}

:where(.om-check-section) .om-type-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

:where(.om-check-section) .om-type-btn {
  font-family: var(--px-font);
  font-size: 10px;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  padding: 4px 6px;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

:where(.om-check-section) .om-type-btn[data-theme="tray"] { background: var(--om-tray-pale); color: var(--om-tray); }
:where(.om-check-section) .om-type-btn[data-theme="cds"] { background: var(--om-cd-pale); color: var(--om-cd); }
:where(.om-check-section) .om-type-btn[data-theme="supplements"] { background: var(--om-supplement-pale); color: var(--om-supplement); }
:where(.om-check-section) .om-type-btn[data-theme="fridge"] { background: var(--om-fridge-pale); color: var(--om-fridge); }

:where(.om-check-section) .om-type-btn-selected {
  border: 2px solid #1e293b !important;
}

:where(.om-check-section) .om-type-btn-selected[data-theme="tray"] { background: var(--om-tray); color: #fff; }
:where(.om-check-section) .om-type-btn-selected[data-theme="cds"] { background: var(--om-cd); color: #fff; }
:where(.om-check-section) .om-type-btn-selected[data-theme="supplements"] { background: var(--om-supplement); color: #fff; }
:where(.om-check-section) .om-type-btn-selected[data-theme="fridge"] { background: var(--om-fridge); color: #fff; }

/* Both tables write the same merged .om-td-actions declarations: a column
   that wraps and ends-aligns. */
:where(.om-check-section) .om-td-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 1100px) {
  :where(.om-check-section) .px-grid-td.om-td-actions {
    justify-content: flex-start;
    padding-top: 8px;
    border-top: 1px solid var(--px-border);
  }
  :where(.om-check-section) .om-type-buttons {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Touch-size overrides — compound selector beats form-specific base classes */
:where(.om-check-section) .om-type-btn.px-btn-touch-sm {
  padding: 16px 20px;
  min-height: 52px;
  border-radius: 9999px;
  font-size: 0.85rem;
}