/* WEnovo 6.6.0 - fase 4: bestelaanvragen, goedkeuring, voorraadcontrole en veilige MKG-metadata. */
.phase4-page{display:grid;gap:18px}.phase4-page-head{align-items:flex-start}.phase4-head-actions{display:flex;gap:10px;flex-wrap:wrap}.phase4-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.phase4-summary-card{display:grid;gap:4px;padding:16px;border:1px solid var(--line);border-radius:16px;background:#fff;text-align:left;cursor:pointer}.phase4-summary-card:hover,.phase4-summary-card.active{border-color:var(--orange);background:#fff8f2;box-shadow:0 0 0 2px rgba(255,105,20,.08)}.phase4-summary-card b{font-size:1.55rem}.phase4-summary-card span{font-size:.78rem;color:var(--muted)}.phase4-toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}.phase4-toolbar .field{margin:0;min-width:min(420px,100%)}.phase4-filter-row{display:flex;gap:8px;flex-wrap:wrap}.phase4-workflow-note{display:grid;grid-template-columns:repeat(7,auto);align-items:center;gap:10px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(90deg,#fffaf5,#f8fbfc)}.phase4-workflow-note div{display:grid;gap:3px;min-width:0}.phase4-workflow-note span{font-size:.75rem;color:var(--muted)}.phase4-workflow-note i{font-style:normal;color:var(--orange);font-weight:800}.phase4-request-list{display:grid;gap:12px}.phase4-request-card{display:grid;gap:14px;padding:16px;border:1px solid var(--line);border-left:5px solid #95a1aa;border-radius:18px;background:#fff}.phase4-request-card.pending{border-left-color:#d09a12}.phase4-request-card.approved{border-left-color:#17945e}.phase4-request-card.rejected{border-left-color:#c83d35}.phase4-request-card.cancelled{border-left-color:#7f8b94}.phase4-request-card>header{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.phase4-request-title{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.phase4-request-title h3,.phase4-request-title p{width:100%;margin:0}.phase4-request-title h3{margin-top:3px}.phase4-request-title p{font-size:.78rem;color:var(--muted)}.phase4-status,.phase4-urgency{display:inline-flex;align-items:center;padding:6px 9px;border-radius:999px;font-size:.72rem;font-weight:800}.phase4-status.pending{background:#fff4cb;color:#775600}.phase4-status.processing{background:#eaf2ff;color:#24528c}.phase4-status.approved{background:#ddf6e9;color:#126d45}.phase4-status.rejected{background:#ffe6e3;color:#922a25}.phase4-status.cancelled{background:#edf0f2;color:#58636b}.phase4-urgency.normal{background:#eef1f3;color:#4b565e}.phase4-urgency.urgent{background:#fff0df;color:#a34c00}.phase4-urgency.machine-down{background:#ffe2df;color:#9a2721}.phase4-request-quantity{display:grid;place-items:center;min-width:72px;padding:10px;border-radius:14px;background:#f4f6f7}.phase4-request-quantity b{font-size:1.45rem}.phase4-request-quantity span{font-size:.72rem;color:var(--muted)}.phase4-request-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.phase4-request-grid section,.phase4-detail-grid section{display:grid;gap:4px;padding:12px;border:1px solid var(--line);border-radius:13px;background:#fbfcfc}.phase4-request-grid span,.phase4-detail-grid span,.phase4-context-stock span,.phase4-context-machine span,.phase4-order-pill span{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:800}.phase4-request-grid small,.phase4-detail-grid small,.phase4-context-stock small,.phase4-context-machine small{color:var(--muted);font-size:.76rem}.phase4-stock.available,.phase4-context-stock.available{background:#effaf4;border-color:#b8e5cc}.phase4-stock.partial,.phase4-context-stock.partial{background:#fff8e8;border-color:#eed48d}.phase4-stock.none,.phase4-context-stock.none{background:#fff1ef;border-color:#f2c2bd}.phase4-machine-context{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 13px;border-radius:13px;background:#f4f6f7}.phase4-machine-context>span{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:800}.phase4-machine-context small{color:var(--muted)}.phase4-request-card>footer{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}.phase4-nav-badge{display:grid;place-items:center;min-width:22px;height:22px;margin-left:auto;padding:0 6px;border-radius:999px;background:var(--orange);color:#fff;font-size:.7rem}.phase4-table-button{margin-left:5px}

.phase4-request-editor,.phase4-detail,.phase4-decision,.phase4-policy{display:grid;gap:16px}.phase4-editor-head,.phase4-detail-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.phase4-editor-head h2,.phase4-detail-head h2{margin:5px 0}.phase4-editor-head p,.phase4-detail-head p{margin:0;color:var(--muted)}.phase4-step-badge,.phase4-order-pill{display:grid;gap:2px;padding:10px 12px;border-radius:13px;background:#f4f6f7;white-space:nowrap}.phase4-editor-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,.85fr);gap:14px;align-items:start}.phase4-editor-main,.phase4-editor-sidebar{display:grid;gap:12px}.phase4-form-card,.phase4-context-stock,.phase4-context-machine,.phase4-security-card,.phase4-approval-note,.phase4-detail-reason,.phase4-decision-note{padding:14px;border:1px solid var(--line);border-radius:15px;background:#fff}.phase4-form-card{display:grid;gap:12px}.phase4-form-card h3,.phase4-security-card b{margin:0}.phase4-context-stock,.phase4-context-machine{display:grid;gap:5px}.phase4-context-machine.empty-context{background:#f7f9fa}.phase4-security-card{background:#f7f9fa}.phase4-security-card ul{margin:8px 0 0;padding-left:18px;color:var(--muted);font-size:.8rem}.phase4-security-card li+li{margin-top:5px}.phase4-approval-note{background:#fff8ed;border-color:#f0d2a7}.phase4-approval-note p{margin:5px 0 0;color:var(--muted)}.phase4-editor-footer,.phase4-decision footer,.phase4-policy footer,.phase4-detail footer{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.phase4-editor-footer{position:sticky;bottom:-1px;z-index:2;padding:12px 0 2px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 28%)}.phase4-detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.phase4-detail-reason h3,.phase4-decision-note h3{margin:0 0 6px}.phase4-detail-reason p,.phase4-decision-note p{margin:0;color:var(--muted)}.phase4-decision-note{background:#f1faf5;border-color:#c8e8d6}.phase4-history{display:grid;gap:0}.phase4-history article{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;min-height:54px}.phase4-history i{position:relative;width:12px;height:12px;margin-top:4px;border:3px solid #fff;border-radius:50%;background:var(--orange);box-shadow:0 0 0 1px var(--line)}.phase4-history i:after{content:"";position:absolute;left:3px;top:11px;width:2px;height:44px;background:var(--line)}.phase4-history article:last-child i:after{display:none}.phase4-history div{display:grid;gap:3px;padding-bottom:12px}.phase4-history span{font-size:.76rem;color:var(--muted)}.phase4-approver-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.phase4-approver-option{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:13px;background:#fff}.phase4-approver-option span{display:grid;gap:3px}.phase4-approver-option small{color:var(--muted)}.phase4-policy-options{display:grid;gap:9px}.phase4-context-stock.loading{background:#f7f9fa}.phase4-detail .phase4-order-pill{background:#eaf8f1}.phase4-detail .phase4-order-pill b{font-size:1.1rem}

@media(max-width:1100px){.phase4-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.phase4-request-grid,.phase4-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.phase4-editor-layout{grid-template-columns:1fr}.phase4-editor-sidebar{grid-template-columns:repeat(3,minmax(0,1fr))}.phase4-workflow-note{grid-template-columns:1fr}.phase4-workflow-note i{display:none}}
@media(max-width:760px){.phase4-page{gap:12px}.phase4-page-head,.phase4-editor-head,.phase4-detail-head{display:grid}.phase4-head-actions,.phase4-head-actions .button{width:100%}.phase4-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.phase4-summary-card{padding:12px}.phase4-toolbar{align-items:stretch}.phase4-filter-row{display:grid;grid-template-columns:1fr 1fr 1fr;width:100%}.phase4-filter-row .button{min-width:0;padding-left:7px;padding-right:7px;font-size:.73rem}.phase4-workflow-note{padding:12px}.phase4-request-card{padding:13px}.phase4-request-card>header{display:grid;grid-template-columns:minmax(0,1fr) auto}.phase4-request-grid,.phase4-detail-grid{grid-template-columns:1fr}.phase4-machine-context{grid-template-columns:1fr;gap:4px}.phase4-request-card>footer{display:grid;grid-template-columns:1fr 1fr}.phase4-request-card>footer .button{width:100%;min-width:0}.phase4-editor-sidebar{grid-template-columns:1fr}.phase4-approver-list{grid-template-columns:1fr}.phase4-editor-footer{padding-bottom:calc(12px + env(safe-area-inset-bottom));}.phase4-editor-footer .button{flex:1 1 42%}.phase4-decision footer,.phase4-policy footer,.phase4-detail footer{display:grid;grid-template-columns:1fr}.phase4-decision footer .button,.phase4-policy footer .button,.phase4-detail footer .button{width:100%}}
@media(max-width:460px){.phase4-summary{grid-template-columns:1fr 1fr}.phase4-summary-card b{font-size:1.3rem}.phase4-request-card>header{grid-template-columns:1fr}.phase4-request-quantity{justify-self:start;grid-auto-flow:column;gap:6px;min-width:0}.phase4-filter-row{grid-template-columns:1fr}.phase4-request-card>footer{grid-template-columns:1fr}}

/* 6.6 final mobile usability: no form fields hidden behind a sticky action bar. */
@media(max-width:760px){
  .phase4-editor-footer{position:static;z-index:auto;margin-top:4px;padding:14px 0 calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line)}
  .phase4-request-editor{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  html:has(.modal-backdrop:not(.hidden) .phase4-request-editor) .mobile-bottom-nav,
  html:has(.modal-backdrop:not(.hidden) .phase4-detail) .mobile-bottom-nav,
  html:has(.modal-backdrop:not(.hidden) .phase4-decision) .mobile-bottom-nav,
  html:has(.modal-backdrop:not(.hidden) .phase4-policy) .mobile-bottom-nav{display:none!important}
}

/* 6.6 final mobile dialog treatment */
@media(max-width:760px){
  html:has(.modal-backdrop:not(.hidden) .phase4-request-editor) #wenovoMobileBottomNav,
  html:has(.modal-backdrop:not(.hidden) .phase4-detail) #wenovoMobileBottomNav,
  html:has(.modal-backdrop:not(.hidden) .phase4-decision) #wenovoMobileBottomNav,
  html:has(.modal-backdrop:not(.hidden) .phase4-policy) #wenovoMobileBottomNav{display:none!important}
  .modal-backdrop:has(.phase4-request-editor),
  .modal-backdrop:has(.phase4-detail),
  .modal-backdrop:has(.phase4-decision),
  .modal-backdrop:has(.phase4-policy){z-index:300;padding:0;align-items:stretch}
  .modal:has(.phase4-request-editor),
  .modal:has(.phase4-detail),
  .modal:has(.phase4-decision),
  .modal:has(.phase4-policy){width:100%;max-width:none;height:100dvh;max-height:100dvh;border-radius:0;padding:58px 14px calc(22px + env(safe-area-inset-bottom));overscroll-behavior:contain}
  .modal:has(.phase4-request-editor)>.modal-close,
  .modal:has(.phase4-detail)>.modal-close,
  .modal:has(.phase4-decision)>.modal-close,
  .modal:has(.phase4-policy)>.modal-close{position:fixed;z-index:305;top:max(10px,env(safe-area-inset-top));right:12px}
  .phase4-editor-head,.phase4-detail-head{padding-right:48px}
}

/* Keep policy option titles separate from their explanatory text. */
.phase4-policy-options .check>span{display:grid;gap:3px;min-width:0}

/* Reserve the close button's space in the heading, not the whole form. */
.modal:has(.phase4-request-editor,.phase4-detail,.phase4-decision,.phase4-policy)>#modalClose{
  float:none;display:flex;position:sticky;top:0;right:0;margin:0 0 -44px auto;
}
.phase4-editor-head,.phase4-detail-head{padding-right:56px}
@media(max-width:760px){
  .modal:has(.phase4-request-editor,.phase4-detail,.phase4-decision,.phase4-policy)>#modalClose{
    position:fixed;top:max(10px,env(safe-area-inset-top));right:12px;margin:0;
  }
  .phase4-editor-head,.phase4-detail-head{padding-right:0}
}
.phase4-request-list>.empty{display:grid;gap:6px}