/* ===== monthlies_dashboard_html (HTML form, scoped) =====
   Loaded eagerly from anvil.yaml native_deps.head_html. Every rule here comes
   from the form's old <style> block; nothing was added, removed or reordered.

   SCOPED ON .mp-dashboard, NOT ON THE FORM ROOT. This screen paints into the
   PARENT's #dash-dashboard-content div (the Python hands its rendered HTML to
   dashboards_html's setDashboardsContent), so its own form root, .mp-root, is
   an empty div and nothing this file styles is ever underneath it.
   .mp-dashboard is the class the render creates inside the parent, so it is
   the only ancestor every rule here actually has. :where() contributes zero
   specificity, so every rule keeps exactly the weight it had.

   Left BARE, deliberately:
   - the rules that already name .mp-dashboard (the root block, its dark twin,
     ::before, ::after and the two media-query copies). Wrapping a rule that
     already names the scope root would drop a class it needs.
   - .particle and its @keyframes. createExplosion appends particles to
     document.body, OUTSIDE .mp-dashboard, so a scoped rule would never match.
     It is the one genuinely global class name this asset ships; no other user
     of .particle exists in client_code/, theme/ or the dependency.

   @keyframes is a global namespace, so the two unprefixed ones are renamed:
   fade-out-particle -> mp-fade-out-particle (its one animation: ident moves
   with it) and fadeIn -> mp-fadeIn. mp-fadeIn has no animation: user anywhere
   and is carried across rather than deleted, because deleting dead code is a
   scope decision for the owner and not part of a conversion.

   NO DESIGNER GATE, and there is nothing to gate. The designer runs no Python,
   so a rule that hides content until the script runs would leave the canvas
   showing empty panels -- but every node this screen hides is JS-GENERATED and
   lives in the parent's container, so the canvas hides nothing that exists in
   a template. This form's template is one empty div.

   FAIL LOUD, CAUGHT NOWHERE. A missing element throws out of
   monthlies_dashboard.mjs, through the Python call site, into the app's error
   handling. Decided once for the whole analytics section. */

/* MONTHLIES PLANNER - Control Tower Theme */

/* ========================================
   BASE DASHBOARD STYLES
   ======================================== */
.mp-dashboard {
  /* Accent colors */
  --accent: #d97706;
  --accent-hover: #f59e0b;
  --accent-subtle: rgba(217,119,6,0.25);
  --accent-text: #422006;
  --px-loading-accent: #d97706;

  /* Semantic vars - monthlies-specific */
  --mp-accent: #2563eb;
  --mp-accent-light: #3b82f6;
  --mp-accent-glow: rgba(37, 99, 235, 0.12);
  --mp-accent-shadow: rgba(37, 99, 235, 0.25);
  --mp-header-gradient: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  --mp-row-hover: rgba(37, 99, 235, 0.06);
  --mp-week-divider-bg: #f1f5f9;
  --mp-toggle-knob: #ffffff;
  --mp-bar-bg: #e2e8f0;
  --mp-noise-opacity: 0.015;
  --mp-gradient-overlay: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%);

  font-family: var(--px-font);
  background: var(--px-bg-deep);
  padding: 24px;
  color: var(--px-text-primary);
  position: relative;
  transition: background 0.4s ease, color 0.3s ease;
  overflow-x: hidden;
}

[data-theme="dark"] .mp-dashboard {
  --mp-accent: #3b82f6;
  --mp-accent-light: #60a5fa;
  --mp-accent-glow: rgba(59, 130, 246, 0.4);
  --mp-accent-shadow: rgba(59, 130, 246, 0.5);
  --mp-header-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  --mp-row-hover: rgba(59, 130, 246, 0.15);
  --mp-week-divider-bg: #1e293b;
  --mp-toggle-knob: #0f172a;
  --mp-bar-bg: #334155;
  --mp-noise-opacity: 0.02;
  --mp-gradient-overlay: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%);
}

.mp-dashboard::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at top, var(--mp-accent-glow) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(59, 130, 246, 0.08) 0%, transparent 40%);
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.mp-dashboard::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../noise.png');
  background-repeat: repeat;
  opacity: var(--mp-noise-opacity);
  pointer-events: none;
}

/* ========================================
   HEADER STYLES
   ======================================== */
:where(.mp-dashboard) .mp-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

:where(.mp-dashboard) .mp-title-block h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3rem;
  letter-spacing: 0.05em;
  color: var(--px-text-primary);
  margin: 0;
  line-height: 1;
  transition: color 0.3s ease, text-shadow 0.3s ease;
  border-left: 5px solid var(--mp-accent);
  padding-left: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
}

[data-theme="dark"] :where(.mp-dashboard) .mp-title-block h1 {
  text-shadow: 0 0 40px var(--mp-accent-glow);
}

:where(.mp-dashboard) .mp-status-pulse {
  width: 10px;
  height: 10px;
  background: #4CAF50;
  border-radius: 50%;
  position: relative;
  animation: mp-pulse 2s ease-in-out infinite;
}

:where(.mp-dashboard) .mp-status-pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #4CAF50;
  animation: mp-pulse-ring 2s ease-in-out infinite;
}

@keyframes mp-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.9); }
}

@keyframes mp-pulse-ring {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 0; transform: scale(1.5); }
}

[data-theme="dark"] :where(.mp-dashboard) .mp-status-pulse {
  box-shadow: 0 0 12px rgba(76, 175, 80, 0.6);
}

:where(.mp-dashboard) .mp-title-block .mp-subtitle {
  font-family: var(--px-mono);
  font-size: 0.7rem;
  color: var(--px-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  margin-top: 8px;
  padding-left: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

:where(.mp-dashboard) .mp-subtitle::before {
  content: '//';
  color: var(--mp-accent);
  font-weight: bold;
}

/* R3-81: shown only while an automatic refresh has failed, so the
   board on screen is visibly ageing. Reuses the accent amber this
   dashboard already declares - no new colour. */
:where(.mp-dashboard) .mp-stale-banner {
  color: var(--accent-hover);
  font-weight: 700;
  padding: 0.5rem 0 0 0;
}

:where(.mp-dashboard) .mp-controls-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ========================================
   TOGGLE GROUP STYLES
   ======================================== */
:where(.mp-dashboard) .mp-toggle-group {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--px-bg-card);
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--px-border);
  box-shadow: var(--px-shadow);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

:where(.mp-dashboard) .mp-toggle-label {
  font-family: var(--px-font);
  font-size: 13px;
  font-weight: 500;
  color: var(--px-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.2s ease;
}

:where(.mp-dashboard) .mp-switch {
  position: relative;
  width: 50px;
  height: 24px;
}

:where(.mp-dashboard) .mp-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

:where(.mp-dashboard) .mp-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--px-bg-elevated);
  border-radius: 24px;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--px-border);
}

:where(.mp-dashboard) .mp-slider::before {
  position: absolute;
  content: '';
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background: var(--px-text-secondary);
  border-radius: 50%;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

:where(.mp-dashboard) .mp-switch input:checked + .mp-slider {
  background: var(--mp-accent);
  border-color: var(--mp-accent);
  box-shadow: 0 0 12px var(--mp-accent-glow);
}

:where(.mp-dashboard) .mp-switch input:checked + .mp-slider::before {
  transform: translateX(26px);
  background: var(--mp-toggle-knob);
}

/* ========================================
   TABLE CONTAINER
   ======================================== */
:where(.mp-dashboard) .mp-table-container {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow-x: auto;
}

/* ========================================
   PLANNER TABLE STYLES
   ======================================== */
:where(.mp-dashboard) .planner-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--px-bg-card);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--px-shadow);
  font-family: var(--px-font);
  border: 1px solid var(--px-border);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

:where(.mp-dashboard) .planner-table thead {
  background: var(--mp-header-gradient);
  color: white;
  position: relative;
  overflow: hidden;
}

:where(.mp-dashboard) .planner-table thead::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
  animation: mp-header-shimmer 8s ease-in-out infinite;
}

@keyframes mp-header-shimmer {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}

:where(.mp-dashboard) .planner-table th {
  padding: 15px;
  text-align: left;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: none;
  font-family: var(--px-mono);
}

:where(.mp-dashboard) .planner-table td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--px-border-subtle);
  color: var(--px-text-primary);
  font-size: 0.9rem;
  transition: background-color 0.2s, color 0.3s;
}

:where(.mp-dashboard) .planner-table tr:last-child td {
  border-bottom: none;
}

:where(.mp-dashboard) .planner-table tbody tr {
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  opacity: 0;
  animation: mp-row-reveal 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

:where(.mp-dashboard) .planner-table tbody tr:nth-child(1) { animation-delay: 0.05s; }
:where(.mp-dashboard) .planner-table tbody tr:nth-child(2) { animation-delay: 0.08s; }
:where(.mp-dashboard) .planner-table tbody tr:nth-child(3) { animation-delay: 0.11s; }
:where(.mp-dashboard) .planner-table tbody tr:nth-child(4) { animation-delay: 0.14s; }
:where(.mp-dashboard) .planner-table tbody tr:nth-child(5) { animation-delay: 0.17s; }
:where(.mp-dashboard) .planner-table tbody tr:nth-child(6) { animation-delay: 0.20s; }
:where(.mp-dashboard) .planner-table tbody tr:nth-child(7) { animation-delay: 0.23s; }
:where(.mp-dashboard) .planner-table tbody tr:nth-child(8) { animation-delay: 0.26s; }
:where(.mp-dashboard) .planner-table tbody tr:nth-child(9) { animation-delay: 0.29s; }
:where(.mp-dashboard) .planner-table tbody tr:nth-child(10) { animation-delay: 0.32s; }
:where(.mp-dashboard) .planner-table tbody tr:nth-child(n+11) { animation-delay: 0.35s; }

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

:where(.mp-dashboard) .planner-table tbody tr:hover {
  background-color: var(--mp-row-hover);
  transform: scale(1.003);
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

[data-theme="dark"] :where(.mp-dashboard) .planner-table tbody tr:hover {
  box-shadow: 0 0 20px var(--mp-accent-glow), 0 4px 12px rgba(0,0,0,0.3);
}

/* Table column borders */
:where(.mp-dashboard) .planner-table th, :where(.mp-dashboard) .planner-table td {
  border-right: 1px solid var(--px-border-subtle);
}

:where(.mp-dashboard) .planner-table th:last-child, :where(.mp-dashboard) .planner-table td:last-child {
  border-right: none;
}

/* Row borders */
:where(.mp-dashboard) .planner-table tbody tr:not(.week-divider) td {
  border-bottom: 1px solid var(--px-border);
}

/* Center start date column (3rd column) */
:where(.mp-dashboard) .planner-table tbody tr td:nth-child(3) {
  text-align: center;
}

:where(.mp-dashboard) .planner-table thead tr th:nth-child(3) {
  text-align: center;
}

/* Home name styling */
:where(.mp-dashboard) .mp-home-name {
  font-weight: 600;
  color: var(--mp-accent) !important;
  transition: color 0.3s ease;
}

[data-theme="dark"] :where(.mp-dashboard) .mp-home-name {
  text-shadow: 0 0 12px var(--mp-accent-glow);
}

/* Date cells */
:where(.mp-dashboard) .mp-date-cell {
  font-family: var(--px-mono);
  font-size: 0.85rem;
  color: var(--px-text-secondary);
}

/* Narrow columns */
:where(.mp-dashboard) .mp-narrow-col {
  font-family: var(--px-mono);
  font-weight: 600;
  text-align: center;
  color: var(--px-text-primary);
}

/* ========================================
   DYNAMIC BAR STYLES
   ======================================== */
:where(.mp-dashboard) .dynamic-bar-container {
  width: 100%;
  background-color: var(--mp-bar-bg);
  border-radius: 4px;
  height: 24px;
  position: relative;
  overflow: visible !important;
  transition: background-color 0.3s ease;
}

:where(.mp-dashboard) .dynamic-bar-fill {
  height: 100%;
  transition: width 0.5s ease, background-color 0.3s, box-shadow 0.3s;
  border-radius: 4px;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 100%);
  background-blend-mode: overlay;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 0 rgba(0,0,0,0.15);
}

[data-theme="dark"] :where(.mp-dashboard) .dynamic-bar-fill {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.3), 0 0 12px var(--mp-accent-glow);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 100%);
}

:where(.mp-dashboard) .dynamic-bar-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--px-font);
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 0 1px rgba(0,0,0,0.8);
  white-space: nowrap;
  z-index: 2;
  letter-spacing: 0.02em;
}

[data-theme="dark"] :where(.mp-dashboard) .dynamic-bar-text {
  text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 0 8px rgba(0,0,0,0.4);
}

/* ========================================
   WEEK DIVIDER STYLES
   ======================================== */
:where(.mp-dashboard) .week-divider td {
  background: linear-gradient(90deg, var(--mp-week-divider-bg) 0%, var(--px-bg-card) 100%) !important;
  color: var(--px-text-muted);
  font-family: var(--px-mono);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.75rem;
  padding: 10px 15px;
  border-top: none;
  border-bottom: none;
  border-left: 3px solid var(--mp-accent) !important;
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

[data-theme="dark"] :where(.mp-dashboard) .week-divider td {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.1) 0%, var(--px-bg-card) 100%) !important;
  border-left-color: var(--mp-accent-light) !important;
  text-shadow: 0 0 10px var(--mp-accent-glow);
}

/* ========================================
   CELEBRATORY ROW
   ======================================== */
:where(.mp-dashboard) .celebration-row {
  cursor: pointer;
  position: relative;
}

:where(.mp-dashboard) .celebration-row:hover {
  background-color: rgba(255, 248, 225, 0.8) !important;
}

[data-theme="dark"] :where(.mp-dashboard) .celebration-row:hover {
  background-color: rgba(59, 130, 246, 0.2) !important;
}

/* ========================================
   PARTICLE STYLES
   ======================================== */
.particle {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  animation: mp-fade-out-particle 1s forwards;
}

@keyframes mp-fade-out-particle {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

/* ========================================
   COLUMN WIDTHS
   ======================================== */
:where(.mp-dashboard) .planner-table {
  table-layout: fixed;
}

/* Home Name - auto width, no wrap */
:where(.mp-dashboard) .planner-table th:nth-child(1),
:where(.mp-dashboard) .planner-table td:nth-child(1) {
  width: 170px;
  min-width: 170px;
  white-space: nowrap;
}

/* Delivery Date - just enough for "25th Nov (Tue)" */
:where(.mp-dashboard) .planner-table th:nth-child(2),
:where(.mp-dashboard) .planner-table td:nth-child(2) {
  width: 88px;
  min-width: 88px;
  white-space: nowrap;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

/* Start Date - just enough for "25th Nov (Tue)" */
:where(.mp-dashboard) .planner-table th:nth-child(3),
:where(.mp-dashboard) .planner-table td:nth-child(3) {
  width: 88px;
  min-width: 88px;
  white-space: nowrap;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

/* Exp Items, Scripts Rcvd - 6 chars wide */
:where(.mp-dashboard) .planner-table th.narrow-col,
:where(.mp-dashboard) .planner-table td.narrow-col {
  width: 50px;
  min-width: 50px;
  max-width: 50px;
  text-align: center;
  padding-left: 4px !important;
  padding-right: 4px !important;
}

/* Owings column - slightly narrower */
:where(.mp-dashboard) .planner-table th:last-child,
:where(.mp-dashboard) .planner-table td:last-child {
  width: 45px !important;
  min-width: 45px !important;
  max-width: 45px !important;
}

/* All progress bar columns - equal width */
:where(.mp-dashboard) .planner-table th.bar-col,
:where(.mp-dashboard) .planner-table td.bar-col {
  width: 110px;
  min-width: 110px;
  max-width: 110px;
}

/* Scripts Rcvd % column - collapsible */
:where(.mp-dashboard) .planner-table th.scripts-rcvd-col,
:where(.mp-dashboard) .planner-table td.scripts-rcvd-col {
  width: 110px;
  min-width: 110px;
  max-width: 110px;
  transition: width 0.4s ease, min-width 0.4s ease, max-width 0.4s ease,
              padding 0.4s ease, opacity 0.4s ease, border-width 0.4s ease;
  overflow: hidden;
}

:where(.mp-dashboard) .planner-table th.scripts-rcvd-col.hidden,
:where(.mp-dashboard) .planner-table td.scripts-rcvd-col.hidden {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  opacity: 0;
  border-width: 0 !important;
}

/* Rx Received By column */
:where(.mp-dashboard) .planner-table th.rx-received-by-col,
:where(.mp-dashboard) .planner-table td.rx-received-by-col {
  width: 88px;
  min-width: 88px;
  white-space: nowrap;
  padding-left: 6px !important;
  padding-right: 6px !important;
  text-align: center;
}

/* Threshold input */
:where(.mp-dashboard) .mp-threshold-input {
  width: 50px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--px-border);
  background: var(--px-input-bg);
  color: var(--px-text-primary);
  font-family: var(--px-mono);
  font-size: 13px;
  text-align: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

:where(.mp-dashboard) .mp-threshold-input:focus {
  outline: none;
  border-color: var(--mp-accent);
  box-shadow: 0 0 0 2px var(--mp-accent-glow);
}

:where(.mp-dashboard) .mp-threshold-input::-webkit-inner-spin-button,
:where(.mp-dashboard) .mp-threshold-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

:where(.mp-dashboard) .mp-threshold-input {
  -moz-appearance: textfield;
}

/* ========================================
   ANIMATIONS
   ======================================== */
:where(.mp-dashboard) .mp-fade-in {
  animation: mp-fadeSlideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

@keyframes mp-fadeSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

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

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1100px) {
  :where(.mp-dashboard) .mp-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  :where(.mp-dashboard) .mp-controls-right {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
  }
  :where(.mp-dashboard) .mp-title-block h1 {
    font-size: 2.5rem;
  }
}

@media (max-width: 800px) {
  .mp-dashboard {
    padding: 16px;
  }
  :where(.mp-dashboard) .mp-title-block h1 {
    font-size: 2rem;
  }
  :where(.mp-dashboard) .mp-title-block .mp-subtitle {
    font-size: 0.6rem;
  }
  :where(.mp-dashboard) .mp-toggle-group {
    padding: 6px 12px;
  }
  :where(.mp-dashboard) .mp-toggle-label {
    font-size: 11px;
  }
  :where(.mp-dashboard) .mp-switch {
    width: 44px;
    height: 22px;
  }
  :where(.mp-dashboard) .mp-slider::before {
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
  }
  :where(.mp-dashboard) .mp-switch input:checked + .mp-slider::before {
    transform: translateX(22px);
  }
  :where(.mp-dashboard) .mp-threshold-input {
    width: 45px;
    padding: 3px 6px;
    font-size: 12px;
  }
}

@media (max-width: 600px) {
  .mp-dashboard {
    padding: 12px;
  }
  :where(.mp-dashboard) .mp-title-block h1 {
    font-size: 1.6rem;
    padding-left: 10px;
    border-left-width: 3px;
  }
  :where(.mp-dashboard) .mp-title-block .mp-subtitle {
    padding-left: 13px;
    font-size: 0.55rem;
  }
  :where(.mp-dashboard) .mp-controls-right {
    gap: 8px;
  }
  :where(.mp-dashboard) .mp-toggle-group {
    padding: 5px 10px;
    gap: 6px;
  }
  :where(.mp-dashboard) .mp-toggle-label {
    font-size: 10px;
  }
}

/* ========================================
   MOBILE CARD LAYOUT - Control Tower Cards
   ======================================== */
@media (max-width: 700px) {
  /* Table structure to cards */
  :where(.mp-dashboard) .mp-table-container {
    overflow-x: visible;
  }

  :where(.mp-dashboard) .planner-table thead {
    display: none;
  }

  :where(.mp-dashboard) .planner-table,
  :where(.mp-dashboard) .planner-table tbody {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  /* Week divider as sticky header */
  :where(.mp-dashboard) .planner-table tbody tr.week-divider {
    display: flex !important;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--mp-header-gradient);
    color: white;
    border-radius: 8px;
    margin: 16px 0 10px 0;
    padding: 10px 14px;
    font-family: var(--px-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35);
    animation: none !important;
    opacity: 1 !important;
    cursor: default;
  }

  :where(.mp-dashboard) .planner-table tbody tr.week-divider:hover {
    transform: none;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35);
  }

  :where(.mp-dashboard) .planner-table tbody tr.week-divider td {
    display: contents;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    color: white;
  }

  :where(.mp-dashboard) .week-count {
    font-weight: 400;
    opacity: 0.85;
    margin-left: 8px;
  }

  /* Data row as card - Flexbox layout for proper flow */
  :where(.mp-dashboard) .planner-table tbody tr:not(.week-divider) {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    background: var(--px-bg-card);
    border: 1px solid var(--px-border);
    border-radius: 12px;
    padding: 12px 14px 14px 18px;
    margin-bottom: 10px;
    box-shadow: var(--px-shadow);
    position: relative;
    overflow: hidden;
    animation: none !important;
    opacity: 1 !important;
  }

  /* Blue accent bar on left */
  :where(.mp-dashboard) .planner-table tbody tr:not(.week-divider)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--mp-accent) 0%, var(--mp-accent-light) 100%);
    border-radius: 12px 0 0 12px;
  }

  /* Celebration row glow */
  :where(.mp-dashboard) .planner-table tbody tr.celebration-row::before {
    box-shadow: 0 0 12px var(--mp-accent-glow);
  }

  /* Reset all td styles */
  :where(.mp-dashboard) .planner-table td {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* ROW 1: Home name - full width */
  :where(.mp-dashboard) .planner-table td.mp-home-name {
    order: 1;
    flex: 1 1 100%;
    font-size: 15px;
    font-weight: 700;
    color: var(--mp-accent) !important;
    padding-bottom: 8px !important;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--px-border) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ROW 2: Date chips inline */
  :where(.mp-dashboard) .planner-table td.delivery-date-cell,
  :where(.mp-dashboard) .planner-table td:nth-child(3),
  :where(.mp-dashboard) .planner-table td.rx-received-by-col {
    order: 2;
    display: inline-flex !important;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: var(--px-text-secondary);
  }

  /* Date label prefixes */
  :where(.mp-dashboard) .planner-table td.delivery-date-cell::before {
    content: 'Del:';
    font-family: var(--px-mono);
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--px-text-muted);
    margin-right: 2px;
  }

  :where(.mp-dashboard) .planner-table td:nth-child(3)::before {
    content: '| Start:';
    font-family: var(--px-mono);
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--px-text-muted);
    margin-right: 2px;
  }

  :where(.mp-dashboard) .planner-table td.rx-received-by-col::before {
    content: '| Rx:';
    font-family: var(--px-mono);
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--px-text-muted);
    margin-right: 2px;
  }

  /* ROW 3: Numeric stats as chips */
  :where(.mp-dashboard) .planner-table td.mp-narrow-col {
    order: 3;
    display: inline-flex !important;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    background: var(--px-bg-elevated);
    padding: 4px 8px !important;
    border-radius: 6px;
    border: 1px solid var(--px-border-subtle);
  }

  /* Expected Items */
  :where(.mp-dashboard) .planner-table td.mp-narrow-col:nth-child(4)::before {
    content: 'Exp:';
    font-family: var(--px-mono);
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--px-text-muted);
    margin-right: 2px;
  }

  /* Scripts Rcvd */
  :where(.mp-dashboard) .planner-table td.mp-narrow-col:nth-child(5)::before {
    content: 'Rcvd:';
    font-family: var(--px-mono);
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--px-text-muted);
    margin-right: 2px;
  }

  /* Owings - special coloring preserved */
  :where(.mp-dashboard) .planner-table td.mp-narrow-col:last-child::before {
    content: 'Ow:';
    font-family: var(--px-mono);
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--px-text-muted);
    margin-right: 2px;
  }

  /* Force line break before progress bars using ::after pseudo-element */
  :where(.mp-dashboard) .planner-table tbody tr:not(.week-divider)::after {
    content: '';
    flex: 0 0 100%;
    order: 3;
    height: 0;
  }

  /* Progress bars section - 2x2 grid */
  :where(.mp-dashboard) .planner-table td.bar-col {
    order: 4;
    flex: 1 1 calc(50% - 6px);
    min-width: calc(50% - 6px);
    max-width: calc(50% - 6px);
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  /* Bar labels with icons */
  :where(.mp-dashboard) .planner-table td.bar-col::before {
    font-family: var(--px-mono);
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--px-text-muted);
    display: block;
  }

  /* Scripts Rcvd % */
  :where(.mp-dashboard) .planner-table td.bar-col.scripts-rcvd-col::before {
    content: '📄 Scripts';
  }

  /* Hide Scripts Rcvd % when in "vs scripts" mode */
  :where(.mp-dashboard) .planner-table td.bar-col.scripts-rcvd-col.hidden {
    display: none !important;
  }

  /* Pick List Gen % */
  :where(.mp-dashboard) .planner-table td.bar-col:nth-child(8)::before {
    content: '📋 Pick List';
  }

  /* Bagged % */
  :where(.mp-dashboard) .planner-table td.bar-col:nth-child(9)::before {
    content: '🛍️ Bagged';
  }

  /* Dispatched % */
  :where(.mp-dashboard) .planner-table td.bar-col:nth-child(10)::before {
    content: '🚚 Dispatch';
  }

  /* Compact progress bars */
  :where(.mp-dashboard) .planner-table td.bar-col .dynamic-bar-container {
    height: 20px;
    border-radius: 6px;
  }

  :where(.mp-dashboard) .planner-table td.bar-col .dynamic-bar-fill {
    border-radius: 6px;
  }

  :where(.mp-dashboard) .planner-table td.bar-col .dynamic-bar-text {
    font-size: 11px;
    font-weight: 700;
  }

  /* Trigger source glow on celebration rows */
  :where(.mp-dashboard) .planner-table .celebration-row .trigger-source .dynamic-bar-fill {
    box-shadow: 0 0 8px currentColor;
  }

  /* Touch feedback for cards */
  :where(.mp-dashboard) .planner-table tbody tr:not(.week-divider):active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
}

/* Extra small mobile - even more compact */
@media (max-width: 500px) {
  :where(.mp-dashboard) .planner-table tbody tr:not(.week-divider) {
    padding: 10px 12px 12px 16px;
    gap: 5px 8px;
  }

  :where(.mp-dashboard) .planner-table td.mp-home-name {
    font-size: 14px;
  }

  :where(.mp-dashboard) .planner-table td.bar-col::before {
    font-size: 7px;
  }

  :where(.mp-dashboard) .planner-table td.bar-col .dynamic-bar-container {
    height: 18px;
  }

  :where(.mp-dashboard) .planner-table td.bar-col .dynamic-bar-text {
    font-size: 10px;
  }

  :where(.mp-dashboard) .planner-table td.mp-narrow-col {
    font-size: 10px;
    padding: 3px 6px !important;
  }

  :where(.mp-dashboard) .planner-table tbody tr.week-divider {
    font-size: 10px;
    padding: 8px 12px;
  }
}

/* ========================================
   DAY-OF-WEEK ROW COLORS (kiosk flag: day_of_week_row_colors)
   Applied at <tr> level via .mp-dow-active + data-dow attribute.
   ======================================== */
.mp-dashboard {
  --mp-dow-mon-rgb:     59, 130, 246;
  --mp-dow-tue-rgb:     34, 197, 94;
  --mp-dow-wed-rgb:     245, 158, 11;
  --mp-dow-thu-rgb:     168, 85, 247;
  --mp-dow-fri-rgb:     236, 72, 153;
  --mp-dow-weekend-rgb: 100, 116, 139;
  --mp-dow-invalid-rgb: 220, 38, 38;
}
[data-theme="dark"] .mp-dashboard {
  --mp-dow-mon-rgb:     96, 165, 250;
  --mp-dow-tue-rgb:     74, 222, 128;
  --mp-dow-wed-rgb:     251, 191, 36;
  --mp-dow-thu-rgb:     192, 132, 252;
  --mp-dow-fri-rgb:     244, 114, 182;
  --mp-dow-weekend-rgb: 148, 163, 184;
  --mp-dow-invalid-rgb: 248, 113, 113;
}

:where(.mp-dashboard) .planner-table tbody tr.mp-dow-active[data-dow="mon"]     { --mp-dow-current-rgb: var(--mp-dow-mon-rgb); }
:where(.mp-dashboard) .planner-table tbody tr.mp-dow-active[data-dow="tue"]     { --mp-dow-current-rgb: var(--mp-dow-tue-rgb); }
:where(.mp-dashboard) .planner-table tbody tr.mp-dow-active[data-dow="wed"]     { --mp-dow-current-rgb: var(--mp-dow-wed-rgb); }
:where(.mp-dashboard) .planner-table tbody tr.mp-dow-active[data-dow="thu"]     { --mp-dow-current-rgb: var(--mp-dow-thu-rgb); }
:where(.mp-dashboard) .planner-table tbody tr.mp-dow-active[data-dow="fri"]     { --mp-dow-current-rgb: var(--mp-dow-fri-rgb); }
:where(.mp-dashboard) .planner-table tbody tr.mp-dow-active[data-dow="weekend"] { --mp-dow-current-rgb: var(--mp-dow-weekend-rgb); }
:where(.mp-dashboard) .planner-table tbody tr.mp-dow-active[data-dow="invalid"] { --mp-dow-current-rgb: var(--mp-dow-invalid-rgb); }

:where(.mp-dashboard) .planner-table tbody tr.mp-dow-active                     { background-color: rgba(var(--mp-dow-current-rgb), 0.14); }
:where(.mp-dashboard) .planner-table tbody tr.mp-dow-active[data-dow="invalid"] { background-color: rgba(var(--mp-dow-current-rgb), 0.20); }
[data-theme="dark"] :where(.mp-dashboard) .planner-table tbody tr.mp-dow-active                     { background-color: rgba(var(--mp-dow-current-rgb), 0.22); }
[data-theme="dark"] :where(.mp-dashboard) .planner-table tbody tr.mp-dow-active[data-dow="invalid"] { background-color: rgba(var(--mp-dow-current-rgb), 0.30); }

:where(.mp-dashboard) .planner-table tbody tr.mp-dow-active td:first-child { box-shadow: inset 3px 0 0 rgb(var(--mp-dow-current-rgb)); }

/* ========================================
   COLUMN HIDING (kiosk flag: hide_extra_columns)
   Semantic classes on both <th> and <td> — robust to column reorders.
   !important needed to beat mobile card-layout resets.
   ======================================== */
:where(.mp-dashboard) .planner-table.mp-hide-extra .mp-col-exp-items,
:where(.mp-dashboard) .planner-table.mp-hide-extra .mp-col-scripts-rcvd,
:where(.mp-dashboard) .planner-table.mp-hide-extra .mp-col-rx-rcvd-by,
:where(.mp-dashboard) .planner-table.mp-hide-extra .mp-col-dispatched { display: none !important; }

/* ========================================
   HOME-NAME CELL
   Inner flex wrapper so the td keeps default table-cell layout
   (otherwise display:flex on the td zeroes the column's intrinsic
   width and names truncate before the cell is actually full).
   ======================================== */
:where(.mp-dashboard) .planner-table td.mp-home-name .mp-home-name-inner {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
:where(.mp-dashboard) .planner-table td.mp-home-name .mp-home-name-text {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--mp-accent);
}

/* ========================================
   MOBILE: day-tint on card + accent bar override
   ======================================== */
@media (max-width: 700px) {
  :where(.mp-dashboard) .planner-table tbody tr.mp-dow-active:not(.week-divider)                     { background-color: rgba(var(--mp-dow-current-rgb), 0.18) !important; }
  :where(.mp-dashboard) .planner-table tbody tr.mp-dow-active[data-dow="invalid"]:not(.week-divider) { background-color: rgba(var(--mp-dow-current-rgb), 0.24) !important; }
  [data-theme="dark"] :where(.mp-dashboard) .planner-table tbody tr.mp-dow-active:not(.week-divider)                     { background-color: rgba(var(--mp-dow-current-rgb), 0.22) !important; }
  [data-theme="dark"] :where(.mp-dashboard) .planner-table tbody tr.mp-dow-active[data-dow="invalid"]:not(.week-divider) { background-color: rgba(var(--mp-dow-current-rgb), 0.30) !important; }

  :where(.mp-dashboard) .planner-table tbody tr.celebration-row.mp-dow-active:hover:not(.week-divider) { background-color: rgba(255, 248, 225, 0.8) !important; }
  [data-theme="dark"] :where(.mp-dashboard) .planner-table tbody tr.celebration-row.mp-dow-active:hover:not(.week-divider) { background-color: rgba(59, 130, 246, 0.2) !important; }

  :where(.mp-dashboard) .planner-table tbody tr.mp-dow-active:not(.week-divider)::before { background: rgb(var(--mp-dow-current-rgb)); }

  :where(.mp-dashboard) .planner-table td.mp-home-name .mp-home-name-text { font-weight: 700; }
}