/* Approved OPC layout, isolated from business behavior. */
body{background:#edf1f6;color:#23354e}
.sidebar{width:236px;flex:0 0 236px;background:#102945;padding:26px 16px 20px}
.brand{display:block;padding:0 8px 24px;margin-bottom:19px;border-bottom:1px solid #d1b27a42}
.brand-logo{width:188px;height:72px;border:0;border-radius:0;background:none;box-shadow:none;overflow:hidden}
.brand-logo img{display:block;width:268px;height:98px;max-width:none;margin-left:-40px;margin-top:-13px;object-fit:contain}
.brand-copy{margin-top:18px}
.brand-line{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand strong{font-size:19px;font-weight:800;letter-spacing:.025em;white-space:nowrap;line-height:1.4}
.brand-opc{font-size:27px;line-height:1;color:#e0c596;border-left:1px solid #9e885b75;padding-left:12px}
.brand span{font-size:19px;line-height:1.4;letter-spacing:.025em;white-space:nowrap;margin-top:11px;color:#9cafc6}
.sidebar .nav{font-size:13px;font-weight:600;color:#aebfd4}
.sidebar .nav.active{background:linear-gradient(90deg,#2a4c70,#203c5b);box-shadow:inset 3px 0 #d8ba84;color:white}
.shell{flex:1;min-width:0;padding:0 24px 24px}
.topbar{height:auto;min-height:126px;padding:20px 28px;background:#fff;margin:0 -24px 22px;border-bottom:1px solid #dce4ee;flex-wrap:wrap;gap:20px}
.title-block{display:flex;align-items:center;gap:18px}
.title-block h1{font-size:29px;font-weight:800;letter-spacing:.025em;color:#112a45}
.title-block p{font-size:12px;color:#7e8da3}
.header-opc{border-left:5px solid #b89a63;padding-left:10px}
.header-opc b{display:block;font-size:38px;font-weight:900;line-height:1;color:#163753}
.header-opc small{display:block;font-size:9px;color:#9a8763;letter-spacing:.12em;margin-top:6px}
.mobile-menu{display:block;border:0;background:transparent;color:#47617d}
.orders-compact-table{width:100%;min-width:1680px;table-layout:fixed}
.order-table .orders-compact-table th,.order-table .orders-compact-table td{min-width:0;max-width:none;padding:16px 8px;line-height:1.65;overflow-wrap:anywhere;white-space:normal}
.order-table .orders-compact-table th{background:#eaf0f7;font-size:12px;font-weight:700;color:#284361}
.orders-compact-table th:nth-child(1),.orders-compact-table td:nth-child(1){width:34px}
.orders-compact-table th:nth-child(2),.orders-compact-table td:nth-child(2){width:100px}
.orders-compact-table th:nth-child(3),.orders-compact-table td:nth-child(3){width:106px}
.order-table .orders-compact-table th:nth-child(4),.order-table .orders-compact-table td:nth-child(4){width:138px;position:static}
.orders-compact-table th:nth-child(5),.orders-compact-table td:nth-child(5){width:94px}
.orders-compact-table th:nth-child(6),.orders-compact-table td:nth-child(6){width:80px}
.orders-compact-table th:nth-child(7),.orders-compact-table td:nth-child(7){width:auto}
.orders-compact-table th:nth-child(8),.orders-compact-table td:nth-child(8){width:104px}
.orders-compact-table th:nth-child(9),.orders-compact-table td:nth-child(9){width:auto}
.orders-compact-table th:nth-child(10),.orders-compact-table td:nth-child(10){width:92px}
.orders-compact-table th:nth-child(11),.orders-compact-table td:nth-child(11){width:122px}
.orders-compact-table th:nth-child(12),.orders-compact-table td:nth-child(12){width:94px}
.orders-compact-table th:nth-child(13),.orders-compact-table td:nth-child(13){width:70px}
.order-table .orders-compact-table th:nth-child(14),.order-table .orders-compact-table td:nth-child(14){width:114px;position:sticky;right:110px;background:white;z-index:4}
.order-table .orders-compact-table th:last-child,.order-table .orders-compact-table td:last-child{width:110px;min-width:110px;right:0;box-shadow:none;z-index:5}
.order-table .orders-compact-table th:nth-child(14),.order-table .orders-compact-table th:last-child{background:#eaf0f7;z-index:6}
.orders-compact-table .date-line{display:block;white-space:nowrap!important;word-break:normal!important;overflow-wrap:normal!important;font-size:12px;font-weight:700}
.orders-compact-table .business-type{display:block;white-space:nowrap}
.orders-compact-table .row-actions{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.orders-compact-table .row-actions button{white-space:normal;line-height:1.45}
.orders-compact-table td:nth-child(5)>strong{display:block;max-width:6em}
.orders-compact-table td:nth-child(6) .tag{max-width:5em;padding:3px 5px}
.orders-compact-table td:nth-child(13){font-size:12px}
body.opc-nav-collapsed .sidebar{width:68px;flex-basis:68px;padding:26px 11px}
body.opc-nav-collapsed .brand,body.opc-nav-collapsed .sidebar-foot,body.opc-nav-collapsed .sidebar-activity,body.opc-nav-collapsed .nav span{display:none}
body.opc-nav-collapsed .sidebar:before{content:"OPC";display:block;text-align:center;color:#d9bd88;font-size:12px;font-weight:800;margin:3px 0 21px}
body.opc-nav-collapsed .nav{justify-content:center;padding:12px}
@media(max-width:900px){.sidebar{width:100%;flex-basis:auto;min-height:0;flex-direction:row;padding:8px 10px}.brand,.sidebar-foot,.sidebar-activity{display:none}.sidebar nav{display:flex;overflow:auto}.shell{padding:0 14px 24px}.topbar{margin:0 -14px 16px;padding:15px 14px}.header-opc{display:none}.title-block h1{font-size:23px}body.opc-nav-collapsed .sidebar{display:none}}
/* Fixed navigation with independently scrolling workspace. */
@media(min-width:901px){
  html,body{height:100%;overflow:hidden}
  .sidebar{position:fixed;left:0;top:0;bottom:0;height:100vh;min-height:0;overflow-y:auto}
  .shell{margin-left:236px;width:calc(100% - 236px);height:100vh;overflow-y:auto;flex:none}
  .topbar{position:sticky;top:0;z-index:15;min-height:100px;padding-top:16px;padding-bottom:16px}
  body.opc-nav-collapsed .shell{margin-left:68px;width:calc(100% - 68px)}
}
.opc-order-summary{background:white;border:1px solid #dae3ee;border-radius:7px;margin-bottom:14px;overflow:hidden}
.opc-summary-bar{min-height:58px;display:flex;align-items:center;gap:22px;padding:0 18px}
.opc-summary-bar h2{margin:0;white-space:nowrap;font-family:inherit;font-size:14px;font-weight:700;letter-spacing:0;color:#254260}
.opc-summary-bar h2 b{font-family:"Segoe UI",sans-serif;font-size:15px;color:#9c7c44;margin-right:8px}
.opc-summary-metric{display:flex;align-items:baseline;gap:7px;padding-left:20px;border-left:1px solid #e2e8f0;white-space:nowrap}
.opc-summary-metric span{font-size:11px;color:#7b8da3}
.opc-summary-metric strong{font:600 21px "Segoe UI",sans-serif;color:#263e5b}
.opc-summary-metric.attention strong{color:#ca5864}
.opc-summary-scope{font-size:10px;color:#8a98aa;white-space:nowrap}
#toggleOpcSummary{margin-left:auto;border:0;background:#f3f6fa;color:#7b8da3;font-size:11px;padding:6px 9px;white-space:nowrap}
.opc-order-summary.folded .opc-summary-metric,.opc-order-summary.folded .opc-summary-scope{display:none}
.opc-order-summary.folded .opc-summary-bar{min-height:35px}
@media(max-width:1200px){.opc-summary-bar{gap:12px;flex-wrap:wrap;padding:10px 14px}.opc-summary-metric{padding-left:12px}.opc-summary-scope{display:none}}
@media(max-width:900px){.shell{height:auto;margin-left:0;width:100%;overflow:visible}}
.orders-compact-table .order-group-parent { background: #f4f8ff; }
.order-table .orders-compact-table td { font-size: 13px; }
.order-table .orders-compact-table td .subtext { font-size: 12px; }
.order-table .orders-compact-table td > strong { font-size: 13px; }
.order-table .orders-compact-table td:nth-child(7), .order-table .orders-compact-table td:nth-child(8) { overflow: hidden; }
.order-table .orders-compact-table td:nth-child(7) *, .order-table .orders-compact-table td:nth-child(8) * { max-width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; word-break: normal; }
.order-table .orders-compact-table .sku-attributes { width: auto; min-width: 0; max-width: 100%; font-size: 12px; line-height: 1.6; }
.order-table .orders-compact-table { min-width: 1680px; }
.order-table .orders-compact-table th:nth-child(7), .order-table .orders-compact-table td:nth-child(7), .order-table .orders-compact-table th:nth-child(9), .order-table .orders-compact-table td:nth-child(9) { width: 180px; }
.order-items-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #b8cee9; background: #eaf2ff; color: #2259a3; border-radius: 6px; margin: 0 0 7px; padding: 5px 9px; width: auto; min-height: 32px; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.4; cursor: pointer; white-space: nowrap; }
.order-items-toggle svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.order-items-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.order-items-toggle:hover { background: #dceaff; border-color: #7da7db; }
.order-items-toggle:focus-visible { outline: 2px solid #2466ba; outline-offset: 2px; }
#orderForm label:has(> input[type="checkbox"]) { display: flex; align-items: center; justify-content: flex-start; gap: 8px; align-self: end; padding: 10px 12px; min-height: 44px; box-sizing: border-box; border: 1px solid #cdddf3; border-radius: 6px; background: #f1f6ff; color: #315a91; font-weight: 600; cursor: pointer; line-height: 1.5; }
#orderForm label:has(> input[name="preview_required"]) { background: #f6f2ff; border-color: #dfd2f5; color: #7041aa; }
#orderForm label:has(> input[name="needs_artwork"]) { background: #fff6ed; border-color: #f1d9bd; color: #9a5b21; }
#orderForm label:has(> input[name="material_confirmed"]), #orderForm label:has(> input[data-line-field="material_confirmed"]) { background: #eff8fc; border-color: #c5e3ee; color: #276c85; }
#orderForm label:has(> input[name="procurement_reviewed"]) { background: #eef8f2; border-color: #c7e5d4; color: #2e7650; }
#orderForm label:has(> input[name="factory_pattern_confirmed"]) { background: #fff9e9; border-color: #ecdfb8; color: #8b6c22; }
#orderForm label:has(> input[type="checkbox"]:checked) { box-shadow: inset 3px 0 currentColor; }
#orderForm label:has(> input[type="checkbox"]:focus-visible) { outline: 2px solid currentColor; outline-offset: 2px; }
#orderForm label:has(> input[type="checkbox"]:disabled) { cursor: default; opacity: .7; }
#orderForm input[type="checkbox"] { width: 16px; height: 16px; min-width: 16px; min-height: 16px; padding: 0; margin: 0; flex: 0 0 16px; accent-color: currentColor; }
#procurementReviewFields { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
.orders-compact-table .order-item-detail { background: #fff; }
.orders-compact-table .order-item-detail td { border-bottom: 1px solid #e5edf8; padding-top: 12px; padding-bottom: 12px; }
.orders-compact-table .order-item-detail td:nth-child(2) { border-left: 3px solid #bed2f0; }
.multi-product-editor-row { border: 1px solid #dce6f3; border-radius: 8px; padding: 14px; margin-top: 12px; background: #f8fbff; }
.multi-product-editor-row > strong { display: block; margin-bottom: 12px; }
.multi-product-editor-row img, .order-item-detail img { max-width: 64px; max-height: 64px; object-fit: contain; }

/* Edit form: aligned fields, dedicated full-color confirmation rows. */
#orderForm .form-section { margin-top: 16px; padding-top: 16px; }
#orderForm .form-section h3 { margin-bottom: 10px; }
#orderForm .form-grid { gap: 10px 12px; align-items: end; }
#orderForm #priceMatchHint { grid-column: 1 / -1; }
#orderForm textarea[name="custom_info"] { min-height: 76px; }
.order-edit-settings { display: grid; gap: 12px; margin-top: 12px; }
.order-check-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
#orderForm .order-check-row label { margin-top: 0; min-height: 46px; align-self: stretch; }
#orderForm label[hidden], #orderForm .form-section[hidden] { display: none; }
#orderForm .order-check-row { grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }
#orderForm .order-preview-note { display: block; font-size: 13px; color: #536074; }
.order-preview-note input { display: block; width: 100%; margin-top: 5px; }
#orderForm #procurementReviewFields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 0; margin-top: 12px; }
#orderForm #procurementReviewFields[hidden] { display: none; }
#orderForm #procurementReviewFields label { align-self: stretch; min-height: 54px; }
@media(max-width:600px) { .order-check-row, #orderForm #procurementReviewFields { grid-template-columns: 1fr; } }