/* Shared light surfaces, including dialogs outside #app. No accounting changes. */
:is(#app,dialog) .compact-summary,:is(#app,dialog) details.card:not([open]){background:#fff;color:#17243b}
:is(#app,dialog) .payment-event{background:var(--payment-fill,#edf4ff);border-color:var(--payment-edge,#bdd3f5);color:#263953}
:is(#app,dialog) .payment-event :is(b,strong,small,span),:is(#app,dialog) .payment-day small{color:inherit}
:is(#app,dialog) .payment-weekday{color:#435670}
:is(#app,dialog) .product-photo{background:#edf2f8;border-color:#cbd8e8}
:is(#app,dialog) .photo-placeholder{color:#53657d}
:is(#app,dialog) details{min-width:0;max-width:100%;overflow-wrap:anywhere}
:is(#app,dialog) summary{color:#263953;cursor:pointer;line-height:1.5}
:is(#app,dialog) details>form,:is(#app,dialog) details>.work-grid{padding:16px}
:is(#app,dialog) form label{min-width:0}
:is(#app,dialog) form :is(input,select,textarea){max-width:100%;min-width:0}
:is(#app,dialog) :is(.table-wrap,.table-card,.nested-table-scroll){max-width:100%;min-width:0;overflow:auto;overscroll-behavior-x:contain}
:is(#app,dialog) .nested-table-scroll{border:1px solid #d7e1ed;border-radius:9px}
:is(#app,dialog) .notice{overflow-wrap:anywhere}
:is(#app,dialog) :focus-visible{outline:3px solid #2563eb;outline-offset:3px}
:is(#app,dialog) .plan-kpi>strong{white-space:normal;overflow-wrap:anywhere;font-size:clamp(18px,1.65vw,24px)}
:is(#app,dialog) .plan-kpi-heading{flex-wrap:wrap}
:is(#app,dialog) .plan-kpi-group{margin:10px 0;padding:12px}
:is(#app,dialog) .plan-load-status{display:block;margin-top:6px;color:#435670;font-size:12px}
dialog{max-width:calc(100vw - 24px);max-height:90dvh;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:20px;border-radius:16px}
dialog .dialog-head{position:sticky;top:-20px;z-index:3;background:#fff;display:flex;gap:16px;align-items:flex-start;justify-content:space-between;padding:14px 0;border-bottom:1px solid #d7e1ed;margin-bottom:16px}
dialog .dialog-head h2{margin:0;min-width:0;overflow-wrap:anywhere;font-size:20px}
dialog .dialog-head button{flex-shrink:0}
dialog .product-cell{min-width:0;overflow-wrap:anywhere}
dialog .table-card,dialog .table-wrap{width:100%}
#history-dialog{width:min(560px,calc(100vw - 24px))}
#history-content table{min-width:0!important;width:100%;table-layout:fixed}
#history-content th:first-child,#history-content td:first-child{width:35%}
#history-content :is(td,th){white-space:normal;overflow-wrap:anywhere;padding:12px 8px;font-variant-numeric:tabular-nums}
#history-content .amount{text-align:right}
#supplier-form{padding:18px}
#production-registries,#product-registry,#supplier-registry{min-width:0;max-width:100%}
#abc-detail-dialog{width:min(760px,calc(100vw - 24px))}
#abc-detail-body dl{display:grid;grid-template-columns:minmax(120px,1fr) minmax(100px,1fr);gap:8px 16px}
#abc-detail-body dt,#abc-detail-body dd{margin:0;padding:10px 0;border-bottom:1px solid #d7e1ed;overflow-wrap:anywhere}
#abc-detail-body dd{text-align:right}
#employee-invite-form fieldset{padding:14px;gap:12px}
#employee-invite-form legend{font-weight:650;padding:0 6px}
.rules-toc{display:flex;flex-wrap:wrap;gap:8px}
.analytics-rules details> :not(summary){margin-left:12px;margin-right:12px}
@media(max-width:600px){
 dialog{padding:14px;width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important}
 dialog .dialog-head{top:-14px;gap:8px}
 dialog .dialog-head h2{font-size:17px}
 dialog .dialog-head button{padding:8px 10px}
 :is(#app,dialog) .plan-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 :is(#app,dialog) .plan-kpi{padding:10px 8px}
 :is(#app,dialog) .plan-kpi>strong{font-size:18px}
 :is(#app,dialog) details>form{padding:12px}
 #supplier-form{padding:12px}
 #history-content :is(td,th){font-size:13px;padding:10px 6px}
 #employee-invite-form fieldset{grid-template-columns:1fr}
 .payment-navigation h3{font-size:17px;min-width:0;overflow-wrap:anywhere}
 .payment-agenda .payment-event{padding:12px}
}

@media(min-width:1000px){#plan-dialog{width:min(1100px,94vw)}#plan-dialog .plan-kpi-group{display:grid;grid-template-columns:125px minmax(0,1fr);gap:12px;align-items:center}#plan-dialog .plan-kpi-heading{display:block}#plan-dialog .plan-kpi-heading span{display:block;margin-top:6px}#plan-dialog .plan-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}#plan-dialog .plan-kpi>strong{font-size:19px}}

#abc-detail-body dd small{display:block;margin-top:5px;color:#53657d}

#document-buyers{padding:16px}#document-buyers h3{margin-top:0}

#employee-invite-form fieldset label{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:start;gap:10px;margin:0;padding:8px 0;line-height:1.5}#employee-invite-form fieldset input[type=checkbox]{width:20px;height:20px;margin:2px 0 0}

#plan-dialog .table-wrap :is(th,td):first-child{white-space:nowrap}

/* Confirmation checkboxes stay next to their full label, including narrow forms. */
[data-order-confirm] label:has(>input[type="checkbox"]){display:grid!important;grid-template-columns:22px minmax(0,1fr);align-items:start;gap:8px;margin:10px 0}
[data-order-confirm] label>input[type="checkbox"]{width:18px!important;height:18px;min-width:18px;max-width:18px;margin:2px 0!important;padding:0}

/* Production demand is visible independently of admitted batches. */
.production-needs{padding:18px;min-width:0}
.production-needs h2{margin-top:0}
.production-needs .table-wrap{max-width:100%;overflow:auto}
.production-needs-table td{vertical-align:top}
.production-needs-table small{display:block;margin-top:6px;white-space:normal}
@media(max-width:600px){
 .production-needs{padding:12px}
 .production-needs-table,.production-needs-table tbody{display:block;width:100%;min-width:0!important}
 .production-needs-table thead{display:none}
 .production-needs-table tr{display:block;border:1px solid #d6e1ef;border-radius:12px;margin:12px 0;padding:10px;background:#fff}
 .production-needs-table td{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:8px;padding:8px 0;white-space:normal;overflow-wrap:anywhere;border:0!important}
 .production-needs-table td:before{content:attr(data-label);color:#536581;font-size:13px}
 .production-needs-table td small,.production-needs-table td details{grid-column:2;min-width:0}
}