body:has(#requirements.on) { padding:12px }
body:has(#requirements.on) #message { margin:0 0 8px; font-size:11px }
#requirements input,#requirements select,#requirements button { min-height:30px; padding:5px 9px; font-size:12px }
#requirements button { white-space:nowrap }
#requirements .req-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px }
#requirements h1 { font-size:21px; margin:0 }
#requirements .req-heading-actions { display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end }
#requirements .req-stock-mode { display:flex;gap:2px;padding:3px;border:1px solid #cbdbea;border-radius:6px;background:#edf3f9 }
#requirements .req-stock-mode button { border:0;background:transparent;color:#59738c;font-weight:600 }
#requirements .req-stock-mode button[aria-pressed="true"] { background:#176ac0;color:#fff;box-shadow:0 1px 3px #133f6a22 }
#requirements .req-stock-mode #reqSampleToggle[aria-pressed="true"] { background:#8b6313 }
#requirementViewContext { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px;padding:7px 10px;margin:0 0 7px;border:1px solid #d9e4ef;border-radius:5px;background:#fff;font-size:12px;color:#536e85 }
#requirementViewContext>div { display:flex;align-items:center;flex-wrap:wrap;gap:9px }
#requirements #requirementViewContext button { min-height:25px;padding:3px 7px;font-size:11px }
.req-mode-label { color:#155da5;background:#eaf3ff;padding:3px 7px;border-radius:4px;font-size:11px }
.req-mode-label.sample { color:#7d5811;background:#fff0c6 }
#requirements .req-sample-notice,.req-sample-notice { margin:7px 0;padding:8px 10px;border:1px solid #e5c16f;border-radius:5px;background:#fff7df;color:#745319;font-size:12px;line-height:1.5 }
.req-sample-mark { display:inline-block;margin-left:5px;padding:1px 4px;border-radius:3px;background:#fff1c8;color:#815c14;font-size:10px }
#requirements .req-help { position:relative; flex-shrink:0; z-index:5 }
#requirements .req-help>summary { cursor:pointer; list-style:none; border:1px solid #c4d6e9; border-radius:5px; background:#fff; color:#1257a0; padding:6px 10px; font-size:12px; font-weight:700 }
#requirements .req-help>summary::-webkit-details-marker { display:none }
#requirements .req-help>summary:focus-visible { outline:2px solid #126fd8; outline-offset:2px }
#requirements .req-help[open]>summary { background:#eaf3ff }
#requirements .req-help-body { position:absolute; right:0; top:calc(100% + 6px); width:min(500px,calc(100vw - 48px)); max-height:65vh; overflow:auto; padding:14px 16px; background:#fff; border:1px solid #c6d6e7; border-radius:6px; box-shadow:0 8px 24px #16395326; font-size:12px; line-height:1.7 }
#requirements .req-help-body h2 { font-size:14px; margin:0 0 8px }
#requirements .req-help-body p { margin:8px 0 }
#requirements .req-help-body ul { margin:8px 0; padding-left:18px }
.req-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0 }
#requirements .req-filter-panel { padding:9px 11px; border:1px solid #d6e1ed; border-radius:6px; background:#fff }
#requirements .req-filter-row { display:flex; align-items:center; flex-wrap:wrap; gap:7px }
#requirements .req-period-row { border-bottom:1px solid #e6edf5; padding-bottom:8px; margin-bottom:8px }
#requirements .req-period-row input { width:145px; min-width:0 }
#requirements .req-filter-label { color:#647d93; font-size:12px }
#requirements .req-period-actions { display:flex; flex-wrap:wrap; gap:6px }
#requirements .req-reset { margin-left:auto; border:0; background:none }
#requirements .req-product-row select { flex:0 1 140px; width:140px; min-width:110px }
#requirements #reqStatus { flex-basis:165px; width:165px }
#requirements #reqSearch { flex:1 1 190px; width:auto; min-width:150px }
#requirements .req-extra-filters:not([hidden]) { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-top:9px; padding-top:9px; border-top:1px dashed #d6e1ed }
#requirements .req-extra-filters label { margin:0; font-size:11px }
#requirements .req-extra-filters select { display:block; width:200px; margin-top:4px }
#requirements .req-filter-hint { font-size:11px; color:#718399; line-height:1.5 }
#requirements .req-extra-summary:not([hidden]) { margin-top:7px; font-size:11px; color:#1257a0; overflow-wrap:anywhere }
#requirements .req-stats { display:flex; flex-wrap:wrap; gap:0; margin:8px 0 0; padding:7px 0; border:1px solid #d6e1ed; border-radius:5px; background:#f8fafd }
#requirements .req-stat { display:flex; flex:1 1 auto; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:5px; padding:0 10px; border-right:1px solid #d6e1ed; line-height:1.6 }
#requirements .req-stat:last-child { border-right:0 }
#requirements .req-stat span { color:#647d93; font-size:11px }
#requirements .req-stat b { color:#173e61; font-size:13px }
#requirements .req-list-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:5px 12px; padding:7px 0 }
#requirements .req-legend { display:flex; gap:12px; flex-wrap:wrap; margin:0 }
#requirements .req-legend .req-badge { background:none; padding:0; color:#557087; display:inline-flex; align-items:center; gap:5px; font-weight:400 }
#requirements .req-legend button.req-badge { padding:4px 7px;min-height:26px;border:1px solid transparent;cursor:pointer }
#requirements .req-legend button.req-badge.selected { border-color:#aac7e3;background:#eef5fc;font-weight:700 }
#requirements .req-legend button.req-badge:focus-visible { outline:2px solid #126fd8;outline-offset:2px }
#requirements .req-legend .req-badge::before { content:''; width:8px; height:8px; border-radius:50%; background:#718399 }
#requirements .req-legend .blue::before { background:#126fd8 }
#requirements .req-legend .green::before { background:#25965f }
#requirements .req-legend .red::before { background:#d9534f }
#requirements .req-list-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px }
#requirements #requirementPager { display:flex; flex-wrap:wrap; gap:5px; margin:0; align-items:center }
#requirements #requirementPager span { font-size:11px; color:#647d93 }
#requirements .req-page-size { flex-shrink:0; margin:0 }
#requirements #reqPageSize { width:110px }
.req-badge { display:inline-block; border-radius:4px; padding:4px 7px; font-size:11px; font-weight:700; white-space:nowrap }
.req-badge.blue { color:#1459a5; background:#e6f0ff }
.req-badge.green { color:#216846; background:#e6f6ed }
.req-badge.red { color:#ae3030; background:#ffe9e8 }
.req-badge.unknown { color:#596b7b; background:#edf0f3 }
#requirementBasis { font-size:11px; line-height:1.6; margin-bottom:8px }
#requirementsList { max-height:calc(100vh - 255px); max-height:calc(100dvh - 255px); min-height:100px; border:1px solid #e0e9f1; border-radius:6px; background:#fff }
#requirementsList:empty,.req-stats:empty { display:none }
.req-table { width:100%;min-width:950px;table-layout:fixed }
.req-table th:nth-child(1) { width:13% }.req-table th:nth-child(2) { width:25% }.req-table th:nth-child(3) { width:15% }.req-table th:nth-child(4) { width:12% }.req-table th:nth-child(5) { width:13% }.req-table th:nth-child(6) { width:11% }.req-table th:nth-child(7) { width:11% }
.req-table th { text-align:left }.req-table th:nth-child(4),.req-table th:nth-child(5),.req-table th:nth-child(6) { text-align:right }
.req-table th,#requirementDetailList th { position:sticky; top:0; z-index:1; background:#edf4fb }
.req-table td { padding:8px; font-size:12px }
#requirements .req-table td,#requirements .req-table th { padding:6px 8px; border-width:0 0 1px; line-height:1.4 }
#requirements .req-table th { height:36px; font-size:11px }
#requirements .req-table td { height:48px }
#requirements .req-table tbody tr:nth-child(even):not(.req-short) { background:#f8fbff }
#requirements .req-table .req-sub { margin-top:2px; font-size:10px }
#requirements .req-table .req-product { margin:0 0 3px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
#requirements .req-table td:first-child .req-badge { white-space:normal }
.req-sub { display:block; color:#718399; font-size:11px; margin-top:4px; font-weight:400 }
.req-product { display:block; font-size:12px; margin-top:5px; max-width:240px }
#requirements .req-part { border:0; background:none; padding:0; min-height:0; text-decoration:underline; font-size:12px }
.req-numeric { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums }
.req-clipped { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.req-clipped .req-sub { overflow:hidden; text-overflow:ellipsis }
.req-short { background:#fffbfa }
#requirementDetailDialog,#planOrderDialog { width:min(1450px,96vw); max-width:96vw; max-height:90vh; padding:16px; border:1px solid #c6d6e7; border-radius:10px; color:#163953; box-shadow:0 15px 60px #16395344 }
#requirementDetailDialog { width:min(1120px,94vw) }
.req-detail-stocks { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:10px 0 }
.req-detail-stocks>div { padding:8px;border:1px solid #dce6ef;border-radius:5px;background:#f7fafd }
.req-detail-stocks span { display:block;font-size:11px;color:#667e93 }.req-detail-stocks b { display:block;margin-top:4px;font-size:14px }
#requirementDetailList table { min-width:850px }
#requirementDetailDialog::backdrop,#planOrderDialog::backdrop { background:#102b465c }
#requirementDetailDialog>.head,#planOrderDialog>.head { position:sticky; top:0; background:white; z-index:3; padding-bottom:10px; border-bottom:1px solid #e0e9f1 }
#requirementDetailDialog h2,#planOrderDialog h2 { margin:0; font-size:16px }
#requirementDetailList,#planOrderList { max-height:45vh; margin-top:10px }
#requirementDetailDialog .tools,#planOrderDialog .tools { margin-bottom:0; flex-wrap:wrap }
#planOrderDialog .order-filters label { font-size:12px; max-width:100% }
#planOrderDialog .order-filters input,#planOrderDialog .order-filters select { min-width:130px; max-width:240px }
#planOrderList th,#planList th,#resultsList th { position:sticky; top:0; z-index:1 }
#planOrderList table { min-width:1200px }
#planList,#resultsList { max-height:55vh }
#plans .plan-list-heading { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px }
#plans .plan-list-heading h2 { margin:0 }
#plans .plan-list-filters { display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:0 0 9px }
#plans .plan-list-filters label { display:flex;align-items:center;gap:6px;margin:0;font-size:12px }
#plans .plan-list-filters input { width:145px;min-height:30px;padding:5px 8px }
#plans .plan-list-filters button { min-height:30px;padding:5px 10px }
#productionPlanCount { font-size:11px;color:#647d93;margin-left:auto }
.plan-order-select { display:flex; gap:8px }
.plan-order-select input { min-width:0 }
.plan-order-select button { flex-shrink:0; white-space:nowrap }
@media(min-width:901px) { #plans .plan-order-field { grid-column:span 2 } }
#planSelectedSummary:not(:empty) { padding:12px; margin-top:12px; background:#f2f7fd; border:1px solid #d9e5f3; border-radius:6px; line-height:1.6 }
#planSelectedSummary p { margin:5px 0; font-size:12px }
.req-stock-lots { max-height:120px; overflow:auto; padding:8px; font-size:12px; line-height:1.8; background:#f4f7fb }
@media(max-width:1200px) { #requirements .req-stat { flex-basis:50%; justify-content:flex-start } #requirements .req-stat:nth-child(2) { border-right:0 } #requirementsList { max-height:calc(100dvh - 300px) } }
@media(max-width:700px) { #requirements .req-heading { align-items:flex-start;flex-wrap:wrap } #requirements h1 { font-size:18px } #requirements .req-product-row select { flex:1 1 40%; width:auto; min-width:0 } #requirements #reqSearch { flex-basis:65%; min-width:0 } #requirements .req-period-row input { width:125px } #requirements .req-stat { flex-basis:100%; border-right:0 } #requirements .req-period-actions { order:1; flex-basis:100% } #requirements .req-list-footer { flex-wrap:wrap } #requirementsList { max-height:55vh }.req-detail-stocks { grid-template-columns:repeat(2,minmax(0,1fr)) } }