.workflow-table input[type="checkbox"],
#selectAll {
  appearance: none;
  width: 23px;
  height: 23px;
  min-height: 23px;
  padding: 0;
  border: 2px solid #7fa39d;
  border-radius: 6px;
  background: #fff;
  vertical-align: middle;
  display: inline-grid;
  place-content: center;
}

.customs-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0;padding:6px;background:#edf3f8;border:1px solid #d9e3ec;border-radius:14px}
.customs-tabs button{border:0;background:transparent;color:#466174;padding:9px 16px;border-radius:10px;font-weight:700;cursor:pointer}
.customs-tabs button.active{background:#fff;color:#0f6b73;box-shadow:0 2px 8px rgba(20,54,70,.12)}
#customsForm [data-customs-panel]{padding:14px 0}
#customsForm textarea[data-customs-product]{min-width:240px;min-height:78px}
#customsForm .line-editor input{min-width:92px}

.workflow-table input[type="checkbox"]:checked,
#selectAll:checked {
  border-color: var(--brand);
  background: var(--brand);
}

.workflow-table input[type="checkbox"]:checked::after,
#selectAll:checked::after {
  content: "✓";
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

.workflow-table td.sticky-col,
.workflow-table th.sticky-col {
  min-width: 54px;
  text-align: center;
}

.photo-chip > span:first-child {
  display: flex;
  align-items: center;
  gap: 12px;
}

.photo-preview {
  display: block;
  width: 92px;
  height: 68px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #eef3f2;
}

.photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-preview:hover {
  box-shadow: 0 0 0 3px rgba(11, 129, 115, .14);
}

.export-field-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-height: 300px;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fafcfc;
}

.export-filter-row {
  display: grid;
  grid-template-columns: 1.2fr .8fr 1.5fr auto;
  gap: 8px;
  margin: 8px 0;
  align-items: center;
}

.calculated-field[data-manual="0"] {
  background: #eef6ff;
  border-color: #9ec8f2;
}

.calculated-field[data-manual="1"] {
  background: #fff8e8;
  border-color: #e7b85e;
  font-weight: 650;
}

@media (max-width: 1200px) {
  .export-field-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.zoom-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 11px;
  background: rgba(255,255,255,.06);
}

.zoom-controls .zoom-btn {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  font-size: 17px;
}

.zoom-value {
  min-width: 48px;
  height: 30px;
  padding: 0 6px;
  border: 0;
  border-radius: 7px;
  background: rgba(255,255,255,.10);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.pi-editor-table { min-width: 1180px!important; }
.pi-editor-table td:nth-child(2) input { min-width: 260px; }
.pi-editor-table td:nth-child(3) input { min-width: 150px; }

/* V2.4 visual polish: clearer hierarchy for long, process-heavy order tables. */
:root {
  --brand: #11675d;
  --brand-2: #168779;
  --ink: #173238;
  --muted: #667b80;
  --line: #d9e5e4;
  --paper: #ffffff;
  --shadow: 0 16px 44px rgba(20, 54, 58, .12);
}

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 100% 0, rgba(64, 136, 127, .10), transparent 28%),
    linear-gradient(180deg, #f8fbfa 0, #edf3f2 48%, #e8efee 100%);
}

.workspace-header {
  height: 72px;
  padding-inline: 26px;
  background: linear-gradient(112deg, #0b3b37 0%, #10584f 58%, #154b57 100%);
  border-bottom: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 8px 26px rgba(7, 45, 41, .22);
}

.brand-mark.small {
  background: linear-gradient(145deg, #34a392, #f1b968);
  box-shadow: 0 7px 18px rgba(1, 35, 32, .24);
}

.nav-btn {
  min-height: 40px;
  padding-inline: 16px;
  border-radius: 12px;
  color: #d9eeeb;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.nav-btn:hover { transform: translateY(-1px); }
.nav-btn.active {
  background: #fff;
  border-color: #fff;
  color: #145d54;
  box-shadow: 0 6px 16px rgba(4, 38, 35, .18);
}

.main { padding-inline: 26px; }
.topbar { padding-block: 30px 20px; }
.topbar h2 { font-size: 27px; letter-spacing: -.02em; }

.panel {
  border-color: rgba(185, 205, 203, .76);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(28, 67, 69, .075);
}

.panel-head {
  min-height: 66px;
  padding: 17px 20px;
  background: linear-gradient(180deg, #ffffff, #fbfdfc);
}

.panel-head h3 { font-size: 17px; }

input, select, textarea {
  border-color: #c9d9d7;
  border-radius: 11px;
  background: #fcfefe;
  box-shadow: inset 0 1px 1px rgba(21, 54, 57, .025);
}

input:hover, select:hover, textarea:hover { border-color: #9ebcb7; }
input:focus, select:focus, textarea:focus {
  background: #fff;
  border-color: #168779;
  box-shadow: 0 0 0 4px rgba(22, 135, 121, .12);
}

.btn {
  min-height: 40px;
  padding: 8px 15px;
  border-color: #c5d5d3;
  border-radius: 11px;
  background: linear-gradient(180deg, #fff, #f7faf9);
  color: #29474c;
  box-shadow: 0 2px 5px rgba(20, 55, 58, .055);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.btn:hover {
  transform: translateY(-1px);
  border-color: #83aaa4;
  background: #f2faf7;
  box-shadow: 0 5px 12px rgba(20, 75, 68, .10);
}

.btn:active { transform: translateY(0); box-shadow: none; }
.btn.primary {
  border-color: #11675d;
  background: linear-gradient(135deg, #11675d, #168779);
  box-shadow: 0 6px 14px rgba(17, 103, 93, .20);
}
.btn.primary:hover { background: linear-gradient(135deg, #0d5b52, #11796c); }
.btn.blue { background: linear-gradient(135deg, #286da5, #3485bd); }
.btn.danger { background: #fff7f7; }
.btn.small { min-height: 32px; border-radius: 9px; }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(240, 173, 76, .62);
  outline-offset: 2px;
}

.workflow-table { border-top: 1px solid #d9e5e4; }
.data-table th, .data-table td { padding: 11px 12px; }
.data-table tbody tr:nth-child(4n+1)>td { background: #fcfdfd; }
.data-table tbody tr.order-row:has(input[data-select-order]:checked)>td {
  background: #edf8f5;
  box-shadow: inset 0 1px rgba(32, 144, 126, .16), inset 0 -1px rgba(32, 144, 126, .16);
}
.data-table tbody tr.order-row:has(input[data-select-order]:checked)>td:first-child {
  box-shadow: inset 4px 0 #168779, inset 0 1px rgba(32, 144, 126, .16), inset 0 -1px rgba(32, 144, 126, .16);
}
.data-table td.sticky-col, .data-table td.order-col { box-shadow: 7px 0 14px rgba(25, 62, 65, .045); }

.data-table thead tr:first-child th.group-order { background: #edf2f3; color: #3c5960; }
.data-table thead tr:first-child th.group-product { background: #e7f4f1; color: #17675d; }
.data-table thead tr:first-child th.group-production { background: #f8f1df; color: #765e19; }
.data-table thead tr:first-child th.group-booking { background: #e9f1fa; color: #285f91; }
.data-table thead tr:first-child th.group-outbound { background: #f0ebf8; color: #65498b; }
.data-table thead tr:first-child th.group-clearance { background: #e6f4f6; color: #246b78; }
.data-table thead tr:first-child th.group-finance { background: #f9eee7; color: #8c512f; }

.filter-row input {
  border-radius: 8px;
  background: rgba(255,255,255,.93);
}

.order-link {
  padding: 3px 0;
  color: #0d6f63;
  text-decoration-thickness: 1px;
  text-decoration-color: #80b7b0;
}
.order-link:hover { color: #084d46; text-decoration-color: currentColor; }
.expand-btn { border-radius: 9px; color: #17675d; font-size: 17px; }

.badge {
  min-height: 27px;
  padding-inline: 10px;
  border: 1px solid rgba(76, 101, 105, .08);
  letter-spacing: .01em;
}

.action-dock {
  left: 26px;
  right: 26px;
  bottom: 20px;
  padding: 13px 15px;
  border: 1px solid rgba(120, 159, 153, .56);
  border-radius: 18px;
  background: rgba(255,255,255,.975);
  box-shadow: 0 20px 60px rgba(20, 55, 60, .22), inset 0 3px #168779;
}

.action-dock .selection-copy strong { color: #105e55; font-size: 15px; }
.action-scroll { gap: 8px; }
#actNotice, #actInbound, #actInspect { background: #fff9ec; border-color: #e3c98e; color: #745919; }
#actBooking, #actOutbound, #actClearance { background: #f2f7fd; border-color: #a9c3df; color: #2d608c; }
#actFinance { background: #fff5ef; border-color: #dfb89f; color: #8b4d2d; }
#actDelete { margin-left: 4px; }

.modal { background: rgba(9, 30, 34, .56); backdrop-filter: blur(7px); }
.modal-panel {
  border: 1px solid rgba(255,255,255,.80);
  border-radius: 22px;
  box-shadow: 0 34px 110px rgba(4, 27, 31, .35);
}
.modal-panel>header {
  padding: 19px 22px;
  background: linear-gradient(135deg, #f8fbfa, #eef6f4);
}
.modal-panel>header h3 { font-size: 19px; color: #153f3c; }
.modal-body { padding: 22px; }
.modal-panel>footer { padding: 15px 20px; background: #f5f9f8; }

.line-editor {
  border-radius: 13px;
  border-color: #cfdedc;
  box-shadow: inset 0 1px rgba(255,255,255,.8);
}
.line-editor th { background: #eaf3f1; color: #315953; }
.detail-item { border-radius: 13px; background: linear-gradient(145deg, #fbfdfc, #f3f8f7); }
.file-chip { border-radius: 12px; background: #fbfdfd; }
.notice { border: 1px solid #cee4df; border-radius: 12px; }

.metric, .management-grid button {
  border-radius: 16px;
  box-shadow: 0 5px 16px rgba(24, 63, 66, .055);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.metric:hover, .management-grid button:hover {
  transform: translateY(-2px);
  border-color: #9bbdb7;
  box-shadow: 0 11px 24px rgba(24, 75, 69, .10);
}

.toast { border-radius: 13px; box-shadow: 0 14px 40px rgba(10, 44, 41, .28); }

.permission-section,
.permission-account {
  margin: 12px 0;
  padding: 14px;
  border: 1px solid #d3e1df;
  border-radius: 14px;
  background: #fbfdfc;
}
.permission-section h4 { margin: 0 0 10px; color: #245750; }
.permission-account>summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  color: #174b45;
}
.permission-account>summary span { color: #687b80; font-size: 12px; }
.permission-account[open]>summary { margin-bottom: 15px; }
.permission-field-group { margin: 10px 0; padding: 10px; border-radius: 10px; background: #f1f7f5; }
.permission-field-group>strong { display: block; margin-bottom: 8px; color: #42645f; }
.permission-master { margin: 10px 0; font-weight: 800; color: #214f49; }

* { scrollbar-color: #9ebbb6 #edf3f2; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #edf3f2; }
::-webkit-scrollbar-thumb { background: #9ebbb6; border: 2px solid #edf3f2; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #6f9d96; }

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

/* V2.7.3: keep the complete order-table header visible while records scroll. */
.workflow-table-scroll {
  max-height: calc(100vh - 235px);
  min-height: 320px;
  overflow: auto;
  overscroll-behavior: contain;
}
.workflow-table-scroll .workflow-table thead tr:first-child > th {
  top: 0;
  z-index: 13;
}
.workflow-table-scroll .workflow-table thead tr.leaf-head > th {
  top: 36px;
  z-index: 12;
}
.workflow-table-scroll .workflow-table thead tr.filter-row > th {
  top: 72px;
  z-index: 11;
}
.workflow-table-scroll .workflow-table thead th.sticky-col,
.workflow-table-scroll .workflow-table thead th.order-col {
  z-index: 15;
}
.order-column-settings {
  display: grid;
  gap: 14px;
}
.order-column-settings fieldset {
  margin: 0;
  padding: 12px;
  border: 1px solid #d3e1df;
  border-radius: 12px;
  background: #f8fbfa;
}
.order-column-settings legend {
  padding: 0 7px;
  color: #245750;
  font-weight: 800;
}

/* V2.7.5: administrator activity notifications. */
.notification-button { position: relative; font-size: 17px; }
.notification-button:not(.hidden) { display: inline-grid; place-items: center; }
.notification-badge {
  position: absolute;
  top: -6px;
  right: -7px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #103f3a;
  border-radius: 999px;
  background: #dc4b52;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}
.notification-list { display: grid; gap: 9px; }
.notification-item {
  padding: 12px 14px;
  border: 1px solid #d7e3e1;
  border-left: 4px solid #92aaa6;
  border-radius: 11px;
  background: #f8fbfa;
}
.notification-item.unread { border-left-color: #0b8173; background: #edf8f5; }
.notification-item-head { display: flex; justify-content: space-between; gap: 14px; }
.notification-item-head time { color: var(--muted); font-size: 11px; white-space: nowrap; }
.notification-item p { margin: 6px 0 0; color: #52686d; line-height: 1.5; }
.product-picker-input{cursor:pointer;background-color:#f7fbfa!important;border-color:#90bbb4!important;font-weight:750;color:#145f57}
.product-picker-hint{margin:10px 0}
.product-picker-overlay{position:fixed;inset:0;z-index:190;display:grid;place-items:center;padding:28px;background:rgba(8,29,33,.62);backdrop-filter:blur(6px)}
.product-picker-panel{width:min(920px,94vw);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,.8);border-radius:22px;background:#fff;box-shadow:0 34px 110px rgba(4,27,31,.42)}
.product-picker-panel>header{display:flex;align-items:flex-start;justify-content:space-between;padding:18px 21px;border-bottom:1px solid #d8e4e2;background:linear-gradient(135deg,#f8fbfa,#eaf5f2)}
.product-picker-panel>header h3{margin:0;color:#153f3c;font-size:20px}.product-picker-panel>header p{margin:5px 0 0;color:#65777d}.product-picker-panel>header .icon-btn{color:#173f3a;border-color:#cbd9d7;background:#fff}
.product-picker-tools{display:flex;align-items:center;gap:10px;padding:15px 20px 8px}.product-picker-tools input{flex:1;font-size:15px}
.product-picker-help{margin:0 20px 10px;padding:9px 12px;border-radius:10px;background:#f2f7f6;color:#526a66;font-size:12px}
.product-picker-results{padding:0 20px 20px;overflow:auto}.product-picker-group{margin-top:12px;border:1px solid #d8e4e2;border-radius:14px;overflow:hidden}
.product-picker-group h4{display:flex;align-items:center;gap:9px;margin:0;padding:10px 13px;background:#eaf3f1;color:#244f4a;font-size:13px}
.product-picker-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px}
.product-picker-item{display:grid;grid-template-columns:minmax(120px,.8fr) minmax(150px,1.2fr);align-items:center;gap:5px 12px;min-height:58px;padding:10px 12px;text-align:left;border:1px solid #d6e1df;border-radius:11px;background:#fff;color:#243d42}
.product-picker-item:hover:not(:disabled){border-color:#4a9b8e;background:#f1faf8;box-shadow:0 5px 14px rgba(22,101,91,.1)}
.product-picker-item strong{color:#0d6c60;font-size:14px}.product-picker-item span{font-weight:700}.product-picker-item small{grid-column:1/-1;color:#718185;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-picker-item:disabled{opacity:.48;cursor:not-allowed;background:#f3f5f5}
.booking-carton-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:13px 0;padding:13px 16px;border:1px solid #9ecdc4;border-radius:13px;background:#ecf8f5;color:#164e47}
.booking-carton-summary strong{font-size:22px;color:#087568}
@media(max-width:900px){.product-picker-items{grid-template-columns:1fr}}

/* V2.7.6: larger, row-level order selection with clear visual feedback. */
.workflow-table .order-row { cursor: pointer; transition: background-color .14s ease, box-shadow .14s ease; }
.workflow-table .order-row:hover:not(.order-selected) > td { background-color: #f1f8f6; }
.workflow-table .order-row.order-selected > td { background-color: #dff3ee; }
.workflow-table .order-row.order-selected > td:first-child { box-shadow: inset 4px 0 0 #0b8173; }
.workflow-table [data-select-order],
.workflow-table #selectAll { width: 22px; height: 22px; margin: 2px; cursor: pointer; accent-color: #0b8173; }
.workflow-table .order-row > .sticky-col { min-width: 48px; text-align: center; }
.selection-tools { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.selection-tools .btn:disabled { opacity: .45; cursor: not-allowed; }
@media(max-width:760px){.selection-tools{width:100%;justify-content:flex-start}.action-dock{flex-wrap:wrap}}

/* V2.7.7: first-level document cells and a collapsible left action rail. */
.group-files{box-shadow:inset 0 4px #9a587a}
.table-file-cell{display:grid;gap:5px;min-width:154px;max-width:235px;white-space:normal}
.table-file-cell>strong{color:#355f59;font-size:11px}
.table-file-stack{display:grid;gap:5px;max-height:116px;overflow:auto;padding-right:3px}
.table-file-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;padding:5px 6px;border:1px solid #dce7e5;border-radius:8px;background:#fbfdfc}
.table-file-item>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:126px;font-size:11px}
.table-file-actions{display:flex;gap:5px;white-space:nowrap}
.table-file-actions a,.table-file-pack{color:#0b7166;font-size:11px;font-weight:800;text-decoration:none}
.table-file-actions a:hover,.table-file-pack:hover{text-decoration:underline}
.table-photo-thumb{width:54px;height:40px;display:block;overflow:hidden;border:1px solid #cbdad7;border-radius:6px;background:#edf3f2}
.table-photo-thumb img{width:100%;height:100%;display:block;object-fit:cover}
.photo-files .table-file-item{grid-template-columns:auto auto}
.order-action-rail{padding-left:216px;transition:padding-left .18s ease}
.order-action-rail.rail-collapsed{padding-left:64px}
.action-dock.action-rail{left:18px;right:auto;top:146px;bottom:18px;width:190px;display:flex;flex-direction:column;align-items:stretch;gap:9px;padding:39px 11px 11px;border-radius:17px}
.action-rail .selection-copy{min-width:0!important;width:100%;padding:0 0 9px!important;border-right:0!important;border-bottom:1px solid var(--line);text-align:center}
.action-rail .selection-tools{width:100%;display:grid;grid-template-columns:1fr;gap:6px}
.action-rail .selection-tools .btn{width:100%}
.action-rail .action-scroll{width:100%;display:flex;flex-direction:column;gap:6px;overflow-x:hidden;overflow-y:auto;padding:0 2px 3px}
.action-rail .action-scroll .btn{width:100%;min-height:36px;text-align:left}
.action-rail-toggle{position:absolute;right:9px;top:8px;width:27px;height:27px;border:1px solid #c8d7d4;border-radius:8px;background:#edf7f4;color:#12685d;font-size:21px;font-weight:800;line-height:1}
.action-rail.collapsed{width:48px;padding:39px 7px 8px}
.action-rail.collapsed .selection-copy,.action-rail.collapsed .selection-tools,.action-rail.collapsed .action-scroll{display:none}
.action-rail.collapsed .action-rail-toggle{right:9px}
@media(max-width:1050px){.order-action-rail{padding-left:64px}.action-dock.action-rail{width:48px;padding:39px 7px 8px}.action-rail .selection-copy,.action-rail .selection-tools,.action-rail .action-scroll{display:none}.action-rail .action-rail-toggle{right:9px}}

/* V2.7.8: status-driven order views and batch-level accessory cartons. */
.row-filtered-status{display:none!important}
.accessory-carton-merged{vertical-align:middle!important;text-align:center!important;background:#eef8f6!important;min-width:112px}
.accessory-carton-merged .accessory-carton-label{display:block;color:#16645d;font-size:12px;font-weight:700;margin-bottom:6px;white-space:nowrap}
.accessory-carton-merged input{width:86px!important;min-width:70px;text-align:center;font-weight:800}
.outbound-carton-cell{text-align:center;vertical-align:middle;white-space:nowrap}
.order-status-filter-bar{display:flex;align-items:center;gap:8px;padding:11px 16px;border-top:1px solid #e3ecea;border-bottom:1px solid #d8e4e2;background:linear-gradient(90deg,#f8fbfa,#eef7f5);overflow-x:auto;scrollbar-width:thin}
.order-status-filter{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:7px 12px;border:1px solid #cdddda;border-radius:999px;background:#fff;color:#365c57;font-weight:800;white-space:nowrap;cursor:pointer;box-shadow:0 2px 7px rgba(21,76,69,.04)}
.order-status-filter:hover{border-color:#71aa9f;background:#f2faf8}
.order-status-filter strong{display:inline-grid;place-items:center;min-width:23px;height:23px;padding:0 6px;border-radius:999px;background:#e7efed;color:#4a6864;font-size:11px}
.order-status-filter.active{border-color:#087568;background:#0b8173;color:#fff;box-shadow:0 5px 14px rgba(11,129,115,.2)}
.order-status-filter.active strong{background:rgba(255,255,255,.2);color:#fff}
[data-accessory-row="1"]>td{background:#f7fbff}
[data-accessory-row="1"] .badge.blue{white-space:nowrap}
.notice.compact{padding:9px 12px;margin:8px 0}
@media(max-width:760px){.order-status-filter-bar{padding:9px 11px}.order-status-filter{min-height:34px;padding:6px 10px;font-size:12px}}