[data-separation-tv-mode='true'] {
  height: 100dvh;
}

[data-separation-tv-card] {
  cursor: pointer;
  touch-action: manipulation;
}

[data-separation-tv-card]:focus-visible {
  outline: 3px solid #60a5fa;
  outline-offset: 2px;
}

@media (max-width: 1023px) {
  [data-separation-tv-mode='true'] {
    padding: 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  [data-separation-tv-mode='true'] > header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 12px;
  }

  [data-separation-tv-mode='true'] > header h2 {
    font-size: 17px;
    line-height: 1.25;
  }

  [data-separation-tv-mode='true'] > header > div:last-child {
    display: flex;
    width: 100%;
  }

  [data-separation-tv-mode='true'] > header button {
    min-height: 44px;
    width: 100%;
    justify-content: center;
    white-space: nowrap;
  }

  [data-separation-tv-board] {
    /* Substitui o número fixo de colunas do painel de TV somente no celular. */
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: min(86vw, 350px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    padding-bottom: 8px;
  }

  [data-separation-tv-deposito] {
    scroll-snap-align: start;
  }

  [data-separation-tv-card] {
    min-height: 112px;
  }
}

/* Versioned asset for photo release cache recovery. */
:root { --portal-photo-release: 20260928; }

/* Explicit sizing also works in the production overlay, independent of Tailwind extraction. */
main[aria-label='Kanban de separação por depósito'] { width: 100%; max-width: 100%; min-width: 0; }
main[aria-label='Kanban de separação por depósito'] > div:not([data-separation-tv-board]) { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; width: 100%; min-width: 0; max-width: 100%; overflow: visible; align-items: stretch; }
[data-separation-stage] { width: 100% !important; min-width: 0 !important; max-width: 100% !important; overflow: hidden; }
[data-separation-stage] > header { min-height: 94px; }
[data-separation-stage] > [role=list], [data-separation-order-group] { min-width: 0; max-width: 100%; }
[data-separation-order-group] > [role=list] { display: flex; flex-direction: column; width: 100%; min-width: 0; max-width: 100%; overflow: visible; gap: 10px; }
[data-separation-order-group] > [role=list] > * { width: 100% !important; min-width: 0 !important; max-width: 100% !important; flex-shrink: 1; overflow-wrap: anywhere; }
[data-separation-tv-board] { width: 100%; max-width: 100%; min-width: 0; }
[data-separation-tv-deposito] { min-width: 0; max-width: 100%; }
[data-separation-tv-deposito] > header { min-height: 84px; }
@media(min-width:1024px) and (max-width:1599px) {
  [data-separation-tv-board]:has(> [data-separation-tv-deposito]:nth-child(4)) { grid-template-columns: repeat(3,minmax(0,1fr)) !important; grid-auto-rows: minmax(0,1fr); }
}
@media(min-width:900px) {
  main[aria-label='Kanban de separação por depósito'] > div:not([data-separation-tv-board]) { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(min-width:1600px) {
  main[aria-label='Kanban de separação por depósito'] > div:not([data-separation-tv-board]) { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
main[aria-label='Kanban de separação por depósito'] > div:has(> [data-separation-stage]:only-child) { grid-template-columns: minmax(0,1fr); }