:root {
  --bg: #f4f2ed;
  --panel: #ffffff;
  --ink: #1d252c;
  --muted: #65717c;
  --line: #cfd4d8;
  --line-strong: #8c98a3;
  --steel: #334e5c;
  --safety: #f3b329;
  --ok: #2f8754;
  --danger: #b83d31;
  --ready: #2f8754;
  --process: #f3b329;
  --hold: #b83d31;
  --active: #d9eef6;
  --shadow: 0 12px 28px rgba(31, 43, 51, 0.12);
  --board-zoom: 1;
  --production-week-toolbar-height: 50px;
  --production-cell-min-height: 270px;
  --fullscreen-production-cell-height: max(320px, 32vh);
  --brand: #0878ef;
  --brand-bright: #1689ff;
  --brand-soft: #e7f2ff;
  --night: #07090c;
  --night-raised: #0c1118;
}

.read-only-mode .file-action,
.read-only-mode .secondary-action,
.read-only-mode .release-action,
.read-only-mode .packet-settings-btn,
.read-only-mode .packet-settings-menu-item,
.read-only-mode .danger-control {
  opacity: 0.45;
  cursor: not-allowed;
}

.read-only-mode .file-action,
.read-only-mode .packet-settings-btn,
.read-only-mode .packet-settings-menu,
.read-only-mode .release-action,
.read-only-mode .danger-control,
.read-only-mode .work-center-manager,
.read-only-mode .user-manager,
.read-only-mode .audit-actions {
  display: none !important;
}

.read-only-mode .empty-drop {
  color: #6b7479;
}

.read-only-mode .packet-note {
  background: #eef2f4;
  cursor: default;
}

.read-only-mode #sendMessageBtn,
.read-only-mode #sendFloatingMessageBtn {
  display: inline-flex !important;
  opacity: 1;
  cursor: pointer;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 0;
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(51, 78, 92, 0.06) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(0deg, rgba(51, 78, 92, 0.04) 1px, transparent 1px) 0 0 / 34px 34px,
    var(--bg);
  font-family: Arial, Helvetica, sans-serif;
}

button,
textarea {
  font: inherit;
}

button {
  border-radius: 0;
}

.app-shell {
  width: min(1880px, calc(100vw - clamp(12px, 2vw, 32px)));
  margin: 0 auto;
  padding: 20px 0 120px;
}

.board-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 16px;
}

.app-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--steel);
}

.tab-btn {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-bottom: 0;
  background: #f8fafb;
  color: var(--steel);
  font-weight: 800;
  cursor: pointer;
}

.tab-btn.active {
  background: var(--steel);
  color: #fff;
}

.board-zoom-controls {
  position: sticky;
  top: 0;
  z-index: 20;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin-bottom: 12px;
  padding: 6px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 3px 10px rgba(31, 43, 51, 0.06);
}

.zoom-btn,
.zoom-reset-btn {
  min-height: 30px;
  border: 1px solid var(--line);
  background: #f8fafb;
  color: var(--steel);
  font-weight: 900;
  cursor: pointer;
}

.zoom-btn {
  width: 34px;
  font-size: 18px;
  line-height: 1;
}

.zoom-reset-btn {
  padding: 4px 10px;
  text-transform: uppercase;
}

.zoom-reset-btn.active {
  background: var(--steel);
  color: #fff;
}

.zoom-reset-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.undo-action-btn:not(:disabled) {
  border-color: #2f6f4e;
  color: #1f5c3e;
  background: #eef8f2;
}

.manual-board-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 54px;
  min-width: 176px;
  padding: 10px 18px;
  border: 2px solid #064ca8;
  border-radius: 8px;
  background: #0b65d8;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.15;
  cursor: pointer;
  touch-action: manipulation;
}

.manual-board-refresh:hover:not(:disabled),
.manual-board-refresh:focus-visible {
  background: #084fae;
  outline: 3px solid rgba(11, 101, 216, 0.28);
  outline-offset: 2px;
}

.manual-board-refresh:disabled {
  cursor: wait;
  opacity: 0.74;
}

.manual-board-refresh-icon {
  font-size: 24px;
  line-height: 1;
}

.manual-board-refresh-spinner {
  width: 18px;
  height: 18px;
  border: 3px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: manual-board-refresh-spin 0.8s linear infinite;
}

.manual-board-refresh-spinner[hidden] { display: none; }

.manual-board-refresh-status {
  min-height: 18px;
  max-width: 310px;
  color: #29445d;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.manual-board-refresh-status[data-outcome="blocked"],
.manual-board-refresh-status[data-outcome="failed"] {
  color: #9b341e;
}

@keyframes manual-board-refresh-spin { to { transform: rotate(360deg); } }

.danger-control {
  border-color: var(--danger);
  color: var(--danger);
}

body.production-board-fullscreen {
  overflow: hidden;
  background: #d8dee2;
}

body.production-board-fullscreen .app-shell {
  width: 100vw;
  max-width: none;
  padding: 0;
}

body.production-board-fullscreen .board-header,
body.production-board-fullscreen .app-tabs,
body.production-board-fullscreen #boardScreen .notes-section {
  display: none !important;
}

body.production-board-fullscreen .screen[hidden] {
  display: none !important;
}

body.production-board-fullscreen #boardScreen,
body.production-board-fullscreen #activeFloorScreen,
#boardScreen:fullscreen,
#activeFloorScreen:fullscreen {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  width: 100vw;
  height: 100vh;
  padding: 0;
  overflow: hidden;
  background: #d8dee2;
  --production-cell-min-height: var(--fullscreen-production-cell-height);
}

body.production-board-fullscreen #boardScreen > .board-zoom-controls,
body.production-board-fullscreen #activeFloorScreen > .board-zoom-controls,
#boardScreen:fullscreen > .board-zoom-controls,
#activeFloorScreen:fullscreen > .board-zoom-controls {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  width: 100%;
  margin: 0;
  border-width: 0 0 2px;
  border-color: var(--steel);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 6px 18px rgba(31, 43, 51, 0.16);
}

body.production-board-fullscreen .manual-board-refresh,
#boardScreen:fullscreen .manual-board-refresh,
#activeFloorScreen:fullscreen .manual-board-refresh {
  display: inline-flex !important;
  min-height: 58px;
  min-width: 190px;
  font-size: 16px;
}

body.production-board-fullscreen #boardScreen .release-key,
body.production-board-fullscreen #activeFloorScreen .release-key,
#boardScreen:fullscreen .release-key,
#activeFloorScreen:fullscreen .release-key {
  display: none !important;
}

body.production-board-fullscreen #boardScreen .board-wrap,
body.production-board-fullscreen #activeFloorScreen .board-wrap,
#boardScreen:fullscreen .board-wrap,
#activeFloorScreen:fullscreen .board-wrap {
  height: 100%;
  min-height: 0;
  max-height: none;
  border-right: 0;
  border-left: 0;
  box-shadow: none;
}

body.production-board-fullscreen #boardScreen .production-board,
body.production-board-fullscreen #activeFloorScreen .production-board,
#boardScreen:fullscreen .production-board,
#activeFloorScreen:fullscreen .production-board {
  min-height: 100%;
  align-content: stretch;
}

body.production-board-fullscreen #boardScreen > .panel-resize-controls,
body.production-board-fullscreen #activeFloorScreen > .panel-resize-controls,
#boardScreen:fullscreen > .panel-resize-controls,
#activeFloorScreen:fullscreen > .panel-resize-controls {
  position: sticky;
  bottom: 14px;
  z-index: 65;
  margin: 0;
  border-right: 0;
  border-left: 0;
  border-bottom: 2px solid var(--steel);
}

body.production-board-fullscreen #boardScreen .panel-x-scrollbar,
body.production-board-fullscreen #activeFloorScreen .panel-x-scrollbar,
#boardScreen:fullscreen .panel-x-scrollbar,
#activeFloorScreen:fullscreen .panel-x-scrollbar {
  position: sticky;
  bottom: 0;
  margin: 0;
  border-right: 0;
  border-left: 0;
}

.zoom-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#zoomLabel {
  min-width: 48px;
  color: var(--steel);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.screen {
  display: none;
}

.screen.active-screen {
  display: block;
}

#planningScreen.active-screen {
  overflow: auto;
  padding-bottom: 18px;
}

#backlogScreen,
#customerStatusScreen,
#shipmentCommitmentsScreen,
.shipments-board {
  zoom: var(--board-zoom);
}

.shipment-commitments-board {
  border: 2px solid #223641;
  background: #edf1f3;
  box-shadow: var(--shadow);
}

.shipment-commitments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border-bottom: 2px solid var(--steel);
  background: #fff;
}

.shipment-commitments-header h2,
.shipment-commitments-header p {
  margin: 0;
}

.shipment-commitments-header p:not(.eyebrow) {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
}

.shipment-commitment-add-controls {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.shipment-commitment-add-controls label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.shipment-commitment-add-controls select,
.shipment-commitment-add-controls input {
  min-height: 36px;
  min-width: 170px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink);
}

.shipment-commitments-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  background: #fff8dc;
  color: #425760;
  font-size: 12px;
}

.shipment-commitments-weeks {
  display: grid;
  gap: 18px;
  padding: 14px;
}

.shipment-commitment-week {
  overflow-x: auto;
  border: 1px solid var(--line-strong);
  background: #fff;
}

.shipment-commitment-week-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: #10212b;
  color: #fff;
}

.shipment-commitment-week-heading h3 {
  margin: 0;
  font-size: 16px;
  text-transform: uppercase;
}

.shipment-commitment-week-heading span {
  color: #a9d9ff;
  font-size: 12px;
  font-weight: 800;
}

.shipment-commitment-days {
  display: grid;
  grid-template-columns: repeat(5, minmax(245px, 1fr));
  min-width: 1225px;
}

.shipment-commitment-day {
  min-height: 260px;
  border-right: 1px solid var(--line);
  background: #f7f9fa;
  transition: background 120ms ease, box-shadow 120ms ease;
}

.shipment-commitment-day:last-child {
  border-right: 0;
}

.shipment-commitment-day.drag-over {
  background: #e8f4ff;
  box-shadow: inset 0 0 0 3px #1689ff;
}

.shipment-commitment-day-heading {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: #e7eef2;
}

.shipment-commitment-day-heading strong {
  text-transform: uppercase;
}

.shipment-commitment-day-heading small {
  grid-column: 1 / -1;
  color: var(--muted);
}

.shipment-commitment-card-list {
  display: grid;
  gap: 10px;
  padding: 8px;
}

.shipment-commitment-card-wrap {
  padding: 5px;
  border: 1px solid #8aa4b3;
  background: #eaf3f8;
  cursor: grab;
}

.shipment-commitment-card-wrap.is-dragging {
  opacity: 0.55;
}

.shipment-commitment-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 7px;
  background: #145f89;
  color: #fff;
}

.shipment-commitment-banner strong {
  font-size: 12px;
}

.shipment-commitment-banner span {
  font-size: 10px;
  font-weight: 800;
  text-align: right;
}

.shipment-commitment-card-wrap .pdf-card {
  margin: 6px 0 0;
  cursor: pointer;
}

.shipment-commitment-card-wrap .read-only-reference-card .first-piece-check,
.shipment-commitment-card-wrap .read-only-reference-card .packet-process-row,
.shipment-commitment-card-wrap .read-only-reference-card .packet-note,
.shipment-commitment-card-wrap .read-only-reference-card .packet-actions {
  display: none;
}

.shipment-commitment-status-link {
  width: 100%;
  min-height: 30px;
  margin-top: 5px;
  border: 1px solid #145f89;
  background: #fff;
  color: #145f89;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.shipment-commitment-empty {
  display: grid;
  min-height: 180px;
  place-items: center;
  border: 2px dashed #bdc8ce;
  color: #71818a;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.commitment-notification-required {
  border-left: 4px solid #d26a00;
  background: #fff0d9;
}

.planning-board {
  zoom: var(--board-zoom);
  width: max(1240px, 100%);
  min-width: 1240px;
  border: 2px solid #223641;
  background: #edf1f3;
  box-shadow: var(--shadow);
}

.planning-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border-bottom: 2px solid var(--steel);
  background: #fff;
}

.planning-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.planning-count {
  min-width: 72px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.planning-select {
  width: min(360px, 42vw);
  min-height: 38px;
  min-width: 0;
  border: 1px solid var(--line);
  background: #f8fafb;
  color: var(--ink);
}

.customer-status-board {
  border: 2px solid #223641;
  background: #edf1f3;
  box-shadow: var(--shadow);
}

.customer-status-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border-bottom: 2px solid var(--steel);
  background: #fff;
}

.customer-status-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.customer-status-subtabs {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #f7fafb;
}

.customer-status-subtab {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--steel);
  font-weight: 900;
  cursor: pointer;
}

.customer-status-subtab.active {
  border-color: #2678bd;
  background: #2678bd;
  color: #fff;
}

.customer-status-subtab span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 22px;
  margin-left: 7px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #b83d31;
  color: #fff;
}

.customer-status-required-notice {
  padding: 10px 14px;
  border-bottom: 2px solid #b36500;
  background: #fff1dc;
  color: #744600;
  font-size: 13px;
  font-weight: 900;
}

.customer-status-search {
  display: grid;
  gap: 4px;
  min-width: 270px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.customer-status-search input {
  min-height: 38px;
  border: 1px solid var(--line);
  background: #f8fafb;
  color: var(--ink);
  font: inherit;
}

.customer-status-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.customer-status-key span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.customer-key-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
}

.customer-key-red {
  color: var(--danger);
  background: rgba(184, 61, 49, 0.14);
}

.customer-key-orange {
  color: #b36500;
  background: #fff1dc;
}

.customer-key-text {
  color: var(--danger);
  font-weight: 900;
}

.customer-key-date {
  padding: 2px 5px;
  border: 1px solid var(--line);
  background: #f8fafb;
  color: var(--steel);
  font-size: 11px;
  font-weight: 900;
}

.customer-status-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--line-strong);
}

.customer-status-summary div {
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  background: #fff;
}

.customer-status-summary span {
  color: var(--steel);
  font-size: 24px;
  font-weight: 900;
}

.customer-status-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.customer-status-table-wrap {
  overflow: auto;
  max-height: calc(100vh - 260px);
  background: #fff;
}

.customer-status-table {
  width: max(2020px, 100%);
  border-collapse: collapse;
  background: #fff;
  font-size: 12px;
}

.customer-status-table th,
.customer-status-table td {
  border: 1px solid var(--line);
  padding: 7px;
  vertical-align: top;
}

.customer-status-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--steel);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  text-align: left;
  text-transform: uppercase;
}

.customer-status-table td {
  background: #fff;
}

.customer-status-line-item {
  width: 72px;
  text-align: center;
  font-weight: 900;
}

.customer-status-description {
  min-width: 250px;
}

.customer-status-date,
.customer-status-select,
.customer-status-note {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  background: #f8fafb;
  color: var(--ink);
  font: inherit;
}

.customer-status-date,
.customer-status-select {
  min-width: 128px;
}

.customer-status-note {
  min-height: 72px;
  resize: vertical;
}

.customer-status-grace {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  background: #f8fafb;
  color: var(--steel);
  font-weight: 900;
  line-height: 1.3;
  white-space: normal;
}

.customer-status-grace-on-time {
  border-color: rgba(47, 135, 84, 0.45);
  background: rgba(47, 135, 84, 0.12);
  color: var(--ok);
}

.customer-status-grace-watch {
  border-color: rgba(243, 179, 41, 0.7);
  background: rgba(243, 179, 41, 0.22);
  color: #825a00;
}

.customer-status-grace-late {
  border-color: rgba(184, 61, 49, 0.45);
  background: rgba(184, 61, 49, 0.12);
  color: var(--danger);
}

.customer-status-grace-risk {
  border-color: rgba(184, 61, 49, 0.65);
  background: rgba(184, 61, 49, 0.16);
  color: var(--danger);
}

.customer-status-row.customer-status-watch td {
  background: #fff1dc;
}

.customer-status-row.customer-status-late td {
  background: #fff0ed;
}

.customer-status-row.customer-status-risk td {
  color: var(--danger);
  font-weight: 900;
}

.customer-status-row.customer-status-risk td textarea,
.customer-status-row.customer-status-risk td input,
.customer-status-row.customer-status-risk td select {
  color: var(--danger);
  font-weight: 900;
}

.customer-status-log-wrap {
  display: grid;
  gap: 7px;
  min-width: 260px;
}

.customer-status-log summary {
  color: var(--steel);
  font-weight: 900;
  cursor: pointer;
}

.customer-status-log-list {
  display: grid;
  gap: 6px;
  max-height: 170px;
  overflow: auto;
  padding: 6px 0;
}

.customer-status-log-entry {
  display: grid;
  gap: 3px;
  padding: 6px;
  border: 1px solid var(--line);
  background: #f8fafb;
}

.customer-status-log-entry strong {
  color: var(--steel);
  font-size: 11px;
}

.customer-status-log-entry span,
.customer-status-log-entry p,
.customer-status-log-empty {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.customer-status-log-button {
  min-height: 32px;
}

.customer-status-requirement-cell {
  min-width: 245px;
}

.customer-status-requirement-pending,
.customer-status-requirement-complete {
  display: block;
  padding: 7px 8px;
  border: 1px solid var(--line);
  background: #f8fafb;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.customer-status-requirement-complete {
  border-color: rgba(47, 135, 84, 0.45);
  background: rgba(47, 135, 84, 0.12);
  color: var(--ok);
}

.customer-status-requirement-complete.late {
  border-color: rgba(184, 61, 49, 0.5);
  background: rgba(184, 61, 49, 0.12);
  color: var(--danger);
}

.customer-status-required-action {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  min-width: 245px;
}

.customer-status-required-action strong {
  grid-column: 1 / -1;
  color: #825a00;
  font-size: 11px;
  line-height: 1.3;
}

.customer-status-required-action.deadline-missed strong {
  color: var(--danger);
}

.customer-four-day-on-track,
.customer-four-day-new-date,
.customer-four-day-date {
  min-height: 34px;
  border: 1px solid #2678bd;
  background: #fff;
  color: #185f99;
  font: inherit;
  font-weight: 900;
}

.customer-four-day-on-track,
.customer-four-day-new-date {
  cursor: pointer;
}

.customer-four-day-on-track:hover:not(:disabled),
.customer-four-day-new-date:hover:not(:disabled) {
  background: #2678bd;
  color: #fff;
}

.customer-four-day-on-track:disabled {
  border-color: #b9c2c8;
  color: #8a969e;
  cursor: not-allowed;
}

.customer-four-day-new-date {
  font-size: 11px;
}

.customer-status-empty {
  height: 110px;
  color: var(--muted);
  font-weight: 900;
  text-align: center;
}

.planning-flow-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--line-strong);
}

.planning-flow-strip span {
  padding: 10px 12px;
  background: #fff;
  color: var(--steel);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.release-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.board-wrap + .release-key {
  border-top: 1px solid var(--line);
}

.release-key span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.key-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: transparent;
}

.key-stock {
  color: #2678bd;
}

.key-received {
  color: #23834a;
}

.key-ordered {
  color: var(--safety);
}

.key-missing {
  color: var(--danger);
}

.key-overdue {
  color: #f58220;
}

.key-due-safe {
  color: #2678bd;
}

.key-due-far {
  color: #23834a;
}

.key-due-watch {
  color: #d7a32a;
}

.key-due-danger,
.key-due-critical {
  color: #b83d31;
}

.key-override {
  color: #717b82;
}

.key-icon-pair {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 5px;
  border: 1px solid var(--line);
  background: #f7f9fa;
}

.key-icon-pair img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.released-recovery {
  padding: 10px 14px 12px;
  border-bottom: 1px solid var(--line);
  background: #f7fafb;
}

.released-recovery[hidden] {
  display: none;
}

.released-recovery-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.released-recovery-header h2 {
  font-size: 16px;
  line-height: 1.15;
}

.released-recovery-header span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.released-recovery-tools {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.released-recovery-list {
  display: grid;
  gap: 6px;
}

.released-recovery-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  background: #fff;
}

.released-recovery-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.released-recovery-body strong {
  color: var(--steel);
  font-size: 14px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.released-recovery-body span,
.released-recovery-body small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.released-recovery-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

@media (max-width: 760px) {
  .released-recovery-header,
  .released-recovery-row {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .released-recovery-header {
    display: grid;
  }

  .released-recovery-actions {
    justify-content: flex-start;
  }

  .released-recovery-tools {
    justify-content: flex-start;
  }
}

.planning-view-tabs {
  display: flex;
  gap: 8px;
  padding: 10px 14px 0;
  background: #edf1f3;
}

.planning-view-tab {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--steel);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  cursor: pointer;
}

.planning-view-tab.active {
  border-color: var(--steel);
  background: var(--steel);
  color: #fff;
}

.planning-view-panel[hidden] {
  display: none;
}

.planning-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  align-items: start;
  overflow-x: auto;
}

.planning-view-panel > .planning-capacity {
  padding: 14px;
}

.planning-readiness,
.planning-capacity {
  min-width: 0;
}

.planning-section-title {
  min-height: 62px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-bottom: 0;
  background: #fff;
}

.planning-section-title h2 {
  font-size: 18px;
}

.planning-readiness-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  overflow-x: auto;
}

.planning-readiness-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  max-width: 100%;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #f8fafb;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  cursor: pointer;
}

.planning-readiness-tab span {
  display: inline-block;
  min-width: 0;
  white-space: nowrap;
}

.planning-readiness-tab b {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  background: #fff;
  color: var(--steel);
  font-size: 12px;
}

.planning-readiness-tab.active {
  border-color: var(--steel);
  background: var(--steel);
  color: #fff;
}

.planning-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(380px, 1fr));
  gap: 8px;
  min-width: 780px;
}

.planning-status-lane {
  min-height: 330px;
  border: 1px solid var(--line);
  background: #fff;
}

.planning-status-lane[data-status="readyToRelease"] {
  grid-column: span 2;
}

@media (min-width: 1320px) {
  .planning-status-grid {
    grid-template-columns: repeat(3, minmax(340px, 1fr));
  }
}

@media (max-width: 1240px) {
  .planning-grid {
    grid-template-columns: 1fr;
  }

  .planning-capacity {
    margin-top: 4px;
  }
}

.planning-status-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 50px;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  background: var(--steel);
  color: #fff;
}

.planning-status-header h3 {
  margin: 0;
  font-size: 13px;
  line-height: 1.15;
  white-space: nowrap;
}

.planning-status-header span {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  color: var(--steel);
  font-weight: 900;
}

.planning-status-note,
.planning-job-note {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #f8fafb;
  color: var(--ink);
  resize: vertical;
}

.planning-status-note {
  min-height: 96px;
  padding: 8px;
  font-size: 12px;
  line-height: 1.3;
}

.planning-job-list {
  display: grid;
  gap: 8px;
  padding: 8px;
  min-width: 0;
}

.planning-job-card {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  min-width: 0;
  padding: 9px;
  border: 1px solid #d7dde1;
  background: #fff;
}

.planning-job-card:not(.has-pdf):not(.missing-pdf) {
  grid-template-columns: 1fr;
}

.planning-job-card.readiness-clear {
  border-color: rgba(35, 131, 74, 0.45);
  background: #eef8f1;
  box-shadow: inset 4px 0 0 var(--ok);
}

.planning-job-card.readiness-ordered {
  box-shadow: inset 4px 0 0 var(--safety);
}

.planning-job-card.readiness-missing {
  box-shadow: inset 4px 0 0 var(--danger);
}

.planning-job-card.due-card-critical {
  border: 3px solid #b83d31;
  background: #fff;
  box-shadow: none;
}

.planning-job-main {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.planning-job-card .packet-due-strip {
  grid-column: auto;
}

.planning-pdf-preview {
  position: relative;
  grid-row: auto;
  width: 58px;
  height: 72px;
  padding: 0;
  border: 1px solid #aeb8bf;
  background: #f2f4f5;
  cursor: pointer;
  overflow: hidden;
}

.planning-pdf-preview.readiness-clear {
  border-color: var(--ok);
  box-shadow: 0 0 0 2px rgba(35, 131, 74, 0.14);
}

.planning-pdf-preview.readiness-ordered {
  border-color: var(--safety);
  box-shadow: 0 0 0 2px rgba(243, 179, 41, 0.2);
}

.planning-pdf-preview.readiness-missing {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(184, 61, 49, 0.18);
}

.planning-pdf-preview:disabled {
  cursor: not-allowed;
}

.planning-pdf-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.planning-pdf-preview img:not([src]) {
  display: none;
}

.planning-no-pdf-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #31404a;
  font-size: 12px;
  font-weight: 900;
}

.planning-pdf-preview .pdf-level-label,
.backlog-pdf-label,
.pdf-preview-btn .pdf-thumb-level-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 16px;
  padding: 2px 4px;
  background: rgba(31, 44, 52, 0.9);
  color: #fff;
  font-size: 8px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}

.planning-pdf-preview .level-master,
.backlog-pdf-label.level-master,
.pdf-preview-btn .level-master {
  background: rgba(31, 44, 52, 0.92);
}

.planning-pdf-preview .level-subassy,
.backlog-pdf-label.level-subassy,
.pdf-preview-btn .level-subassy {
  background: rgba(36, 94, 112, 0.92);
}

.planning-pdf-preview .level-piece-parts,
.backlog-pdf-label.level-piece-parts,
.pdf-preview-btn .level-piece-parts {
  background: rgba(84, 96, 102, 0.92);
}

.planning-pdf-preview .level-split-partial,
.backlog-pdf-label.level-split-partial,
.pdf-preview-btn .level-split-partial {
  background: rgba(22, 96, 139, 0.94);
}

.planning-pdf-preview:hover,
.planning-pdf-preview:focus-visible {
  border-color: var(--steel);
  outline: 2px solid var(--safety);
  outline-offset: 1px;
}

.planning-job-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.planning-job-top strong {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--steel);
  font-size: 15px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.planning-job-top span,
.planning-job-meta {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.planning-job-top span {
  flex: 0 1 auto;
  text-align: right;
}

.planning-status-select {
  width: 100%;
  min-height: 32px;
  border: 1px solid var(--line);
  background: #f8fafb;
  color: var(--ink);
}

.planning-schedule {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 7px;
  border: 1px solid #d7dde1;
  background: #fbfcfd;
}

.planning-schedule-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.planning-schedule-header strong {
  min-width: 0;
  color: var(--steel);
  font-size: 11px;
  line-height: 1.1;
  text-transform: uppercase;
}

.planning-schedule-header span,
.planning-schedule-empty {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.planning-schedule-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  min-width: 0;
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

.planning-schedule-controls .planning-schedule-select:nth-of-type(3),
.planning-schedule-controls .compact-action {
  grid-column: 1 / -1;
}

.planning-copy-route-action {
  border-color: #1769aa !important;
  background: #eef7ff !important;
  color: #135b91 !important;
}

.planning-route-copy-dialog {
  width: min(620px, calc(100vw - 32px));
}

.planning-route-copy-preview {
  max-height: 190px;
  overflow: auto;
  padding: 10px;
  border: 1px solid #cfd8e3;
  border-radius: 7px;
  background: #f7f9fc;
  color: #33465d;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.45;
  white-space: pre-wrap;
}

.planning-schedule-controls .compact-action {
  width: 100%;
  min-height: 32px;
  position: relative;
  z-index: 4;
  pointer-events: auto;
}

.planning-schedule-select {
  min-width: 0;
  min-height: 28px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 11px;
}

.planning-schedule-list {
  display: grid;
  gap: 4px;
}

.planning-schedule-learning {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.planning-schedule-learning button {
  min-width: 0;
  min-height: 24px;
  padding: 3px 4px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--steel);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.planning-schedule-learning button:disabled {
  color: #9aa5ab;
  cursor: not-allowed;
}

.planning-prediction-suggestions {
  display: grid;
  gap: 4px;
}

.planning-prediction-suggestions small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.planning-prediction-suggestion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(108px, auto) auto;
  gap: 4px;
  align-items: center;
  padding: 4px;
  background: #f6f8f9;
  border: 1px solid var(--line);
}

.planning-prediction-suggestion span {
  min-width: 0;
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.planning-prediction-suggestion input {
  min-width: 0;
  height: 24px;
  border: 1px solid var(--line);
  padding: 2px 4px;
  font-size: 10px;
  font-weight: 800;
}

.planning-prediction-suggestion button {
  min-height: 24px;
  padding: 2px 5px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--steel);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.planning-prediction-suggestion button:disabled {
  color: #9aa5ab;
  cursor: not-allowed;
}

.planning-schedule-stop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  padding: 5px;
  border-left: 4px solid var(--steel);
  background: #fff;
}

.planning-schedule-stop-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(112px, auto);
  gap: 5px;
  align-items: center;
  min-width: 0;
}

.planning-schedule-stop span {
  min-width: 0;
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.planning-schedule-stop .planning-capacity-preview,
.planning-date-dialog .planning-capacity-preview {
  display: block;
  grid-column: 1 / -1;
  margin: 0;
  padding: 4px 6px;
  border: 1px solid #b8d3bf;
  background: #edf7ef;
  color: #1d6131;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
}

.planning-schedule-stop .planning-capacity-preview.capacity-over,
.planning-date-dialog .planning-capacity-preview.capacity-over {
  border-color: #ddaaa3;
  background: #fff0ed;
  color: #9b3023;
}

.planning-schedule-stop .planning-capacity-preview.capacity-unknown,
.planning-date-dialog .planning-capacity-preview.capacity-unknown {
  border-color: #dec99a;
  background: #fff8e8;
  color: #715509;
}

.planning-schedule-stop input,
.planning-schedule-stop-date {
  min-width: 0;
  height: 24px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  padding: 2px 4px;
  font-size: 10px;
  font-weight: 800;
}

.planning-schedule-stop-date {
  width: 100%;
  cursor: pointer;
}

.planning-schedule-stop-date:hover,
.planning-schedule-stop-date:focus-visible {
  border-color: var(--steel);
  outline: 2px solid rgba(36, 94, 112, 0.2);
}

.planning-date-dialog-overlay {
  z-index: 20020;
}

.planning-date-dialog {
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
}

.planning-range-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.planning-range-fields label { min-width: 0; }
.planning-range-fields input { box-sizing: border-box; }
.planning-range-validation {
  margin: 0;
  color: #9b3023;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.planning-date-dialog .order-dialog-actions button { min-height: 44px; }
.planning-schedule-stop-date { height: auto; min-height: 24px; white-space: normal; }

@media (max-width: 480px) {
  .planning-range-fields { grid-template-columns: minmax(0, 1fr); }
}

.planning-date-dialog input[type="date"] {
  width: 100%;
  min-height: 48px;
  padding: 8px 10px;
  border: 2px solid var(--steel);
  background: #fff;
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
}

.planning-add-stop-dialog select {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 2px solid var(--steel);
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
}

.planning-schedule-stop-actions {
  display: flex;
  gap: 3px;
}

.planning-schedule-stop-actions button {
  min-height: 22px;
  padding: 2px 4px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--steel);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.planning-schedule-stop-actions button:disabled {
  color: #9aa5ab;
  cursor: not-allowed;
}

.release-checklist {
  display: grid;
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.release-check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  min-width: min(680px, 100%);
  padding: 6px;
  border-left: 5px solid var(--danger);
  background: #f7f9fa;
}

.release-check-row[data-state="stock"] {
  border-left-color: #23834a;
}

.release-check-row[data-state="received"] {
  border-left-color: #23834a;
}

.release-check-row[data-state="ordered"] {
  border-left-color: var(--safety);
}

.release-check-row[data-state="override"] {
  border-left-color: #23834a;
}

.release-check-row strong {
  flex: 1 0 190px;
  color: var(--steel);
  font-size: 11px;
  line-height: 1.1;
  white-space: nowrap;
}

.release-check-row small {
  flex: 1 0 100%;
  min-height: 14px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.release-check-btn {
  flex: 0 0 auto;
  min-width: 68px;
  min-height: 24px;
  padding: 3px 7px;
  border: 1px solid #c8d0d5;
  background: #fff;
  color: var(--steel);
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.release-check-btn.selected {
  border-color: #23834a;
  background: rgba(35, 131, 74, 0.13);
}

.release-check-row[data-state="ordered"] .release-check-btn.selected {
  border-color: var(--safety);
  background: rgba(243, 179, 41, 0.22);
  color: #5f4100;
}

.release-check-row[data-state="stock"] .release-check-btn.selected {
  border-color: #23834a;
  background: rgba(35, 131, 74, 0.13);
}

.release-check-btn.null-mark {
  border-color: #23834a;
  background: rgba(35, 131, 74, 0.13);
  color: #23834a;
}

.release-check-row[data-state="override"] .release-check-btn.selected {
  border-color: #23834a;
  background: rgba(35, 131, 74, 0.13);
}

.planning-job-note {
  grid-column: 1 / -1;
  min-height: 122px;
  padding: 9px;
  font-size: 12px;
  line-height: 1.35;
}

.planning-job-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.planning-empty {
  padding: 12px;
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.planning-week-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.planning-week {
  border: 1px solid var(--line);
  background: #fff;
}

.planning-week h3 {
  margin: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #314a57;
  color: #fff;
  font-size: 15px;
}

.capacity-row {
  display: grid;
  grid-template-columns: 86px 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid #e4e8eb;
}

.capacity-row:last-child {
  border-bottom: 0;
}

.capacity-row span {
  color: var(--steel);
  font-size: 13px;
  font-weight: 900;
}

.capacity-row input {
  min-height: 34px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  background: #f8fafb;
  color: var(--ink);
}

.live-feed-board,
.settings-board,
.shipments-board {
  border: 2px solid var(--steel);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.live-feed-board {
  zoom: var(--board-zoom);
}

.live-feed-header,
.settings-header,
.shipments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 2px solid var(--steel);
}

.shipment-header-actions {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.shipment-search-control {
  display: grid;
  gap: 4px;
  min-width: min(420px, 52vw);
  color: var(--steel);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.shipment-search-control input {
  min-height: 40px;
  padding: 8px 11px;
  border: 2px solid var(--line);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
}

.shipment-search-control input:focus {
  border-color: var(--steel);
  outline: 3px solid rgba(35, 74, 94, 0.16);
}

@media (max-width: 760px) {
  .shipments-header,
  .shipment-header-actions {
    align-items: stretch;
  }

  .shipments-header {
    flex-direction: column;
  }

  .shipment-search-control {
    min-width: 100%;
  }
}

.settings-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #f8fafb;
}

.settings-subtab {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--steel);
  font-weight: 900;
  cursor: pointer;
}

.settings-subtab.active {
  border-color: var(--steel);
  background: var(--steel);
  color: #fff;
}

.shipment-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #f8fafb;
}

.shipment-subtab {
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--steel);
  font-weight: 900;
  cursor: pointer;
}

.shipment-subtab.active {
  border-color: var(--steel);
  background: var(--steel);
  color: #fff;
}

.shipment-panel-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.completed-order-row {
  border-left: 5px solid var(--ok);
}

.completed-order-fulfillment {
  color: #166534 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.settings-page {
  display: none;
}

.settings-page.active-settings-page {
  display: block;
}

.audit-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: #f8fafb;
}

.audit-log-header h3 {
  margin: 0;
  color: var(--steel);
}

.audit-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #f8fafb;
}

.audit-subtab {
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--steel);
  font-weight: 900;
  cursor: pointer;
}

.audit-subtab.active {
  border-color: var(--steel);
  background: var(--steel);
  color: #fff;
}

.audit-panel-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.settings-card {
  margin: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  background: #fff;
}

.settings-card h3 {
  margin: 0 0 6px;
  color: var(--steel);
}

.settings-card p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.operations-guide {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.import-guide-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.import-guide-actions h3 {
  margin: 2px 0 0;
  color: var(--steel);
}

.import-guide-print-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  background: #e8eef2;
}

.import-guide-print-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 2px solid #244459;
  background: #fff;
}

.import-guide-print-toolbar strong { margin-right: auto; }
.import-guide-print-frame { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; background: #fff; }

@media (max-width: 640px) {
  .import-guide-actions, .import-guide-print-toolbar { flex-wrap: wrap; }
  .import-guide-print-toolbar strong { flex-basis: 100%; }
}

.guide-card {
  border: 1px solid var(--line);
  background: #fff;
  padding: 14px;
}

.guide-card h3 {
  margin: 0 0 8px;
  color: var(--steel);
  font-size: 16px;
}

.guide-card ol,
.guide-card ul {
  margin: 0;
  padding-left: 22px;
  color: var(--ink);
}

.guide-card li {
  margin: 5px 0;
  line-height: 1.35;
}

.import-report-example > p { margin: 7px 0; line-height: 1.35; }
.import-report-settings { display: grid; gap: 0; margin: 9px 0; border: 1px solid #c5d4dc; }
.import-report-settings > div { display: grid; grid-template-columns: minmax(130px, 28%) minmax(0, 1fr); }
.import-report-settings > div + div { border-top: 1px solid #c5d4dc; }
.import-report-settings dt, .import-report-settings dd { margin: 0; padding: 7px 9px; line-height: 1.3; }
.import-report-settings dt { background: #eef4f7; color: #244459; font-weight: 900; }
.import-report-settings dd { overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .import-report-settings > div { grid-template-columns: minmax(95px, 34%) minmax(0, 1fr); }
}

.floor-guide-figure { margin: 14px 0 0; break-inside: avoid-page; }
.floor-guide-figure figcaption { margin-bottom: 6px; color: #244459; font-size: 13px; font-weight: 900; }
.floor-guide-figure > p { margin: 6px 0 0; font-size: 11px; }
.floor-guide-board-example { display: grid; gap: 8px; max-width: 430px; padding: 9px; border: 2px solid #28495b; background: #eef5f9; }
.floor-guide-cell-heading { padding: 7px; background: #122634; color: #fff; font-weight: 900; }
.floor-guide-sample-card { display: grid; gap: 5px; max-width: 280px; padding: 9px; border: 2px solid #be5a4d; background: #fff3f2; }
.floor-guide-sample-card strong { display: flex; justify-content: space-between; }
.floor-guide-sample-card strong span { color: #347254; font-size: 10px; }
.floor-guide-sample-card p { margin: 0; font-size: 12px; }
.floor-guide-drawing { display: grid; place-items: center; min-height: 70px; border: 1px solid #9fb7c5; background: repeating-linear-gradient(135deg,#fff,#fff 10px,#f4f8fa 10px,#f4f8fa 20px); font-weight: 900; text-align: center; }
.floor-guide-drawing small { font-weight: 500; }
.floor-guide-sample-strip { padding: 5px; border: 1px solid #b5cad3; background: #fff; font-size: 10px; font-weight: 800; }
.floor-guide-sample-button { padding: 5px; background: #7d8d96; color: #fff; font-size: 10px; font-weight: 900; text-align: center; }
.floor-guide-future-step { padding: 8px; border: 1px dashed #8faab8; font-size: 11px; }
.floor-guide-timer-example { display: grid; gap: 7px; max-width: 470px; padding: 10px; border: 1px solid #b8cbd4; background: #f3f9fb; font-size: 11px; }
.floor-guide-timer-example div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.floor-guide-timer-example span { padding: 4px 6px; border: 1px solid #8aa4af; background: #fff; font-weight: 800; }
.floor-guide-split-example { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.floor-guide-split-example > div { padding: 10px; border: 2px solid #b8cbd4; background: #f7fafb; }
.floor-guide-split-example p { margin: 5px 0 0; }
@media (max-width: 600px) { .floor-guide-split-example { grid-template-columns: 1fr; } }

.guide-example-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.operation-timers-panel {
  display: grid;
  gap: 5px;
  padding: 7px;
  border: 1px solid #b8cbd4;
  background: #f3f9fb;
  color: #173342;
  font-size: 11px;
}

.operation-timers-panel h4 { margin: 0; font-size: 11px; }
.operation-timer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.operation-timer-row strong { min-width: 35px; }
.operation-timer-row output { font-variant-numeric: tabular-nums; font-weight: 800; }
.operation-timer-status { text-transform: capitalize; }
.operation-timer-status.status-running { color: #086b3c; font-weight: 900; }
.operation-timer-status.status-paused { color: #9b4b00; font-weight: 900; }
.operation-timer-controls { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; }
.operation-timer-controls button { min-height: 30px; padding: 3px 7px; border: 1px solid #8aa4af; background: #fff; color: #173342; font-size: 11px; font-weight: 800; cursor: pointer; }
.operation-timer-controls button:disabled { opacity: .5; cursor: not-allowed; }
.operation-timers-panel[data-expanded="false"] { gap: 4px; padding: 5px; }
.operation-timers-panel[data-expanded="false"] .operation-timer-row { gap: 4px; }
.operation-timers-panel[data-expanded="false"] .operation-timer-controls { width: auto; margin-left: auto; }
.operation-timers-panel[data-expanded="false"] .operation-timer-controls button { min-height: 28px; padding: 2px 6px; }
.operation-timers-panel.is-route-held { border-color: #c87500; background: #fff8e8; }
.route-hold-notice { margin: 0; padding: 6px 8px; border-left: 4px solid #c87500; background: #fff3cf; color: #563400; font-size: 11px; font-weight: 800; line-height: 1.35; }
.operation-timer-history { display: grid; gap: 3px; padding-top: 5px; border-top: 1px solid #b8cbd4; }
.operation-timer-history p { margin: 0; }
.operation-timer-history small { display: block; overflow-wrap: anywhere; }
.operation-timer-reason-overlay { position: fixed; z-index: 11000; inset: 0; display: grid; place-items: center; padding: 16px; background: #07131bcc; }
.operation-timer-reason-dialog { display: grid; gap: 12px; width: min(440px, 100%); padding: 20px; background: #fff; color: #172c39; box-shadow: 0 12px 40px #0005; }
.operation-timer-reason-dialog h3, .operation-timer-reason-dialog p { margin: 0; }
.operation-timer-reason-dialog label { display: grid; gap: 5px; font-weight: 800; }
.operation-timer-reason-dialog select, .operation-timer-reason-dialog textarea { width: 100%; padding: 8px; font: inherit; }
.operation-timer-reason-dialog textarea { min-height: 85px; resize: vertical; }
.operation-timer-reason-actions { display: flex; justify-content: flex-end; gap: 8px; }
.operation-timer-reason-actions button { min-height: 36px; padding: 5px 12px; }

@media print {
  .operation-timer-controls { display: none !important; }
}

.guide-example {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid #d5dde2;
  background: #f7fafb;
}

.guide-example b {
  color: var(--steel);
  font-size: 13px;
}

.guide-example p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.guide-example code {
  display: block;
  padding: 6px 7px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  white-space: normal;
}

.work-center-manager {
  margin: 12px;
  border: 1px solid var(--line);
  background: #fff;
}

.user-manager {
  margin: 12px;
  border: 1px solid var(--line);
  background: #fff;
}

.work-center-manager-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

.user-manager-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

.work-center-manager-header h3 {
  margin: 0;
  color: var(--steel);
}

.user-manager-header h3 {
  margin: 0;
  color: var(--steel);
}

.work-center-add {
  display: flex;
  gap: 8px;
}

.user-add {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(120px, 1fr) 88px 140px auto;
  gap: 8px;
}

.work-center-add input,
.work-center-name-input,
.user-add input,
.user-add select,
.user-row input,
.user-row select {
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  color: var(--ink);
}

.work-center-list {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.user-list {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.work-center-row {
  display: grid;
  grid-template-columns: 34px minmax(190px, 1fr) 82px 140px auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  background: #f8fafb;
}

.user-row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) 140px minmax(120px, 1fr) 96px auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  background: #f8fafb;
}

.user-name {
  color: var(--steel);
  font-weight: 900;
  overflow-wrap: anywhere;
}

.user-empty {
  padding: 12px;
  color: var(--muted);
  font-weight: 800;
}

.work-center-row.archived {
  opacity: 0.62;
}

.work-center-row.drag-over {
  outline: 3px solid var(--safety);
  outline-offset: -3px;
}

.work-center-drag-handle {
  min-height: 30px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--steel);
  font-weight: 900;
  cursor: grab;
}

.work-center-name-input {
  width: 100%;
  background: #fff;
  font-weight: 800;
}

.work-center-count,
.work-center-check {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.work-center-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.compact-action {
  min-height: 30px;
  padding: 5px 8px;
}

.danger-action {
  color: var(--danger);
}

.live-shop-feed {
  display: grid;
  grid-template-columns: repeat(7, minmax(190px, 1fr));
  gap: 8px;
  padding: 12px;
  overflow-x: auto;
}

.live-feed-column {
  min-width: 190px;
  min-height: 560px;
  border: 1px solid var(--line);
  background: #fff;
}

.live-feed-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 50px;
  padding: 10px;
  background: var(--steel);
  color: #fff;
}

.live-feed-column-header h3 {
  min-width: 0;
  margin: 0;
  font-size: 13px;
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.live-feed-column-header span {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 26px;
  min-height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  font-size: 12px;
  font-weight: 900;
}

.live-feed-list {
  display: grid;
  gap: 8px;
  padding: 8px;
  min-width: 0;
}

.live-feed-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  min-width: 0;
  padding: 10px;
  border-left: 5px solid var(--safety);
  background: #f7f9fa;
}

.live-feed-card.has-preview {
  grid-template-columns: minmax(0, 1fr);
}

.live-feed-card.no-preview .live-feed-card-body {
  grid-column: 1 / -1;
}

.live-feed-preview {
  flex: 0 0 auto;
  width: 100%;
  height: 92px;
  padding: 0;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  overflow: hidden;
}

.live-feed-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.live-feed-preview:disabled { cursor: default; opacity: 1; }
.live-feed-preview-status {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 8px;
  color: #52677d;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.live-feed-card-body {
  display: grid;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
}

.live-feed-card strong {
  min-width: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.live-feed-card span,
.live-feed-card small,
.live-feed-empty,
.movement-log-row span,
.movement-log-row small,
.movement-log-empty,
.shipment-log-row span,
.shipment-log-row small,
.shipment-log-empty {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.live-feed-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.live-feed-action {
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--steel);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.live-feed-action:hover {
  border-color: var(--steel);
  background: #eef4f7;
}

.live-feed-empty {
  padding: 12px;
  border: 1px dashed #cbd2d7;
  text-align: center;
}

.movement-log,
.shipment-log {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.movement-log-row,
.movement-log-empty,
.shipment-log-row,
.shipment-log-empty {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: #fff;
}

.movement-log-row strong,
.shipment-log-row strong {
  color: var(--ink);
}

.release-action {
  min-width: 112px;
  min-height: 36px;
  border: 0;
  background: var(--ok);
  color: #fff;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.release-action.compact {
  min-width: 86px;
  min-height: 30px;
  font-size: 12px;
}

.release-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  font-size: 34px;
  line-height: 1;
}

h2 {
  font-size: 22px;
}

.status-panel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 210px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  box-shadow: 0 3px 10px rgba(31, 43, 51, 0.06);
}

.notification-btn {
  position: relative;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  background: #f8fafb;
  color: var(--steel);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.notification-btn span {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  min-height: 18px;
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 999px;
  background: #dce4e8;
  color: var(--steel);
}

.notification-btn.has-alerts {
  border-color: var(--danger);
  color: var(--danger);
}

.notification-btn.has-alerts span {
  background: var(--danger);
  color: #fff;
}

.logout-link {
  margin-left: auto;
  padding-left: 10px;
  border-left: 1px solid var(--line);
  color: var(--steel);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
}

.logout-link:hover {
  text-decoration: underline;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ok);
}

.board-wrap {
  zoom: var(--board-zoom);
  overflow: auto;
  height: min(760px, calc(100vh - 230px));
  min-height: 360px;
  max-height: none;
  border: 2px solid var(--steel);
  background: #d8dee2;
  box-shadow: var(--shadow);
  cursor: grab;
  user-select: none;
}

.board-wrap::-webkit-scrollbar,
.backlog-table-wrap::-webkit-scrollbar {
  width: 12px;
  height: 0;
}

.board-wrap::-webkit-scrollbar-thumb,
.backlog-table-wrap::-webkit-scrollbar-thumb {
  background: #9aa7ae;
}

.board-wrap.is-panning {
  cursor: grabbing;
}

.active-floor-board-wrap {
  border-color: #2f6f5e;
  background: #dce8e4;
}

.active-floor-cell {
  background: rgba(248, 252, 250, 0.96);
}

.active-floor-cell .empty-drop {
  color: #587066;
}

.active-floor-board .pdf-card {
  outline: 1px solid rgba(47, 111, 94, 0.18);
}

.read-only-menu-toggle,
.work-center-menu-toggle {
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #6a7f91;
  background: #10212b;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.read-only-menu-toggle[hidden],
.work-center-menu[hidden] {
  display: none !important;
}

.read-only-mode .app-shell {
  position: relative;
}

.read-only-mode .app-tabs {
  display: none;
}

.read-only-mode.read-only-menu-open .app-tabs {
  position: absolute;
  top: 68px;
  left: 0;
  z-index: 150;
  display: flex;
  flex-direction: column;
  width: min(330px, calc(100vw - 24px));
  padding: 8px;
  border: 2px solid #203c50;
  background: #fff;
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.3);
}

.read-only-mode.read-only-menu-open .app-tabs .tab-btn {
  width: 100%;
  min-height: 46px;
  text-align: left;
  border: 1px solid var(--line);
}

.read-only-mode.read-only-menu-open .app-tabs .tab-btn[hidden] {
  display: none !important;
}

.work-center-menu-shell {
  position: relative;
  flex: none;
}

.work-center-menu {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  z-index: 120;
  display: grid;
  gap: 2px;
  width: min(340px, calc(100vw - 24px));
  max-height: min(65vh, 600px);
  overflow-y: auto;
  padding: 7px;
  border: 2px solid #203c50;
  background: #fff;
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.25);
}

.work-center-menu-item {
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: #f7fafb;
  color: var(--steel);
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.work-center-menu-item:hover,
.work-center-menu-item:focus-visible,
.work-center-menu-item[aria-current="true"] {
  background: #dceeff;
  outline: 2px solid #1689ff;
}

#workCenterScreen.active-screen {
  padding: 4px 0 24px;
}

.work-center-page-toolbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  background: #f7fafb;
}

.work-center-page-heading {
  padding: 14px 4px 8px;
}

.work-center-page-heading h2,
.work-center-page-heading p {
  margin: 0 0 5px;
}

.work-center-page-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(300px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding: 4px 0 12px;
}

.work-center-page-lane {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 420px;
  padding: 9px;
  border: 1px solid #aab4bb;
  background: #f1f5f7;
}

.work-center-page-lane h3 {
  position: static;
  z-index: auto;
  flex: 0 0 auto;
  margin: -9px -9px 0;
  padding: 10px;
  background: #10212b;
  color: #fff;
  font-size: 14px;
  line-height: 1.25;
}

.work-center-page-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 7px;
  border: 1px solid #b8c9d2;
  background: #fff;
}

.work-center-page-actions .laser-day-print-btn {
  min-height: 32px;
}

.work-center-page-lane .pdf-card {
  width: 100%;
  max-width: none;
}

.work-center-page-lane.drag-over {
  outline: 3px solid #1689ff;
  background: #e4f1ff;
}

.work-center-page-empty {
  margin: 12px 0;
  color: var(--muted);
  text-align: center;
}

.production-week-toolbar {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: max-content;
  margin-bottom: 8px;
  padding: 8px 10px;
  min-height: var(--production-week-toolbar-height);
  border: 1px solid var(--line);
  background: #f7fafb;
  box-shadow: 0 4px 12px rgba(31, 43, 51, 0.1);
}

.board-search-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 260px;
  margin-left: auto;
  color: var(--steel);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.board-search-control input {
  width: min(280px, 30vw);
  min-width: 170px;
  height: 30px;
  padding: 4px 9px;
  border: 1px solid #9aa7ae;
  background: #fff;
  color: var(--steel);
  font-size: 12px;
  font-weight: 800;
  outline: none;
}

.board-search-control input:focus {
  border-color: #2678bd;
  box-shadow: 0 0 0 3px rgba(38, 120, 189, 0.18);
}

.production-search-jump {
  height: 32px;
  padding: 5px 12px;
  border: 1px solid #2678bd;
  border-radius: 5px;
  background: #2678bd;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.production-search-jump:hover:not(:disabled) {
  background: #185f99;
}

.floor-guide-board-action {
  border-color: #0d5a8c;
  background: #0d5a8c;
  color: #fff;
  font-weight: 900;
}

.floor-guide-board-action:hover:not(:disabled),
.floor-guide-board-action:focus-visible {
  border-color: #073c60;
  background: #073c60;
  color: #fff;
}

.production-search-all {
  border-color: #2f7250;
  background: #2f7250;
}

.production-search-all:hover:not(:disabled) {
  background: #245b3f;
}

.production-search-jump:disabled {
  border-color: #aeb8c1;
  background: #d9dfe4;
  color: #75818a;
  cursor: not-allowed;
}

.focus-board-search {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.production-week-switch {
  display: inline-flex;
  gap: 4px;
}

.future-week-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--steel);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.future-week-control select,
.future-week-date {
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid var(--steel);
  border-radius: 4px;
  background: #fff;
  color: var(--steel);
  font-weight: 800;
}

.future-week-date[hidden] {
  display: none !important;
}

.week-switch-btn {
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--steel);
  border-radius: 4px;
  background: #fff;
  color: var(--steel);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.week-switch-btn.active {
  background: var(--steel);
  color: #fff;
}

.production-week-label {
  color: #3f4d55;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.production-board {
  display: grid;
  grid-template-columns: 138px repeat(7, minmax(169px, 1fr));
  min-width: 1340px;
}

.production-board.wide-columns {
  grid-template-columns: 138px repeat(7, minmax(339px, 1fr));
  min-width: 2530px;
}

.corner-header,
.work-center-header,
.day-header,
.day-band-label,
.day-band-department {
  position: sticky;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: 58px;
  border-right: 1px solid #223641;
  border-bottom: 2px solid #223641;
  background: var(--steel);
  color: #fff;
  font-weight: 800;
}

.corner-header {
  left: 0;
  top: var(--production-week-toolbar-height);
  z-index: 14;
  justify-content: center;
  color: #dce6ec;
  font-size: 13px;
  text-transform: uppercase;
}

.work-center-header {
  top: var(--production-week-toolbar-height);
  z-index: 12;
  justify-content: center;
  padding: 10px;
  text-align: center;
  font-size: 15px;
  line-height: 1.15;
}

.work-center-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 14px;
  z-index: 2;
  cursor: col-resize;
  touch-action: none;
  border-right: 4px solid #5eb6db;
}
.work-center-resize-handle:hover,
.work-center-resize-handle:focus-visible { background: rgba(94, 182, 219, .35); }

.day-band-label,
.day-band-department {
  position: relative;
  z-index: 5;
  justify-content: center;
  min-height: 46px;
  border-top: 6px solid #111b22;
  border-bottom: 6px solid #111b22;
  background: #20343f;
  text-align: center;
  text-transform: uppercase;
}

.day-band-label {
  left: auto;
  padding: 8px;
  color: #fff;
  font-size: 16px;
}

.day-band-department {
  padding: 8px 10px;
  color: #e9f1f5;
  font-size: 13px;
  line-height: 1.1;
}

.clickable-header {
  cursor: pointer;
}

.clickable-header:hover,
.clickable-header:focus-visible {
  background: #416271;
  outline: 3px solid var(--safety);
  outline-offset: -4px;
}

.day-header {
  left: 0;
  z-index: 10;
  min-height: var(--production-cell-min-height);
  justify-content: center;
  border-bottom: 1px solid var(--line-strong);
  background: #263d49;
  font-size: 18px;
}

.schedule-cell {
  position: relative;
  min-height: var(--production-cell-min-height);
  padding: 8px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.94);
  transition: background 120ms ease, outline-color 120ms ease;
}

.schedule-cell.packet-menu-open {
  z-index: 10010;
}

.schedule-cell.drag-over {
  background: var(--active);
  outline: 3px solid var(--safety);
  outline-offset: -5px;
}

.cell-toolbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.cell-toolbar .cell-label { flex: 1 1 110px; min-width: 0; white-space: normal; }
.cell-tools { flex-wrap: wrap; justify-content: flex-end; }

.cell-label {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.cell-hours-load {
  display: block;
  margin-top: 2px;
  color: #245579;
  font-size: 10px;
  text-transform: none;
}

.cell-hours-load.over-capacity {
  color: #ad3024;
}

.cell-tools {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.paste-packet-btn {
  min-height: 24px;
  padding: 3px 7px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--steel);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.paste-packet-btn.compact {
  min-height: 24px;
  padding: 3px 6px;
  font-size: 10px;
}

.paste-packet-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.capacity {
  flex: 0 0 auto;
  min-width: 34px;
  padding: 3px 7px;
  border: 1px solid var(--line);
  background: #f7f8f9;
  color: var(--steel);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.capacity-control {
  font-family: inherit;
  line-height: 1;
}

button.capacity-control {
  cursor: pointer;
}

button.capacity-control:hover,
button.capacity-control:focus-visible {
  border-color: var(--steel);
  background: #eef4f7;
  outline: 2px solid var(--safety);
  outline-offset: 1px;
}

.capacity.full {
  border-color: rgba(184, 61, 49, 0.35);
  background: rgba(184, 61, 49, 0.1);
  color: var(--danger);
}

.cell-expand-btn {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid #b9c1c7;
  background: #fff;
  color: var(--steel);
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.cell-expand-btn:hover {
  border-color: var(--steel);
  background: #eef4f7;
}

.packet-list {
  display: grid;
  gap: 7px;
}

.packet-list-paired {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.packet-list-paired .pdf-card,
.packet-list-stepped .pdf-card {
  min-width: 0;
}

.packet-list-paired .pdf-card[data-pair-size="single"] {
  grid-column: 1 / -1;
}

.empty-drop {
  display: grid;
  place-items: center;
  min-height: 190px;
  border: 2px dashed #aab4bb;
  color: #7a858d;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.production-cleared-week-hint {
  position: sticky;
  left: 0;
  justify-self: start;
  max-width: min(280px, calc(100vw - 48px));
  min-height: 0;
  margin: 12px 0;
  padding: 12px;
  text-align: left;
}

.pdf-card {
  position: relative;
  display: grid;
  gap: 5px;
  min-height: 132px;
  margin-top: 8px;
  margin-left: 8px;
  overflow: visible;
  padding: 7px;
  border: 1px solid #b8c3c9;
  background: #fbfcfd;
  box-shadow: 0 1px 5px rgba(31, 43, 51, 0.12);
  cursor: grab;
}

.pdf-card.readiness-clear {
  border-color: var(--ok);
  box-shadow: 0 0 0 2px rgba(35, 131, 74, 0.16), 0 1px 5px rgba(31, 43, 51, 0.12);
}

.pdf-card.readiness-ordered {
  border-color: var(--safety);
  box-shadow: 0 0 0 2px rgba(243, 179, 41, 0.32), 0 1px 5px rgba(31, 43, 51, 0.12);
}

.pdf-card.readiness-missing {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(184, 61, 49, 0.24), 0 1px 5px rgba(31, 43, 51, 0.12);
}

.pdf-card.drop-before::before,
.pdf-card.drop-after::after {
  content: "";
  position: absolute;
  right: 4px;
  left: 4px;
  z-index: 6;
  height: 4px;
  border-radius: 999px;
  background: #1f78bd;
  box-shadow: 0 0 0 2px rgba(31, 120, 189, 0.18);
  pointer-events: none;
}

.pdf-card.drop-before::before {
  top: -7px;
}

.pdf-card.drop-after::after {
  bottom: -7px;
}

.pdf-card.is-expanded {
  grid-column: 1 / -1;
  z-index: 1;
  gap: 9px;
  min-height: 250px;
  padding: 10px;
  border-color: var(--steel);
  box-shadow: 0 7px 18px rgba(31, 43, 51, 0.22);
}

.pdf-card.packet-menu-open {
  z-index: 10020;
}

.pdf-card.is-expanded .pdf-preview-btn {
  height: 176px;
}

.pdf-card.is-expanded .pdf-thumb {
  height: 176px;
}

.pdf-card.is-expanded .packet-note {
  min-height: 92px;
  max-height: none;
  overflow: visible;
}

.pdf-card.needs-help {
  border-color: #d96704;
  box-shadow: 0 0 0 2px rgba(217, 103, 4, 0.2), 0 1px 4px rgba(31, 43, 51, 0.1);
}

.pdf-card.is-overdue {
  border-color: #f58220;
  background: #fff3e4;
  box-shadow: 0 0 0 2px rgba(245, 130, 32, 0.28), 0 1px 4px rgba(31, 43, 51, 0.1);
}

.pdf-card.production-search-match {
  border-color: #2678bd;
  background: #eaf5ff;
  box-shadow: 0 0 0 3px rgba(38, 120, 189, 0.36), 0 5px 14px rgba(31, 43, 51, 0.18);
}

.production-jump-target {
  outline: 4px solid #ff9f1c !important;
  outline-offset: 3px;
  animation: production-jump-pulse 1s ease-in-out 3;
}

@keyframes production-jump-pulse {
  50% { box-shadow: 0 0 0 8px rgba(255, 159, 28, 0.28); }
}

.pdf-card.due-card-critical {
  border: 3px solid #b83d31;
  background: #fff;
  box-shadow: 0 1px 4px rgba(31, 43, 51, 0.1);
}

.pdf-card.route-held {
  border-color: #c87500;
  box-shadow: 0 0 0 3px rgba(200, 117, 0, 0.22), 0 5px 14px rgba(31, 43, 51, 0.16);
}

.pdf-card.route-correction-protected {
  cursor: default;
}

.pdf-card.route-correction-protected:not(.route-held) {
  border-color: #0b63ce;
  box-shadow: 0 0 0 3px rgba(11, 99, 206, 0.2), 0 5px 14px rgba(31, 43, 51, 0.16);
}

.packet-route-hold-notice { grid-column: 1 / -1; }

.pdf-card:active {
  cursor: grabbing;
}

.packet-help-toggle {
  position: absolute;
  top: -11px;
  left: -11px;
  z-index: 5;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid #1f2c34;
  border-radius: 50%;
  background: #fff;
  color: #101820;
  cursor: pointer;
}

.packet-help-toggle svg {
  width: 18px;
  height: 18px;
  overflow: visible;
}

.packet-help-toggle svg path:first-child {
  fill: #fff;
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.packet-help-toggle svg path:last-child {
  fill: currentColor;
  stroke: none;
}

.packet-help-toggle.is-active {
  border-color: #d96704;
  background: #fff7ed;
  color: #e66a00;
}

.packet-help-toggle.is-active svg path:first-child {
  fill: #f58220;
  stroke: #803600;
}

.packet-help-toggle.is-active svg path:last-child {
  fill: #fff;
}

.packet-help-toggle:hover,
.packet-help-toggle:focus-visible {
  outline: 2px solid rgba(217, 103, 4, 0.35);
  outline-offset: 1px;
}

.packet-help-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.packet-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.packet-card-identity {
  display: grid;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid #bec8ce;
  border-left: 4px solid var(--steel);
  background: #eef3f5;
}

.packet-card-job-number {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 34px;
  padding: 5px 7px;
  border: 1px solid #9cb8dc;
  background: #edf4ff;
  min-width: 0;
  color: #17242b;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.packet-card-revision {
  display: inline-block;
  width: fit-content;
  margin-top: 3px;
  padding: 1px 4px;
  border: 1px solid #526c7c;
  background: #fff;
  color: #172f3d;
  font-size: 11px;
  font-weight: 900;
}

.drawing-revision-review {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 2px 0 5px;
  padding: 2px 4px;
  border: 1px solid #9e7b32;
  background: #fff6d9;
  color: #483914;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.drawing-revision-review.is-mismatch {
  border-color: #a52d24;
  background: #ffe9e6;
  color: #7f2019;
}

.drawing-revision-review.is-possible {
  border-color: #3e6b8e;
  background: #edf5fb;
  color: #22445f;
}

.drawing-revision-review.is-verified,
.drawing-revision-review.is-auto-matched,
.drawing-revision-review.is-auto-matched-filename {
  border-color: #237448;
  background: #e6f6e9;
  color: #185638;
}

.drawing-revision-controls { display: grid; gap: 3px; justify-items: start; width: 100%; min-width: 0; }
.drawing-revision-verify {
  min-height: 28px;
  max-width: 100%;
  padding: 3px 6px;
  border: 1px solid #4e6978;
  background: #f1f7fa;
  color: #183e54;
  font-size: 10px;
  font-weight: 900;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.drawing-revision-verify[hidden] { display: none; }
.drawing-revision-verify:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.drawing-revision-dialog { max-width: min(560px, calc(100vw - 32px)); }
.drawing-revision-dialog label { display: grid; gap: 5px; margin: 8px 0; font-weight: 800; }
.drawing-revision-dialog input { min-height: 38px; padding: 7px; }

.physical-handoff-panel {
  display: grid;
  gap: 6px;
  padding: 7px;
  border: 2px solid #b45a16;
  background: #fff4df;
  color: #422809;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.physical-handoff-panel button {
  width: fit-content;
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid #34533c;
  background: #e3f1e4;
  color: #17341d;
  font: inherit;
  cursor: pointer;
}

.physical-handoff-panel button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.physical-handoff-panel:empty {
  display: none;
}

.packet-preview-stack {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.packet-thumb-meta {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: #25333b;
  font-size: 11px;
  line-height: 1.15;
}

.packet-thumb-meta-part {
  grid-template-columns: minmax(0, 1fr);
}

.packet-thumb-meta-item {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid #cfd7dc;
  background: #fff;
}

.packet-thumb-meta-label {
  flex: 0 0 auto;
  color: #5d6a70;
  font-weight: 900;
}

.packet-thumb-meta-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 900;
  white-space: nowrap;
}

.packet-thumb-meta-item.part .packet-thumb-meta-value {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.packet-due-strip {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.packet-due-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  padding: 3px 5px;
  border: 1px solid #cfd7dc;
  background: #f7f9fa;
  color: #24313a;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.packet-due-label {
  flex: 0 0 auto;
  color: inherit;
}

.packet-due-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
  white-space: nowrap;
}

.packet-due-line.due-safe {
  border-color: #2678bd;
  background: #e7f2fb;
  color: #185f98;
}

.packet-due-line.due-far {
  border-color: #23834a;
  background: #e7f6ec;
  color: #176236;
}

.packet-due-line.due-watch {
  border-color: #d7a32a;
  background: #fff4cf;
  color: #745200;
}

.packet-due-line.due-danger,
.packet-due-line.due-critical {
  border-color: #b83d31;
  background: #ffe2df;
  color: #8f1e17;
}

.packet-due-line.committed {
  border-width: 2px;
  gap: 4px;
  font-size: 9px;
}

.packet-due-line.committed .packet-due-value {
  overflow: visible;
  text-overflow: clip;
}

.pdf-preview-btn {
  position: relative;
  width: 100%;
  height: 92px;
  padding: 0;
  border: 1px solid #c9d1d6;
  background: #f1f4f6;
  cursor: pointer;
  overflow: hidden;
}

.pdf-preview-btn.readiness-clear .pdf-thumb {
  border-color: var(--ready);
  box-shadow: 0 0 0 4px rgba(47, 135, 84, 0.28);
}

.pdf-preview-btn.readiness-ordered .pdf-thumb {
  border-color: var(--process);
  box-shadow: 0 0 0 4px rgba(243, 179, 41, 0.35);
}

.pdf-preview-btn.readiness-missing .pdf-thumb {
  border-color: var(--hold);
  box-shadow: 0 0 0 4px rgba(184, 61, 49, 0.3);
}

.pdf-preview-btn:hover .pdf-thumb {
  border-color: var(--steel);
  box-shadow: 0 0 0 2px rgba(51, 78, 92, 0.16);
}

.pdf-preview-btn.no-pdf {
  display: grid;
  place-items: center;
  border: 1px dashed #8f9aa0;
  background: #eef1f2;
  color: #536168;
  cursor: default;
}

.pdf-missing-label {
  padding: 8px;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.pdf-thumb {
  width: 100%;
  height: 92px;
  object-fit: contain;
  border: 0;
  background: #f7f9fa;
}

.pdf-details {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.pdf-name {
  display: none;
}

.packet-note {
  width: 100%;
  min-height: 34px;
  max-height: 54px;
  resize: vertical;
  border: 1px solid #cfd7dc;
  padding: 5px 6px;
  background: #fffdf7;
  color: #2b343b;
  font-size: 12px;
  line-height: 1.25;
  outline: none;
}

.packet-note.has-note:not(:focus) {
  font-weight: 800;
}

.packet-note.is-auto-sized {
  overflow: hidden;
  resize: none;
}

.packet-note:focus {
  border-color: var(--safety);
  box-shadow: 0 0 0 2px rgba(243, 179, 41, 0.25);
}

.packet-master-job-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: #4d5960;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.packet-master-job-field input {
  min-width: 0;
  height: 24px;
  padding: 3px 5px;
  border: 1px solid #d0d7dc;
  background: #fff;
  color: #1f2c34;
  font-size: 11px;
  font-weight: 800;
  outline: none;
}

.packet-master-job-field input:focus {
  border-color: var(--steel);
  box-shadow: 0 0 0 2px rgba(51, 78, 92, 0.16);
}

.packet-master-job-field input[readonly] {
  background: #eef1f2;
  color: #6f7b82;
}

.packet-master-children {
  display: grid;
  gap: 6px;
  padding: 7px;
  border: 1px solid #aeb9bf;
  background: #f2f5f6;
  color: #20313a;
  font-size: 11px;
  line-height: 1.2;
}

.packet-master-children.has-open {
  border-color: rgba(215, 163, 42, 0.7);
  background: #fff8e2;
}

.packet-master-children.all-filed {
  border-color: rgba(35, 131, 74, 0.45);
  background: #eef8f1;
}

.packet-master-children strong {
  font-size: 11px;
  text-transform: uppercase;
}

.packet-master-child-helper {
  color: #5f6b72;
  font-size: 10px;
  font-weight: 800;
}

.packet-master-child {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 6px;
  align-items: center;
  min-width: 0;
  padding: 6px;
  border: 1px dashed #aeb9bf;
  background: #fff;
}

.packet-master-child.is-filed {
  border-style: solid;
  border-color: rgba(35, 131, 74, 0.42);
  background: #eef8f1;
}

.packet-child-pocket-badge {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  min-height: 22px;
  padding: 2px 5px;
  border: 1px solid #aeb9bf;
  background: #edf1f3;
  color: #46545b;
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.packet-master-child.is-filed .packet-child-pocket-badge {
  border-color: #23834a;
  background: #23834a;
  color: #fff;
}

.packet-child-pocket-main {
  min-width: 0;
}

.packet-child-job-link,
.packet-child-job-static {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 24px;
  padding: 2px 4px;
  color: #17242b;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.packet-child-job-link {
  border: 1px solid #9aa8af;
  background: #fff;
  cursor: pointer;
}

.packet-child-job-link:hover,
.packet-child-job-link:focus-visible {
  border-color: var(--steel);
  outline: 2px solid rgba(51, 78, 92, 0.16);
}

.packet-child-job-static {
  border: 1px solid transparent;
}

.packet-master-child small {
  grid-column: 1 / -1;
  min-width: 0;
  color: #496657;
  font-size: 10px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.completed-child-card {
  cursor: default;
  border-color: rgba(35, 131, 74, 0.55);
  background: #f7fcf8;
}

.completed-child-filed-banner {
  padding: 8px;
  border-left: 5px solid #23834a;
  background: #eef8f1;
  color: #183b27;
  font-size: 12px;
  font-weight: 950;
}

.completed-child-facts {
  display: grid;
  gap: 4px;
}

.completed-child-fact {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 6px;
  align-items: start;
  padding: 5px 6px;
  border: 1px solid #d7e2d9;
  background: #fff;
  font-size: 11px;
}

.completed-child-fact span {
  color: #66737a;
  font-weight: 900;
  text-transform: uppercase;
}

.completed-child-fact b {
  min-width: 0;
  color: #17242b;
  overflow-wrap: anywhere;
}

.completed-child-note {
  min-height: 54px;
  max-height: none;
  overflow: visible;
  white-space: pre-wrap;
}

.packet-settings {
  position: relative;
  flex: 0 0 auto;
}

.packet-settings.packet-menu-open {
  z-index: 10030;
}

.packet-settings-btn {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--steel);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.packet-settings-btn:hover,
.packet-settings.is-open .packet-settings-btn {
  border-color: var(--steel);
  background: #eef4f7;
}

.packet-settings-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.packet-settings-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 5px);
  z-index: 10020;
  display: grid;
  min-width: 156px;
  padding: 4px;
  border: 1px solid #9ca7ae;
  background: #fff;
  box-shadow: 0 8px 20px rgba(31, 43, 51, 0.22);
  pointer-events: auto;
  touch-action: manipulation;
}

.packet-settings-menu[hidden] {
  display: none;
}

.packet-settings-menu.is-portaled {
  position: fixed;
  right: auto;
  bottom: auto;
  z-index: 20050;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.packet-settings-menu-item {
  position: relative;
  z-index: 1;
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  background: #fff;
  color: #26343c;
  font-size: 11px;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}

.packet-settings-menu-item:hover,
.packet-settings-menu-item:focus-visible {
  background: #eef4f7;
}

.packet-settings-menu-item:disabled {
  color: #9aa4aa;
  cursor: not-allowed;
}

.packet-settings-menu-item:first-child {
  color: var(--danger);
}

.production-warning-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.production-warning-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 24px;
  padding: 2px 4px;
  border: 1px solid currentColor;
  background: #fff;
  cursor: pointer;
}

.production-warning-badge.ordered {
  color: #785d00;
  background: rgba(243, 179, 41, 0.2);
}

.production-warning-badge.received {
  color: #176338;
  background: rgba(35, 131, 74, 0.18);
}

.production-warning-badge.missing {
  color: var(--danger);
  background: rgba(184, 61, 49, 0.1);
}

.production-warning-badge:focus-visible {
  outline: 3px solid rgba(26, 83, 114, 0.35);
  outline-offset: 2px;
}

.production-warning-badge:hover {
  box-shadow: 0 0 0 2px rgba(26, 83, 114, 0.12);
}

.first-piece-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 25px;
  padding: 3px 6px;
  border: 1px solid #d8dde1;
  border-radius: 2px;
  background: #fff;
  color: #5f6870;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: none;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.packet-qc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  min-width: 0;
}

.packet-qty-badge {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  flex: 1 1 100%;
  min-width: 0;
  max-width: none;
  min-height: 24px;
  padding: 3px;
  border: 1px solid #cbd4d9;
  background: #f6f8f9;
  color: #1d5f3f;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.packet-qty-badge > span {
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 2px 3px;
  border-right: 1px solid #d5dde1;
}

.packet-qty-badge > span:last-child {
  border-right: 0;
}

.packet-qty-badge small {
  color: #58666e;
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.packet-qty-badge b {
  color: #173f2c;
  font-size: 10px;
  line-height: 1.1;
}

.packet-qty-badge.is-split-family {
  border-color: #cbd3dd;
  background: #f3f5f8;
}

.packet-next-day-count {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 42px;
  max-width: none;
  min-height: 24px;
  padding: 2px 5px;
  border: 1px solid #8fa0a8;
  background: #eef3f5;
  color: #334650;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.packet-next-day-count > span {
  flex: 0 0 auto;
}

.packet-auto-next-day-count {
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  margin-left: 0;
  padding: 0 4px;
  border: 1px solid #b53a31;
  border-radius: 9px;
  background: #fff;
  color: #d30000;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.packet-process-row {
  display: flex;
  align-items: stretch;
  gap: 5px;
  min-width: 0;
}

.packet-pricing {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  padding: 3px;
  border: 1px solid #cbd3dd;
  background: #f1f3f6;
  color: #26364a;
  text-align: center;
}

.packet-pricing > span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 2px 5px;
  border-right: 1px solid #d6dde5;
}

.packet-pricing > span:last-child {
  border-right: 0;
}

.packet-pricing small {
  color: #536277;
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.packet-pricing b {
  color: #26364a;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
}

.packet-process-qty {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 26px;
  padding: 4px 7px;
  border: 1px solid #b8c7cf;
  border-left: 4px solid #1a5372;
  background: #eef5f8;
}

.packet-process-qty small {
  min-width: 0;
  color: #4f626d;
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.packet-process-qty b {
  flex: 0 0 auto;
  color: #173f2c;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.packet-process-row > .packet-settings {
  align-self: stretch;
}

.packet-process-row .packet-settings-btn {
  width: 30px;
  height: 100%;
  min-height: 26px;
}

.first-piece-check input {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 0;
  accent-color: var(--ok);
}

.first-piece-check span {
  min-width: 0;
}

.pdf-card.first-piece-qc-pending .first-piece-check {
  border-color: #e1bd57;
  background: rgba(243, 179, 41, 0.16);
  color: #5d4500;
}

.first-piece-check.is-passed {
  border-color: #245f3f;
  background: linear-gradient(180deg, #3b9362 0%, #2f7d50 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 1px 2px rgba(29, 37, 44, 0.18);
}

.first-piece-check.is-passed input {
  accent-color: #1f6841;
}

.first-piece-check.is-passed:hover {
  border-color: #1d5235;
  background: linear-gradient(180deg, #358759 0%, #296f47 100%);
}

.first-piece-check:focus-within {
  outline: 2px solid rgba(47, 135, 84, 0.32);
  outline-offset: 2px;
}

.warning-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.warning-icon.state {
  width: 15px;
  height: 15px;
}

.warning-icon.state.received-check {
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.complete-action,
.queue-action {
  min-height: 26px;
  border: 0;
  background: var(--steel);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.complete-action {
  flex: 1 1 auto;
  justify-self: start;
  min-width: 0;
  padding: 3px 6px;
}

.bom-action {
  display: inline-grid;
  place-items: center;
  min-height: 26px;
  min-width: 42px;
  padding: 3px 7px;
  border: 1px solid var(--steel);
  border-radius: 4px;
  background: #fff;
  color: var(--steel);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
}

.bom-action:hover,
.bom-action:focus-visible {
  background: #eef4f7;
  outline: 2px solid rgba(26, 83, 114, 0.22);
  outline-offset: 1px;
}

.bom-action.compact {
  min-width: 38px;
  padding-inline: 5px;
}

.planning-job-actions .bom-action,
.planning-job-actions .release-action.compact {
  min-height: 30px;
}

.packet-actions .bom-action {
  flex: 0 0 auto;
}

.queue-action {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 4px;
}

.queue-action[data-queue-state="queued"] {
  border: 1px solid #7f1d1d;
  background: #b42318;
  color: #fff;
}

.queue-action[data-queue-state="board"] {
  border: 1px solid #175c39;
  background: #267449;
  color: #fff;
}

.complete-action:disabled,
.queue-action:disabled[data-queue-state="ready"] {
  background: #b9c1c6;
  color: #f8fafb;
  cursor: not-allowed;
}

.queue-action-icon {
  display: grid;
  grid-template-columns: 12px 9px;
  align-items: center;
  gap: 1px;
}

.queue-action-arrow {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 10px;
}

.queue-action-arrow::before,
.queue-action-arrow::after {
  position: absolute;
  content: "";
}

.queue-action-arrow::before {
  top: 4px;
  left: 0;
  width: 8px;
  border-top: 2px solid currentColor;
}

.queue-action-arrow::after {
  top: 1px;
  right: 1px;
  width: 6px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.queue-action-q {
  font-size: 12px;
  line-height: 1;
}

.queue-action[data-queue-state="queued"] .queue-action-icon {
  grid-template-columns: 9px 12px;
}

.queue-action[data-queue-state="queued"] .queue-action-q {
  order: 1;
}

.queue-action[data-queue-state="queued"] .queue-action-arrow {
  order: 2;
  transform: rotate(180deg);
}

.notes-section {
  margin-top: 18px;
  border: 2px solid var(--steel);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.backlog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 2px solid var(--steel);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.backlog-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.backlog-view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px 0;
  background: #edf1f3;
}

.backlog-view-tab {
  min-height: 38px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--steel);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  cursor: pointer;
}

.backlog-view-tab.active {
  border-color: var(--steel);
  background: var(--steel);
  color: #fff;
}

.backlog-view-tab:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }

.backlog-rework-notice {
  margin: 8px 14px;
  padding: 9px 12px;
  border-left: 4px solid #a45324;
  background: #fff8ef;
  color: #633a23;
  font-size: 12px;
  font-weight: 700;
}

.backlog-title-row h2 {
  margin: 0;
}

.backlog-button-key-btn {
  min-height: 34px;
  border-color: var(--steel);
  background: #eef3f5;
  color: var(--steel);
}

.backlog-value-summary {
  display: grid;
  gap: 2px;
  min-width: 190px;
  padding: 9px 12px;
  border: 1px solid #b9c5cf;
  border-left: 5px solid var(--signal);
  background: #f4f8fb;
  color: var(--steel);
}

.backlog-value-summary[hidden] {
  display: none;
}

.backlog-value-summary > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.backlog-value-summary > strong {
  font-size: 21px;
  line-height: 1.05;
}

.backlog-value-summary > small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.backlog-search {
  display: grid;
  gap: 4px;
  min-width: 220px;
  max-width: 320px;
  flex: 1 1 260px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.backlog-sort-controls {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 8px;
}

.backlog-schedule-filters {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border: 1px solid #b8c4cb;
  background: #edf2f4;
}

.backlog-schedule-filters button {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--steel);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.backlog-schedule-filters button:hover {
  border-color: #8fa0a8;
  background: #fff;
}

.backlog-schedule-filters button[aria-pressed="true"] {
  border-color: var(--steel);
  background: var(--steel);
  color: #fff;
}

.backlog-sort {
  display: grid;
  gap: 4px;
  min-width: 142px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.backlog-search input {
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--steel);
  font-size: 14px;
  font-weight: 800;
  text-transform: none;
}

.backlog-sort select {
  min-height: 36px;
  padding: 7px 28px 7px 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--steel);
  font-size: 14px;
  font-weight: 800;
}

.backlog-sort-direction {
  min-width: 112px;
}

.backlog-search input:focus,
.backlog-sort select:focus {
  outline: 2px solid var(--safety);
  outline-offset: 1px;
}

.backlog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex: 1 1 560px;
  min-width: 320px;
}

.file-action,
.secondary-action {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  min-height: 36px;
  max-width: max-content;
  padding: 7px 11px;
  border: 1px solid var(--steel);
  background: var(--steel);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.secondary-action {
  background: #f8fafb;
  color: var(--steel);
}

.file-action:hover,
.secondary-action:hover {
  filter: brightness(0.95);
}

.secondary-action:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.quote-match-progress {
  display: grid;
  flex: 1 1 260px;
  gap: 5px;
  min-width: 260px;
  max-width: 360px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  background: #fff;
}

.quote-match-progress[hidden] {
  display: none;
}

.quote-match-progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  color: var(--steel);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.quote-match-progress-top span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-match-progress-top span:last-child {
  flex: 0 0 auto;
  color: var(--muted);
  text-align: right;
}

.quote-match-progress-track {
  overflow: hidden;
  height: 8px;
  border: 1px solid #aeb7bd;
  background: #edf1f3;
}

.quote-match-progress-track span {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--safety);
  transition: width 180ms ease;
}

.email-note {
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 6px solid var(--safety);
  background: #fffdf7;
  color: #3a4249;
  font-size: 14px;
  line-height: 1.35;
}

.backlog-summary {
  display: grid;
  grid-template-columns: 150px 170px minmax(220px, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.backlog-summary div {
  display: grid;
  gap: 3px;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.backlog-summary span {
  overflow: hidden;
  color: var(--steel);
  font-size: 22px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.backlog-summary small {
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
}

.backlog-table-wrap {
  overflow: auto;
  height: min(680px, calc(100vh - 300px));
  min-height: 260px;
  max-height: none;
  margin-top: 12px;
  border: 2px solid var(--steel);
  background: #fff;
  box-shadow: var(--shadow);
}

.panel-resize-controls {
  display: grid;
  grid-template-columns: auto minmax(140px, 1fr) auto auto;
  gap: 4px;
  align-items: center;
  width: 100%;
  min-height: 28px;
  margin: 0 0 4px;
  border: 1px solid #9aa7ae;
  border-top: 0;
  background: #eef2f4;
}

.panel-resize-controls button,
.panel-resize-grip {
  min-height: 26px;
  border: 0;
  background: #fff;
  color: #40515b;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.panel-resize-controls button {
  padding: 0 9px;
  cursor: pointer;
}

.panel-resize-grip {
  display: grid;
  place-items: center;
  min-width: 0;
  background: repeating-linear-gradient(
    90deg,
    #eef2f4,
    #eef2f4 10px,
    #e1e7ea 10px,
    #e1e7ea 20px
  );
  letter-spacing: 0.04em;
  cursor: ns-resize;
}

.panel-resize-grip::before {
  content: "";
  width: 46px;
  height: 4px;
  border-top: 1px solid #74828b;
  border-bottom: 1px solid #74828b;
}

.panel-resize-controls button:hover,
.panel-resize-controls button:focus-visible,
.panel-resize-grip:hover,
.panel-resize-grip:focus-visible {
  background-color: #dce7ec;
  outline: 2px solid rgba(51, 78, 92, 0.22);
  outline-offset: 0;
}

.panel-x-scrollbar {
  position: sticky;
  bottom: 0;
  z-index: 8;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  height: 14px;
  margin: 0 0 8px;
  border: 1px solid #9aa7ae;
  border-top: 0;
  background: #f7fafb;
  box-shadow: 0 -4px 10px rgba(31, 43, 51, 0.08);
}

.panel-x-scrollbar[hidden] {
  display: none;
}

.panel-x-scrollbar-spacer {
  height: 1px;
}

.panel-x-scrollbar:focus-visible {
  outline: 2px solid rgba(51, 78, 92, 0.32);
  outline-offset: 1px;
}

.is-resizing-panel,
.is-resizing-panel * {
  cursor: ns-resize !important;
  user-select: none !important;
}

.backlog-table {
  width: 100%;
  min-width: 1160px;
  border-collapse: collapse;
  table-layout: fixed;
}

.backlog-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  min-width: 88px;
  padding: 8px 18px 8px 9px;
  border-right: 1px solid #223641;
  background: var(--steel);
  color: #fff;
  font-size: 12px;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-align: left;
}

.backlog-header-label {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.backlog-column-resizer {
  position: absolute;
  top: 0;
  right: -4px;
  z-index: 3;
  width: 9px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
}

.backlog-column-resizer::after {
  position: absolute;
  top: 8px;
  right: 4px;
  bottom: 8px;
  width: 2px;
  background: rgba(255, 255, 255, 0.42);
  content: "";
}

.backlog-column-resizer:hover::after,
.backlog-column-resizer:focus-visible::after,
.is-resizing-backlog-column .backlog-column-resizer::after {
  background: #ffd24a;
}

.is-resizing-backlog-column,
.is-resizing-backlog-column * {
  cursor: col-resize !important;
  user-select: none;
}

.backlog-queue-cell {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 28px 28px 28px 24px 22px;
  justify-items: center;
  align-items: center;
  gap: 4px;
  width: 78px;
}

.backlog-line-number {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid #b8c4ca;
  background: #f5f8fa;
  color: #20343f;
  font-size: 12px;
  font-weight: 900;
}

.backlog-table td {
  min-width: 88px;
  padding: 7px 9px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: #2b343b;
  font-size: 13px;
  line-height: 1.3;
  overflow-wrap: anywhere;
  vertical-align: top;
  word-break: break-word;
}

.backlog-table td.backlog-description-cell {
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
}

.backlog-table td.backlog-queue-cell {
  min-width: 88px;
  padding: 5px 6px;
}

.backlog-flow-badge {
  display: grid;
  place-items: center;
  width: 68px;
  min-height: 28px;
  padding: 2px 4px;
  border: 1px solid #b9c4ca;
  border-left-width: 5px;
  background: #f6f8f9;
  color: #2d3d46;
  line-height: 1.05;
  text-align: center;
}

.backlog-flow-badge b,
.backlog-flow-badge small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.backlog-flow-badge b {
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.backlog-flow-badge small {
  margin-top: 1px;
  color: #52636c;
  font-size: 8px;
  font-weight: 800;
}

.backlog-flow-badge.queued {
  border-color: #b38a00;
  background: #fff5cc;
  color: #5f4700;
}

.backlog-flow-badge.board {
  border-color: #1f6f8f;
  background: #e6f6fb;
  color: #164f65;
}

.backlog-flow-badge.live {
  border-color: #267449;
  background: #e8f7ee;
  color: #1f5939;
}

.backlog-flow-badge.released {
  border-color: #9065aa;
  background: #f3ecf8;
  color: #5c3f70;
}

.backlog-flow-badge.ready {
  border-color: #aeb9bf;
  background: #f7f9fa;
  color: #51606a;
}

.backlog-queue-cell .bom-action {
  width: 42px;
  min-height: 22px;
  font-size: 9px;
}

.backlog-group-row td {
  position: sticky;
  top: 34px;
  z-index: 1;
  padding: 6px 10px;
  border-top: 2px solid #b7c2c8;
  border-bottom: 1px solid #b7c2c8;
  background: #e8eef1;
  color: var(--steel);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.backlog-group-row span {
  margin-right: 10px;
}

.backlog-group-row b {
  color: var(--muted);
  font-size: 11px;
}

.backlog-delete-action {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #d4b3af;
  background: #fff;
  color: var(--danger);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.backlog-delete-action:hover,
.backlog-delete-action:focus-visible {
  background: #fff3f1;
  border-color: var(--danger);
}

.backlog-delete-action:disabled {
  color: #c8a7a2;
  cursor: not-allowed;
  opacity: 0.6;
}

.backlog-merge-action,
.backlog-edit-action {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid #9fb4bf;
  background: #fff;
  color: var(--steel);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
}

.backlog-merge-action:hover,
.backlog-merge-action:focus-visible,
.backlog-edit-action:hover,
.backlog-edit-action:focus-visible {
  border-color: var(--accent);
  background: #eef7fb;
}

.backlog-merge-action:disabled,
.backlog-edit-action:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.backlog-edit-action {
  min-width: 34px;
  padding: 0 5px;
}

.backlog-table tr:nth-child(even) td {
  background: #f8fafb;
}

.backlog-table tr.backlog-group-row td {
  background: #e8eef1;
}

.backlog-work-center-cell {
  min-width: 132px;
}

.backlog-due-cell {
  min-width: 126px;
}

.backlog-due-cell .packet-due-strip {
  max-width: 150px;
}

.backlog-due-cell .packet-due-line {
  padding: 4px 6px;
  font-size: 10px;
}

.backlog-due-cell .packet-due-value {
  overflow: visible;
  text-overflow: clip;
}

.backlog-pricing-cell {
  min-width: 96px;
  font-size: 11px;
  font-weight: 800;
  color: #18313b;
}

.backlog-price-list {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.backlog-price-line {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}

.backlog-price-line b {
  color: var(--muted);
}

.backlog-price-empty {
  color: var(--muted);
  font-weight: 900;
}

.backlog-work-center-route {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.backlog-route-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  padding: 3px 5px;
  border: 1px solid #d7e0e5;
  background: #fff;
  color: #20343f;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.backlog-route-step.current {
  border-color: #d9ae2d;
  background: #fff4cc;
  color: #4d3a00;
  box-shadow: inset 4px 0 0 var(--safety);
}

.backlog-route-step.completed {
  border-color: #1d7f4d;
  background: #e6f6ed;
  color: #135f38;
  box-shadow: inset 4px 0 0 #23834a;
}

.backlog-route-label {
  min-width: 0;
}

.backlog-route-label.has-added-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 5px;
  align-items: baseline;
}

.backlog-route-added {
  display: inline-block;
  color: #075dcc;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  line-height: 1;
  vertical-align: baseline;
}

.backlog-route-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  min-width: 0;
}

.backlog-route-badge {
  display: inline-grid;
  min-width: 0;
  padding: 2px 4px;
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, 0.72);
  font-family: Arial, sans-serif;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.1;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.backlog-route-badge.qc {
  color: #116235;
}

.backlog-route-badge.done {
  color: #135f38;
}

.backlog-route-empty {
  color: var(--muted);
  font-weight: 900;
}

.backlog-row.readiness-clear {
  box-shadow: inset 4px 0 0 var(--ok);
}

.backlog-row.readiness-ordered {
  box-shadow: inset 4px 0 0 var(--safety);
}

.backlog-row.readiness-missing {
  box-shadow: inset 4px 0 0 var(--danger);
}

.backlog-row.is-piece-part td {
  background: #f8fafb;
}

.backlog-row.is-master-job td {
  border-top: 2px solid var(--steel);
  font-weight: 900;
}

.backlog-row.is-split-partial td {
  background: #eef8ff;
}

.backlog-row.is-split-partial {
  box-shadow: inset 7px 0 0 #1479b8;
}

.backlog-quantity-cell {
  min-width: 230px;
  padding: 5px !important;
}

.backlog-quantity-box {
  display: grid;
  gap: 5px;
  min-width: 215px;
  padding: 5px;
  border: 2px solid #9eabb2;
  background: #fff;
}

.backlog-line-item-qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 7px;
  border: 1px solid #79a9c5;
  background: #e5f5ff;
}

.backlog-line-item-qty > span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.backlog-line-item-qty em {
  padding: 2px 4px;
  border-radius: 2px;
  background: #1479b8;
  color: #fff;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.backlog-line-item-qty b {
  color: #073d5c;
  font-size: 17px;
}

.backlog-quantity-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.backlog-quantity-totals > span,
.backlog-split-family > span {
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 3px 5px;
  border-right: 1px solid #d5dde1;
  text-align: center;
}

.backlog-quantity-totals > span:last-child {
  border-right: 0;
}

.backlog-quantity-box small {
  color: #5b6870;
  font-size: 8px;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.backlog-quantity-box b {
  color: #182b35;
  font-size: 12px;
  line-height: 1.1;
}

.backlog-quantity-box b.backlog-current-row-qty {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid #cbd3dd;
  border-radius: 3px;
  background: #fff;
  color: #182b35;
  font-size: 16px;
  font-weight: 900;
}

.backlog-split-family > span.backlog-current-split-allocation {
  background: #edf2f8;
  box-shadow: inset 2px 0 0 #075dcc;
}

.backlog-quantity-box.is-split-family {
  border-color: #cbd3dd;
  background: #f6f8fa;
  box-shadow: none;
}

.backlog-split-family {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid #d6dde5;
  background: #fff;
}

.backlog-split-family > strong {
  grid-column: 1 / -1;
  padding: 4px 5px;
  color: #536277;
  font-size: 9px;
  text-transform: uppercase;
}

.backlog-split-family > span {
  border-top: 1px solid #d5e7f2;
  border-right: 1px solid #d5e7f2;
}

.backlog-split-family > span:nth-child(odd) {
  border-right: 0;
}

.backlog-pdf-cell {
  min-width: 118px;
}

.backlog-pdf-preview {
  position: relative;
  width: 84px;
  height: 96px;
  margin: 0 6px 6px 0;
  padding: 0;
  border: 1px solid #b9c1c7;
  background: #f2f4f5;
  cursor: pointer;
  overflow: hidden;
}

.backlog-pdf-preview.readiness-clear {
  border-color: var(--ok);
  box-shadow: 0 0 0 2px rgba(35, 131, 74, 0.16);
}

.backlog-pdf-preview.readiness-ordered {
  border-color: var(--safety);
  box-shadow: 0 0 0 2px rgba(243, 179, 41, 0.2);
}

.backlog-pdf-preview.readiness-missing {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(184, 61, 49, 0.18);
}

.backlog-pdf-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.backlog-pdf-preview img:not([src]) {
  display: none;
}

.pdf-context-menu {
  position: fixed;
  z-index: 10000;
  min-width: 148px;
  padding: 4px;
  border: 1px solid #17242b;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.pdf-context-menu button {
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: #9f1d1d;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}

.pdf-context-menu button:hover,
.pdf-context-menu button:focus-visible {
  outline: none;
  background: #f7e5e3;
}

.backlog-no-pdf {
  display: inline-block;
  padding: 5px 7px;
  border: 1px dashed #aab4bb;
  background: #fff;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.backlog-no-pdf:hover,
.backlog-no-pdf:focus-visible {
  border-color: var(--steel);
  color: var(--steel);
}

.backlog-no-pdf:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.backlog-no-pdf.readiness-clear {
  border-color: var(--ok);
  box-shadow: 0 0 0 2px rgba(35, 131, 74, 0.14);
}

.backlog-no-pdf.readiness-ordered {
  border-color: var(--safety);
  box-shadow: 0 0 0 2px rgba(243, 179, 41, 0.2);
}

.backlog-no-pdf.readiness-missing {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(184, 61, 49, 0.18);
}

.backlog-part {
  min-width: 130px;
  color: var(--steel);
  font-weight: 800;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.backlog-part-number,
.backlog-part-revision {
  display: block;
}

.backlog-part-revision {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.backlog-tree-count {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.backlog-tree-count.split-partial-label {
  color: #16608b;
  font-weight: 950;
}

.backlog-child-traveler-status {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 5px;
  border: 1px solid #c8d1d6;
  background: #f4f6f7;
  color: #46545b;
  font-size: 10px;
  font-weight: 950;
  line-height: 1.15;
  text-transform: uppercase;
}

.backlog-child-traveler-status.all-filed {
  border-color: rgba(35, 131, 74, 0.5);
  background: #e8f7ee;
  color: #176338;
}

.backlog-child-traveler-status.has-open {
  border-color: rgba(215, 163, 42, 0.72);
  background: #fff5cc;
  color: #684c00;
}

.backlog-empty {
  height: 160px;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
  vertical-align: middle;
}

.message-center-board {
  display: grid;
  gap: 14px;
}

.message-center-header,
.message-composer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 3px 10px rgba(31, 43, 51, 0.06);
}

.message-center-header h2 {
  margin-top: 2px;
}

.message-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.message-composer label {
  color: var(--steel);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.message-composer-input {
  position: relative;
}

.message-composer textarea {
  width: 100%;
  min-height: 96px;
  max-height: 220px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink);
  resize: vertical;
}

.message-composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.message-helper {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.mention-list {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 25;
  display: grid;
  min-width: 190px;
  max-height: 210px;
  overflow: auto;
  border: 1px solid var(--steel);
  background: #fff;
  box-shadow: var(--shadow);
}

.mention-list[hidden] {
  display: none;
}

.note-mention-list {
  position: fixed;
  right: auto;
  bottom: auto;
  z-index: 1400;
}

.mention-option {
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: var(--steel);
  font-size: 13px;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}

.mention-option:hover,
.mention-option:focus-visible {
  background: #eef3f5;
  outline: none;
}

.message-list {
  display: grid;
  gap: 10px;
}

.message-card,
.message-empty {
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 3px 10px rgba(31, 43, 51, 0.05);
}

.message-card.is-unread {
  border-left: 5px solid var(--danger);
}

.message-card-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--steel);
  font-size: 13px;
  font-weight: 900;
}

.message-card-header span {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.message-card-body {
  margin: 8px 0;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.message-job-reference {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin-top: 8px;
  padding: 6px 9px;
  border: 1px solid #7f98a5;
  border-radius: 4px;
  background: #edf5f8;
  color: #173f54;
  text-align: left;
  cursor: pointer;
}

.message-job-reference strong {
  flex: 0 0 auto;
  font-size: 13px;
}

.message-job-reference span {
  overflow: hidden;
  color: #536b77;
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-job-reference:hover,
.message-job-reference:focus-visible {
  border-color: #173f54;
  background: #dcecf3;
  outline: 2px solid rgba(23, 63, 84, 0.2);
}

.message-mention {
  color: var(--danger);
  font-weight: 900;
}

.message-mentions {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.notification-popup {
  position: fixed;
  top: 76px;
  right: 24px;
  z-index: 1250;
  display: grid;
  gap: 8px;
  width: min(360px, calc(100vw - 32px));
  max-height: min(520px, calc(100vh - 96px));
  padding: 10px;
  border: 2px solid var(--steel);
  background: #fff;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

.notification-popup[hidden] {
  display: none;
}

.notification-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--steel);
  font-size: 13px;
  text-transform: uppercase;
}

.notification-popup-header button {
  min-height: 28px;
  border: 1px solid var(--line);
  background: #f8fafb;
  color: var(--steel);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.notification-popup-header button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.notification-list {
  display: grid;
  gap: 6px;
  overflow: auto;
}

.notification-item,
.notification-empty {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line);
  background: #f8fafb;
  color: var(--ink);
  text-align: left;
}

.notification-item {
  cursor: pointer;
}

.notification-item:hover,
.notification-item:focus-visible {
  border-color: var(--steel);
  background: #eef3f5;
  outline: none;
}

.notification-item span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-item small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.floating-messages-btn {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 20001;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 2px solid var(--steel);
  background: #fff;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
  cursor: pointer;
}

.floating-messages-btn img {
  width: 29px;
  height: 29px;
  object-fit: contain;
}

.floating-messages-btn span {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border: 2px solid #fff;
  background: var(--steel);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.floating-messages-btn.has-alerts {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px rgba(184, 61, 49, 0.18), 0 18px 42px rgba(0, 0, 0, 0.24);
}

.floating-messages-btn.has-alerts span {
  background: var(--danger);
}

.floating-messages-popup {
  position: fixed;
  right: 18px;
  bottom: 84px;
  z-index: 20002;
  display: grid;
  grid-template-rows: auto minmax(120px, 1fr) auto auto;
  gap: 10px;
  width: min(430px, calc(100vw - 32px));
  max-height: min(620px, calc(100vh - 112px));
  padding: 12px;
  border: 2px solid var(--steel);
  background: #fff;
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.34);
}

.floating-messages-popup[hidden] {
  display: none;
}

.floating-messages-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  color: var(--steel);
}

.floating-messages-header strong {
  display: block;
  font-size: 15px;
  text-transform: uppercase;
}

.floating-messages-header small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.floating-messages-header button,
.open-messages-tab-btn {
  min-height: 28px;
  border: 1px solid var(--line);
  background: #f8fafb;
  color: var(--steel);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.floating-message-list {
  display: grid;
  gap: 8px;
  min-height: 0;
  overflow: auto;
}

.floating-message-list .message-card,
.floating-message-list .message-empty {
  box-shadow: none;
}

.floating-message-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.floating-message-composer textarea {
  width: 100%;
  min-height: 74px;
  max-height: 150px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink);
  resize: vertical;
}

.floating-message-composer .secondary-action {
  min-height: 38px;
}

.floating-mention-list {
  right: 6px;
  bottom: 6px;
  z-index: 20003;
}

.notes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.notes-header span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

#quickNotes {
  display: block;
  width: 100%;
  min-height: 112px;
  resize: vertical;
  border: 0;
  padding: 14px 16px;
  color: var(--ink);
  background: #fffdf7;
  font-size: 16px;
  line-height: 1.45;
  outline: none;
}

#quickNotes:focus {
  box-shadow: inset 0 0 0 3px rgba(243, 179, 41, 0.45);
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 86px;
  z-index: 10;
  max-width: 390px;
  padding: 12px 14px;
  border-left: 6px solid var(--safety);
  background: #202a31;
  color: #fff;
  box-shadow: var(--shadow);
  font-weight: 700;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.order-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(18, 28, 34, 0.45);
}

.pre-release-reopen-write-barrier {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(5, 16, 31, 0.78);
  backdrop-filter: blur(3px);
  cursor: wait;
}

.pre-release-reopen-write-barrier-panel {
  display: grid;
  gap: 10px;
  width: min(480px, calc(100vw - 32px));
  padding: 24px;
  border: 2px solid var(--blue, #1265cc);
  border-radius: 14px;
  background: #fff;
  color: #142234;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.38);
  text-align: center;
}

.pre-release-reopen-write-barrier-panel h2,
.pre-release-reopen-write-barrier-panel p {
  margin: 0;
}

.pre-release-reopen-write-barrier-status {
  color: #3e5876;
  font-weight: 800;
}

.order-dialog {
  display: grid;
  gap: 12px;
  width: min(380px, calc(100vw - 32px));
  padding: 18px;
  border: 2px solid var(--steel);
  background: #fff;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

.operation-closeout-dialog {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  min-height: 0;
}

.operation-closeout-body {
  display: grid;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.operation-closeout-dialog .order-dialog-actions {
  flex: none;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.operation-closeout-dialog .order-dialog-actions button {
  min-height: 44px;
}

.laser-material-usage,
.laser-material-usage > div {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.laser-material-usage {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
}

.laser-material-usage legend {
  font-size: 14px;
  font-weight: 900;
}

.laser-material-usage input,
.laser-material-usage select,
.laser-material-usage textarea {
  width: 100%;
  min-width: 0;
}

.backlog-button-key-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: min(88vh, 820px);
  overflow: auto;
}

.backlog-button-key-intro {
  padding: 10px 12px;
  border-left: 5px solid var(--safety);
  background: rgba(243, 179, 41, 0.14);
  color: var(--steel);
}

.backlog-button-key-list {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
  margin: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.backlog-button-key-list dt,
.backlog-button-key-list dd {
  margin: 0;
  padding: 9px 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.backlog-button-key-list dt {
  background: #eef3f5;
  color: var(--steel);
  font-size: 12px;
  font-weight: 900;
}

.backlog-button-key-list dd {
  color: #33464f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

@media (max-width: 620px) {
  .backlog-button-key-list {
    grid-template-columns: 1fr;
  }

  .backlog-button-key-list dd {
    background: #fff;
  }
}

.bom-dialog {
  width: min(720px, calc(100vw - 32px));
  max-height: min(82vh, 760px);
  overflow: auto;
}

.line-item-edit-dialog {
  width: min(720px, calc(100vw - 32px));
  max-height: min(86vh, 780px);
  overflow: auto;
}

.line-item-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.line-item-edit-wide {
  grid-column: 1 / -1;
}

.bom-dialog-body {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.bom-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.bom-table th,
.bom-table td {
  padding: 7px 8px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.bom-table th {
  background: #eef3f5;
  color: var(--steel);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.bom-empty,
.bom-import-hint {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: #f8fafb;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.bom-import-hint {
  border-left: 4px solid var(--safety);
  background: rgba(243, 179, 41, 0.12);
  color: #5f4100;
}

.order-dialog h2 {
  font-size: 20px;
}

.dialog-helper-text {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.dialog-error-text {
  color: var(--danger);
}

.order-dialog label {
  display: grid;
  gap: 6px;
  color: var(--steel);
  font-size: 13px;
  font-weight: 900;
}

.operation-closeout-dialog [hidden] {
  display: none !important;
}

.order-dialog input,
.order-dialog select,
.order-dialog textarea {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 15px;
}

.closeout-qty-needed {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: #eef3f5;
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
}

.order-dialog textarea {
  min-height: 86px;
  resize: vertical;
}

.remaining-disposition {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  background: #f8fafb;
}

.remaining-disposition[hidden] {
  display: none;
}

.remaining-disposition legend {
  padding: 0 4px;
  color: var(--steel);
  font-size: 12px;
  font-weight: 900;
}

.remaining-disposition label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
}

.remaining-disposition input {
  min-height: 0;
  width: 14px;
  height: 14px;
  padding: 0;
}

.order-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.order-dialog-actions button {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--steel);
  background: #f8fafb;
  color: var(--steel);
  font-weight: 900;
  cursor: pointer;
}

.order-dialog-actions button:last-child {
  background: var(--steel);
  color: #fff;
}

.order-dialog-actions button:disabled {
  opacity: 0.55;
  cursor: wait;
}

.order-dialog-actions .pre-release-reopen-action {
  border-color: #0b63ce;
  background: #eaf3ff;
  color: #074a9b;
}

.pre-release-reopen-target {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid #89b7ee;
  border-left: 5px solid #0b63ce;
  border-radius: 6px;
  background: #f2f7ff;
  color: #173f70;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.pre-release-reopen-dialog textarea {
  min-height: 110px;
  resize: vertical;
}

.qc-approval-dialog {
  width: min(340px, calc(100vw - 32px));
}

.qc-approval-dialog input {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 3px;
  text-align: center;
}

.warning-status-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.warning-documents {
  display: grid;
  gap: 6px;
}

.warning-documents button {
  min-height: 34px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--steel);
  font-size: 12px;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}

.warning-status-actions button {
  min-height: 42px;
  border: 1px solid var(--steel);
  background: #f8fafb;
  color: var(--steel);
  font-weight: 900;
  cursor: pointer;
}

.warning-status-actions button:nth-child(2) {
  border-color: #d4a226;
  background: #fff8db;
  color: #785d00;
}

.warning-status-actions button:nth-child(3) {
  border-color: #23834a;
  background: #e8f6ee;
  color: #176338;
}

.cell-focus-open {
  overflow: hidden;
}

.pdf-viewer-open {
  overflow: hidden;
}

.cell-focus-overlay {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: grid;
  place-items: center;
  padding: clamp(10px, 2vw, 24px);
  background: rgba(29, 37, 44, 0.72);
}

.cell-focus-overlay[hidden] {
  display: none;
}

.cell-focus-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1460px, calc(100vw - 20px));
  height: calc(100vh - 20px);
  max-height: calc(100vh - 20px);
  border: 2px solid var(--steel);
  background: var(--panel);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.35);
}

.group-focus-panel {
  width: min(1680px, calc(100vw - 20px));
}

.day-focus-panel {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-width: 0;
}

.cell-focus-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  background: #f8fafb;
}

.focus-tools {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.focus-close-btn {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--steel);
  background: var(--steel);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.focus-close-btn:hover {
  background: #243945;
}

.focus-drop-zone {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  align-items: start;
  gap: 22px;
  overflow: auto;
  min-height: 0;
  padding: 20px;
  background: #edf1f3;
}

.focus-drop-zone > .pdf-card-large {
  align-self: start;
  width: 100%;
  height: max-content;
  min-width: 0;
  margin: 0;
}

.focus-drop-zone .pdf-card-large .packet-note.is-auto-sized {
  height: auto !important;
  min-height: 72px;
  max-height: 116px;
  overflow: auto;
  resize: vertical;
}

.focus-drop-zone .pdf-card-large .packet-actions {
  position: relative;
  z-index: 1;
  min-height: 34px;
  margin-top: 4px;
}

.focus-drop-zone .pdf-card-large .complete-action,
.focus-drop-zone .pdf-card-large .bom-action {
  min-height: 34px;
  font-size: 11px;
}

.focus-drop-zone.drag-over {
  outline: 4px solid var(--safety);
  outline-offset: -8px;
  background: var(--active);
}

.focus-board {
  display: grid;
  gap: 12px;
  overflow: auto;
  min-height: 520px;
  padding: 14px;
  background: #edf1f3;
}

.focus-board-day {
  grid-template-columns: repeat(7, minmax(180px, 1fr));
}

.focus-board-week {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  align-content: start;
}

.focus-board-week .focus-mini-cell {
  grid-template-rows: auto auto;
  min-height: 0;
}

.focus-board-week .focus-mini-list,
.focus-board-week .focus-mini-list.packet-list-paired {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
  overflow: visible;
}

.focus-board-week .focus-mini-empty {
  min-height: 88px;
}

.focus-mini-cell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 520px;
  border: 1px solid #aab4bb;
  background: rgba(255, 255, 255, 0.95);
}

.focus-mini-cell.drag-over {
  outline: 4px solid var(--safety);
  outline-offset: -6px;
  background: var(--active);
}

.focus-mini-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 42px;
  padding: 8px;
  border-bottom: 1px solid var(--line);
  background: #f8fafb;
}

.focus-mini-title-btn {
  display: grid;
  gap: 2px;
  overflow: hidden;
  min-width: 0;
  padding: 2px 4px;
  border: 0;
  background: transparent;
  margin: 0;
  color: var(--steel);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
  text-align: left;
  text-overflow: ellipsis;
  cursor: pointer;
}

.focus-mini-expand-hint {
  color: #0b5e87;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
}

.focus-mini-title-btn:hover,
.focus-mini-title-btn:focus-visible {
  color: #0b5e87;
  text-decoration: underline;
}

.focus-mini-list {
  align-content: start;
  overflow: auto;
  padding: 8px;
}

.focus-mini-list.packet-list-paired {
  grid-template-columns: minmax(0, 1fr);
}

.focus-mini-list .pdf-card {
  margin-right: 2px;
  margin-left: 4px;
}

.focus-mini-empty {
  min-height: 430px;
}

.focus-empty {
  grid-column: 1 / -1;
  min-height: 340px;
  background: rgba(255, 255, 255, 0.7);
}

.pdf-card-large {
  min-height: 318px;
  padding: 10px;
}

.pdf-card-large .pdf-preview-btn {
  height: 228px;
}

.pdf-card-large .pdf-thumb {
  height: 228px;
}

.pdf-card-large .packet-note {
  min-height: 58px;
  max-height: 120px;
  font-size: 14px;
}

.pdf-viewer-overlay {
  --pdf-viewer-side-gap: clamp(14px, 3vw, 54px);
  --pdf-viewer-top-gap: clamp(12px, 2vh, 30px);
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: var(--pdf-viewer-top-gap) var(--pdf-viewer-side-gap);
  background: rgba(16, 22, 27, 0.78);
}

.pdf-viewer-overlay[hidden] {
  display: none;
}

.pdf-viewer-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border: 2px solid var(--steel);
  background: #fff;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.38);
}

.pdf-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #f8fafb;
}

.pdf-viewer-title {
  color: var(--steel);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.job-card-viewer-meta {
  flex: 1 1 auto;
  min-width: 0;
  color: #4e5c64;
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdf-viewer-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pdf-viewer-close {
  min-height: 32px;
  padding: 5px 12px;
  border: 1px solid var(--steel);
  background: var(--steel);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.pdf-viewer-close.secondary {
  background: #fff;
  color: var(--steel);
}

.pdf-viewer-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #f2f4f5;
}

.job-card-viewer-panel {
  width: min(880px, calc(100vw - 48px));
  height: auto;
  max-height: calc(100vh - 48px);
  overflow: auto;
}

.job-card-viewer-body {
  display: grid;
  gap: 14px;
  justify-items: center;
  padding: 18px;
  background: #eef2f4;
  overflow: auto;
}

.job-card-progress-panel {
  display: grid;
  gap: 10px;
  width: min(780px, 100%);
  padding: 12px;
  border: 1px solid #c8d4da;
  background: #fff;
  box-shadow: 0 3px 12px rgba(31, 43, 51, 0.08);
}

.job-card-progress-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.job-card-progress-header h3 {
  margin: 0;
  color: var(--steel);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.job-card-progress-header span {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  overflow-wrap: anywhere;
  text-align: right;
}

.job-card-progress-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 6px;
}

.job-card-progress-fact {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid #dce5e9;
  background: #f8fafb;
}

.job-card-progress-fact.split {
  border: 2px solid #1479b8;
  border-left-width: 5px;
  background: #eaf6ff;
}

.job-card-progress-fact span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.job-card-progress-fact b {
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.job-card-route-wrap {
  max-height: 260px;
  overflow: auto;
}

.job-card-route-section-title {
  padding: 7px 9px 5px;
  color: #264658;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.job-card-planned-route {
  margin-bottom: 7px;
}

.job-card-planned-route-step {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid #9eb9c7;
  border-bottom: 0;
  background: #eef7fb;
  color: #102b39;
  font-size: 12px;
}

.job-card-planned-route-step:last-child {
  border-bottom: 1px solid #9eb9c7;
}

.job-card-planned-route-step.current {
  border-color: #d79800;
  background: #fff2c7;
}

.job-card-planned-route-number {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #173b4f;
  color: #fff;
  font-size: 10px;
  font-weight: 950;
}

.job-card-planned-route-schedule {
  color: #4b6572;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.job-card-route-empty {
  padding: 9px;
  border: 1px dashed #b9c8cf;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.job-card-viewer-body .pdf-card {
  width: min(420px, 100%);
  margin: 0;
  cursor: default;
}

.job-card-viewer-body .packet-help-toggle {
  display: none;
}

.job-card-viewer-body .packet-note {
  min-height: 140px;
  max-height: none;
  overflow: visible;
  resize: none;
}

@media print {
  @page {
    size: letter portrait;
    margin: 0.3in;
  }

  body.job-card-viewer-open {
    background: #fff;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  body.job-card-viewer-open .app-shell,
  body.job-card-viewer-open .toast,
  body.job-card-viewer-open .pdf-viewer-header,
  body.job-card-viewer-open .focus-overlay,
  body.job-card-viewer-open .pdf-context-menu,
  body.job-card-viewer-open .floating-messages-btn,
  body.job-card-viewer-open .floating-messages-popup {
    display: none !important;
  }

  body.job-card-viewer-open .pdf-viewer-overlay {
    position: static;
    display: block;
    padding: 0;
    background: #fff;
  }

  body.job-card-viewer-open .job-card-viewer-panel {
    display: block;
    width: 100%;
    max-height: none;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }

  body.job-card-viewer-open .job-card-viewer-panel::before {
    content: attr(data-print-job-number);
    display: block;
    margin: 0 0 12px;
    padding: 0 0 8px;
    border-bottom: 2px solid #000;
    color: #000;
    font-size: 24pt;
    font-weight: 900;
    line-height: 1;
    text-align: center;
  }

  body.job-card-viewer-open .job-card-viewer-body {
    display: block;
    padding: 0;
    background: #fff;
    overflow: visible;
  }

  body.job-card-viewer-open .job-card-progress-panel {
    width: 100%;
    margin: 0 0 12px;
    border-color: #999;
    box-shadow: none;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  body.job-card-viewer-open .job-card-route-wrap {
    max-height: none;
    overflow: visible;
  }

  body.job-card-viewer-open .job-card-route-section-title {
    padding: 0.04in 0.06in;
    color: #000;
    font-size: 8pt;
  }

  body.job-card-viewer-open .job-card-planned-route {
    margin-bottom: 0.06in;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  body.job-card-viewer-open .job-card-planned-route-step {
    min-height: 0.24in;
    padding: 0.025in 0.06in;
    border-color: #777;
    background: #f4f4f4;
    color: #000;
    font-size: 9pt;
  }

  body.job-card-viewer-open .job-card-planned-route-step.current {
    border-color: #555;
    background: #eee;
  }

  body.job-card-viewer-open .job-card-planned-route-number {
    width: 0.18in;
    height: 0.18in;
    background: #000;
    font-size: 7pt;
  }

  body.job-card-viewer-open .job-card-planned-route-schedule {
    color: #000;
    font-size: 8pt;
  }

  body.job-card-viewer-open .job-card-viewer-body .pdf-card {
    width: min(7.5in, 100%);
    max-width: none;
    min-height: 0;
    margin: 0 auto;
    padding: 0.11in;
    gap: 0.07in;
    box-shadow: none;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  body.job-card-viewer-open .job-card-viewer-body .pdf-preview-btn,
  body.job-card-viewer-open .job-card-viewer-body .pdf-thumb {
    height: 3.9in;
  }

  body.job-card-viewer-open .packet-card-job-number {
    font-size: 18pt;
  }

  body.job-card-viewer-open .packet-thumb-meta,
  body.job-card-viewer-open .packet-note {
    font-size: 14pt;
  }

  body.job-card-viewer-open .packet-due-line,
  body.job-card-viewer-open .packet-master-job-field,
  body.job-card-viewer-open .first-piece-check,
  body.job-card-viewer-open .packet-next-day-count {
    font-size: 11pt;
  }

  body.job-card-viewer-open .packet-qty-badge small,
  body.job-card-viewer-open .packet-pricing small,
  body.job-card-viewer-open .packet-process-qty small {
    font-size: 9pt;
  }

  body.job-card-viewer-open .packet-qty-badge b,
  body.job-card-viewer-open .packet-pricing b,
  body.job-card-viewer-open .packet-process-qty b {
    font-size: 14pt;
  }

  body.job-card-viewer-open .packet-actions,
  body.job-card-viewer-open .packet-help-toggle,
  body.job-card-viewer-open .packet-settings,
  body.job-card-viewer-open .packet-pricing,
  body.job-card-viewer-open .first-piece-check input {
    display: none !important;
  }

  body.job-card-viewer-open .packet-note {
    min-height: 1.25in;
    border: 1px solid #999;
    background: #fff;
    color: #000;
  }
}

@media (max-width: 900px) {
  body {
    min-width: 0;
  }

  .app-shell {
    width: calc(100vw - 18px);
    padding-top: 12px;
  }

  .floating-messages-btn {
    right: 12px;
    bottom: 12px;
  }

  .floating-messages-popup {
    right: 8px;
    bottom: 76px;
    width: calc(100vw - 16px);
    max-height: calc(100vh - 92px);
  }

  .floating-message-composer {
    grid-template-columns: 1fr;
  }

  .board-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .backlog-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .backlog-actions {
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    min-width: 0;
  }

  .backlog-search {
    max-width: none;
  }

  .customer-status-header,
  .customer-status-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .customer-status-search {
    min-width: 0;
  }

  .customer-status-summary {
    grid-template-columns: 1fr;
  }

  .backlog-summary {
    grid-template-columns: 1fr;
  }

  .production-board {
    grid-template-columns: 116px repeat(7, 189px);
  }

  .production-board.wide-columns {
    grid-template-columns: 116px repeat(7, 378px);
  }

  .work-center-manager-header,
  .work-center-add,
  .user-manager-header {
    align-items: stretch;
    flex-direction: column;
  }

  .work-center-row {
    grid-template-columns: 34px 1fr;
  }

  .user-add,
  .user-row {
    grid-template-columns: 1fr;
  }

  .focus-drop-zone {
    grid-template-columns: 1fr;
  }

  .focus-board-day,
  .focus-board-week {
    grid-template-columns: 1fr;
  }
}

/* Materials planning inside the Planning Board */
.materials-planning { display: grid; gap: 14px; }
.materials-planning-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 16px; border: 1px solid #b9c8d3; background: linear-gradient(135deg, #f7fafc 0%, #e9f2f7 100%); }
.materials-planning-header h2, .materials-section-heading h3 { margin: 0; }
.materials-planning-header p:not(.eyebrow) { max-width: 780px; margin: 6px 0 0; color: #40515e; font-size: 13px; line-height: 1.4; }
.materials-planning-controls { display: grid; grid-template-columns: minmax(210px, 1.4fr) minmax(150px, 1fr) minmax(150px, 1fr) auto; align-items: end; gap: 8px; min-width: min(700px, 58vw); }
.materials-planning-controls label { display: grid; gap: 4px; color: #425563; font-size: 10px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.materials-planning-controls input, .materials-planning-controls select { width: 100%; min-height: 36px; border: 1px solid #91a6b6; background: #fff; padding: 7px 9px; color: #132431; font: inherit; font-size: 12px; font-weight: 700; }
#materialPricesButton[hidden] { display: none !important; }
.materials-planning-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.materials-planning-summary article { display: grid; gap: 4px; min-height: 92px; padding: 12px; border: 1px solid #c4d0d8; border-top: 4px solid #2875a3; background: #fff; }
.materials-planning-summary span, .materials-planning-summary small { color: #5b6c78; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.materials-planning-summary strong { color: #122430; font-size: 22px; line-height: 1; }
.materials-planning-key { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 9px 12px; border: 1px solid #cbd6de; background: #fff; color: #43545f; font-size: 11px; font-weight: 700; }
.materials-planning-key span { display: inline-flex; align-items: center; gap: 5px; }
.materials-status-dot { width: 10px; height: 10px; border-radius: 50%; background: #748692; }
.materials-status-dot.urgent { background: #bb3b2f; }
.materials-status-dot.planned { background: #c98717; }
.materials-status-dot.covered { background: #2f8754; }
.materials-planning-groups { display: grid; gap: 14px; }
.materials-category, .materials-order-history { border: 1px solid #b8c7d1; background: #fff; }
.materials-common-pool { border-top: 4px solid #2875a3; }
.materials-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border-bottom: 1px solid #c4d0d8; background: #eaf1f5; }
.materials-section-heading > span { color: #40515e; font-size: 11px; font-weight: 800; }
.materials-common-pool .materials-section-heading .eyebrow { margin: 0 0 3px; }
.materials-common-pool-note { margin: 0; padding: 10px 13px; border-bottom: 1px solid #d6e0e6; background: #f8fbfd; color: #40515e; font-size: 11px; font-weight: 700; line-height: 1.4; }
.materials-table-wrap { width: 100%; overflow-x: auto; }
.materials-table { width: 100%; min-width: 1380px; border-collapse: collapse; table-layout: fixed; }
.materials-common-pool-table { min-width: 1540px; }
.materials-table th, .materials-table td { padding: 8px; border-right: 1px solid #d4dde3; border-bottom: 1px solid #d4dde3; vertical-align: top; text-align: left; font-size: 11px; overflow-wrap: anywhere; }
.materials-table th { position: sticky; top: 0; z-index: 1; background: #122430; color: #fff; font-size: 9px; letter-spacing: .04em; text-transform: uppercase; }
.materials-table th:nth-child(1) { width: 240px; }
.materials-table th:nth-child(7) { width: 180px; }
.materials-table th:nth-child(9) { width: 175px; }
.materials-table th:nth-child(11) { width: 110px; }
.materials-row.materials-urgent { box-shadow: inset 4px 0 #bb3b2f; }
.materials-row.materials-planned { box-shadow: inset 4px 0 #c98717; }
.materials-row.materials-covered { box-shadow: inset 4px 0 #2f8754; }
.materials-item-cell strong, .materials-item-cell small, .materials-order-date strong, .materials-order-date small { display: block; }
.materials-item-cell strong { color: #122430; font-size: 12px; }
.materials-item-cell small, .materials-order-date small { margin-top: 4px; color: #627580; line-height: 1.25; }
.materials-item-cell .materials-inventory-reference { color: #68521b; font-weight: 700; }
.materials-number { text-align: right !important; font-variant-numeric: tabular-nums; }
.materials-outstanding { color: #9b291e; font-weight: 900; }
.materials-jobs { color: #174e70; font-weight: 800; }
.materials-cost { font-weight: 800; }
.materials-status-badge { display: inline-block; margin: 0 5px 5px 0; padding: 3px 5px; border-radius: 2px; color: #fff; font-size: 9px; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; }
.materials-status-badge.urgent { background: #a93529; }
.materials-status-badge.planned { background: #a66c0f; }
.materials-status-badge.covered { background: #287147; }
.materials-action-cell button, .materials-log-action { min-height: 28px; padding: 5px 7px; white-space: nowrap; font-size: 9px; }
.materials-log-action { margin: 5px 4px 0 0; border: 1px solid #6f8594; background: #eef3f6; color: #172833; font-weight: 900; text-transform: uppercase; }
.materials-empty { margin: 0; padding: 18px; color: #627580; font-size: 12px; }
.materials-order-history { margin-top: 4px; }
.materials-history-table { min-width: 1180px; }
.materials-order-dialog { z-index: 10020; }
.materials-order-card { width: min(650px, calc(100vw - 28px)); }
.materials-order-card > p { color: #526673; line-height: 1.4; }
.materials-order-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.materials-order-fields label { display: grid; gap: 5px; color: #40515e; font-size: 10px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.materials-order-fields input { min-height: 38px; border: 1px solid #91a6b6; padding: 8px; font-size: 13px; }

@media (max-width: 1180px) {
  .materials-planning-header { flex-direction: column; }
  .materials-planning-controls { min-width: 100%; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .materials-planning-summary { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
}

@media (max-width: 680px) {
  .materials-planning-controls, .materials-planning-summary, .materials-order-fields { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Troupe Technologies visual theme
   Presentation-only overrides: layout, sizing, and board behavior stay intact.
   -------------------------------------------------------------------------- */
@media screen {
  :root {
    --bg: #edf1f6;
    --panel: #ffffff;
    --ink: #0c1118;
    --muted: #697587;
    --line: #cfd8e3;
    --line-strong: #8795a7;
    --steel: #111923;
    --active: #e7f2ff;
    --shadow: 0 12px 30px rgba(7, 17, 30, 0.12);
  }

  body {
    background:
      linear-gradient(180deg, rgba(7, 9, 12, 0.99) 0 154px, transparent 154px),
      linear-gradient(90deg, rgba(8, 120, 239, 0.045) 1px, transparent 1px) 0 0 / 34px 34px,
      linear-gradient(0deg, rgba(8, 120, 239, 0.035) 1px, transparent 1px) 0 0 / 34px 34px,
      var(--bg);
    font-family: "DM Sans", "Segoe UI", Arial, sans-serif;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    z-index: 20000;
    height: 3px;
    background: linear-gradient(90deg, #075dcc, var(--brand-bright) 52%, #075dcc);
    box-shadow: 0 0 18px rgba(8, 120, 239, 0.42);
    pointer-events: none;
  }

  h1,
  h2,
  h3,
  .work-center-header,
  .day-header,
  .day-band-label,
  .day-band-department {
    font-family: Manrope, "Segoe UI", Arial, sans-serif;
  }

  .board-header h1 {
    color: #fff;
    font-weight: 800;
    letter-spacing: -0.035em;
    text-shadow: 0 8px 26px rgba(0, 0, 0, 0.28);
  }

  .eyebrow {
    color: #55a4ff;
    font-weight: 900;
    letter-spacing: 0.14em;
  }

  .status-panel {
    border-color: #26384d;
    background: rgba(12, 17, 24, 0.96);
    color: #aeb9c8;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  }

  .notification-btn,
  .logout-link {
    border-color: #35506e;
    background: #111b28;
    color: #dbe5f4;
  }

  .notification-btn span {
    background: #20344c;
    color: #d9eaff;
  }

  .app-tabs {
    border-bottom-color: var(--brand);
  }

  .tab-btn {
    border-color: #26384d;
    background: #0c1118;
    color: #aeb5c0;
  }

  .tab-btn:hover,
  .tab-btn:focus-visible {
    border-color: #3b6798;
    background: #111d2b;
    color: #fff;
    outline: none;
  }

  .tab-btn.active {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
    box-shadow: inset 0 -2px 0 #55a4ff, 0 0 18px rgba(8, 120, 239, 0.2);
  }

  .board-zoom-controls,
  .production-week-toolbar,
  .backlog-toolbar,
  .notes-section,
  .work-center-manager,
  .user-manager,
  .audit-panel,
  .customer-status-panel,
  .cash-projection-week {
    border-color: #b9c7d6;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--shadow);
  }

  .zoom-btn,
  .zoom-reset-btn,
  .secondary-action,
  .backlog-button-key-btn,
  .panel-resize-controls button,
  .cash-projection-go-to {
    border-color: #9fb2c6;
    background: #fff;
    color: #075dcc;
  }

  .zoom-btn:hover:not(:disabled),
  .zoom-reset-btn:hover:not(:disabled),
  .secondary-action:hover:not(:disabled),
  .backlog-button-key-btn:hover:not(:disabled),
  .panel-resize-controls button:hover:not(:disabled),
  .cash-projection-go-to:hover:not(:disabled) {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: #075dcc;
    filter: none;
  }

  .zoom-reset-btn.active,
  .file-action,
  .backlog-schedule-filters button[aria-pressed="true"],
  .cash-projection-print-drawings {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
  }

  .file-action:hover,
  .cash-projection-print-drawings:hover:not(:disabled) {
    background: #075dcc;
    filter: none;
  }

  input,
  select,
  textarea,
  .backlog-search input,
  .backlog-sort select,
  .order-dialog input,
  .order-dialog select,
  .order-dialog textarea {
    border-color: #b8c6d5;
    background: #fff;
    color: #0c1118;
  }

  input:focus,
  select:focus,
  textarea:focus,
  .backlog-search input:focus,
  .backlog-sort select:focus,
  .board-search-control input:focus {
    border-color: var(--brand);
    outline: 2px solid rgba(8, 120, 239, 0.28);
    outline-offset: 1px;
  }

  input[type="checkbox"],
  input[type="radio"],
  .cash-projection-table input[type="checkbox"] {
    accent-color: var(--brand);
  }

  .board-wrap {
    border-color: #111923;
    background: #cbd5e1;
    box-shadow: 0 18px 38px rgba(7, 17, 30, 0.2);
  }

  .corner-header,
  .work-center-header,
  .day-header,
  .day-band-label,
  .day-band-department {
    border-color: #26384d;
    background: #0c1118;
    color: #fff;
  }

  .corner-header,
  .work-center-header {
    box-shadow: inset 0 -3px 0 var(--brand);
  }

  .day-band-label,
  .day-band-department {
    border-top-color: #05070a;
    border-bottom-color: var(--brand);
    background: #111b28;
  }

  .day-header {
    background: #111923;
  }

  .clickable-header:hover,
  .clickable-header:focus-visible {
    background: #172b40;
    outline-color: var(--brand-bright);
  }

  .schedule-cell {
    background: rgba(249, 251, 253, 0.98);
    border-color: #bac6d3;
  }

  .schedule-cell:nth-of-type(even) {
    background: rgba(244, 248, 252, 0.98);
  }

  .schedule-cell.drag-over {
    background: var(--brand-soft);
    outline-color: var(--brand);
  }

  .cell-toolbar,
  .production-week-toolbar {
    color: #243246;
  }

  .pdf-card {
    border-color: #aebdcc;
    background: #fff;
    box-shadow: 0 4px 12px rgba(7, 17, 30, 0.12);
  }

  .pdf-card:hover {
    border-color: #7faee0;
    box-shadow: 0 8px 20px rgba(7, 17, 30, 0.17);
  }

  .pdf-card.is-expanded {
    border-color: var(--brand);
    box-shadow: 0 12px 28px rgba(7, 17, 30, 0.22), 0 0 0 1px rgba(8, 120, 239, 0.18);
  }

  .pdf-card.production-search-match {
    border-color: var(--brand);
    background: #e7f2ff;
    box-shadow: 0 0 0 3px rgba(8, 120, 239, 0.3), 0 7px 18px rgba(7, 17, 30, 0.18);
  }

  .packet-settings-menu,
  .pdf-context-menu,
  .notification-popup,
  .floating-messages-popup,
  .cell-focus-panel,
  .order-dialog,
  .planning-date-dialog,
  .planning-add-stop-dialog {
    border-color: #26384d;
    background: #fff;
    box-shadow: 0 22px 54px rgba(7, 17, 30, 0.28);
  }

  .order-dialog,
  .cash-projection-week,
  .cash-projection-metrics > div {
    border-radius: 3px;
  }

  .notification-popup-header,
  .floating-messages-header,
  .cell-focus-header,
  .job-card-progress-header,
  .work-center-manager-header,
  .user-manager-header {
    border-color: #26384d;
    background: #0c1118;
    color: #fff;
  }

  .backlog-schedule-filters {
    border-color: #b8c6d5;
    background: #edf3f9;
  }

  .backlog-schedule-filters button {
    color: #29425f;
  }

  .backlog-value-summary,
  .cash-projection-metrics > div {
    border-color: #b9c9d9;
    border-left-color: var(--brand);
    background: #f3f8fe;
  }

  .backlog-value-summary > strong,
  .cash-projection-metrics strong {
    color: #07111e;
  }

  .backlog-table th,
  .cash-projection-table th,
  .bom-table th {
    border-color: #c8d4e1;
    background: #e9f1fa;
    color: #29425f;
    letter-spacing: 0.055em;
  }

  .backlog-table tbody tr:hover,
  .cash-projection-table tbody tr:hover {
    background: #edf6ff;
  }

  .cash-projection-week-header {
    border-color: #c9d5e2;
    background: #f3f7fc;
  }

  .order-dialog-overlay,
  .pdf-viewer-overlay,
  .cell-focus-overlay {
    background: rgba(4, 8, 13, 0.72);
    backdrop-filter: blur(2px);
  }

  .toast {
    border-color: #3b6798;
    background: #0c1118;
    color: #fff;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.32);
  }

  ::selection {
    background: rgba(8, 120, 239, 0.3);
  }

  body.production-board-fullscreen,
  body.production-board-fullscreen #boardScreen,
  body.production-board-fullscreen #activeFloorScreen,
  #boardScreen:fullscreen,
  #activeFloorScreen:fullscreen {
    background: #cbd5e1;
  }

  body.production-board-fullscreen #boardScreen > .board-zoom-controls,
  body.production-board-fullscreen #activeFloorScreen > .board-zoom-controls,
  #boardScreen:fullscreen > .board-zoom-controls,
  #activeFloorScreen:fullscreen > .board-zoom-controls {
    border-color: var(--brand);
    background: rgba(255, 255, 255, 0.98);
  }

  @media (max-width: 900px) {
    body {
      background:
        linear-gradient(180deg, rgba(7, 9, 12, 0.99) 0 240px, transparent 240px),
        linear-gradient(90deg, rgba(8, 120, 239, 0.045) 1px, transparent 1px) 0 0 / 34px 34px,
        linear-gradient(0deg, rgba(8, 120, 239, 0.035) 1px, transparent 1px) 0 0 / 34px 34px,
        var(--bg);
    }
  }
}

@media print {
  .persistent-workflow-alert { display: none !important; }
}
.cash-projections-board {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.cash-projections-header,
.cash-projection-week-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.cash-projections-header h2,
.cash-projection-week-header h3 {
  margin: 0;
}

.cash-projections-help {
  max-width: 780px;
  margin: 7px 0 0;
  color: #536171;
}

.cash-projection-weeks {
  display: grid;
  gap: 22px;
}

.cash-projection-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.cash-projection-overview-card {
  display: grid;
  gap: 6px;
  min-height: 112px;
  padding: 16px;
  border: 1px solid #cfd8e3;
  border-top: 5px solid #1769aa;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(25, 43, 66, 0.08);
}

.cash-projection-overview-card > span {
  color: #536171;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cash-projection-overview-card > strong {
  align-self: end;
  color: #16253a;
  font-size: 1.55rem;
}

.cash-projection-overview-card > small {
  color: #68778a;
  line-height: 1.3;
}

.cash-projection-overview-actual {
  border-top-color: #238552;
  background: #f7fcf9;
}

.cash-projection-overview-projection {
  border-top-color: #1769aa;
  background: #f6faff;
}

.cash-projection-week {
  overflow: hidden;
  border: 1px solid #cfd8e3;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(25, 43, 66, 0.08);
}

.cash-projection-shipped-week {
  border-color: #8bc6a4;
}

.cash-projection-shipped-header {
  background: #edf8f1;
}

.cash-projection-shipped-total {
  border-color: #8bc6a4 !important;
  background: #f4fbf6 !important;
}

.cash-projection-shipped-total strong {
  color: #176b3a;
}

.cash-projection-shipped-table {
  min-width: 900px;
}

.cash-projection-week-header {
  padding: 17px 18px;
  border-bottom: 1px solid #dce3eb;
  background: #f7f9fc;
}

.cash-projection-week-header h3 + span {
  display: block;
  margin-top: 5px;
  color: #627083;
  font-size: 0.84rem;
}

.cash-projection-print-drawings {
  display: block;
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid #1769aa;
  border-radius: 7px;
  background: #1769aa;
  color: #fff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

.cash-projection-print-drawings:hover:not(:disabled) {
  background: #0f568e;
}

.cash-projection-print-drawings:disabled {
  border-color: #aeb8c5;
  background: #aeb8c5;
  cursor: not-allowed;
}

.cash-projection-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.cash-projection-metrics > div {
  min-width: 135px;
  padding: 9px 12px;
  border: 1px solid #d6dee8;
  border-radius: 10px;
  background: #fff;
}

.cash-projection-metrics span,
.cash-projection-metrics strong {
  display: block;
}

.cash-projection-metrics span {
  color: #667487;
  font-size: 0.72rem;
  text-transform: uppercase;
}

.cash-projection-metrics strong {
  margin-top: 3px;
  font-size: 1.05rem;
}

.cash-projection-warning {
  flex-basis: 100%;
  color: #9a5c00;
  text-align: right;
}

.cash-projection-table-wrap {
  overflow-x: auto;
}

.cash-projection-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: collapse;
}

.cash-projection-table th,
.cash-projection-table td {
  padding: 11px 12px;
  border-bottom: 1px solid #e3e8ef;
  text-align: left;
  vertical-align: middle;
}

.cash-projection-table th {
  background: #eef3f8;
  color: #425269;
  font-size: 0.76rem;
  text-transform: uppercase;
}

.cash-projection-table input[type="checkbox"] {
  width: 19px;
  height: 19px;
  accent-color: #1769aa;
}

.cash-projection-go-to {
  min-width: 132px;
  padding: 7px 10px;
  border: 1px solid #1769aa;
  border-radius: 6px;
  background: #fff;
  color: #1769aa;
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.cash-projection-go-to:hover:not(:disabled) {
  background: #1769aa;
  color: #fff;
}

.cash-projection-go-to:disabled {
  border-color: #aeb8c5;
  color: #8995a4;
  cursor: not-allowed;
}

.cash-projection-excluded {
  opacity: 0.48;
  background: #f3f4f6;
}

.cash-chance {
  font-weight: 800;
}

.cash-chance-high { color: #187744; }
.cash-chance-medium { color: #9a6500; }
.cash-chance-low { color: #b22a2a; }

.cash-projection-empty {
  padding: 24px;
  color: #647286;
  text-align: center;
}

@media (max-width: 900px) {
  .cash-projection-week-header {
    display: grid;
  }

  .cash-projection-metrics {
    justify-content: flex-start;
  }

  .cash-projection-warning {
    text-align: left;
  }
}

@media screen {
  .cash-projection-week {
    border-color: #b9c7d6;
    border-radius: 3px;
    box-shadow: var(--shadow);
  }

  .cash-projection-week-header {
    border-color: #c9d5e2;
    background: #f3f7fc;
  }

  .cash-projection-print-drawings {
    border-color: var(--brand);
    border-radius: 3px;
    background: var(--brand);
  }

  .cash-projection-print-drawings:hover:not(:disabled) {
    background: #075dcc;
  }

  .cash-projection-metrics > div {
    border-color: #b9c9d9;
    border-radius: 3px;
    background: #f3f8fe;
  }

  .cash-projection-table th {
    background: #e9f1fa;
    color: #29425f;
    letter-spacing: 0.055em;
  }

  .cash-projection-go-to {
    border-color: #9fb2c6;
    border-radius: 3px;
    color: #075dcc;
  }

  .cash-projection-go-to:hover:not(:disabled) {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: #075dcc;
  }

  .cash-projection-table input[type="checkbox"] {
    accent-color: var(--brand);
  }
}
/* Capacity analytics */
.capacity-analytics-board {
  width: 100%;
  border: 2px solid #223641;
  background: #edf1f3;
  box-shadow: var(--shadow);
}

.capacity-analytics-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 22px;
  border-bottom: 2px solid var(--steel);
  background: #fff;
}

.capacity-analytics-header h2,
.capacity-section h3,
.capacity-advisor-answer h4 {
  margin: 0;
  color: #162833;
}

.capacity-analytics-header p:not(.eyebrow) {
  max-width: 960px;
  margin: 7px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

#capacityAnalytics {
  display: grid;
  min-width: 0;
  gap: 16px;
  padding: 16px;
}

.capacity-trust-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  border-left: 6px solid #2d78a4;
  background: #eaf5fb;
}

.capacity-trust-banner strong {
  flex: 0 0 auto;
  color: #174d6c;
}

.capacity-trust-banner span {
  color: #36515f;
  font-size: 13px;
  line-height: 1.4;
}

#capacityAnalytics[data-confidence="limited"] .capacity-trust-banner {
  border-left-color: #b76722;
  background: #fff4e7;
}

.capacity-kpi-grid,
.capacity-risk-grid,
.capacity-staffing-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 10px;
}

.capacity-kpi {
  min-height: 116px;
  padding: 14px;
  border: 1px solid #bdc9d0;
  border-top: 5px solid #71828d;
  background: #fff;
}

.capacity-kpi span,
.capacity-kpi small {
  display: block;
}

.capacity-kpi span {
  color: #506570;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.capacity-kpi strong {
  display: block;
  margin: 8px 0 6px;
  color: #122631;
  font-size: 20px;
  line-height: 1.15;
}

.capacity-kpi small {
  color: #61727b;
  line-height: 1.35;
}

.capacity-tone-good { border-top-color: #2f8754; }
.capacity-tone-info { border-top-color: #2d78a4; }
.capacity-tone-warning { border-top-color: #d18a18; }
.capacity-tone-danger { border-top-color: #b83d31; }

.capacity-board-week {
  margin: 16px 0 22px;
}

.capacity-board-week-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  margin-bottom: 10px;
}

.capacity-board-week-heading h4 {
  margin: 0;
  color: #17384a;
  font-size: 16px;
}

.capacity-board-week-heading strong {
  color: #17384a;
}

.capacity-board-days {
  display: grid;
  grid-template-columns: repeat(5, minmax(145px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
  overflow-x: auto;
}

.capacity-board-day {
  display: grid;
  gap: 5px;
  min-width: 145px;
  padding: 10px;
  border: 1px solid #c3d0d7;
  background: #f5fafc;
}

.capacity-board-day strong,
.capacity-board-day span {
  color: #17384a;
}

.capacity-board-day small {
  color: #425c69;
  line-height: 1.35;
}

.capacity-board-track {
  height: 9px;
  overflow: hidden;
  border-radius: 5px;
  background: #d9e4e8;
}

.capacity-board-track > span {
  display: block;
  height: 100%;
  background: #31825a;
}

.capacity-board-day.is-over .capacity-board-track > span,
.capacity-board-matrix-cell.is-over .capacity-board-track > span {
  background: #b83d31;
}

.capacity-board-matrix {
  min-width: 1160px;
  table-layout: fixed;
}

.capacity-board-matrix caption {
  padding: 8px 10px;
  color: #17384a;
  font-weight: 800;
  text-align: left;
}

.capacity-board-matrix th:first-child {
  width: 170px;
}

.capacity-board-matrix td,
.capacity-board-matrix tbody th {
  white-space: normal;
  vertical-align: top;
}

.capacity-board-matrix tbody th {
  padding: 9px 10px;
  border-bottom: 1px solid #d3dbe0;
  color: #17384a;
  font-size: 12px;
  text-align: left;
}

.capacity-board-matrix-cell strong,
.capacity-board-matrix-cell small {
  display: block;
  margin-bottom: 5px;
  line-height: 1.25;
}

.capacity-board-matrix-cell.has-room { background: #f2faf5; }
.capacity-board-matrix-cell.is-full { background: #fff8e9; }
.capacity-board-matrix-cell.is-over { background: #fff0ee; }
.capacity-board-matrix-cell.is-unconfigured { background: #f1f3f4; }

.capacity-board-matrix-cell .capacity-board-track {
  margin-bottom: 6px;
}

.capacity-board-matrix-cell .capacity-board-unknown {
  color: #9a4f00;
  font-weight: 800;
}

.capacity-board-matrix-cell details summary {
  color: #155777;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.capacity-board-matrix-cell details ul {
  margin: 5px 0 0;
  padding-left: 17px;
}

.laser-day-print-btn {
  min-height: 32px;
  padding: 4px 9px;
  border: 1px solid #174d6c;
  border-radius: 4px;
  background: #eaf5fa;
  color: #123b52;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.laser-day-print-btn:focus-visible {
  outline: 3px solid #e9a21a;
  outline-offset: 2px;
}

.laser-review-dialog {
  width: min(1050px, calc(100vw - 24px));
  max-height: 94vh;
  overflow: auto;
}
.laser-review-choices { display: grid; gap: 9px; margin: 12px 0; }
.laser-review-choices label { display: flex; align-items: flex-start; gap: 9px; padding: 7px; border: 1px solid var(--line); }
.laser-review-choices input { min-height: auto; }
.laser-review-choices label:has(input:disabled) { opacity: .58; }
.laser-review-dialog .order-dialog-actions { position: sticky; bottom: -18px; z-index: 2; margin: 0 -18px -18px; padding: 12px 18px; border-top: 1px solid #b8cbd4; background: #fff; }
.laser-prepopulated-heading { margin: 16px 0 7px; color: #183f59; font-size: 15px; }
.laser-paper-preview { background: #e8eff4; padding: 12px; overflow-x: auto; }
.laser-before-cut-examples { margin-top: 14px; padding: 14px; border: 1px solid #8aa4af; background: #f6fafc; color: #17384a; }
.laser-before-cut-examples h3 { margin: 0 0 6px; font-size: 16px; }
.laser-before-cut-examples > p { margin: 0 0 10px; line-height: 1.4; }
.laser-before-cut-example-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.laser-before-cut-example { min-width: 0; padding: 10px; border: 1px solid #b8cbd4; background: #fff; }
.laser-before-cut-example h4 { margin: 0 0 7px; color: #173f59; font-size: 13px; }
.laser-before-cut-example p { margin: 6px 0; line-height: 1.35; }
.laser-before-cut-sample { display: grid; gap: 4px; margin-top: 8px; padding: 8px; border-left: 4px solid #2d78a4; background: #eaf5fb; font-size: 12px; }
.laser-before-cut-sample strong { color: #183f59; }
.laser-before-cut-reference { display: block; margin-top: 12px; border: 1px solid #b8cbd4; background: #fff; }
.laser-before-cut-reference img { display: block; width: 100%; height: auto; }
@media (max-width: 700px) { .laser-before-cut-example-grid { grid-template-columns: 1fr; } }
.laser-before-cut-paper { background: #fff; padding: 24px; min-width: 720px; color: #152b38; font: 12px/1.3 Arial, sans-serif; }
.laser-before-cut-paper h1 { margin: 3px 0 8px; font-size: 22px; }
.laser-before-cut-paper h2 { margin: 15px 0 7px; padding: 5px 8px; background: #e7f1f7; color: #183f59; font-size: 12px; break-after: avoid; }
.laser-before-cut-paper p { margin: 6px 0; }
.laser-paper-id { font-weight: 800; letter-spacing: .03em; }
.laser-paper-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.laser-paper-table th, .laser-paper-table td { border: 1px solid #899daa; padding: 5px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.laser-paper-table th { background: #f0f5f8; font-size: 10px; }
.laser-paper-table td { height: 25px; }
.laser-paper-table tr { break-inside: avoid; }
.laser-paper-lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 20px; }
.laser-paper-line { display: flex; align-items: end; gap: 7px; min-height: 27px; }
.laser-paper-line span:first-child { white-space: nowrap; font-weight: 700; }
.laser-paper-line span:last-child { flex: 1; border-bottom: 1px solid #334d5e; min-height: 16px; }
.laser-paper-check { break-inside: avoid; }
.laser-paper-warning { padding: 6px 8px; border: 1px solid #a44131; color: #822d21; font-weight: 800; break-inside: avoid; }
@media print {
  body.laser-review-printing > *:not(#laserBeforeCutDialog) { display: none !important; }
  body.laser-review-printing #laserBeforeCutDialog { position: static !important; display: block; padding: 0; background: #fff; overflow: visible; }
  body.laser-review-printing .laser-review-dialog { position: static; width: 100%; max-width: none; max-height: none; overflow: visible; border: 0; box-shadow: none; padding: 0; }
  body.laser-review-printing .laser-review-dialog > :not(.laser-paper-preview) { display: none !important; }
  body.laser-review-printing .laser-paper-preview { padding: 0; overflow: visible; background: #fff; }
  body.laser-review-printing .laser-before-cut-examples { display: none !important; }
  body.laser-review-printing .laser-before-cut-paper { min-width: 0; padding: 0; font-size: 9pt; }
  body.laser-review-printing .laser-before-cut-paper h1 { font-size: 17pt; }
  body.laser-review-printing .laser-before-cut-paper h2 { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  body.laser-review-printing .laser-paper-table th, body.laser-review-printing .laser-paper-table td { padding: 3px; font-size: 8pt; }
  body.laser-review-printing .laser-paper-line { min-height: 22px; }
}

.laser-day-preview {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  background: #dfe6ea;
}

.laser-day-preview-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 2px solid #233742;
  background: #fff;
}

.laser-day-preview-toolbar strong { margin-right: auto; }
.laser-day-preview-toolbar span { color: #4b626e; font-size: 12px; font-weight: 700; }

.laser-day-preview-toolbar button {
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid #174d6c;
  border-radius: 5px;
  background: #174d6c;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.laser-day-preview-toolbar button.secondary { background: #fff; color: #174d6c; }
.laser-day-preview-toolbar button:disabled { opacity: .55; cursor: wait; }
.laser-day-preview-frame { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; background: #fff; }

.capacity-section {
  min-width: 0;
  padding: 18px;
  border: 1px solid #bac6cd;
  background: #fff;
}

.capacity-section-heading {
  margin-bottom: 14px;
}

.capacity-section-heading h3 {
  font-size: 18px;
}

.capacity-section-heading p,
.capacity-source-note {
  margin: 5px 0 0;
  color: #62737c;
  font-size: 13px;
  line-height: 1.45;
}

.capacity-trend {
  display: grid;
  grid-template-columns: repeat(12, minmax(54px, 1fr));
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

.capacity-trend-week {
  display: grid;
  grid-template-rows: auto 120px auto auto;
  gap: 4px;
  min-width: 54px;
  text-align: center;
}

.capacity-trend-track {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 120px;
  border-bottom: 1px solid #758791;
  background: linear-gradient(to top, rgba(52, 78, 92, 0.07) 1px, transparent 1px) 0 0 / 100% 25%;
}

.capacity-trend-bar {
  width: 100%;
  min-height: 3px;
  background: linear-gradient(180deg, #1689ff, #245c84);
}

.capacity-trend-week span,
.capacity-trend-week small {
  color: #60717a;
  font-size: 11px;
}

.capacity-table-wrap {
  max-width: 100%;
  overflow: auto;
  border: 1px solid #aebbc3;
}

.capacity-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
  background: #fff;
}

.capacity-table th,
.capacity-table td {
  padding: 9px 10px;
  border-bottom: 1px solid #d3dbe0;
  text-align: left;
  white-space: nowrap;
}

.capacity-table th {
  position: sticky;
  top: 0;
  background: #263f4d;
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.capacity-table td {
  color: #2d3d46;
  font-size: 13px;
}

.capacity-table tr.capacity-status-critical td:nth-child(3) {
  color: #a72f26;
  font-weight: 900;
}

.capacity-table tr.capacity-status-watch td:nth-child(3) {
  color: #9a6410;
  font-weight: 900;
}

.capacity-table tr.capacity-status-controlled td:nth-child(3) {
  color: #287147;
  font-weight: 900;
}

.capacity-advisor {
  border: 2px solid #245c84;
  background: #f7fbff;
}

.capacity-advisor-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 8px;
}

.capacity-advisor-form input,
.capacity-setting-card input,
.capacity-staffing-controls input {
  min-height: 40px;
  border: 1px solid #8fa2ad;
  background: #fff;
  color: #1d2f39;
  padding: 8px 10px;
  font: inherit;
}

.capacity-staffing-summary {
  margin-bottom: 12px;
}

.capacity-float-note {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-left: 5px solid #d18a18;
  background: #fff8e8;
}

.capacity-float-note strong,
.capacity-float-note p {
  display: block;
}

.capacity-float-note p {
  margin: 5px 0 0;
  color: #4f5f68;
  font-size: 13px;
  line-height: 1.45;
}

.capacity-staffing-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.capacity-staffing-controls label {
  display: grid;
  gap: 6px;
  color: #405661;
  font-size: 12px;
  font-weight: 900;
}

.capacity-staffing-controls input {
  width: 100%;
  min-height: 40px;
  background: #fff7ce;
}

.capacity-advisor-form button {
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid #194b6a;
  background: #245c84;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.capacity-advisor-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 9px 0 12px;
}

.capacity-advisor-quick button {
  padding: 7px 10px;
  border: 1px solid #9bb1bf;
  background: #fff;
  color: #245c84;
  font-weight: 800;
  cursor: pointer;
}

.capacity-advisor-answer {
  padding: 15px 16px;
  border-left: 5px solid #1689ff;
  background: #fff;
}

.capacity-advisor-answer h4 {
  font-size: 17px;
}

.capacity-advisor-answer p,
.capacity-advisor-answer li,
.capacity-recommendations li {
  color: #354952;
  line-height: 1.5;
}

.capacity-advisor-answer p {
  margin: 8px 0;
}

.capacity-advisor-answer ul,
.capacity-recommendations {
  margin: 7px 0 0;
  padding-left: 22px;
}

.capacity-recommendations li + li {
  margin-top: 7px;
}

.capacity-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.capacity-setting-card {
  display: grid;
  grid-template-columns: 1fr 90px;
  align-items: center;
  gap: 7px 10px;
  padding: 12px;
  border: 1px solid #c2cdd3;
  background: #f7f9fa;
}

.capacity-setting-card strong,
.capacity-setting-card small {
  grid-column: 1 / -1;
}

.capacity-setting-card span {
  color: #526771;
  font-size: 12px;
  font-weight: 800;
}

.capacity-setting-card input {
  width: 90px;
  min-height: 34px;
  padding: 5px 7px;
  background: #fff7ce;
}

.capacity-setting-card small {
  color: #2d6c49;
  font-weight: 800;
}

.capacity-setting-card .capacity-setting-demand {
  color: #245c84;
}

@media (max-width: 900px) {
  .capacity-analytics-header,
  .capacity-trust-banner {
    align-items: stretch;
    flex-direction: column;
  }

  .capacity-advisor-form {
    grid-template-columns: 1fr;
  }
}
.materials-detail-card { width: min(1200px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); display: flex; flex-direction: column; overflow: hidden; }
.materials-detail-body { overflow: auto; min-height: 0; padding: 6px; }
.materials-detail-card > .dialog-actions { flex-shrink: 0; padding-top: 12px; }
.materials-planning-summary [role="button"]:focus-visible { outline: 3px solid #087cff; outline-offset: 2px; }

/* Fulcrum-inspired Troupe refresh, 2026-10-02.
   Screen-only: retain the existing DOM, drawing sizes, permissions, status
   colors, card widths, scroll/resize behavior and physical print layouts. */
@media screen {
  :root {
    --bg: #f4f6f8;
    --ink: #172232;
    --muted: #59697b;
    --line: #dce3ec;
    --shadow: 0 2px 8px rgba(23, 34, 50, 0.06);
  }

  body { background: var(--bg); }
  body::before { background: #0878ef; box-shadow: none; }
  .board-header {
    padding: 18px 20px;
    background: #080a0d;
    border-radius: 10px;
    align-items: center;
  }
  .board-header h1 { text-shadow: none; }
  .status-panel { border-radius: 7px; box-shadow: none; }
  .app-tabs {
    padding: 8px;
    border: 1px solid #25354a;
    border-radius: 9px;
    background: #101721;
  }
  .tab-btn {
    border-radius: 6px;
    border-color: transparent;
    background: transparent;
    color: #c1cede;
  }
  .tab-btn.active {
    background: #075dcc;
    border-color: #227bdf;
    box-shadow: none;
  }
  .board-zoom-controls,
  .production-week-toolbar,
  .work-center-page-toolbar,
  .backlog-toolbar,
  .planning-toolbar,
  .materials-planning-controls {
    border-color: #dce3ec;
    border-radius: 9px;
    background: #fff;
    box-shadow: var(--shadow);
  }
  .zoom-btn, .zoom-reset-btn, .secondary-action, .compact-action,
  .laser-day-print-btn, .backlog-button-key-btn,
  .planning-schedule-stop-actions button,
  .operation-timer-controls button {
    border-radius: 5px;
  }
  .board-wrap { border-color: #d1dbe6; box-shadow: var(--shadow); }
  .schedule-cell,
  .schedule-cell:nth-of-type(even) { background: #f6f8fb; border-color: #dce3ec; }
  .schedule-cell.drag-over { background: var(--brand-soft); }
  .work-center-header, .corner-header { background: #101721; box-shadow: inset 0 -3px 0 #0878ef; }
  .day-header { background: #182438; }
  .work-center-page-lane {
    border-color: #dce3ec;
    border-radius: 10px;
    background: #eaf0f5;
  }
  .work-center-page-lane h3 {
    border-radius: 9px 9px 0 0;
    background: #eaf0f5;
    color: #172232;
    border-bottom: 1px solid #d1dbe6;
  }
  .work-center-page-actions {
    border-color: #dce3ec;
    border-radius: 6px;
    background: #f8fafc;
  }
  .pdf-card {
    border-radius: 9px;
    border-color: #cbd7e5;
    background: #fff;
    box-shadow: 0 2px 7px rgba(18, 36, 58, 0.08);
  }
  .pdf-card:hover { box-shadow: 0 4px 12px rgba(18, 36, 58, 0.12); }
  .packet-card-identity {
    border-radius: 6px;
    border-color: #d7e1ec;
    border-left-color: #075dcc;
    background: #f1f6fc;
  }
  .packet-card-job-number { font-size: 16px; letter-spacing: -0.3px; line-height: 1.2; }
  .packet-card-revision { border-radius: 4px; border-color: #bdcce0; color: #26496e; }
  .pdf-preview-btn { border-radius: 5px; }
  .packet-thumb-meta-item, .packet-due-line, .drawing-revision-review,
  .first-piece-check, .packet-next-day-count { border-radius: 4px; }
  .packet-note { border-radius: 5px; border-color: #cbd7e5; }
  .operation-timers-panel {
    border-radius: 6px;
    border-color: #cbd7e5;
    background: #f5f8fc;
  }
  .operation-timer-row output { color: #172232; }
  .operation-timer-controls button { min-height: 30px; color: #26476b; }
  .complete-action, .release-action { border-radius: 5px; }
  .planning-job-card {
    border-radius: 9px;
    border-color: #cbd7e5;
    box-shadow: var(--shadow);
  }
  .planning-schedule-stop { border-radius: 6px; }
  .materials-planning-summary { gap: 12px; }
  .materials-planning-summary article {
    padding: 16px;
    border-color: #dce3ec;
    border-top-color: #075dcc;
    border-radius: 9px;
    box-shadow: var(--shadow);
  }
  .materials-planning-summary strong { color: #172232; font-size: 26px; }
  .materials-table-wrap { border-radius: 8px; border: 1px solid #dce3ec; }
  .materials-table th {
    background: #eef2f7;
    color: #354f70;
    border-color: #dce3ec;
    box-shadow: 0 1px 0 #dce3ec;
  }
  .materials-table td { border-color: #e5ebf2; }
  .materials-table tbody tr:hover { background: #f5f9ff; }
  .backlog-table th, .cash-projection-table th, .bom-table th {
    background: #eef2f7;
    color: #354f70;
    border-color: #dce3ec;
  }
  .order-dialog, .planning-date-dialog, .planning-add-stop-dialog,
  .materials-detail-card { border-radius: 10px; }
  button:focus-visible, .pdf-card:focus-visible {
    outline: 3px solid #0878ef;
    outline-offset: 2px;
  }
  @media (max-width: 900px) {
    body { background: var(--bg); }
    .board-header { padding: 14px; }
  }
}

/* Complete the shared screen treatment without changing application markup.
   Existing state colors, drawing dimensions, menus and print rules stay intact. */
@media screen {
  body, h1, h2, h3, .work-center-header, .day-header,
  .day-band-label, .day-band-department {
    font-family: "Segoe UI", Arial, sans-serif;
  }
  .app-shell { padding-top: 18px; }
  .board-header { border-top: 3px solid #0878ef; gap: 18px; }
  .board-header h1 { font-size: clamp(23px, 2.1vw, 34px); line-height: 1.2; }
  .board-header .eyebrow { font-size: 10px; color: #91bff7; letter-spacing: .18em; }
  .app-tabs { background: #fff; border-color: #dce3ec; box-shadow: var(--shadow); }
  .tab-btn { color: #405570; font-weight: 600; border: 1px solid transparent; }
  .tab-btn:hover:not(.active) { background: #edf4ff; color: #075dcc; border-color: #c9dbf3; }
  .tab-btn.active { color: #fff; }
  .screen { min-width: 0; }
  .board-zoom-controls { padding: 9px; }
  .zoom-reset-btn, .secondary-action, .file-action, .compact-action,
  .production-search-jump, .work-center-menu-toggle, .panel-resize-controls button {
    border-radius: 6px; font-weight: 600;
  }
  .danger-control { color: #9c3026; border-color: #d8aaa5; background: #fff7f6; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    border-radius: 6px;
  }
  .release-key { padding: 12px 14px; background: #fff; border: 1px solid #dce3ec; border-radius: 9px; }
  .release-key > span { font-weight: 600; }
  .production-week-toolbar, .work-center-page-toolbar { padding: 12px; gap: 10px; }
  .production-week-switch { padding: 3px; background: #edf1f6; border-radius: 8px; }
  .week-switch-btn { border: 1px solid transparent; background: transparent; border-radius: 6px; color: #405570; font-weight: 600; }
  .week-switch-btn.active { border-color: #d7e2ef; background: #fff; color: #075dcc; box-shadow: 0 1px 4px #17223214; }
  .production-week-label { color: #075dcc; font-weight: 700; }
  .board-wrap { border-width: 1px; border-radius: 10px; background: #eaf0f5; }
  .corner-header, .work-center-header {
    background: #fff; color: #172232; border-color: #d7e1ec;
    box-shadow: inset 0 -3px 0 #075dcc; font-weight: 700;
  }
  .day-header { background: #eaf1fb; color: #26476b; border-color: #d7e1ec; }
  .day-band-label, .day-band-department {
    background: #eaf0f5; color: #26476b; border-color: #d7e1ec; font-weight: 700;
  }
  .clickable-header:hover, .clickable-header:focus-visible { background: #dbeaff; color: #075dcc; }
  .cell-toolbar { padding: 8px; color: #405570; }
  .empty-drop { border: 1px dashed #c6d3e1; border-radius: 8px; color: #6e8097; background: #fafcfe; font-weight: 500; }
  .pdf-card { padding: 10px; gap: 7px; }
  .packet-card-identity { padding: 8px; background: #edf4ff; }
  .packet-card-job-number { font-size: 19px; font-weight: 700; letter-spacing: -.4px; }
  .packet-card-revision { font-weight: 600; }
  .packet-process-row { border-radius: 6px; }
  .packet-process-row b { font-size: 17px; }
  .packet-qc-row { border-radius: 6px; }
  .packet-pricing { border-radius: 6px; }
  .operation-timers-panel h4 { color: #26476b; font-weight: 600; }
  .operation-timer-row output { font-size: 13px; }
  .operation-timer-controls button { padding: 5px 7px; font-weight: 600; }
  .complete-action, .release-action { font-weight: 700; }

  .planning-board, .customer-status-board, .shipment-commitments-board,
  .live-feed-board, .settings-board, .shipments-board, .capacity-analytics-board {
    border: 1px solid #dce3ec; border-radius: 12px; background: #f7f9fc; box-shadow: var(--shadow);
  }
  .planning-header, .customer-status-header, .shipment-commitments-header,
  .live-feed-header, .settings-header, .shipments-header, .message-center-header,
  .cash-projections-header, .capacity-analytics-header, .materials-planning-header,
  .work-center-page-heading {
    padding: 20px; border: 1px solid #dce3ec; border-left: 4px solid #075dcc;
    border-radius: 10px; background: #edf4ff; box-shadow: none;
  }
  .planning-header h2, .customer-status-header h2, .shipment-commitments-header h2,
  .live-feed-header h2, .settings-header h2, .shipments-header h2,
  .message-center-header h2, .cash-projections-header h2, .capacity-analytics-header h2,
  .materials-planning-header h2, .work-center-page-heading h2, .backlog-title-row h2 {
    font-size: 25px; font-weight: 650; line-height: 1.25; letter-spacing: -.5px; color: #172232;
  }
  .eyebrow { color: #075dcc; font-size: 10px; font-weight: 700; letter-spacing: .1em; }
  .backlog-toolbar { padding: 20px; border-top: 4px solid #075dcc; }
  .planning-view-tabs, .backlog-view-tabs, .customer-status-subtabs,
  .settings-subnav, .shipment-subnav, .audit-subnav { gap: 6px; background: #f0f4f9; }
  .planning-view-tab, .backlog-view-tab, .customer-status-subtab,
  .settings-subtab, .shipment-subtab, .audit-subtab {
    border: 1px solid #d5dfeb; border-radius: 7px; background: #fff; color: #405570; font-weight: 600;
  }
  .planning-view-tab.active, .backlog-view-tab.active, .customer-status-subtab.active,
  .settings-subtab.active, .shipment-subtab.active, .audit-subtab.active {
    background: #075dcc; border-color: #075dcc; color: #fff;
  }
  .live-feed-column, .live-feed-card, .message-card, .message-composer,
  .shipment-log-row, .movement-log-row, .settings-card, .guide-card,
  .cash-projection-week, .cash-projection-overview-card, .cash-projection-metrics > div,
  .capacity-section, .capacity-kpi, .capacity-setting-card, .capacity-board-day,
  .customer-status-summary div, .backlog-summary div, .notes-section,
  .work-center-manager, .user-manager, .audit-panel, .customer-status-panel {
    border-radius: 10px; box-shadow: var(--shadow);
  }
  .capacity-section, .live-feed-column, .settings-card, .guide-card,
  .message-composer, .notes-section { border-color: #dce3ec; background: #fff; }
  .capacity-kpi strong, .cash-projection-overview-card > strong { font-size: 27px; font-weight: 650; letter-spacing: -.5px; }
  .backlog-table-wrap, .customer-status-table-wrap, .cash-projection-table-wrap { border-radius: 9px; }
  .backlog-table th, .customer-status-table th, .cash-projection-table th,
  .capacity-table th, .materials-table th, .bom-table th {
    background: #edf2f8; color: #405570; font-weight: 650; letter-spacing: .025em;
  }
  .backlog-table td, .customer-status-table td, .cash-projection-table td,
  .capacity-table td, .materials-table td { border-color: #e1e8f1; }

  /* Desktop navigation uses the same existing buttons and role permissions.
     Kiosk fullscreen and read-only hamburger navigation keep their layout. */
  @media (min-width: 1200px) {
    body:not(.read-only-mode):not(.production-board-fullscreen) .app-shell:not([hidden]) {
      display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px 20px;
      width: calc(100% - 36px); max-width: none;
    }
    body:not(.read-only-mode):not(.production-board-fullscreen) .app-shell > .board-header { grid-column: 1 / -1; margin-bottom: 0; }
    body:not(.read-only-mode):not(.production-board-fullscreen) .app-shell > .app-tabs {
      grid-column: 1; grid-row: 2 / span 2; position: sticky; top: 16px; align-self: start;
      flex-direction: column; gap: 5px; padding: 14px 10px; margin-bottom: 0;
      background: #101721; border-color: #25354a; border-radius: 12px;
    }
    body:not(.read-only-mode):not(.production-board-fullscreen) .app-tabs .tab-btn {
      width: 100%; min-height: 42px; padding: 10px 12px; text-align: left;
      background: transparent; color: #bac8d9; font-size: 13px; font-weight: 600;
    }
    body:not(.read-only-mode):not(.production-board-fullscreen) .app-tabs .tab-btn.active { background: #075dcc; color: #fff; }
    body:not(.read-only-mode):not(.production-board-fullscreen) .app-tabs .tab-btn:hover:not(.active) { background: #1c2a3d; color: #fff; }
    body:not(.read-only-mode):not(.production-board-fullscreen) .app-tabs .tab-btn[hidden] { display: none !important; }
    body:not(.read-only-mode):not(.production-board-fullscreen) .app-shell > .board-zoom-controls { grid-column: 2; grid-row: 2; margin: 0; width: 100%; }
    body:not(.read-only-mode):not(.production-board-fullscreen) .app-shell > main { grid-column: 2; grid-row: 3; min-width: 0; }
  }
  @media (max-width: 900px) {
    .board-header, .planning-header, .customer-status-header, .shipment-commitments-header,
    .live-feed-header, .settings-header, .shipments-header, .message-center-header,
    .cash-projections-header, .capacity-analytics-header, .materials-planning-header { padding: 14px; }
    .pdf-card { padding: 8px; }
    .packet-card-job-number { font-size: 17px; }
  }
}

/* Work-center flow: an independent date stack, not a spreadsheet row grid. */
@media screen {
  .production-layout-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
    padding: 8px 2px 16px; color: #516176;
  }
  .production-layout-switch {
    display: flex; gap: 3px; flex: 0 0 auto; padding: 4px;
    border: 1px solid #d8e1ed; border-radius: 9px; background: #e9eef5;
  }
  .production-layout-switch button {
    padding: 8px 14px; min-height: 36px; border: 0; border-radius: 6px;
    background: transparent; color: #4b5d74; font: 600 13px/1.3 "Segoe UI", sans-serif;
    cursor: pointer;
  }
  .production-layout-switch button.active { color: #075dcc; background: #fff; box-shadow: 0 2px 5px #172e4c14; }
  .production-flow-dates:not([hidden]) { display: flex; gap: 6px; flex-wrap: wrap; }
  .production-flow-dates .day-band-label {
    position: static; min-height: 34px; padding: 7px 10px;
    border: 1px solid #d7e0ec; border-radius: 6px; background: #fff;
    color: #435770; font: 600 12px/1.3 "Segoe UI", sans-serif; text-transform: none;
  }
  .production-board.work-center-flow {
    display: block; width: max-content; min-width: 0 !important;
    padding: 0 2px 16px; background: transparent;
  }
  .production-flow-lanes { display: flex; align-items: flex-start; gap: 20px; }
  .production-flow-lane {
    flex: 0 0 auto; min-width: 200px; width: 330px;
    border: 0; border-radius: 12px; background: #edf1f6;
  }
  .production-flow-heading { padding: 17px 14px 16px; border-bottom: 1px solid #ced8e6; }
  .production-flow-eyebrow {
    display: block; margin-bottom: 5px; color: #607895;
    font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  }
  .production-flow-heading .work-center-header {
    position: relative; top: auto; min-height: 30px; padding: 0 18px 0 0;
    justify-content: flex-start; border: 0; background: transparent; color: #172b46;
    font: 650 21px/1.2 "Segoe UI", sans-serif; text-align: left;
  }
  .production-flow-heading .work-center-resize-handle {
    width: 12px; border-right: 3px solid #c7d2e2; border-radius: 2px;
  }
  .production-flow-heading .work-center-resize-handle:hover,
  .production-flow-heading .work-center-resize-handle:focus-visible { border-right-color: #075dcc; }
  .production-flow-summary { display: block; margin-top: 7px; color: #62748c; font-size: 12px; }
  .production-flow-day { padding: 12px 10px 16px; border-bottom: 1px solid #d7e0eb; }
  .production-flow-day:last-child { border-bottom: 0; }
  .production-flow-day .flow-day-heading {
    position: static; justify-content: space-between; min-height: 34px;
    padding: 4px 5px 10px; border: 0; background: transparent; color: #405873;
    font: 650 13px/1.4 "Segoe UI", sans-serif; text-transform: none; text-align: left;
  }
  .production-flow-day .flow-day-heading.clickable-header::after { content: "↗"; margin-left: 8px; color: #075dcc; }
  .production-flow-day .schedule-cell {
    min-height: 0; padding: 0; border: 0; background: transparent;
  }
  body.production-board-fullscreen .production-flow-day .schedule-cell,
  #boardScreen:fullscreen .production-flow-day .schedule-cell,
  #activeFloorScreen:fullscreen .production-flow-day .schedule-cell {
    min-height: var(--production-cell-min-height);
  }
  .production-flow-day .cell-toolbar {
    gap: 7px; padding: 8px; margin-bottom: 9px;
    border: 1px solid #d9e2ee; border-radius: 8px; background: #f8fafc;
  }
  .production-flow-day .cell-label {
    flex: 1 1 100%; font-size: 11px; font-weight: 600; color: #4c607a;
    line-height: 1.4; white-space: normal;
  }
  .production-flow-day .cell-hours-load { display: block; margin: 4px 0 0; font-size: 12px; }
  .production-flow-day .cell-tools { flex-wrap: wrap; gap: 5px; }
  .production-flow-day .empty-drop {
    min-height: 62px; padding: 14px 8px; border-radius: 8px;
    background: #f5f7fa; color: #687a91; font-size: 12px;
  }
  .production-flow-day .pdf-card { box-shadow: 0 3px 12px #243a5710; }
  .pdf-card, .pdf-card button, .pdf-card textarea, .pdf-card input { font-family: "Segoe UI", Arial, sans-serif; }
  .production-flow-heading .clickable-header:hover,
  .production-flow-day .clickable-header:hover { background: #e3ebf6; color: #075dcc; }
  .production-flow-lane .schedule-cell.drag-over { background: #dfeeff; border-radius: 8px; outline: 3px solid #075dcc; }
  .work-center-page-lane {
    gap: 12px; padding: 12px; border: 0; border-radius: 12px; background: #edf1f6;
  }
  .work-center-page-lane h3 {
    margin: 0; padding: 6px 2px 12px; border-bottom: 1px solid #ccd7e6;
    background: transparent; color: #193552; font: 650 17px/1.4 "Segoe UI", sans-serif;
  }
  .work-center-page-actions { padding: 9px; border-color: #d9e2ee; border-radius: 8px; }
  .work-center-page-board { gap: 18px; }
  @media (max-width: 900px) {
    .production-flow-lanes { gap: 12px; }
    .production-flow-heading { padding: 14px 11px; }
    .production-flow-heading .work-center-header { font-size: 19px; }
  }
}
/* Weekly view: weekdays are horizontal and share tracks across work-center rows. */
@media screen {
  .production-board.horizontal-week-grid {
    display: block; grid-template-columns: none !important; gap: 0;
    background: #f2f5fa; border: 0; padding: 12px; width: max-content; min-width: 100%;
  }
  .production-week-rows {
    --week-day-width: 310px;
    display: flex; flex-direction: column; gap: 20px; width: max-content; min-width: 100%;
  }
  .production-week-headings, .production-week-row {
    display: grid; grid-template-columns: 210px repeat(var(--week-days), var(--week-day-width));
    gap: 14px; align-items: stretch;
  }
  .production-week-headings { padding: 0 12px; }
  .production-week-corner { align-self: center; padding: 12px; color: #536780; font-size: 13px; font-weight: 650; }
  .production-week-headings .day-band-label {
    position: static; min-width: 0; min-height: 58px; margin: 0; padding: 12px;
    border: 1px solid #c8d9ed; border-top: 3px solid #075dcc; border-radius: 10px;
    background: #e9f1fc; color: #193552; font: 650 15px/1.4 "Segoe UI", sans-serif;
  }
  .production-week-row {
    padding: 12px; border: 1px solid #d2dceb; border-radius: 14px; background: #e9eef6;
  }
  .production-week-center { min-width: 0; align-self: start; padding: 10px 4px; }
  .production-week-center .work-center-header {
    position: relative; top: auto; min-width: 0; border: 0; background: transparent;
    color: #193552; font: 650 21px/1.3 "Segoe UI", sans-serif; padding: 4px 10px 12px;
  }
  .production-week-center .production-flow-summary { display: block; padding: 0 10px; }
  .production-week-day {
    min-width: 0; border: 1px solid #d7e0ec; border-radius: 10px; background: #fff;
    padding: 12px; box-shadow: 0 2px 5px #19355206;
  }
  .production-week-day .flow-day-heading {
    position: static; display: block; margin: 0 0 10px; padding: 0 0 8px; border: 0;
    border-bottom: 1px solid #d9e4f1; background: transparent; color: #365572;
    font: 650 13px/1.4 "Segoe UI", sans-serif; white-space: normal;
  }
  .production-week-day .schedule-cell {
    min-height: 80px; padding: 0; border: 0; background: transparent; overflow: visible;
  }
  .production-week-day .cell-tools { flex-wrap: wrap; gap: 5px; }
  .production-week-day .cell-hours-load { display: block; margin: 4px 0; font-size: 12px; }
  .production-week-day .empty-drop {
    min-height: 80px; border-radius: 8px; background: #f6f8fc; color: #62768e; padding: 14px 8px;
  }
  .production-week-day .schedule-cell.drag-over { outline: 3px solid #075dcc; border-radius: 8px; background: #dfeeff; }
  .production-week-day .pdf-card { margin-bottom: 12px; box-shadow: 0 3px 12px #243a5710; }
  body.production-fullscreen .production-week-day .schedule-cell { min-height: var(--production-cell-min-height); }
}
@media print { .production-layout-bar { display: none !important; } }
/* Shared day boundaries and readable, two-wide cards. All rules are screen-only. */
@media screen {
  .production-flow-lanes { --flow-lane-gap: 20px; gap: var(--flow-lane-gap); }
  .production-flow-lane {
    min-width: 354px; border-left: 2px solid #59718e; border-right: 2px solid #59718e;
    border-radius: 8px; background: #edf1f6;
  }
  .production-flow-heading { min-height: var(--flow-heading-height, auto); }
  #productionBoard.work-center-flow {
    --flow-day-line-width: 6px;
    --flow-day-line-color: #075dcc;
  }
  .production-flow-day {
    position: relative; min-height: var(--flow-day-height, auto);
    border-top: var(--flow-day-line-width, 2px) solid var(--flow-day-line-color, #506b8c); border-bottom: 0;
  }
  .production-flow-lane:not(:last-child) .production-flow-day::after {
    content: ""; position: absolute; top: 0; transform: translateY(-100%); left: 100%;
    width: calc(var(--flow-lane-gap) + 4px); border-top: var(--flow-day-line-width, 2px) solid var(--flow-day-line-color, #506b8c); pointer-events: none;
  }
  .production-flow-day .flow-day-heading { min-height: var(--flow-label-height, 34px); }
  .production-flow-day .cell-toolbar { min-height: var(--flow-toolbar-height, auto); }
  .production-flow-day .flow-day-heading { color: #193552; font-size: 14px; }
  :is(.work-center-flow, .horizontal-week-grid) .schedule-cell > .packet-list {
    grid-template-columns: repeat(var(--flow-card-columns, 1), 330px) !important;
    gap: 12px; align-items: start; justify-content: start;
  }
  :is(.work-center-flow, .horizontal-week-grid) .schedule-cell > .packet-list > .pdf-card {
    box-sizing: border-box; width: 330px; min-width: 330px; max-width: 330px;
    min-height: var(--flow-card-height, 132px); height: auto; margin: 8px 0 0;
  }
  :is(.work-center-flow, .horizontal-week-grid) .schedule-cell > .packet-list > .pdf-card.is-expanded {
    width: auto; max-width: none; min-height: 250px;
  }
  :is(.work-center-flow, .horizontal-week-grid) .schedule-cell > .packet-list > .empty-drop { margin-top: 8px; }
  .production-week-row { border: 2px solid #7086a2; }
  .production-week-headings { padding-right: 14px; padding-left: 14px; }
  .production-week-day { border-color: #a4b6cd; }
  .production-card-order {
    grid-column: 1 / -1; justify-self: start; pointer-events: none;
    padding: 3px 8px; border: 1px solid #96b5dc; border-radius: 4px;
    color: #074da9; background: #e9f2ff; font: 700 12px/1.4 "Segoe UI", sans-serif;
    font-variant-numeric: tabular-nums;
  }
  .production-flow-measuring .production-flow-day { min-height: 0 !important; }
  .production-flow-measuring-naturals .production-flow-heading,
  .production-flow-measuring-naturals .flow-day-heading,
  .production-flow-measuring-naturals .cell-toolbar,
  .production-flow-measuring-naturals .packet-list > .pdf-card:not(.is-expanded) { min-height: 0 !important; }
  @media (max-width: 900px) { .production-flow-lanes { --flow-lane-gap: 12px; } }
}
/* Backlog row-card presentation. The native table, colgroup, controls and data
   remain intact. Screen-only: printed backlog output keeps its existing layout. */
@media screen {
  .backlog-table-wrap {
    border: 1px solid #dce4ef;
    border-radius: 12px;
    background: #f3f6fa;
    box-shadow: none;
  }

  .backlog-table {
    border-collapse: separate;
    border-spacing: 0 10px;
    background: #f3f6fa;
  }

  .backlog-table th {
    height: 44px;
    padding: 10px 16px 10px 10px;
    border: 0;
    border-bottom: 1px solid #dce4ef;
    background: #edf2f8;
    color: #405570;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: .015em;
    text-transform: none;
  }

  .backlog-column-resizer::after { background: #9eafc5; }
  .backlog-column-resizer:hover::after,
  .backlog-column-resizer:focus-visible::after { background: #075dcc; }

  .backlog-table tr.backlog-row > td {
    padding: 13px 10px;
    border: 0;
    border-top: 1px solid #dde5f0;
    border-bottom: 1px solid #dde5f0;
    background: #fff;
    color: #24364e;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    vertical-align: top;
  }

  .backlog-table tr.backlog-row > td:first-child {
    border-left: 1px solid #dde5f0;
    border-radius: 10px 0 0 10px;
  }
  .backlog-table tr.backlog-row > td:last-child {
    border-right: 1px solid #dde5f0;
    border-radius: 0 10px 10px 0;
  }

  .backlog-table tr.backlog-row:hover > td,
  .backlog-table tr.backlog-row:focus-within > td { background: #f9fbff; }
  .backlog-row.readiness-clear,
  .backlog-row.readiness-ordered,
  .backlog-row.readiness-missing,
  .backlog-row.is-split-partial { box-shadow: none; }
  .backlog-row.readiness-clear > td:first-child { box-shadow: inset 3px 0 #2c8860; }
  .backlog-row.readiness-ordered > td:first-child { box-shadow: inset 3px 0 #b57b22; }
  .backlog-row.readiness-missing > td:first-child { box-shadow: inset 3px 0 #bd4646; }
  .backlog-row.is-split-partial > td:first-child { box-shadow: inset 3px 0 #075dcc; }

  /* Keep the first cell a real table cell. Its existing controls wrap into a
     compact action cluster rather than creating a taller spreadsheet strip. */
  .backlog-table td.backlog-queue-cell {
    display: table-cell;
    width: auto;
    min-width: 88px;
    padding: 12px 5px;
    text-align: center;
  }
  .backlog-queue-cell .backlog-line-number {
    display: grid;
    width: 27px;
    height: 27px;
    margin: 0 auto 6px;
    border: 0;
    border-radius: 7px;
    background: #edf2f8;
    color: #405570;
    font-size: 12px;
    font-weight: 650;
  }
  .backlog-queue-cell .backlog-flow-badge {
    width: 100%;
    min-height: 33px;
    margin: 0 0 6px;
    padding: 4px 3px;
    border-radius: 6px;
    font-size: 10px;
    line-height: 1.2;
  }
  .backlog-queue-cell .backlog-flow-badge small { font-size: 9px; }
  .backlog-queue-cell :is(.queue-action, .bom-action, .backlog-edit-action, .backlog-merge-action, .backlog-delete-action) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    height: 28px;
    margin: 2px 1px;
    border-radius: 6px;
    font-family: "Segoe UI", Arial, sans-serif;
    font-weight: 650;
  }
  .backlog-queue-cell :is(.bom-action, .backlog-edit-action, .backlog-merge-action) {
    min-width: 35px;
    width: auto;
    padding: 0 5px;
    font-size: 10px;
    text-transform: none;
  }
  .backlog-queue-cell .backlog-delete-action { width: 28px; }
  .backlog-queue-cell [hidden] { display: none !important; }

  .backlog-table td.backlog-part { font-weight: 600; }
  .backlog-part-number { display: block; color: #142943; font-size: 15px; font-weight: 700; line-height: 1.35; }
  .backlog-part-revision { display: block; margin-top: 5px; color: #506680; font-size: 11px; font-weight: 600; }
  .backlog-tree-count { display: block; margin-top: 8px; color: #506680; font-size: 11px; font-weight: 500; }
  .backlog-table td.backlog-description-cell { color: #53677f; }

  .backlog-pdf-preview {
    max-width: 100%;
    border-radius: 7px;
    background: #fff;
  }
  .backlog-pdf-preview img { object-fit: contain; }
  .backlog-pdf-label { font-family: "Segoe UI", Arial, sans-serif; }
  .backlog-pdf-cell .drawing-revision-controls { margin-top: 3px; }
  .backlog-pdf-cell .drawing-revision-review { border-radius: 5px; line-height: 1.35; }
  .backlog-pdf-cell .drawing-revision-verify { border-radius: 5px; }

  .backlog-work-center-route { gap: 5px; }
  .backlog-route-step {
    padding: 6px 7px;
    border-color: #e0e7f0;
    border-radius: 6px;
    background: #f5f8fc;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
  }
  .backlog-route-step.current { background: #fff4d9; border-color: #dfbf75; }
  .backlog-route-step.completed { background: #eaf7ef; border-color: #91bea4; }
  .backlog-route-badge { border-radius: 4px; font-family: "Segoe UI", Arial, sans-serif; font-weight: 650; }

  .backlog-table td.backlog-quantity-cell { padding: 12px 9px !important; }
  .backlog-quantity-box {
    gap: 7px;
    min-width: 0;
    padding: 8px;
    border: 1px solid #d9e5f4;
    border-radius: 9px;
    background: #f6f9fd;
  }
  .backlog-line-item-qty { padding: 7px 8px; border-color: #c9dcf5; border-radius: 6px; background: #eaf2fe; }
  .backlog-quantity-box small { color: #53677f; font-size: 9px; font-weight: 600; line-height: 1.25; text-transform: none; }
  .backlog-quantity-box b { color: #203651; font-size: 13px; line-height: 1.3; }
  .backlog-quantity-box b.backlog-current-row-qty { font-size: 17px; font-weight: 750; border-width: 1px; border-radius: 5px; }
  .backlog-quantity-totals { gap: 4px; }
  .backlog-quantity-totals > span { padding: 6px 2px; border: 0; border-radius: 5px; background: #fff; }
  .backlog-quantity-totals > span:last-child { background: #e6effd; }
  .backlog-split-family { border-top-width: 1px; border-radius: 6px; overflow: hidden; }
  .backlog-split-family > strong { padding: 6px; font-size: 10px; font-weight: 650; text-transform: none; }
  .backlog-split-family > span { padding: 6px 4px; }

  .backlog-price-list { gap: 7px; }
  .backlog-price-line { flex-wrap: wrap; gap: 2px 7px; white-space: normal; font-size: 12px; font-weight: 600; }
  .backlog-price-line b { color: #687c94; font-weight: 500; }
  .backlog-due-cell .packet-due-strip { gap: 5px; }
  .backlog-due-cell .packet-due-line { border-radius: 5px; padding: 5px 6px; }

  .backlog-table tr.backlog-group-row > td {
    top: 44px;
    padding: 9px 12px;
    border: 0;
    border-radius: 7px;
    background: #e7eef8;
    color: #304a6b;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.3;
    text-transform: none;
  }
  .backlog-group-row b { display: inline-block; padding: 3px 7px; border-radius: 10px; background: #fff; color: #53677f; font-size: 10px; font-weight: 600; }

  @media (max-width: 900px) {
    .backlog-table-wrap { border-radius: 8px; }
    .backlog-table { border-spacing: 0 8px; }
    .backlog-table tr.backlog-row > td { padding-top: 10px; padding-bottom: 10px; }
  }
}

/* Shared finishing touches for the existing application. Load after styles.css.
   Screen only: no print rules, visibility rules, data changes, or drawing sizing.
   Backlog table rows and controls are owned by their separate card stylesheet. */
@media screen {
  :root {
    --polish-line: #dce4ee;
    --polish-muted: #60728a;
    --polish-soft: #f6f8fb;
    --polish-shadow: 0 2px 9px rgba(22, 42, 66, .045);
  }

  body { font-family: "Segoe UI", Arial, sans-serif; }
  .board-header { border-radius: 12px; box-shadow: 0 3px 12px #13243c0a; }
  .board-header h1 { font-weight: 650; letter-spacing: -.5px; }
  .status-panel { font-size: 13px; font-weight: 600; }
  .notification-btn, .logout-link { font-size: 13px; }
  .app-tabs { gap: 6px; }
  .tab-btn {
    min-height: 40px; line-height: 1.35; font-size: 13px; font-weight: 600;
    text-transform: none; letter-spacing: 0; border-radius: 7px;
  }
  .board-zoom-controls { gap: 8px; box-shadow: none; align-self: start; }
  .zoom-reset-btn { min-height: 36px; padding: 8px 12px; font-size: 13px; }

  :is(.planning-header, .customer-status-header, .shipment-commitments-header,
      .live-feed-header, .settings-header, .shipments-header, .message-center-header,
      .cash-projections-header, .capacity-analytics-header, .materials-planning-header,
      .work-center-page-heading) {
    padding: 22px; border: 1px solid var(--polish-line); border-left: 3px solid #075dcc;
    border-radius: 11px; background: #fff; box-shadow: var(--polish-shadow);
  }
  :is(.planning-header, .customer-status-header, .shipment-commitments-header,
      .live-feed-header, .settings-header, .shipments-header, .message-center-header,
      .cash-projections-header, .capacity-analytics-header, .materials-planning-header,
      .work-center-page-heading) h2 {
    font-size: 26px; font-weight: 650; line-height: 1.25; letter-spacing: -.45px;
  }
  :is(.planning-header, .customer-status-header, .shipment-commitments-header,
      .live-feed-header, .settings-header, .shipments-header, .message-center-header,
      .cash-projections-header, .capacity-analytics-header, .materials-planning-header,
      .work-center-page-heading) p:not(.eyebrow) {
    color: var(--polish-muted); font-size: 13px; font-weight: 400; line-height: 1.6;
  }
  .screen > :is(.planning-board, .customer-status-board, .shipment-commitments-board,
               .live-feed-board, .settings-board, .shipments-board, .capacity-analytics-board) {
    border-color: var(--polish-line); background: var(--polish-soft);
  }
  :is(.planning-section-title, .materials-section-heading, .work-center-manager-header,
      .user-manager-header, .audit-log-header, .panel-heading) h3,
  .planning-section-title h2 { font-size: 18px; font-weight: 650; letter-spacing: -.2px; }
  :is(.planning-view-tabs, .customer-status-subtabs, .settings-subnav,
      .shipment-subnav, .audit-subnav) { padding: 9px; gap: 7px; }
  :is(.planning-view-tab, .customer-status-subtab, .settings-subtab,
      .shipment-subtab, .audit-subtab) {
    min-height: 38px; padding: 8px 13px; font-size: 13px; font-weight: 600;
    line-height: 1.35; text-transform: none; letter-spacing: 0;
  }

  /* Keep compact job-card and backlog-table controls under their own styles. */
  :where(.screen, .order-dialog, .order-card, .operation-timer-reason-dialog,
         .notification-popup, .floating-messages-popup)
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
      select, textarea):not(.pdf-card *):not(.backlog-table *) {
    min-height: 36px; padding: 8px 10px; border-radius: 6px;
    font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; font-weight: 400;
    line-height: 1.4;
  }
  :where(.screen, .order-dialog, .order-card, .operation-timer-reason-dialog)
  label:not(.pdf-card *):not(.backlog-table *):not(.file-action) {
    font-family: "Segoe UI", Arial, sans-serif; font-size: 13px; font-weight: 600;
    line-height: 1.45;
  }
  :is(.user-add, .work-center-add, .materials-order-fields,
      .shipment-commitment-add-controls, .customer-status-controls,
      .shipment-header-actions) { gap: 10px; }
  :is(.user-add, .work-center-add, .shipment-commitment-add-controls,
      .customer-status-controls, .shipment-header-actions) { flex-wrap: wrap; }
  :where(.screen, .order-dialog, .order-card)
  :is(button, input, select, textarea):focus-visible {
    outline: 3px solid #0878ef; outline-offset: 2px;
  }
  :is(.secondary-action, .primary-action, .production-search-jump,
      .work-center-menu-toggle):not(.pdf-card *):not(.backlog-table *) {
    min-height: 36px; padding: 8px 12px; font-size: 13px; font-weight: 600;
    line-height: 1.35; text-transform: none; letter-spacing: 0; border-radius: 6px;
  }

  :is(.guide-card, .settings-card, .capacity-section, .capacity-setting-card,
      .work-center-manager, .user-manager, .audit-panel, .customer-status-panel,
      .message-composer, .live-feed-column, .notes-section) {
    border-color: var(--polish-line); border-radius: 11px;
    box-shadow: var(--polish-shadow);
  }
  :is(.guide-card, .settings-card, .capacity-section, .capacity-setting-card,
      .message-composer, .live-feed-column) { background: #fff; }
  :is(.guide-card, .settings-card) h3 {
    font-size: 18px; font-weight: 650; line-height: 1.35; letter-spacing: -.2px;
  }
  :is(.guide-card, .settings-card) :is(p, li) { font-size: 13px; line-height: 1.65; }
  :is(.work-center-manager-header, .user-manager-header, .audit-log-header) {
    flex-wrap: wrap; background: #f5f8fc; border-color: var(--polish-line);
    border-radius: 10px 10px 0 0; color: #344e70;
  }
  :is(.work-center-manager-header, .user-manager-header, .audit-log-header) h3 {
    color: #243d5c;
  }
  :is(.message-card, .shipment-log-row, .movement-log-row, .live-feed-card) {
    border-radius: 9px; box-shadow: 0 1px 4px #17223206;
  }
  :is(.message-composer, .message-card, .shipment-log-row, .movement-log-row)
  :is(p, small, label) { font-size: 13px; line-height: 1.5; }
  :is(.live-feed-column-header, .notes-header, .notification-popup-header,
      .floating-messages-header) { border-color: var(--polish-line); }
  :is(.live-feed-column-header, .notes-header) h3 { font-size: 17px; font-weight: 650; }
  :is(.customer-status-summary, .materials-planning-summary) { gap: 12px; }
  :is(.customer-status-summary > div, .materials-planning-summary > article,
      .capacity-kpi, .cash-projection-overview-card, .cash-projection-metrics > div) {
    border-radius: 10px; box-shadow: var(--polish-shadow);
  }
  :is(.customer-status-summary, .materials-planning-summary, .capacity-kpi,
      .cash-projection-overview-card, .cash-projection-metrics) :is(span, small) {
    font-size: 12px; line-height: 1.45;
  }
  .materials-common-pool-note { font-size: 13px; font-weight: 400; line-height: 1.6; }
  :is(.planning-empty, .live-feed-empty, .shipment-log-empty, .materials-empty,
      .customer-status-empty, .user-empty, .message-empty) {
    font-size: 13px; font-weight: 400; line-height: 1.6;
  }

  /* Explicit table allowlist intentionally excludes .backlog-table. */
  :is(.customer-status-table-wrap, .cash-projection-table-wrap,
      .capacity-table-wrap, .materials-table-wrap) {
    border: 1px solid var(--polish-line); border-radius: 9px; background: #fff;
  }
  :is(.customer-status-table, .cash-projection-table, .capacity-table,
      .materials-table, .bom-table) th {
    padding: 11px 10px; border-color: var(--polish-line); background: #edf2f8;
    color: #405570; font-size: 12px; font-weight: 600; line-height: 1.4;
    text-transform: none; letter-spacing: 0;
  }
  :is(.customer-status-table, .cash-projection-table, .capacity-table,
      .materials-table, .bom-table) td {
    padding: 10px; border-color: #e3e9f1; font-size: 13px; line-height: 1.5;
  }
  :is(.customer-status-table, .cash-projection-table, .capacity-table,
      .materials-table, .bom-table) td small {
    font-size: 12px; font-weight: 400; line-height: 1.45;
  }
  :is(.materials-status-badge, .customer-status-grace) {
    font-size: 12px; font-weight: 600; line-height: 1.4; border-radius: 5px;
  }

  .order-dialog-overlay { background: rgba(15, 27, 44, .48); }
  /* These two material flows use .order-dialog as the overlay itself. */
  :is(.materials-detail-dialog, .materials-order-dialog) {
    position: fixed; inset: 0; z-index: 10020; display: grid; place-items: center;
    width: auto; max-width: none; margin: 0; padding: 16px; gap: 0;
    border: 0; border-radius: 0; background: rgba(15, 27, 44, .48);
    box-shadow: none; overflow: auto;
  }
  :is(.materials-detail-card, .materials-order-card) {
    max-width: 100%; margin: 0; padding: 20px; background: #fff;
  }
  .materials-order-fields { min-width: 0; }
  .materials-order-fields label {
    min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.45;
    text-transform: none; letter-spacing: 0; overflow-wrap: anywhere;
  }
  .materials-order-fields input { width: 100%; min-width: 0; }
  .materials-order-fields input[type="checkbox"] {
    width: 18px; height: 18px; min-height: 0; padding: 0;
    justify-self: start; accent-color: #075dcc;
  }
  :is(.order-dialog:not(.materials-detail-dialog):not(.materials-order-dialog),
      .order-card, .operation-timer-reason-dialog) {
    border: 1px solid #d3dfed; border-radius: 12px;
    box-shadow: 0 18px 60px rgba(15, 33, 56, .22);
  }
  :is(.order-dialog, .order-card, .operation-timer-reason-dialog) :is(h2, h3) {
    font-size: 21px; font-weight: 650; line-height: 1.35; letter-spacing: -.25px;
  }
  .dialog-helper-text { font-weight: 400; line-height: 1.55; }
  :is(.order-dialog-actions, .dialog-actions) { flex-wrap: wrap; gap: 8px; }
  :is(.order-dialog-actions, .dialog-actions) > button {
    min-height: 38px; padding: 8px 12px; border-radius: 6px; font-size: 13px;
    font-weight: 600; line-height: 1.35; white-space: normal;
  }
  .operation-closeout-dialog .order-dialog-actions button { min-height: 44px; }
  :is(.order-card, .order-dialog) .primary-action {
    border: 1px solid #075dcc; background: #075dcc; color: #fff;
  }
  .materials-detail-body > p { font-size: 13px; line-height: 1.6; }
  :is(.notification-popup, .floating-messages-popup) {
    border-color: #d5e0ee; border-radius: 11px; box-shadow: 0 12px 40px #10243924;
  }

  @media (min-width: 1200px) {
    body:not(.read-only-mode):not(.production-board-fullscreen) .app-shell:not([hidden]) {
      grid-template-rows: auto max-content minmax(0, 1fr);
    }
  }

  @media (max-width: 900px) {
    :is(.planning-header, .customer-status-header, .shipment-commitments-header,
        .live-feed-header, .settings-header, .shipments-header, .message-center-header,
        .cash-projections-header, .capacity-analytics-header, .materials-planning-header,
        .work-center-page-heading) { padding: 15px; }
    :is(.planning-header, .customer-status-header, .shipment-commitments-header,
        .live-feed-header, .settings-header, .shipments-header, .message-center-header,
        .cash-projections-header, .capacity-analytics-header, .materials-planning-header) h2 {
      font-size: 23px;
    }
    :is(.order-dialog-actions, .dialog-actions) > button { flex: 1 1 110px; }
  }
}

/* Boxed day panels and readable drawing previews: release 6 start. */
@media screen {
  /* Preserve the existing 24px lane gutter budget: 20px padding + 4px
     perimeter. Day boxes own these borders instead of the outer lane. */
  #productionBoard.work-center-flow .production-flow-lane {
    border-left: 0; border-right: 0; background: transparent;
  }
  #productionBoard.work-center-flow .production-flow-heading {
    border: 2px solid #075dcc; border-radius: 14px;
    margin-bottom: 12px; background: #edf1f6;
  }
  #productionBoard.work-center-flow .production-flow-day {
    padding: 0 10px 16px; margin-bottom: 12px;
    border: 2px solid #075dcc; border-top: 0; border-bottom-width: 3px;
    border-radius: 14px; background: #edf1f6;
  }
  #productionBoard.work-center-flow .production-flow-day::after { content: none; }
  #productionBoard.work-center-flow .production-flow-day-bar {
    position: relative; display: flex; align-items: center; justify-content: center;
    min-height: var(--flow-bar-height, 36px); margin: 0 -10px 8px;
    padding: 8px 12px; border-radius: 12px 12px 0 0;
    color: #fff; background: #075dcc;
    font: 650 14px/1.4 "Segoe UI", Arial, sans-serif;
    text-align: center; overflow-wrap: anywhere;
  }
  #productionBoard.work-center-flow .production-flow-lane:not(:last-child) .production-flow-day-bar::after {
    content: none;
  }
  #productionBoard .production-flow-measuring-naturals .production-flow-day-bar {
    min-height: 0 !important;
  }

  /* Screen-only sizing leaves the original hard-copy drawing geometry alone.
     Contain keeps portrait/landscape drawings proportional, never cropped. */
  .pdf-card .pdf-preview-btn { height: 180px; }
  .pdf-card .pdf-thumb { height: 100%; object-fit: contain; }
  .pdf-card.is-expanded .pdf-preview-btn { height: clamp(260px, 32vh, 420px); }
  .pdf-card.is-expanded .pdf-thumb { height: 100%; }
  .pdf-card-large .pdf-preview-btn { height: clamp(320px, 40vh, 520px); }
  .pdf-card-large .pdf-thumb { height: 100%; }

  /* Unconfirmed floor locations stay explicit, with the same readable width
     as normal production cards. The separate Live Shop Feed is unchanged. */
  #activeProductionBoard > .unverified-live-locations > .live-feed-list {
    grid-template-columns: repeat(auto-fill, 330px); gap: 12px;
    align-items: start; justify-content: start;
  }
  #activeProductionBoard > .unverified-live-locations > .live-feed-list > .live-feed-card {
    box-sizing: border-box; width: 330px; min-width: 330px; max-width: 330px;
  }
  #activeProductionBoard > .unverified-live-locations .live-feed-preview { height: 150px; }
}
/* Boxed day panels and readable drawing previews: release 6 end. */

/* Materials Planning: keep gross order demand distinct from purchasing need. */
@media screen {
  .materials-requirement-section {
    min-width: 0;
    padding: 14px;
    border: 1px solid #b6cce5;
    border-top: 5px solid #075dcc;
    border-radius: 12px;
    background: #f6faff;
    box-shadow: 0 3px 14px #142b4810;
  }
  .materials-net-requirements {
    border-color: #a7cdbc;
    border-top-color: #178460;
    background: #f6fbf8;
  }
  .materials-category-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 12px 0;
  }
  .materials-category-filter button { min-height: 38px; }
  .materials-requirement-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 16px;
  }
  .materials-requirement-heading h3 {
    margin: 0;
    color: #122947;
    font-size: 21px;
    line-height: 1.2;
  }
  .materials-net-requirements .materials-requirement-heading h3 { color: #11583e; }
  .materials-requirement-heading span {
    color: #466078;
    font-size: 12px;
    font-weight: 700;
  }
  .materials-requirement-print-button { margin-left: auto; white-space: nowrap; }
  .materials-requirement-note {
    max-width: 1050px;
    margin: 7px 0 12px;
    color: #3e5267;
    font-size: 13px;
    line-height: 1.5;
  }
  .materials-open-order-table { min-width: 850px; table-layout: auto; }
  .materials-open-order-table th:first-child { width: 27%; }
  .materials-open-order-table th:nth-child(3) { width: 17%; }
  .materials-open-order-table td:nth-child(3),
  .materials-open-order-table td:nth-child(4) { font-variant-numeric: tabular-nums; font-weight: 800; }
  .materials-net-requirements > .materials-category + .materials-category { margin-top: 12px; }
  .materials-common-pool .materials-section-heading { flex-wrap: wrap; }
  .materials-pool-print-button { margin-left: auto; white-space: nowrap; }
  .materials-print-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    flex-direction: column;
    background: #e6eef6;
  }
  .materials-print-preview-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 2px solid #075dcc;
    background: #fff;
    box-shadow: 0 2px 12px #102c4a24;
  }
  .materials-print-preview-toolbar strong { margin-right: auto; color: #122947; font-size: 16px; }
  .materials-print-preview-toolbar span { color: #53677a; font-size: 12px; font-weight: 700; }
  .materials-print-preview-toolbar button { min-height: 38px; }
  .materials-print-preview-frame {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    border: 0;
    background: #fff;
  }
  @media (max-width: 680px) {
    .materials-requirement-section { padding: 10px; }
    .materials-requirement-heading h3 { font-size: 18px; }
    .materials-print-preview-toolbar strong { flex-basis: 100%; }
  }
}

/* The whole-day popup uses the same readable 330px card width as the board.
   Departments scroll horizontally; their cards scroll vertically instead of
   being compressed into the available viewport height. Print is unchanged. */
@media screen {
  .focus-board-day {
    grid-template-columns: none;
    grid-template-rows: minmax(0, 1fr);
    grid-auto-flow: column;
    /* Two cards, a 12px gap, 24px padding, borders and scrollbar allowance. */
    grid-auto-columns: 716px;
    min-width: 0;
    min-height: 0;
    align-items: stretch;
  }
  .focus-board-day > .focus-mini-cell {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
  }
  .focus-board-day .focus-mini-list,
  .focus-board-day .focus-mini-list.packet-list-paired {
    grid-template-columns: repeat(2, 330px);
    grid-auto-rows: max-content;
    gap: 12px;
    align-content: start;
    align-items: start;
    min-width: 0;
    min-height: 0;
    padding: 12px;
  }
  .focus-board-day .focus-mini-list > .pdf-card {
    grid-template-columns: minmax(0, 1fr);
    grid-column: auto;
    box-sizing: border-box;
    width: 330px;
    min-width: 330px;
    max-width: 330px;
    height: max-content;
    margin: 0;
  }
  .focus-board-day .focus-mini-list > .pdf-card.is-expanded {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .focus-board-day .packet-preview-stack,
  .focus-board-day .pdf-details {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }
  .focus-board-day .focus-mini-empty { grid-column: 1 / -1; }
}

/* Weekday view choices scale the whole two-card work-center canvas, never the
   card's internal columns. Only Current retains independent center scrolling. */
@media screen {
  .focus-board-day.day-focus-layout-board {
    display: block;
    min-width: 0;
    min-height: 0;
    overflow: auto;
  }
  .day-focus-canvas {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
    display: grid;
    grid-auto-flow: row;
    grid-auto-rows: max-content;
    gap: 12px;
    align-items: stretch;
    align-content: start;
  }
  .day-focus-space { position: relative; overflow: hidden; }
  .day-focus-canvas > .focus-mini-cell {
    min-width: 0;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  .day-focus-canvas .focus-mini-list { overflow: visible; }
  .day-focus-layout-board[data-day-view="current"] .day-focus-canvas {
    grid-template-rows: minmax(0, 1fr);
    grid-auto-rows: auto;
    align-content: stretch;
  }
  .day-focus-layout-board[data-day-view="current"] .focus-mini-cell {
    grid-template-rows: auto minmax(0, 1fr);
  }
  .day-focus-layout-board[data-day-view="current"] .focus-mini-list { overflow: auto; }
  .day-focus-layout-board:not([data-day-view="current"]) { overflow-x: hidden; }
  .day-focus-view-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 12px;
    min-width: 0;
  }
  .day-focus-view-label {
    display: grid;
    gap: 3px;
    min-width: 0;
    margin: 0;
    color: #253c55;
    font-size: 11px;
    font-weight: 800;
  }
  .day-focus-view-select {
    width: min(280px, 100%);
    min-height: 36px;
    border: 1px solid #075dcc;
    border-radius: 5px;
    background: white;
    color: #122e4c;
    font-size: 12px;
  }
  .day-focus-view-select:focus-visible { outline: 2px solid #075dcc; outline-offset: 2px; }
  .day-focus-view-status { color: #425b75; font-size: 11px; white-space: nowrap; }
  .day-focus-no-work { padding: 20px; color: #425b75; }
  @media (max-width: 700px) {
    .cell-focus-panel:has(.day-focus-layout-board) .cell-focus-header { flex-wrap: wrap; gap: 8px; padding: 10px; }
    .day-focus-view-tools { width: 100%; justify-content: flex-start; }
    .day-focus-view-label { flex: 1; }
  }
}

@media screen {
  :is(.backlog-pdf-preview, .planning-pdf-preview).piece-page-unverified > :is(.backlog-pdf-label, .pdf-level-label) {
    min-height: 28px;
    padding: 4px 6px;
    border-top: 1px solid #d99a32;
    background: #fff0d5;
    color: #71440c;
    font-size: 11px;
    line-height: 1.25;
    white-space: normal;
  }
}

/* Completion next steps: one immediate, non-stacking workflow prompt. */
@media screen {
  .persistent-workflow-alert {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 21000;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: min(540px, calc(100vw - 36px));
    padding: 13px 14px;
    border: 2px solid #c56d00;
    border-left-width: 7px;
    border-radius: 8px;
    background: #fff4dc;
    color: #573100;
    box-shadow: 0 14px 38px rgba(18, 31, 49, .28);
  }

  .persistent-workflow-alert > div {
    display: grid;
    flex: 1;
    gap: 3px;
    min-width: 0;
  }

  .persistent-workflow-alert strong { font-size: 14px; }
  .persistent-workflow-alert span { font-size: 13px; font-weight: 650; line-height: 1.45; }
  .persistent-workflow-alert button {
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid #734500;
    border-radius: 6px;
    background: #fff;
    color: #573100;
    font-weight: 800;
    cursor: pointer;
  }

  .completion-next-steps-dialog {
    width: min(680px, calc(100vw - 32px));
    max-height: min(88vh, 760px);
    max-height: min(88dvh, 760px);
    overflow: auto;
    gap: 14px;
    border-color: #97afd0;
  }

  .completion-next-steps-dialog > h2 { margin: 0; }

  .completion-next-steps-job {
    margin: -5px 0 0;
    color: #29435f;
    font-size: 14px;
    font-weight: 800;
  }

  .completion-next-steps-status {
    margin: 0;
    padding: 10px 12px;
    border-left: 5px solid #075dcc;
    border-radius: 4px;
    background: #edf5ff;
    color: #173b64;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
  }

  .completion-next-steps-tasks {
    display: grid;
    gap: 10px;
  }

  .completion-next-step {
    display: grid;
    gap: 5px;
    padding: 13px 14px;
    border: 1px solid #b9c9dc;
    border-left: 5px solid #075dcc;
    border-radius: 7px;
    background: #fff;
  }

  .completion-next-step h3,
  .completion-next-step p {
    margin: 0;
  }

  .completion-next-step h3 {
    color: #173451;
    font-size: 15px;
    font-weight: 800;
  }

  .completion-next-step p {
    color: #2e465e;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.5;
  }

  .completion-next-step-print { border-left-color: #c88700; }
  .completion-next-steps-router { color: #684900 !important; }

  .completion-next-steps-warning {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #df9d34;
    border-left: 5px solid #c56d00;
    border-radius: 5px;
    background: #fff4dc;
    color: #693b00;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
  }

  .completion-next-steps-warning[hidden] { display: none; }

  .completion-next-steps-actions {
    position: sticky;
    bottom: -18px;
    z-index: 2;
    margin: 0 -18px -18px;
    padding: 12px 18px 18px;
    border-top: 1px solid #cfdae6;
    background: #fff;
    box-shadow: 0 -8px 16px rgba(18, 31, 49, .06);
  }

  .completion-next-steps-dialog .completion-next-steps-actions > button,
  .completion-next-steps-dialog .completion-next-steps-actions > button.primary-action {
    min-height: 46px;
    min-width: 126px;
    font-size: 14px;
  }

  .completion-next-steps-dialog :focus-visible {
    outline: 3px solid #f3b329;
    outline-offset: 2px;
  }

  @media (max-width: 620px) {
    .persistent-workflow-alert { top: 8px; right: 8px; width: calc(100vw - 16px); flex-direction: column; }
    .persistent-workflow-alert button { width: 100%; }
    .completion-next-steps-dialog { padding: 15px; }
    .completion-next-steps-actions {
      bottom: -15px;
      display: grid;
      grid-template-columns: 1fr;
      margin: 0 -15px -15px;
      padding: 10px 15px 15px;
    }
    .completion-next-steps-actions > button { width: 100%; }
  }

  @media (max-width: 620px) and (max-height: 640px) {
    .completion-next-steps-dialog { scroll-padding-bottom: 196px; }
    .completion-next-steps-tasks { padding-bottom: 180px; }
  }
}
/* Server-owned manufacturing lifecycle views and guarded actions. */
.backlog-lifecycle-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.backlog-lifecycle-filters button, .backlog-lifecycle-action,
.backlog-lifecycle-dialog button, .backlog-lifecycle-dialog input { min-height: 44px; }
.backlog-lifecycle-filters button { padding: 8px 12px; border: 2px solid #526473; border-radius: 6px; background: #fff; color: #172c3d; }
.backlog-lifecycle-filters button[aria-pressed="true"] { background: #173e57; color: white; border-color: #173e57; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.backlog-lifecycle-count { display: inline-block; padding: 2px 6px; font-variant-numeric: tabular-nums; }
.backlog-lifecycle-status { display: flex; flex-direction: column; gap: 5px; white-space: normal; }
.backlog-lifecycle-status > span { font-weight: 700; }
.backlog-lifecycle-action { padding: 7px 9px; white-space: normal; }
.backlog-lifecycle-review { color: #792600; font-weight: 700; white-space: normal; }
.backlog-lifecycle-dialog { max-height: 90vh; overflow-y: auto; }
.backlog-lifecycle-dialog p { white-space: normal; line-height: 1.5; }
.backlog-lifecycle-filters button:focus-visible, .backlog-lifecycle-action:focus-visible,
.backlog-lifecycle-dialog :focus-visible { outline: 3px solid #0068a3; outline-offset: 3px; }
@media (max-width: 700px) {
  .backlog-lifecycle-filters button { flex: 1 1 45%; }
  .backlog-lifecycle-dialog .line-item-edit-grid { grid-template-columns: 1fr; }
}

/* Keep this card's physical quantity distinct from order and sibling totals. */
.packet-process-qty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 44px;
  padding: 8px;
  border: 1px solid #cbd3dd;
  border-radius: 6px;
  background: #f3f5f8;
  color: #26364a;
}

.packet-process-qty > small {
  color: #536277;
  font-size: 10px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.packet-process-qty > b {
  color: #26364a;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.packet-split-allocations {
  display: grid;
  grid-column: 1 / -1;
  gap: 5px;
  padding-top: 7px;
  border-top: 1px solid #d6dde5;
}

.packet-split-allocations > small {
  color: #536277;
  font-size: 9px;
  line-height: 1.3;
}

.packet-split-allocation-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 5px;
  min-width: 0;
}

.packet-split-allocation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  padding: 6px;
  border: 1px solid #d6dde5;
  border-radius: 3px;
  background: #fff;
  color: #21354c;
}

.packet-split-allocation > small {
  color: #425770;
  font-size: 9px;
  line-height: 1.2;
}

.packet-split-allocation > b {
  color: #21354c;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

@media print {
  .packet-process-qty {
    background: #eef5ff;
    color: #143b70;
    break-inside: avoid;
  }
  .packet-process-qty > small,
  .packet-process-qty > b,
  .packet-split-allocations > small { color: #143b70; }
}

/* Keep the native backlog header visible while either the page or table scrolls.
   The inset is in table CSS units, including the current UI zoom. */
@media screen {
  .backlog-table-wrap .backlog-table th {
    top: var(--backlog-viewport-header-top, 0px);
  }

  /* Keep the hit target inside its th, above its own background rather than
     beneath the next sticky cell's stacking context. */
  .backlog-table-wrap .backlog-column-resizer {
    right: 0;
    width: 10px;
  }
  .backlog-table-wrap .backlog-column-resizer::after { right: 0; }
}

/* Configurable work-center departments retain the underlying routing cells. */
.work-center-tree {
  border: 1px solid var(--line);
  background: #f7fafd;
}
.work-center-tree > summary {
  padding: 11px 13px;
  color: var(--steel);
  font-weight: 900;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.work-center-tree > .work-center-row { margin: 8px 10px; }
.work-center-tree-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px 2px;
}
.department-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
}
.department-add label { font-weight: 800; color: var(--ink); }
.department-add input { min-width: min(300px, 100%); }
#newWorkCenterDepartment {
  min-height: 38px;
  min-width: min(220px, 100%);
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}
.work-center-tree .work-center-row {
  grid-template-columns: 34px minmax(150px, 1.1fr) minmax(140px, 1fr) minmax(170px, 1.2fr) 82px 140px auto auto;
}
.work-center-department-input,
.work-center-tabs-input {
  min-height: 36px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--line);
  color: var(--ink);
  background: #fff;
}
.department-cell { min-width: 0; }
.department-cell-header {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #eaf2ff;
  color: var(--steel);
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}
.department-packet-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; }
.department-packet-list.single-department-card { grid-template-columns: minmax(0, 1fr); }
.department-packet-list > .empty-drop { grid-column: 1 / -1; }
.department-operation-strip { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.packet-card-identity > .department-operation-strip { margin-top: 5px; }
.department-operation-badge {
  padding: 4px 6px;
  border: 1px solid #a9bdd4;
  background: #eef3f9;
  color: #29435e;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}
.department-operation-badge.is-current {
  border: 2px solid #075dcc;
  background: #075dcc;
  color: #fff;
}
.department-operation-badge.is-scheduled { border-color: #075dcc; color: #075dcc; background: #fff; }
.packet-department-operation,
.packet-operation-material {
  padding: 5px 7px;
  border: 1px solid #b9cce7;
  border-left: 3px solid var(--safety);
  background: #f3f8ff;
  color: var(--steel);
  font-size: 11px;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.packet-note-panel { display: grid; gap: 4px; padding: 6px; border: 1px solid #b9cce7; border-left: 3px solid #075dcc; background: #f5f8ff; }
.packet-note-heading { color: #143b70; font-size: 10px; font-weight: 900; letter-spacing: 0.05em; }
.packet-note-panel .packet-note { border-color: #b9cce7; background: #fff; color: #17283b; }
.packet-operation-material { display: grid; gap: 2px; border-left-color: #21834b; background: #f4fbf6; }
.packet-operation-material > strong { font-size: 10px; letter-spacing: 0.04em; }
.department-focus-panel { min-height: 0; }
.department-focus-body { min-height: 0; overflow: auto; padding: 12px; }
.department-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.department-tab {
  min-height: 40px;
  padding: 8px 13px;
  border: 1px solid #9db7da;
  border-radius: 6px;
  background: #fff;
  color: var(--steel);
  font-weight: 900;
  cursor: pointer;
}
.department-tab.is-active { background: #075dcc; border-color: #075dcc; color: #fff; }
.department-focus-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 345px), 1fr)); gap: 12px; }
.department-focus-card { min-width: 0; border: 1px solid #a9c2e2; background: #fff; padding: 8px; }
.department-card-location { margin: 0 0 7px; color: var(--steel); font-weight: 900; }
@media (max-width: 1050px) {
  .work-center-tree .work-center-row { grid-template-columns: 34px minmax(150px, 1fr) minmax(140px, 1fr) minmax(170px, 1fr); }
}

/* The work-center names form a pinned header above the scrolling cards,
   matching the backlog's pinned column labels. Keep the header within its
   own lane so it leaves when that work center leaves the board. */
@media screen {
  :is(#productionBoard, #activeProductionBoard).work-center-flow .production-flow-heading {
    position: sticky;
    top: var(--production-pinned-heading-top, 58px);
    z-index: 15;
    background: #101721;
    color: #fff;
    border-bottom: 3px solid #075dcc;
    box-shadow: 0 4px 12px rgba(16, 23, 33, .2);
  }
  :is(#productionBoard, #activeProductionBoard).work-center-flow .production-flow-heading .work-center-header {
    color: #fff;
    background: transparent;
  }
  :is(#productionBoard, #activeProductionBoard).work-center-flow .production-flow-heading :is(.production-flow-eyebrow, .production-flow-summary) {
    color: #c6d8ee;
  }
  :is(#productionBoard, #activeProductionBoard).horizontal-week-grid .production-week-center {
    position: sticky;
    top: var(--production-pinned-heading-top, 58px);
    z-index: 15;
    background: #e9eef6;
    border-bottom: 2px solid #075dcc;
  }
}
@media (max-width: 520px) {
  .department-packet-list { grid-template-columns: minmax(0, 1fr); }
}
.backlog-preview-page-action {
  display: block;
  width: 100%;
  min-height: 34px;
  margin: 5px 0;
  padding: 5px 8px;
  border: 1px solid #a9c2e2;
  background: #f3f8ff;
  color: #124c9c;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.backlog-preview-page-action:disabled { opacity: .55; cursor: default; }
.backlog-parent-usage-source {
  display: block;
  padding: 3px 7px;
  color: #425770;
  font-size: 10px;
  line-height: 1.2;
}
.backlog-line-production-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid #b7c8da;
  background: #f4f8fc;
}
.backlog-line-production-actions strong {
  flex-basis: 100%;
  color: #183654;
}

/* Route quality gates (FAI / final / QC). Hold #B83D31, ready #2F8754, process #F3B329. */
.quality-gate-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.quality-gate-chip {
  min-height: 25px;
  padding: 3px 6px;
  border: 1px solid #B83D31;
  border-radius: 2px;
  background: #fff;
  color: #B83D31;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.quality-gate-chip.is-passed {
  border-color: #2F8754;
  background: #2F8754;
  color: #fff;
}

.quality-gate-chip.is-failed {
  border-color: #B83D31;
  background: #B83D31;
  color: #fff;
}

.quality-gate-chip:disabled {
  cursor: default;
  opacity: 0.6;
}

.quality-gate-chip:focus-visible {
  outline: 2px solid #0054FF;
  outline-offset: 1px;
}

.pdf-card.quality-gate-held:not(.route-held) {
  box-shadow: inset 3px 0 0 #B83D31;
}

.quality-gate-hold-text {
  color: #B83D31;
  font-size: 11px;
}

.backlog-lifecycle-status .quality-gate-chips {
  margin-top: 3px;
}

.quality-gate-dialog label {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}

.quality-gate-dialog label[hidden] {
  display: none;
}

.quality-gate-dialog textarea {
  resize: vertical;
  font-family: Arial, Helvetica, sans-serif;
}