/*
 * Authoritative responsive layout layer.
 *
 * Legacy feature styles intentionally remain untouched. This file is loaded last
 * and owns only viewport geometry, containment, wrapping, and local scrolling.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

img,
svg,
canvas,
video {
  max-width: 100%;
}

button,
input,
select,
textarea,
fieldset {
  min-width: 0;
}

.app-shell,
.app-main,
.view,
.workspace,
.orders-crm,
.orders-board,
.admin-screen,
.admin-root {
  min-width: 0;
  max-width: 100%;
}

.app-shell,
.app-main {
  width: 100%;
}

.app-main {
  min-height: 100dvh;
}

/* Application shell */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.topbar__lead,
.topbar__module-nav,
.topbar__actions {
  min-width: 0;
}

.topbar__lead {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
}

.topbar__module-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.topbar__actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.company-context-banner,
.first-run-onboarding {
  max-width: 100%;
}

/* Tetris: stable two-column workbench with a stacked compact mode. */
body[data-active-view="workspace"] #view-workspace.workspace {
  grid-template-columns: clamp(270px, 19vw, 320px) minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 100% !important;
}

body[data-active-view="workspace"] #view-workspace .workspace__panel,
body[data-active-view="workspace"] #view-workspace .workspace__canvas,
body[data-active-view="workspace"] #view-workspace .panel-card--planner,
body[data-active-view="workspace"] #view-workspace .panel-scroll,
body[data-active-view="workspace"] #view-workspace .canvas-header,
body[data-active-view="workspace"] #view-workspace .canvas-board,
body[data-active-view="workspace"] #view-workspace #stage,
body[data-active-view="workspace"] #view-workspace .ruler-frame,
body[data-active-view="workspace"] #view-workspace #bayCanvas,
body[data-active-view="workspace"] #view-workspace .planner-3d {
  min-width: 0 !important;
  max-width: 100% !important;
}

body[data-active-view="workspace"] #view-workspace .canvas-header {
  grid-template-columns: minmax(150px, auto) minmax(360px, 1fr) auto auto !important;
}

body[data-active-view="workspace"] #view-workspace .canvas-header__metrics,
body[data-active-view="workspace"] #view-workspace .canvas-metrics {
  min-width: 0 !important;
}

body[data-active-view="workspace"] #view-workspace .canvas-metrics {
  grid-template-columns: repeat(5, minmax(84px, 1fr)) !important;
}

body[data-active-view="workspace"] #view-workspace .canvas-metric {
  min-width: 0 !important;
}

body[data-active-view="workspace"] #view-workspace .canvas-metric__label,
body[data-active-view="workspace"] #view-workspace .canvas-metric__value,
body[data-active-view="workspace"] #view-workspace .canvas-metric__subvalue {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body[data-active-view="workspace"] #view-workspace .bulk-modal__card {
  width: min(560px, calc(100vw - 32px)) !important;
  max-height: min(760px, calc(100dvh - 32px)) !important;
  overflow: auto !important;
}

/* Orders: controls reflow; the data table alone owns horizontal scrolling. */
body[data-active-view="templates"] #view-templates.orders-view,
body[data-active-view="templates"] #view-templates .orders-crm,
body[data-active-view="templates"] #view-templates .orders-board {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body[data-active-view="templates"] #view-templates.orders-view {
  padding-inline: clamp(10px, 2vw, 30px) !important;
}

body[data-active-view="templates"] #view-templates .orders-board__toolbar {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 560px) minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px 18px !important;
}

body[data-active-view="templates"] #view-templates .orders-board__searchslot {
  width: min(100%, 560px) !important;
  justify-self: center !important;
}

body[data-active-view="templates"] #view-templates .orders-board__year-select {
  width: 112px !important;
  min-width: 112px !important;
}

body[data-active-view="templates"] #view-templates .orders-board__titlewrap,
body[data-active-view="templates"] #view-templates .orders-board__controls,
body[data-active-view="templates"] #view-templates .orders-board__searchslot,
body[data-active-view="templates"] #view-templates .orders-filter--search,
body[data-active-view="templates"] #view-templates .orders-board__actions {
  min-width: 0 !important;
  max-width: 100% !important;
}

body[data-active-view="templates"] #view-templates .orders-board__controls {
  grid-template-columns: minmax(220px, 1fr) auto !important;
  width: 100% !important;
}

body[data-active-view="templates"] #view-templates .orders-board__actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
}

body[data-active-view="templates"] #view-templates .orders-machine-tabs,
body[data-active-view="templates"] #view-templates .orders-machine-tabs__scroller {
  min-width: 0 !important;
  max-width: 100% !important;
}

body[data-active-view="templates"] #view-templates .orders-machine-tabs__scroller {
  overflow-x: auto !important;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

body[data-active-view="templates"] #view-templates .orders-table-wrap {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* Keep desktop order rows inside the available workspace so each pane owns its own scrolling. */
@media (min-width: 981px) {
  body[data-active-view="templates"] #view-templates .orders-board__content {
    align-items: stretch !important;
    overflow: hidden !important;
  }

  body[data-active-view="templates"] #view-templates .orders-board__content .orders-board__table-region {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body[data-active-view="templates"] #view-templates .orders-board__content .orders-table-wrap {
    min-height: 0 !important;
  }
}

body[data-active-view="templates"] #view-templates .orders-table {
  width: 100% !important;
  min-width: 0 !important;
}

body[data-active-view="templates"] #view-templates .orders-table__head,
body[data-active-view="templates"] #view-templates .orders-table__cell {
  min-width: 0;
}

body[data-active-view="templates"] #view-templates .orders-drawer,
body[data-active-view="templates"] #view-templates .orders-route-drawer,
body[data-active-view="templates"] #view-templates .orders-screen-preview {
  max-width: calc(100vw - 24px) !important;
}

body[data-active-view="templates"] #view-templates .orders-detail,
body[data-active-view="templates"] #view-templates .orders-detail__inner,
body[data-active-view="templates"] #view-templates .orders-detail-section,
body[data-active-view="templates"] #view-templates .orders-detail-form,
body[data-active-view="templates"] #view-templates .orders-billing-builder {
  min-width: 0 !important;
  max-width: 100% !important;
}

body[data-active-view="templates"] #view-templates .orders-detail-tabs {
  max-width: 100% !important;
  overflow-x: auto !important;
  overscroll-behavior-inline: contain;
}

body[data-active-view="templates"] #view-templates .orders-modal__card,
body[data-active-view="templates"] #view-templates .orders-billing-modal__card {
  width: min(var(--dialog-width, 720px), calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100dvh - 32px) !important;
  overflow: auto !important;
}

body[data-active-view="templates"] #view-templates .orders-table-settings-popover,
body[data-active-view="templates"] #view-templates .orders-columns-popover {
  width: min(440px, calc(100vw - 24px)) !important;
  max-height: min(620px, calc(100dvh - 220px)) !important;
  overflow: auto !important;
  overscroll-behavior: contain;
}

/* Administration: master/detail on wide screens, a single readable flow below. */
#view-admin,
#view-admin .admin-screen,
#view-admin .admin-root,
#view-admin .admin-layout,
#view-admin .admin-master-detail,
#view-admin .admin-registry,
#view-admin .admin-company-workspace {
  min-width: 0 !important;
  max-width: 100% !important;
}

#view-admin .admin-layout {
  width: min(100%, 1880px) !important;
  margin-inline: auto !important;
  padding: clamp(12px, 2vw, 28px) !important;
}

#view-admin .admin-master-detail {
  grid-template-columns: minmax(430px, 0.42fr) minmax(0, 1fr) !important;
}

#view-admin .admin-page-header,
#view-admin .admin-page-header__actions,
#view-admin .admin-registry__head,
#view-admin .admin-company-panel__toolbar,
#view-admin .admin-person-form__footer {
  min-width: 0;
  flex-wrap: wrap;
}

#view-admin .admin-registry-filters,
#view-admin .admin-users-search,
#view-admin .admin-create-company,
#view-admin .admin-person-form__grid,
#view-admin .admin-settings-form {
  min-width: 0;
}

#view-admin .admin-company-table,
#view-admin .admin-users,
#view-admin .admin-company-tabpanel {
  min-width: 0;
  max-width: 100%;
}

#view-admin [role="dialog"] {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
}

/* Public/auth surfaces share the same containment rules. */
.site-header__inner,
.auth-page,
.auth-side,
.auth-main,
.auth-card,
.legal-page,
.legal-card,
.hero,
.product-scene,
.scene-window,
.product-gallery__inner,
.product-gallery__layout {
  min-width: 0;
  max-width: 100%;
}

.site-header__inner,
.nav,
.header-actions,
.hero-actions,
.form-footer {
  flex-wrap: wrap;
}

.auth-card,
.legal-card {
  width: min(100%, 680px);
}

.input,
.auth-form input,
.auth-form select,
.auth-form textarea {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 1440px) {
  body[data-active-view="workspace"] #view-workspace .canvas-header {
    grid-template-columns: minmax(140px, auto) minmax(300px, 1fr) auto auto !important;
  }

  body[data-active-view="workspace"] #view-workspace .canvas-metrics {
    grid-template-columns: repeat(5, minmax(70px, 1fr)) !important;
  }

  body[data-active-view="templates"] #view-templates .orders-board__toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 460px) minmax(0, 1fr) !important;
  }

  body[data-active-view="templates"] #view-templates .orders-board__controls {
    grid-template-columns: minmax(200px, 1fr) auto !important;
  }
}

@media (max-width: 1280px) {
  .topbar__brandblock {
    display: none !important;
  }

  body[data-active-view="workspace"] #view-workspace.workspace {
    grid-template-columns: clamp(210px, 19vw, 250px) minmax(0, 1fr) !important;
  }

  body[data-active-view="workspace"] #view-workspace .canvas-header {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    grid-template-rows: auto auto !important;
  }

  body[data-active-view="workspace"] #view-workspace .canvas-header__metrics {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  body[data-active-view="workspace"] #view-workspace .canvas-metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  body[data-active-view="templates"] #view-templates .orders-board__toolbar {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  body[data-active-view="templates"] #view-templates .orders-board__searchslot {
    width: 100% !important;
  }

  body[data-active-view="templates"] #view-templates .orders-board__controls {
    justify-self: stretch !important;
  }

  #view-admin .admin-master-detail {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 1180px) {
  body[data-active-view="templates"] #view-templates .orders-board__content .orders-table-workspace-row > .orders-table-wrap {
    max-width: none !important;
  }
}

@media (max-width: 1080px) {
  .topbar,
  body[data-active-view="templates"] .topbar,
  body[data-active-view="workspace"] .topbar {
    padding-inline: 10px !important;
    gap: 8px !important;
  }

  .topbar-nav-button,
  body[data-active-view="templates"] .topbar-nav-button,
  body[data-active-view="workspace"] .topbar-nav-button {
    padding-inline: 10px !important;
  }

  body[data-active-view="workspace"] #view-workspace.workspace {
    grid-template-columns: 220px minmax(0, 1fr) !important;
  }

  body[data-active-view="templates"] #view-templates.orders-view {
    padding-inline: 10px !important;
  }
}

@media (max-width: 960px) {
  .topbar,
  body[data-active-view="templates"] .topbar,
  body[data-active-view="workspace"] .topbar {
    align-items: center !important;
    flex-wrap: wrap !important;
    min-height: auto !important;
  }

  .topbar__lead {
    order: 1;
    width: calc(100% - 132px);
  }

  .topbar__module-nav {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .topbar__actions {
    order: 2;
    margin-left: auto;
  }

  body[data-active-view="workspace"] #view-workspace.workspace {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body[data-active-view="workspace"] #view-workspace .workspace__canvas {
    order: 1;
    height: clamp(480px, 68dvh, 680px) !important;
  }

  body[data-active-view="workspace"] #view-workspace .workspace__panel {
    order: 2;
    height: auto !important;
  }

  body[data-active-view="workspace"] #view-workspace .panel-card--planner,
  body[data-active-view="workspace"] #view-workspace .panel-scroll {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body[data-active-view="workspace"] #view-workspace .panel-scroll {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body[data-active-view="templates"] #view-templates .orders-board__controls {
    grid-template-columns: 1fr !important;
  }

  body[data-active-view="templates"] #view-templates .orders-board__actions {
    justify-content: flex-start !important;
  }

  body[data-active-view="templates"] #view-templates .orders-drawer,
  body[data-active-view="templates"] #view-templates .orders-route-drawer,
  body[data-active-view="templates"] #view-templates .orders-screen-preview {
    right: 8px !important;
    left: 8px !important;
    width: auto !important;
    max-width: none !important;
  }

  #view-admin .admin-company-table__header {
    display: none;
  }

  #view-admin .admin-company-row,
  #view-admin .admin-person-row,
  #view-admin .admin-platform-user-row,
  #view-admin .admin-person-form__grid,
  #view-admin .admin-settings-form {
    grid-template-columns: 1fr !important;
  }

  .auth-page {
    grid-template-columns: 1fr !important;
  }

  .auth-side {
    min-height: auto !important;
  }
}

/* Once the planner stacks into one column, its summary must become part of the
   document flow as well. Otherwise the desktop overlay hides the upper half of
   the work field throughout the tablet-width transition. */
@media (min-width: 721px) and (max-width: 960px) {
  body[data-active-view="workspace"] #view-workspace .workspace__canvas {
    display: grid !important;
    grid-template-rows: auto clamp(380px, 54dvh, 480px) !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body[data-active-view="workspace"] #view-workspace .canvas-header,
  body[data-active-view="workspace"][data-planner-view="3d"] #view-workspace .canvas-header,
  body[data-theme="dark"][data-active-view="workspace"][data-planner-view="3d"] #view-workspace .canvas-header {
    position: relative !important;
    inset: auto !important;
    grid-template-areas:
      "title title"
      "metrics metrics"
      "switch export" !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
    transform: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  body[data-active-view="workspace"] #view-workspace .canvas-header__titleblock {
    grid-area: title !important;
  }

  body[data-active-view="workspace"] #view-workspace .canvas-header__metrics {
    grid-area: metrics !important;
    width: 100% !important;
  }

  body[data-active-view="workspace"] #view-workspace .canvas-header__metrics .canvas-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: none !important;
  }

  body[data-active-view="workspace"] #view-workspace .planner-view-switch {
    grid-area: switch !important;
    justify-self: start !important;
  }

  body[data-active-view="workspace"] #view-workspace .planner-export-actions {
    grid-area: export !important;
    justify-self: end !important;
  }

  body[data-active-view="workspace"] #view-workspace .canvas-board,
  body[data-active-view="workspace"] #view-workspace #stage,
  body[data-active-view="workspace"][data-planner-view="3d"] #view-workspace #stage {
    height: 100% !important;
    min-height: 380px !important;
  }
}

@media (max-width: 720px) {
  body[data-active-view="workspace"] #view-workspace .canvas-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto !important;
  }

  body[data-active-view="workspace"] #view-workspace .canvas-header__metrics {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  body[data-active-view="workspace"] #view-workspace .planner-view-switch {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  body[data-active-view="workspace"] #view-workspace .planner-export-actions {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  body[data-active-view="workspace"] #view-workspace .canvas-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* The compact header exposes three summary metrics; let them share the
     available width instead of preserving desktop minimum column sizes. */
  body[data-active-view="workspace"] #view-workspace .canvas-header__metrics .canvas-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body[data-active-view="workspace"] #view-workspace .panel-scroll {
    display: flex !important;
  }

  body[data-active-view="templates"] #view-templates.orders-view,
  body[data-active-view="templates"] #view-templates .orders-board {
    padding-inline: 8px !important;
  }

  body[data-active-view="templates"] #view-templates .orders-table-settings-popover,
  body[data-active-view="templates"] #view-templates .orders-columns-popover {
    max-height: min(520px, calc(100dvh - 300px)) !important;
  }

  body[data-active-view="templates"] #view-templates .orders-board__titleline,
  body[data-active-view="templates"] #view-templates .orders-board__actions,
  body[data-active-view="templates"] #view-templates .orders-modal__actions,
  #view-admin .admin-page-header,
  #view-admin .admin-page-header__actions,
  #view-admin .admin-registry__head,
  #view-admin .admin-registry-filters,
  #view-admin .admin-users-search,
  #view-admin .admin-create-company,
  #view-admin .admin-person-row__actions,
  .site-header__inner,
  .header-actions,
  .hero-actions,
  .form-footer {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  body[data-active-view="templates"] #view-templates .orders-board__actions > *,
  body[data-active-view="templates"] #view-templates .orders-modal__actions > *,
  .header-actions > *,
  .hero-actions > * {
    width: 100%;
  }

  body[data-active-view="templates"] #view-templates .orders-board__actions .ghost-button,
  body[data-active-view="templates"] #view-templates .orders-board__actions .primary {
    flex: 0 0 auto !important;
  }

  .nav {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .scene-window,
  .shot-window,
  .orders-grid,
  .shot-orders {
    overflow-x: auto;
  }
}

/* Accounting detail header: keep the identity centered while grouping its
   four utility actions into a compact two-row control block. */
@media (min-width: 721px) {
  body[data-active-view="templates"] #view-templates .orders-crm[data-workspace-mode="accounting"] .orders-detail__header {
    grid-template-columns: minmax(190px, 1fr) minmax(0, 620px) minmax(190px, 1fr) !important;
    align-items: start !important;
    gap: 12px !important;
  }

  body[data-active-view="templates"] #view-templates .orders-crm[data-workspace-mode="accounting"] .orders-detail__header-main {
    grid-column: 2 !important;
  }

  body[data-active-view="templates"] #view-templates .orders-crm[data-workspace-mode="accounting"] .orders-detail__header-aside {
    grid-column: 3 !important;
    justify-self: end !important;
    width: min(100%, 220px) !important;
    max-width: 220px !important;
  }

  body[data-active-view="templates"] #view-templates .orders-crm[data-workspace-mode="accounting"] .orders-detail__header-aside .orders-detail__actions {
    display: grid !important;
    grid-template-columns: minmax(88px, 1fr) 44px !important;
    grid-template-rows: repeat(2, 44px) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 220px !important;
  }

  body[data-active-view="templates"] #view-templates .orders-crm[data-workspace-mode="accounting"] .orders-detail__deadline-chip {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 44px !important;
  }

  body[data-active-view="templates"] #view-templates .orders-crm[data-workspace-mode="accounting"] [data-action="copy-order-link"] {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  body[data-active-view="templates"] #view-templates .orders-crm[data-workspace-mode="accounting"] [data-action="delete-order"] {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 44px !important;
  }

  body[data-active-view="templates"] #view-templates .orders-crm[data-workspace-mode="accounting"] [data-action="close-detail"] {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  body[data-active-view="templates"] #view-templates .orders-crm[data-workspace-mode="accounting"] :is(
    [data-action="copy-order-link"],
    [data-action="close-detail"]
  ) {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
}

/* Phone workspaces: keep the work surface dense, touchable, and sequential.
   Feature styles still own paint and behavior; this block only resolves the
   nested padding, floating-header, and overlay geometry that break on phones. */
@media (max-width: 720px) {
  body[data-active-view="workspace"] .topbar,
  body[data-active-view="templates"] .topbar {
    display: grid !important;
    grid-template-areas:
      "brand actions"
      "nav nav" !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 104px !important;
    padding: max(8px, env(safe-area-inset-top, 0px)) 10px 6px !important;
  }

  body[data-active-view="workspace"] .topbar__lead,
  body[data-active-view="templates"] .topbar__lead {
    display: contents !important;
  }

  body[data-active-view="workspace"] .topbar__brandblock,
  body[data-active-view="templates"] .topbar__brandblock {
    grid-area: brand !important;
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    padding-right: 0 !important;
    transform: none !important;
  }

  body[data-active-view="workspace"] .topbar__actions,
  body[data-active-view="templates"] .topbar__actions {
    grid-area: actions !important;
    position: static !important;
    width: auto !important;
  }

  body[data-active-view="workspace"] .topbar__module-nav,
  body[data-active-view="templates"] .topbar__module-nav {
    grid-area: nav !important;
    display: grid !important;
    grid-auto-columns: minmax(96px, 1fr) !important;
    grid-auto-flow: column !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 3px !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity;
  }

  body[data-active-view="workspace"] .topbar-nav-button,
  body[data-active-view="templates"] .topbar-nav-button {
    min-width: 0 !important;
    min-height: 36px !important;
    padding-inline: 10px !important;
    scroll-snap-align: start;
    white-space: nowrap !important;
  }

  /* Logistics toolbar and table */
  body[data-active-view="templates"] #view-templates.orders-view {
    padding-inline: 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  body[data-active-view="templates"] #view-templates .orders-crm,
  body[data-active-view="templates"] #view-templates .orders-board {
    padding-inline: 0 !important;
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
  }

  body[data-active-view="templates"] #view-templates .orders-board {
    flex: 0 0 auto !important;
  }

  body[data-active-view="templates"] #view-templates .orders-board__toolbar {
    grid-template-areas:
      "title"
      "search"
      "actions" !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 8px !important;
    min-height: 0 !important;
    padding: 10px !important;
    border: 1px solid var(--dispatch-line-strong) !important;
    border-radius: 10px !important;
    background: var(--dispatch-surface) !important;
    box-shadow: none !important;
  }

  body[data-active-view="templates"] #view-templates .orders-board__titlewrap {
    grid-area: title !important;
  }

  body[data-active-view="templates"] #view-templates .orders-board__titleline {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-direction: row !important;
    gap: 10px !important;
  }

  body[data-active-view="templates"] #view-templates .orders-board__title {
    min-width: 0 !important;
    color: var(--dispatch-ink) !important;
    font-size: 24px !important;
    line-height: 1.15 !important;
  }

  body[data-active-view="templates"] #view-templates .orders-board__subtitle {
    display: none !important;
  }

  body[data-active-view="templates"] #view-templates .orders-board__year-select {
    width: 92px !important;
    min-width: 92px !important;
    min-height: 44px !important;
    border-color: var(--dispatch-line-strong) !important;
    background: var(--dispatch-surface-soft) !important;
    color: var(--dispatch-ink) !important;
  }

  body[data-active-view="templates"] #view-templates .orders-board__searchslot {
    grid-area: search !important;
    width: 100% !important;
  }

  body[data-active-view="templates"] #view-templates .orders-filter--search,
  body[data-active-view="templates"] #view-templates .orders-filter--search .orders-filter__input {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  body[data-active-view="templates"] #view-templates .orders-board__actions {
    grid-area: actions !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.16fr) !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }

  body[data-active-view="templates"] #view-templates .orders-board__actions > * {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding-inline: 9px !important;
    overflow: hidden !important;
    font-size: 12px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-active-view="templates"] #view-templates .orders-board__actions .ghost-button {
    border-color: var(--dispatch-line-strong) !important;
    background: var(--dispatch-surface-soft) !important;
    color: var(--dispatch-ink-soft) !important;
  }

  body[data-active-view="templates"] #view-templates .orders-board__actions .ghost-button,
  body[data-active-view="templates"] #view-templates .orders-board__actions .primary {
    height: 44px !important;
    min-height: 44px !important;
  }

  body[data-active-view="templates"] #view-templates .orders-table-settings-btn {
    display: inline-grid !important;
    padding: 0 !important;
    place-items: center !important;
  }

  body[data-active-view="templates"] #view-templates .orders-table-settings-btn > span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  body[data-active-view="templates"] #view-templates .orders-table-settings-btn > svg {
    width: 19px !important;
    height: 19px !important;
  }

  body[data-active-view="templates"] #view-templates .orders-machine-tabs {
    min-height: 0 !important;
    padding: 6px 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body[data-active-view="templates"] #view-templates .orders-machine-tabs__scroller {
    gap: 6px !important;
    padding: 0 0 2px !important;
    scroll-padding-inline: 0;
    scroll-snap-type: x proximity;
    scrollbar-gutter: auto;
  }

  body[data-active-view="templates"] #view-templates .orders-machine-card {
    flex: 0 0 auto !important;
    min-width: 112px !important;
    min-height: 48px !important;
    padding: 6px 9px !important;
    scroll-snap-align: start;
  }

  body[data-active-view="templates"] #view-templates .orders-machine-card__status {
    display: none !important;
  }

  body[data-active-view="templates"] #view-templates .orders-board__content {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 0 !important;
    flex: 0 0 auto !important;
    height: min(52dvh, 440px) !important;
    min-height: 360px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body[data-active-view="templates"] #view-templates .orders-board__table-region {
    height: 100% !important;
    overflow: hidden !important;
  }

  body[data-active-view="templates"] #view-templates .orders-table-wrap {
    height: 100% !important;
    max-height: none !important;
    border: 1px solid var(--dispatch-line-strong) !important;
    border-radius: 8px !important;
    scrollbar-gutter: auto !important;
    touch-action: pan-x pan-y;
  }

  body[data-active-view="templates"] #view-templates .orders-board__content[data-insights-layout="overlay"] .orders-insights {
    position: absolute !important;
    width: var(--orders-insights-width, calc(100% - 24px)) !important;
    max-width: calc(100% - 24px) !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 14px 32px rgba(15, 35, 58, 0.2) !important;
  }

  body[data-active-view="templates"] #view-templates .orders-insights__body {
    max-height: min(46dvh, 380px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  body[data-active-view="templates"] #view-templates .orders-selection-summary {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    margin: 8px 0 0 !important;
    padding: 8px 10px !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }

  body[data-active-view="templates"] #view-templates .orders-selection-summary[hidden] {
    display: none !important;
  }

  body[data-active-view="templates"] #view-templates .orders-selection-summary__meta {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Tetris work surface */
  body[data-active-view="workspace"] #view-workspace.workspace {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  body[data-active-view="workspace"] #view-workspace .workspace__canvas {
    display: grid !important;
    grid-template-rows: auto clamp(320px, 42dvh, 390px) !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    border-radius: 10px !important;
  }

  body[data-active-view="workspace"] #view-workspace .canvas-header,
  body[data-active-view="workspace"][data-planner-view="3d"] #view-workspace .canvas-header,
  body[data-theme="dark"][data-active-view="workspace"][data-planner-view="3d"] #view-workspace .canvas-header {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    grid-template-areas:
      "title title"
      "metrics metrics"
      "switch export" !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 10px !important;
    border-radius: 10px 10px 0 0 !important;
    box-shadow: none !important;
    transform: none !important;
    backdrop-filter: none !important;
  }

  body[data-active-view="workspace"] #view-workspace .canvas-header__titleblock {
    grid-area: title !important;
    min-width: 0 !important;
  }

  body[data-active-view="workspace"] #view-workspace .canvas-header h2 {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  body[data-active-view="workspace"] #view-workspace .canvas-header__metrics {
    grid-area: metrics !important;
    width: 100% !important;
  }

  body[data-active-view="workspace"] #view-workspace .canvas-header__metrics .canvas-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(50px, auto) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
  }

  body[data-active-view="workspace"] #view-workspace .canvas-header__metrics .canvas-metric {
    justify-content: center !important;
    height: auto !important;
    min-height: 50px !important;
    padding: 6px 8px !important;
  }

  body[data-active-view="workspace"] #view-workspace .canvas-header__metrics .canvas-metric__label {
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: 9px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-active-view="workspace"] #view-workspace .canvas-header__metrics .canvas-metric__value {
    overflow: hidden !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-active-view="workspace"] #view-workspace .planner-view-switch {
    grid-area: switch !important;
    justify-self: start !important;
    width: auto !important;
    height: 44px !important;
  }

  body[data-active-view="workspace"] #view-workspace .planner-view-switch__button {
    min-width: 58px !important;
    min-height: 36px !important;
  }

  body[data-active-view="workspace"] #view-workspace .planner-export-actions {
    grid-area: export !important;
    justify-self: end !important;
    width: auto !important;
  }

  body[data-active-view="workspace"] #view-workspace .planner-export-button,
  body[data-active-view="workspace"] #view-workspace .planner-export-link {
    width: 58px !important;
    min-width: 58px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  body[data-active-view="workspace"] #view-workspace .canvas-board {
    height: 100% !important;
    min-height: 320px !important;
    overflow: hidden !important;
    border-radius: 0 0 10px 10px !important;
  }

  body[data-active-view="workspace"] #view-workspace #stage,
  body[data-active-view="workspace"][data-planner-view="3d"] #view-workspace #stage {
    height: 100% !important;
    min-height: 320px !important;
    padding: 10px !important;
  }

  body[data-active-view="workspace"] #view-workspace .workspace__panel,
  body[data-active-view="workspace"] #view-workspace .panel-card--planner,
  body[data-active-view="workspace"] #view-workspace .panel-scroll {
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body[data-active-view="workspace"] #view-workspace .panel-card--planner > .panel-scroll {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

@media (max-width: 380px) {
  body[data-active-view="templates"] #view-templates .orders-board__actions {
    grid-template-columns: 44px minmax(0, 0.94fr) minmax(0, 1.06fr) !important;
    gap: 6px !important;
  }

  body[data-active-view="templates"] #view-templates .orders-board__actions > * {
    padding-inline: 6px !important;
    font-size: 11px !important;
  }

  body[data-active-view="workspace"] #view-workspace .workspace__canvas {
    grid-template-rows: auto clamp(300px, 40dvh, 340px) !important;
  }

  body[data-active-view="workspace"] #view-workspace .canvas-board,
  body[data-active-view="workspace"] #view-workspace #stage,
  body[data-active-view="workspace"][data-planner-view="3d"] #view-workspace #stage {
    min-height: 300px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}