/* owings_management_html — the Owings Management shell's own rules. The
 * section's twelve custom properties are in owings_management.css, because
 * they are the children's contract too.
 *
 * .om-screen-root is the wrapping form root and its rule is the BARE root
 * rule, so it outranks the scoped reset. It carries display: block and
 * nothing else. It exists because the template has two top-level nodes, the
 * dashboard and the confirm overlay, and because .om-dashboard's
 * .px-screen-root height: 100% must keep resolving against an auto height so
 * the page scrollbar stays on the shell's content port.
 *
 * Every other rule of the dashboard's own is scoped :where(.om-dashboard),
 * which adds zero specificity and so cannot change which rule wins.
 *
 * TWO GROUPS ARE DELIBERATELY NOT SCOPED THAT WAY, each for its own reason,
 * stated again beside it below: the three header-button colour rules gain
 * .om-btn-header as a COMPOUND, and the two confirm-panel
 * rules are bare compounds because pxShowOverlay portals that overlay out of
 * this root entirely at runtime.
 *
 * No designer gate is needed. Nothing in this template is hidden until
 * JavaScript runs: the loading overlay ships `active`, which is what puts
 * LOADING on screen and on the canvas, and the confirm overlay is hidden by the
 * dependency's own head-injected .px-modal-overlay rule, which applies on the
 * canvas exactly as it does at runtime.
 *
 * No .themed-scrollbar rule and no .px-round-gate-banner rule:
 * both names belong to the dependency, which declares them at runtime.
 */

.om-screen-root {
  display: block;
}

:where(.om-dashboard) .om-content {
  width: 100%;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

:where(.om-dashboard) .om-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

:where(.om-dashboard) .om-title-block {
  display: flex;
  flex-direction: column;
}

:where(.om-dashboard) .om-header-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

:where(.om-dashboard) .om-btn-header {
  font-family: var(--px-font);
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: var(--px-radius-sm);
  padding: 10px 16px;
  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;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

:where(.om-dashboard) .om-btn-header:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* The three colour rules and the four bag variants carry .om-btn-header as
   a compound. The bare names .om-btn-tonal and .om-btn-outline also exist on
   the leaf tables' action buttons; a leaf button carries .om-btn, never
   .om-btn-header, so these rules reach only the shell's own header buttons. */
:where(.om-dashboard) .om-btn-header.om-btn-tonal {
  background: var(--accent-subtle);
  color: var(--accent);
  border: 1px solid transparent;
}

:where(.om-dashboard) .om-btn-header.om-btn-tonal:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}

:where(.om-dashboard) .om-btn-header.om-btn-outline {
  background: transparent;
  color: var(--px-text-primary);
  border: 1px solid var(--px-border);
}

:where(.om-dashboard) .om-btn-header.om-btn-outline:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

:where(.om-dashboard) .om-btn-header.om-btn-sibling {
  background: var(--px-bg-elevated);
  color: var(--px-text-primary);
  border: 1px solid var(--px-border);
}

:where(.om-dashboard) .om-btn-header.om-btn-sibling:hover:not(:disabled) {
  border-color: var(--accent);
}

/* One class above their base .om-btn-sibling rule. */
:where(.om-dashboard) .om-btn-header.om-btn-sibling.om-bag-main { background: #64748b; color: #fff; }
:where(.om-dashboard) .om-btn-header.om-btn-sibling.om-bag-fridge { background: var(--om-fridge); color: #fff; }
:where(.om-dashboard) .om-btn-header.om-btn-sibling.om-bag-cd { background: var(--om-cd); color: #fff; }
:where(.om-dashboard) .om-btn-header.om-btn-sibling.om-bag-tray { background: var(--om-tray); color: #fff; }

:where(.om-dashboard) .om-divider {
  height: 1px;
  background: var(--px-border);
  margin: 20px 0;
}

:where(.om-dashboard) .om-pending-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

:where(.om-dashboard) .om-pending-header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* The search mount div is the direct parent of the dropzone. The two other
   mount classes, .om-to-check-mount and .om-pending-mount, get no rule. */
:where(.om-dashboard) .om-search-mount {
  flex: 1;
  min-width: 0;
}

@media (max-width: 900px) {
  :where(.om-dashboard) .om-content { padding: 16px; gap: 16px; }
  :where(.om-dashboard) .om-header { flex-direction: column; align-items: flex-start; }
  :where(.om-dashboard) .om-header-actions { width: 100%; justify-content: flex-start; }
  :where(.om-dashboard) .om-pending-header { flex-direction: column; align-items: stretch; }
}

@media (max-width: 600px) {
  :where(.om-dashboard) .om-content { padding: 12px 8px; gap: 12px; }
  :where(.om-dashboard) .om-header-actions { flex-direction: column; width: 100%; }
  :where(.om-dashboard) .om-btn-header { width: 100%; justify-content: center; }
}

/* Touch-size overrides — compound selector beats form-specific base class */
:where(.om-dashboard) .om-btn-header.px-btn-touch {
  padding: 24px 32px;
  min-height: 68px;
  border-radius: 9999px;
  font-size: 1.1rem;
}

/* The confirm overlay's panel rules. BARE COMPOUNDS, not scoped: the overlay
   is a SIBLING of .om-dashboard and pxShowOverlay portals it into
   #px-modal-portal, so an ancestor scope would stop matching. Compounded so a
   (0,1,0) tie with the dependency's .px-modal / .px-modal-body, appended to
   <head> after every head link, cannot lose on order. Nothing opens this
   overlay today; the screen's confirmations come from px_confirm. */
.px-modal.om-confirm-panel {
  max-width: 450px;
}

.px-modal-body.om-confirm-body {
  white-space: pre-line;
}

/* The action-cell, badge, button and section-heading rules both leaf tables
   share, scoped to both leaf roots. .om-td-actions stays in each leaf sheet,
   where its 1100px override must follow it. */

:where(.om-pending-section, .om-check-section) .om-section-header {
  padding: 14px 20px;
  background: var(--px-bg-elevated);
  border-bottom: 1px solid var(--px-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

:where(.om-pending-section, .om-check-section) .om-section-title {
  font-family: var(--px-font);
  font-size: 15px;
  font-weight: 700;
  color: var(--px-text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}

:where(.om-pending-section, .om-check-section) .om-section-title::before {
  content: '';
  width: 3px;
  height: 18px;
  background: var(--accent);
  border-radius: 2px;
}

:where(.om-pending-section, .om-check-section) .om-section-count {
  font-family: var(--px-mono);
  font-size: 12px;
  color: var(--px-text-muted);
  background: var(--accent-subtle);
  padding: 2px 8px;
  border-radius: 12px;
}

:where(.om-pending-section, .om-check-section) .om-td-item {
  font-weight: 500;
}

:where(.om-pending-section, .om-check-section) .om-td-badge {
  display: flex;
  justify-content: center;
}

:where(.om-pending-section, .om-check-section) .om-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

:where(.om-pending-section, .om-check-section) .om-badge-overdue {
  background: #ef4444;
  color: #fff;
}

:where(.om-pending-section, .om-check-section) .om-badge-urgent {
  background: #FFF9C4;
  color: #1e293b;
}

:where(.om-pending-section, .om-check-section) .om-badge-acute {
  background: #FFCDD2;
  color: #1e293b;
}

:where(.om-pending-section, .om-check-section) .om-badge-returned {
  background: #7f1d1d;
  color: #fff;
  margin-top: 4px;
}

:where(.om-pending-section, .om-check-section) .om-td-actions > .om-btn-primary {
  width: 100%;
}

:where(.om-pending-section, .om-check-section) .om-btn {
  font-family: var(--px-font);
  font-size: 11px;
  font-weight: 600;
  border: none;
  border-radius: var(--px-radius-sm);
  padding: 6px 10px;
  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;
  white-space: nowrap;
}

:where(.om-pending-section, .om-check-section) .om-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

:where(.om-pending-section, .om-check-section) .om-btn-primary {
  background: var(--accent);
  color: #fff;
}

:where(.om-pending-section, .om-check-section) .om-btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
}

:where(.om-pending-section, .om-check-section) .om-btn-outline {
  background: transparent;
  color: var(--px-text-primary);
  border: 1px solid var(--px-border);
}

:where(.om-pending-section, .om-check-section) .om-btn-outline:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

:where(.om-pending-section, .om-check-section) .om-btn-danger {
  background: rgba(239, 68, 68, 0.1);
  color: var(--px-danger);
  border: 1px solid transparent;
}

:where(.om-pending-section, .om-check-section) .om-btn-danger:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.2);
  border-color: var(--px-danger);
}

:where(.om-pending-section, .om-check-section) .om-btn.px-btn-touch-sm {
  padding: 16px 14px;
  min-height: 52px;
  border-radius: 9999px;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}