/* dc_partial_monthly_html — the Partial Monthly Dispatch dialog's own rules,
 * kept here because the Anvil server strips a template's <style> block. Rules
 * are scoped by their selector preludes, and .dpm-section-title and
 * .dpm-hidden below stand in for inline style= attributes a template cannot
 * carry.
 *
 * TWO TOP-LEVEL NODES, SO THERE IS A NEW ROOT. The template carried the
 * .dpm-container card AND the #dpm-driver-overlay modal side by side; two
 * top-level nodes make Anvil keep its own wrapper as the root and the root rule
 * land on an inner div, so both are wrapped in one new div.dpm-root. .dpm-root carries display: block and nothing else
 * — no height, no flex, no overflow — which is exactly the auto-height wrapper
 * it replaces, and .dpm-container's own rule stays BARE and byte-identical
 * rather than being promoted to the root rule.
 *
 * THREE SCOPES, AND ONLY ONE OF THEM IS THE ROOT.
 *   :where(.dpm-root)            the card subtree, which never leaves the root.
 *   :where(#dpm-driver-overlay)  everything inside the driver modal.
 *                                pxShowOverlay PORTALS that overlay into
 *                                #px-modal-portal while it is open and
 *                                pxHideOverlay brings it back, so it sits
 *                                outside .dpm-root exactly while it is visible;
 *                                a rule scoped on the form root would stop
 *                                matching the moment the modal opened.
 *   bare                         .dpm-root, .dpm-container and
 *                                #dpm-driver-overlay, each a subject rather
 *                                than a descendant.
 * :where() contributes zero specificity, so every scoped rule keeps exactly the
 * weight its bare selector had.
 *
 * THE .dpm-table FAMILY NAMES .dpm-root AS A REAL ANCESTOR CLASS. Those six
 * rules sit on elements that also wear .px-table, and .dpm-table th vs
 * .px-table th tie at (0,1,1) on background, font-size and font-weight. This
 * asset is a head link, and a head link loses that tie to theme.css on order,
 * so the family wins on specificity instead, one extra class each. Promoting the whole family, not
 * just the one tying rule, is what keeps the family's internal order unchanged.
 * The .dpm-row-* rules are deliberately NOT promoted: they set --px-row-bg,
 * which theme.css's mobile .px-table tr rule reads, so their current weight is
 * what makes the row tint resolve the same way in both layouts.
 *
 * NO DESIGNER GATE. Nothing here is hidden until JavaScript
 * runs: .dpm-hidden is a state class in this head-linked asset, which the
 * designer canvas loads, so the canvas shows what first paint shows.
 *
 * @keyframes dpmFadeIn and dpmRowReveal already carry this form's stem and are
 * left as they are. No url(), no @font-face, no html rule, no :root block, and
 * no .themed-scrollbar rule — the class stays on the two
 * scroll boxes for the dependency's own scrollbar look.
 */

.dpm-root {
  display: block;
}

.dpm-container {
  --accent: #fbbf24; --accent-text: #422006;
  --accent-hover: #f59e0b;
  --accent-subtle: rgba(251,191,36,0.12);
  --px-loading-accent: #fbbf24;
  --dpm-tray: #FF9800;
  --dpm-fridge: #2196F3;
  --dpm-cd: #F44336;
  --dpm-supplements: #4CAF50;
  --dpm-regular: #757575;
  --dpm-tray-pale: rgba(255, 152, 0, 0.15);
  --dpm-fridge-pale: rgba(33, 150, 243, 0.15);
  --dpm-cd-pale: rgba(244, 67, 54, 0.15);
  --dpm-supplements-pale: rgba(76, 175, 80, 0.15);
  font-family: var(--px-font);
  color: var(--px-text-primary);
  background: var(--px-bg-deep);
  position: relative;
  isolation: isolate;
  z-index: 0;
  min-height: 400px;
}

:where(.dpm-root) .dpm-content {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: dpmFadeIn 0.4s ease;
}

/* The containers section title in form_template.html. */
:where(.dpm-root) .dpm-section-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--px-text-secondary);
  margin: 8px 0 4px;
  font-family: var(--px-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* #dpm-containers-wrapper ships with this class in form_template.html.
   dpm.mjs toggles it: hidden while the payload carries no closed containers,
   shown when it does. */
:where(.dpm-root) .dpm-hidden {
  display: none;
}

@keyframes dpmFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Filter Chips ===== */
:where(.dpm-root) .dpm-filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

:where(.dpm-root) .dpm-filter-chip {
  font-family: var(--px-font);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  border: 2px solid transparent;
}

:where(.dpm-root) .dpm-filter-chip input[type="checkbox"] {
  display: none;
}

:where(.dpm-root) .dpm-filter-chip .dpm-chip-check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 2px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: opacity 0.15s, transform 0.15s, background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

:where(.dpm-root) .dpm-filter-chip.checked .dpm-chip-check {
  background: currentColor;
}

:where(.dpm-root) .dpm-filter-chip.checked .dpm-chip-check::after {
  content: '\2713';
  color: #fff;
}

/* Filter chip colors - unchecked: color border/text, checked: color background */
:where(.dpm-root) .dpm-chip-tray {
  color: var(--dpm-tray);
  background: transparent;
  border-color: var(--dpm-tray);
}
:where(.dpm-root) .dpm-chip-tray.checked {
  background: var(--dpm-tray);
  color: #fff;
}

:where(.dpm-root) .dpm-chip-supplements {
  color: var(--dpm-supplements);
  background: transparent;
  border-color: var(--dpm-supplements);
}
:where(.dpm-root) .dpm-chip-supplements.checked {
  background: var(--dpm-supplements);
  color: #fff;
}

:where(.dpm-root) .dpm-chip-regular {
  color: var(--dpm-regular);
  background: transparent;
  border-color: var(--dpm-regular);
}
:where(.dpm-root) .dpm-chip-regular.checked {
  background: var(--dpm-regular);
  color: #fff;
}

:where(.dpm-root) .dpm-chip-cd {
  color: var(--dpm-cd);
  background: transparent;
  border-color: var(--dpm-cd);
}
:where(.dpm-root) .dpm-chip-cd.checked {
  background: var(--dpm-cd);
  color: #fff;
}

:where(.dpm-root) .dpm-chip-fridge {
  color: var(--dpm-fridge);
  background: transparent;
  border-color: var(--dpm-fridge);
}
:where(.dpm-root) .dpm-chip-fridge.checked {
  background: var(--dpm-fridge);
  color: #fff;
}

:where(.dpm-root) .dpm-filter-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

:where(.dpm-root) .dpm-filter-divider {
  width: 1px;
  height: 32px;
  background: var(--px-border);
  margin: 0 6px;
}

/* ===== Select All Checkbox ===== */
:where(.dpm-root) .dpm-select-all-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

:where(.dpm-root) .dpm-select-all-label {
  font-family: var(--px-font);
  font-size: 13px;
  font-weight: 500;
  color: var(--px-text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

:where(.dpm-root) .dpm-select-all-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

:where(.dpm-root) .dpm-selected-count {
  font-family: var(--px-mono);
  font-size: 12px;
  color: var(--px-text-muted);
  margin-left: auto;
}

/* ===== Table Card ===== */

:where(.dpm-root) .dpm-table-scroll {
  max-height: 50vh;
  overflow-y: auto;
  overflow-x: auto;
}

.dpm-root .dpm-table th {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  color: #1f2937;
  font-family: var(--px-mono);
  font-size: 0.75rem;
  font-weight: 700;
}

.dpm-root .dpm-table th:first-child {
  width: 50px;
  text-align: center;
}

.dpm-root .dpm-table td {
  font-size: 13px;
  color: var(--px-text-secondary);
}

.dpm-root .dpm-table td:first-child {
  text-align: center;
}

/* Row reveal animation */
.dpm-root .dpm-table tbody tr {
  animation: dpmRowReveal 0.3s ease both;
  cursor: pointer;
}

@keyframes dpmRowReveal {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Row background colors by storage type */
:where(.dpm-root) .dpm-row-cd { --px-row-bg: var(--dpm-cd-pale); background: var(--px-row-bg); }
:where(.dpm-root) .dpm-row-fridge { --px-row-bg: var(--dpm-fridge-pale); background: var(--px-row-bg); }
:where(.dpm-root) .dpm-row-tray { --px-row-bg: var(--dpm-tray-pale); background: var(--px-row-bg); }
:where(.dpm-root) .dpm-row-supplements { --px-row-bg: var(--dpm-supplements-pale); background: var(--px-row-bg); }

:where(.dpm-root) .dpm-row-cd:hover { background: rgba(244, 67, 54, 0.25); }
:where(.dpm-root) .dpm-row-fridge:hover { background: rgba(33, 150, 243, 0.25); }
:where(.dpm-root) .dpm-row-tray:hover { background: rgba(255, 152, 0, 0.25); }
:where(.dpm-root) .dpm-row-supplements:hover { background: rgba(76, 175, 80, 0.25); }

.dpm-root .dpm-table input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

:where(.dpm-root) .dpm-no-results {
  text-align: center;
  padding: 40px 24px;
  color: var(--px-text-muted);
  font-size: 14px;
  font-family: var(--px-mono);
}

/* ===== Action Row ===== */
:where(.dpm-root) .dpm-action-row {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 8px;
}

/* ===== Driver Input Modal ===== */
#dpm-driver-overlay {
  --accent: #fbbf24; --accent-text: #422006;
  --accent-hover: #f59e0b;
  --accent-subtle: rgba(251,191,36,0.12);
}

:where(#dpm-driver-overlay) .dpm-input {
  font-family: var(--px-font);
  font-size: 14px;
  padding: 12px 14px;
  border: 1px solid var(--px-border);
  border-radius: 8px;
  background: var(--px-input-bg);
  color: var(--px-text-primary);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}

:where(#dpm-driver-overlay) .dpm-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

:where(#dpm-driver-overlay) .dpm-input::placeholder {
  color: var(--px-text-muted);
}

:where(#dpm-driver-overlay) .dpm-input-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--px-text-primary);
  margin-bottom: 8px;
  display: block;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .dpm-root .dpm-table.px-table td { word-break: break-word; }
  .dpm-root .dpm-table.px-table td:first-child { text-align: left; }
  .dpm-root .dpm-table.px-table td[data-label=""]::before { display: none; }
}

@media (max-width: 600px) {
  :where(.dpm-root) .dpm-content { padding: 12px; gap: 12px; }
  :where(.dpm-root) .dpm-filters-row { gap: 8px; }
  :where(.dpm-root) .dpm-filter-chip { padding: 6px 12px; font-size: 12px; }
  :where(.dpm-root) .dpm-filter-divider { display: none; }
}