/* WEnovo R5 - gebundelde klantverbeteringen.
   Presentatie, statusonderscheid, offertelijsten en layout safeguards. */

/* Voorblad: ENOVO-oranje duidelijker, zonder de kop te overschreeuwen. */
body[data-portal="customer"] .login-copy .eyebrow.light{
  color:var(--orange);
  opacity:1;
}
body[data-portal="customer"] .client-marquee{
  margin-top:24px;
}
body[data-portal="customer"] .marquee-track:empty:after{
  content:"Klantlogo's worden geladen";
  color:#89949a;
  font-size:12px;
}

/* Unieke semantische statussen. JS levert per status eigen CSS-variabelen. */
body[data-portal] [data-wenovo-status]{
  background:var(--wenovo-status-bg)!important;
  color:var(--wenovo-status-fg)!important;
  border:1px solid var(--wenovo-status-border)!important;
  box-shadow:none!important;
  white-space:nowrap;
}

/* Offertes: actieve en vervallen historie zijn apart maar rustig bereikbaar. */
.quote-toolbar{align-items:center;justify-content:space-between}
.quote-toolbar>input{min-width:min(360px,100%)}
.quote-view-switch{display:flex;gap:7px;flex-wrap:wrap;margin-left:auto}
.quote-view-switch .button.active{border-color:#d65a16;background:#fff4ec;color:#8a3a0d}
.employee-quotes-page .quote-view-switch{margin:0 0 14px}
.expired-quote-note{color:#6b747a;font-size:12px}

/* Layout safeguards: kaarten/controls mogen elkaar nooit overlappen. */
body[data-portal] .card,
body[data-portal] .article-form,
body[data-portal] .page-head,
body[data-portal] .toolbar,
body[data-portal] .button-row,
body[data-portal] .form-grid,
body[data-portal] .tile-grid{min-width:0;box-sizing:border-box}
body[data-portal] .button-row,
body[data-portal] .toolbar{flex-wrap:wrap}
body[data-portal] .table-wrap{max-width:100%;overflow-x:auto}
body[data-portal] img,body[data-portal] svg,body[data-portal] canvas{max-width:100%}
body[data-portal] .modal{max-width:calc(100vw - 24px);box-sizing:border-box}
body[data-portal] .article-form>header{position:relative;z-index:1;max-width:100%}
body[data-portal] .article-choice-summary{z-index:2}

@media(max-width:760px){
  .quote-toolbar{display:grid;grid-template-columns:1fr}
  .quote-toolbar>input{min-width:0;width:100%}
  .quote-view-switch{margin-left:0}
  .quote-view-switch .button{flex:1 1 160px}
}

/* R5: zachte scheiding in plaats van panelen-op-panelen. */
body[data-portal] .article-form,body[data-portal] .choice-section,body[data-portal] .article-choice-summary{isolation:isolate}
body[data-portal] .page-head>*,body[data-portal] .card>*,body[data-portal] .article-form>*{max-width:100%;min-width:0}
body[data-portal] .toolbar>*{max-width:100%}
body[data-portal] .button-row>.button,body[data-portal] .toolbar>.button{max-width:100%;white-space:normal}

/* Detailmodals: verticale scroll waar nodig, nooit een pagina-brede horizontale scrollbar. */
body[data-portal] .modal{
  overflow-x:hidden;
  overflow-y:auto;
}
body[data-portal] .modal .detail-grid,
body[data-portal] .modal .official-document-list,
body[data-portal] .modal .admin-document-card,
body[data-portal] .modal .document-card,
body[data-portal] .modal .compact-card{
  min-width:0;
  max-width:100%;
}
body[data-portal] .modal .admin-document-card>*{
  min-width:0;
  max-width:100%;
}
body[data-portal] .modal .admin-document-card h3,
body[data-portal] .modal .admin-document-card p,
body[data-portal] .modal .document-card,
body[data-portal] .modal p,
body[data-portal] .modal h2,
body[data-portal] .modal h3{
  overflow-wrap:anywhere;
}
body[data-portal] .modal .table-wrap{
  overflow-x:auto;
}

/* De logo-asset is leidend; de organisatienaam blijft beschikbaar via alt-tekst. */
body[data-portal="customer"] .client-logo span{display:none}