.fg-root{width:100%;max-width:none;min-width:0;flex:1;overflow:auto;padding:clamp(12px,2vw,24px);color:var(--dark);background:#F6F8FA}
#app:has(.fg-root){max-width:none;overflow-y:auto}
#shipment.sec.active:has(.fg-root){max-width:none;margin:0;width:100%}
.fg-shell{width:100%;max-width:none;margin:0;min-width:0}
.fg-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin:0 0 16px}
.fg-heading h1{font-size:clamp(1.25rem,2.2vw,1.75rem);line-height:1.2;margin:0 0 5px}
.fg-heading p{color:var(--ink2);font-size:.88rem;margin:0}
.fg-warehouse{font-size:.8rem;font-weight:750;color:var(--ink2);background:#fff;border:1px solid var(--border);border-radius:6px;padding:8px 10px;white-space:nowrap}
.fg-tabs{display:flex;gap:8px;overflow-x:auto;margin-bottom:14px;padding-bottom:2px}
.fg-tab{min-height:42px;flex:0 0 auto;padding:8px 13px;border:1px solid var(--border-input);border-radius:6px;background:#fff;color:var(--ink2);font:inherit;font-size:.86rem;font-weight:750;white-space:nowrap}
.fg-tab[aria-selected="true"]{background:#312E81;color:#fff;border-color:#312E81}
.fg-panel{background:#fff;border:1px solid var(--border);border-radius:9px;box-shadow:var(--sh-sm);min-width:0;overflow:hidden}
.fg-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 18px;border-bottom:1px solid #EAECF0}
.fg-panel-head h2{font-size:1rem;margin:0 0 4px}.fg-panel-head p{font-size:.82rem;color:var(--ink2);margin:0}
.fg-panel-body{padding:16px 18px;min-width:0}
.fg-btn{display:inline-flex;justify-content:center;align-items:center;gap:6px;min-height:42px;border:1px solid #C7CDD7;border-radius:6px;background:#fff;color:#344054;padding:8px 12px;font:inherit;font-size:.84rem;font-weight:750;cursor:pointer;text-decoration:none}
.fg-btn:hover{background:#F2F4F7}.fg-btn:focus-visible,.fg-input:focus-visible,.fg-select:focus-visible,.fg-textarea:focus-visible{outline:3px solid #A5B4FC;outline-offset:2px}
.fg-btn-primary{background:#4338CA;color:#fff;border-color:#4338CA}.fg-btn-primary:hover{background:#3730A3}.fg-btn-danger{color:#B42318;border-color:#F1B6B1}.fg-btn-quiet{background:transparent;border-color:transparent;color:#475467}.fg-btn:disabled{opacity:.5;cursor:not-allowed}
.fg-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fg-toolbar{display:grid;grid-template-columns:minmax(180px,1.4fr) minmax(160px,1fr) minmax(150px,.8fr);gap:10px;margin-bottom:14px}
.fg-field{display:block;min-width:0}.fg-label{display:block;font-size:.78rem;font-weight:750;margin:0 0 5px;color:#344054}
.fg-input,.fg-select,.fg-textarea{display:block;width:100%;min-height:42px;padding:8px 10px;border:1px solid #C7CDD7;border-radius:6px;background:#fff;color:#101828;font:inherit;font-size:.88rem}
.fg-textarea{min-height:74px;resize:vertical}
/* a touch screen (the factory tablet): 44px targets and 16px text in inputs (no zoom on focus); the mouse layout above is unchanged. A wrong quantity is outlined in red (audit 2026-11-06) */
@media (pointer:coarse){.fg-btn{min-height:44px}.fg-input,.fg-select,.fg-textarea{min-height:44px;font-size:16px}}
.fg-input[aria-invalid="true"]{border-color:#B42318;box-shadow:0 0 0 2px #FEE4E2}
.fg-note{font-size:.78rem;color:#667085;margin:6px 0 0;line-height:1.45}
.fg-banner{padding:10px 12px;margin:0 0 12px;border:1px solid #B2CCFF;border-left:4px solid #4F46E5;border-radius:6px;background:#F5F8FF;color:#344054;font-size:.83rem;line-height:1.45}
.fg-banner-error{border-color:#FDA29B;border-left-color:#D92D20;background:#FFF5F4;color:#912018}.fg-banner-warn{border-color:#FEC84B;border-left-color:#DC6803;background:#FFFAEB;color:#7A2E0E}.fg-banner-success{border-color:#75E0A7;border-left-color:#039855;background:#ECFDF3;color:#05603A}
.fg-table-wrap{width:100%;overflow-x:auto}.fg-table{width:100%;border-collapse:collapse;font-size:.84rem}.fg-table th,.fg-table td{text-align:left;padding:10px 9px;vertical-align:top;border-bottom:1px solid #EAECF0}.fg-table th{font-size:.73rem;color:#667085;text-transform:uppercase;letter-spacing:.04em;background:#F9FAFB}.fg-table tr:last-child td{border-bottom:0}
.fg-card-list{display:grid;gap:10px}.fg-card{border:1px solid #D0D5DD;border-radius:7px;background:#fff;min-width:0}.fg-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:12px 13px;background:#F9FAFB;border-bottom:1px solid #EAECF0}.fg-card-title{font-size:.9rem;font-weight:800;line-height:1.3}.fg-card-sub{font-size:.77rem;color:#667085;margin-top:3px}.fg-card-body{padding:10px 13px;min-width:0}
.fg-order-line,.fg-plan-line,.fg-allocation{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #EAECF0;min-width:0}.fg-order-line:last-child,.fg-plan-line:last-child,.fg-allocation:last-child{border-bottom:0}
.fg-product-name{font-weight:750;font-size:.87rem;line-height:1.28;overflow-wrap:anywhere}.fg-product-spec{font-size:.78rem;color:#667085;margin-top:3px;overflow-wrap:anywhere}.fg-product-code{color:#667085;font-weight:500}
.fg-stats{display:flex;justify-content:flex-end;gap:7px 12px;flex-wrap:wrap;text-align:right;font-size:.73rem;color:#475467}.fg-stats span{white-space:nowrap}.fg-stats strong{color:#101828;font-size:.8rem}
.fg-status{display:inline-flex;align-items:center;min-height:24px;padding:3px 7px;border-radius:5px;font-size:.71rem;font-weight:800;background:#EFF4FF;color:#3538CD;white-space:nowrap}.fg-status-ok{background:#ECFDF3;color:#067647}.fg-status-warn{background:#FFFAEB;color:#B54708}.fg-status-muted{background:#F2F4F7;color:#475467}
.fg-products-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:16px;align-items:start}
.fg-product-tools{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,.6fr);gap:9px;margin-bottom:10px}
.fg-category-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:10px;align-items:start;max-height:min(65dvh,720px);overflow-y:auto;scroll-padding:8px;padding:1px}
.fg-product{display:grid;grid-template-columns:minmax(0,1fr) 44px 70px 44px;grid-template-areas:"name minus box plus" "info minus box plus" ". echo echo echo";gap:0 3px;align-items:center;padding:3px 12px;border-bottom:1px solid #EAECF0;background:#fff;min-width:0;min-height:50px}
.fg-product:last-child{border-bottom:0}
.fg-product[data-selected="true"]{background:#F5F5FF;box-shadow:inset 3px 0 0 #6366F1}
.fg-product[hidden],.fg-empty[hidden]{display:none}
.fg-product-info{min-width:0}.fg-stock-note{font-size:.72rem;color:#667085;margin-top:4px}.fg-stock-low{color:#B54708;font-weight:700}
.fg-selected{border:1px solid #D0D5DD;border-radius:7px;padding:12px;background:#FCFCFD;position:sticky;top:8px;min-width:0}
.fg-selected h3{font-size:.92rem;margin:0 0 8px}.fg-selected-empty{padding:14px 8px;text-align:center;border:1px dashed #D0D5DD;border-radius:6px;color:#667085;font-size:.8rem}
.fg-selected-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid #EAECF0}.fg-selected-row:last-child{border-bottom:0}
.fg-qty-inline .fg-input{min-height:44px;font-size:16px}.fg-qty-inline .fg-btn{min-height:44px}
.fg-product-name{font-size:1rem;line-height:1.4}.fg-product-spec{font-size:.875rem;line-height:1.4}
.fg-selected .fg-textarea{font-size:16px}

/* Nested customer → order groups on the finished-goods order list. */
.fg-customer-group,.fg-order-group{display:block;min-width:0;overflow:hidden;background:#fff;border:1px solid #D0D5DD;border-radius:6px}
.fg-customer-group{border-left:4px solid #4338CA}
.fg-customer-group+.fg-customer-group{margin-top:12px}
.fg-customer-group>summary,.fg-order-group>summary{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 13px;cursor:pointer;list-style:none;overflow-wrap:anywhere}
.fg-customer-group>summary::-webkit-details-marker,.fg-order-group>summary::-webkit-details-marker{display:none}
.fg-customer-group>summary::before,.fg-order-group>summary::before{content:"";flex:0 0 8px;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s ease}
.fg-customer-group[open]>summary::before,.fg-order-group[open]>summary::before{transform:rotate(45deg)}
.fg-customer-group>summary{background:#F5F5FF;color:#25236A;font-weight:800}
/* The <summary> IS .fg-customer-summary / .fg-order-summary, and its ::before arrow is one more flex/grid item: with space-between the
   name landed in the middle of a wide screen (owner 2026-10-28, 1876px). Customer header = arrow, name, "· n pesanan", chips, all from the left. */
.fg-customer-summary{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:4px 10px;min-width:0;overflow-wrap:anywhere}
.fg-cust-name{min-width:0;font-weight:800}.fg-cust-code{font-weight:900;color:var(--p,#4F46E5)}.fg-cust-n{flex:none;font-weight:650;color:#475467;white-space:nowrap}.fg-customer-summary .fg-po-group-chip{margin-left:0}
.fg-order-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:0 0 auto}
.fg-order-actions .fg-btn{min-height:44px}
.fg-order-group{margin:0 12px 10px;border-color:#D0D5DD;border-radius:5px}
.fg-order-group>summary{background:#F9FAFB;color:#344054;font-weight:750}
.fg-customer-group>summary:focus-visible,.fg-order-group>summary:focus-visible{outline:3px solid #A5B4FC;outline-offset:-3px}
.fg-customer-orders,.fg-order-products{min-width:0;padding:10px 12px}
.fg-order-products{padding-top:2px}
.fg-order-products .fg-order-line{grid-template-columns:minmax(0,1fr) minmax(130px,auto);align-items:start;gap:12px}
.fg-order-qty{display:grid;grid-template-columns:repeat(2,minmax(90px,1fr));gap:6px;min-width:0}
.fg-order-qty>*,.fg-qty-unassigned,.fg-qty-planned,.fg-qty-shipped{display:block;min-width:0;padding:6px 8px;border:1px solid #D0D5DD;border-radius:3px;text-align:center;overflow-wrap:anywhere}
.fg-order-qty small{display:block;font-size:.68rem;line-height:1.2;font-weight:700;color:inherit}
.fg-order-qty strong{display:block;margin-top:3px;font-size:.88rem;line-height:1.25;color:inherit}
.fg-qty-unassigned{background:#FFFAEB;border-color:#FEC84B;color:#7A2E0E}
.fg-qty-planned{background:#EFF8FF;border-color:#84CAFF;color:#175CD3}
.fg-qty-shipped{background:#ECFDF3;border-color:#75E0A7;color:#067647}
.fg-trip-total{min-width:0;margin:12px 0 0;padding:12px 14px;background:#F9FAFB;border:1px solid #D0D5DD;border-left:4px solid #039855;border-radius:4px}
.fg-trip-total h3,.fg-trip-total h4{margin:0 0 8px;font-size:.9rem;line-height:1.35;color:#344054;overflow-wrap:anywhere}
.fg-trip-total .fg-order-line{grid-template-columns:minmax(0,1fr) auto}
.fg-trip-load-items{display:grid;gap:6px;min-width:0}
.fg-trip-load-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start;padding:8px 0;border-bottom:1px solid #EAECF0;overflow-wrap:anywhere}
.fg-trip-load-item:last-child{border-bottom:0}
@media(max-width:650px){
  .fg-customer-group>summary,.fg-order-group>summary{align-items:flex-start;min-height:48px;padding:12px 10px}
  .fg-order-group{margin:0 7px 9px}
  .fg-order-actions{width:100%}
  .fg-customer-orders,.fg-order-products{padding:8px}
  .fg-order-products .fg-order-line{grid-template-columns:minmax(0,1fr);gap:8px;padding:10px 0}
  .fg-order-qty{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:5px}
  .fg-order-qty>*,.fg-qty-unassigned,.fg-qty-planned,.fg-qty-shipped{padding:7px 4px}
  .fg-order-qty small{font-size:.65rem}
  .fg-trip-total{padding:10px}
}
@media(prefers-reduced-motion:reduce){.fg-customer-group>summary::before,.fg-order-group>summary::before{transition:none}}
@media(min-width:1200px){.fg-card-list{grid-template-columns:repeat(auto-fit,minmax(min(100%,560px),1fr));align-items:start}}
@media(max-width:1100px){.fg-products-layout{grid-template-columns:minmax(0,1fr)}.fg-selected{position:static}.fg-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}.fg-tab{min-width:0;white-space:normal;line-height:1.4}}
.fg-footer-actions{display:flex;justify-content:space-between;gap:10px;align-items:center;padding-top:12px;margin-top:10px;border-top:1px solid #EAECF0}
.fg-shipment-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}.fg-shipment-form .fg-field-note{grid-column:1/-1}
.fg-trip-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:10px 12px;background:#F9FAFB;border:1px solid #EAECF0;border-radius:6px;margin:10px 0}
.fg-trip-summary div{min-width:0}.fg-trip-summary small{display:block;color:#667085;font-size:.7rem}.fg-trip-summary strong{display:block;font-size:.82rem;overflow-wrap:anywhere}
.fg-empty{padding:22px 14px;text-align:center;border:1px dashed #D0D5DD;border-radius:7px;color:#667085;font-size:.84rem}
.fg-history{margin-top:16px;border:1px solid #D0D5DD;border-radius:7px;background:#fff}.fg-history>summary{cursor:pointer;list-style:none;padding:12px 14px;font-weight:750;font-size:.86rem}.fg-history>summary::-webkit-details-marker{display:none}.fg-history[open]>.fg-history-body{padding:0 14px 14px}
.fg-history .card{box-shadow:none;margin:0;padding:0;border:0}.fg-history .card-title{display:none}
.fg-history .ship-card,.fg-history .ship-grp-item{cursor:pointer}
.fg-loading{padding:36px 14px;text-align:center;color:#667085}.fg-spinner{width:26px;height:26px;margin:0 auto 10px;border:3px solid #E4E7EC;border-top-color:#4F46E5;border-radius:50%;animation:fgspin .8s linear infinite}@keyframes fgspin{to{transform:rotate(360deg)}}
.fg-modal-backdrop{position:fixed;inset:0;z-index:120;background:rgba(16,24,40,.52);display:flex;align-items:center;justify-content:center;padding:16px}.fg-modal{width:min(680px,100%);max-height:min(90dvh,900px);overflow:auto;background:#fff;border-radius:9px;box-shadow:0 24px 50px rgba(16,24,40,.25)}.fg-modal-head{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;background:#fff;border-bottom:1px solid #EAECF0}.fg-modal-head h2{font-size:1rem;margin:0}.fg-modal-body{padding:14px 16px}
@media(max-width:900px){.fg-category-list{grid-template-columns:repeat(2,minmax(0,1fr))}.fg-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}.fg-shipment-form,.fg-trip-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.fg-root{padding:10px 8px 24px}.fg-heading{display:block}.fg-warehouse{display:inline-block;margin-top:8px}.fg-tabs{gap:6px}.fg-tab{min-height:40px;padding:7px 10px;font-size:.8rem}.fg-panel-head,.fg-panel-body{padding:12px}.fg-panel-head{align-items:center}.fg-panel-head .fg-btn{flex:none}.fg-toolbar,.fg-products-layout,.fg-product-tools{grid-template-columns:minmax(0,1fr)}.fg-selected{position:static}.fg-category-list{grid-template-columns:minmax(0,1fr);max-height:65dvh;overflow-y:auto}.fg-order-line,.fg-plan-line,.fg-allocation{grid-template-columns:minmax(0,1fr);gap:6px}.fg-stats{justify-content:flex-start;text-align:left}.fg-shipment-form,.fg-trip-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.fg-footer-actions{align-items:stretch;flex-direction:column}.fg-footer-actions .fg-btn{width:100%}.fg-table-wrap{overflow:visible}.fg-table,.fg-table tbody,.fg-table tr,.fg-table td{display:block;width:100%}.fg-table thead{display:none}.fg-table tr{border:1px solid #EAECF0;border-radius:7px;margin-bottom:9px;padding:6px}.fg-table td{display:flex;justify-content:space-between;gap:10px;border:0;padding:6px}.fg-table td:before{content:attr(data-label);font-size:.72rem;font-weight:750;color:#667085;flex:0 0 42%}.fg-history[open]>.fg-history-body{padding:0 8px 10px}}
@media(max-width:380px){.fg-shipment-form,.fg-trip-summary{grid-template-columns:minmax(0,1fr)}}
.fg-bonus{margin-top:8px}.fg-bonus .fg-input{min-height:44px}.fg-bonus .fg-input:disabled{background:#F2F4F7;color:#98A2B3}.fg-bonus-negative{color:#B54708}
.fg-print-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:10px;padding-top:10px;border-top:1px dashed #D0D5DD}.fg-print-open{min-height:46px;max-width:100%;white-space:normal;text-align:left;justify-content:flex-start}.fg-print-no{color:#475467}.fg-print-box{margin-top:8px}.fg-print-title{font-weight:800}.fg-print-head{margin-bottom:10px;line-height:1.5}.fg-print-line{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:10px;align-items:end;padding:8px 0;border-top:1px solid #EAECF0}.fg-print-pname{font-weight:750;overflow-wrap:anywhere}.fg-print-qty{font-size:.84rem;color:#475467}.fg-sj-ctn{min-height:48px;font-size:18px}.fg-print-go{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.fg-print-go .fg-btn{min-height:54px;flex:1 1 120px}
.fg-fk-saved{color:#067647;font-weight:700}.fg-fk-due{margin:0 0 10px}.fg-fk-due .fg-input{min-height:48px;font-size:16px}.fg-fk-basis{margin-top:3px;font-size:13px;font-weight:600;color:#475467}
.fg-fk-line{display:grid;grid-template-columns:minmax(0,1fr) 130px 120px;gap:6px 10px;align-items:end;padding:8px 6px;border-top:1px solid #EAECF0}.fg-fk-missing{background:#FFFAEB}
.fg-fk-price{min-height:48px;font-size:18px;text-align:right}.fg-fk-amt{text-align:right;font-weight:750;font-variant-numeric:tabular-nums;min-height:24px;overflow-wrap:anywhere}
.fg-fk-hint{grid-column:1/-1;font-size:.84rem;color:#B54708;font-weight:700}.fg-fk-badge{grid-column:1/-1;justify-self:start;font-size:.75rem;font-weight:700;color:#344054;background:#F2F4F7;border:1px solid #D0D5DD;border-radius:999px;padding:2px 10px}
.fg-fk-hint[hidden],.fg-fk-badge[hidden],.fg-fk-need[hidden]{display:none}
/* Faktur -> Piutang line under "Faktur tercetak" (docs/RECEIVABLES.md 11.3): amber only when Office must act */
.fg-fk-piutang{margin-top:6px;font-weight:700;overflow-wrap:anywhere}.fg-fk-piutang-warn{padding:6px 8px;border:1px solid #FEC84B;border-left:4px solid #DC6803;border-radius:4px;background:#FFFAEB;color:#7A2E0E}
.fg-fk-echo{grid-column:1/-1;font-size:.9rem;font-weight:800;color:#101828;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.fg-fk-echo:empty{display:none}.fg-fk-echo-bad{font-size:.84rem;color:#B42318}
.fg-fk-sums{margin-top:10px;display:grid;gap:4px;font-variant-numeric:tabular-nums}.fg-fk-sums>div{display:flex;justify-content:space-between;gap:12px}.fg-fk-total{font-size:1.2rem;font-weight:800;border-top:2px solid #344054;padding-top:6px}
.fg-fk-need{margin-top:12px;color:#B54708;font-weight:800}
@media(max-width:650px){.fg-fk-line{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.fg-fk-line .fg-print-item{grid-column:1/-1}.fg-fk-amt{align-self:center}}
/* itpin step 3b: customer PO changes Office has not seen yet. Orange = the app's one warning colour (--warn). */
.fg-order-group.fg-po-unseen{border-left:4px solid var(--warn,#D97706)}
/* Customer PO number + date on the card title ("PO 4500001234 · 11 Jan 2026") and the two form fields under Pelanggan. */
.fg-po-cust{margin-left:6px;font-size:.8rem;font-weight:750;color:var(--ink2,#475467);overflow-wrap:anywhere}
.fg-po-fields{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:8px 10px;margin-top:10px}
.fg-po-fields .fg-input{min-width:0;min-height:44px;font-size:16px}
.fg-po-wait{margin:10px 0 0}
@media(max-width:650px){.fg-po-fields{grid-template-columns:1fr}}
.fg-po-chip-row{margin-top:5px}
.fg-po-group-chip{margin-left:6px;vertical-align:middle}
.fg-tab-badge{display:inline-block;margin-left:2px;padding:0 6px;border-radius:5px;background:#FFFAEB;color:#B54708;font-weight:800}
.fg-po-diff{margin-top:4px;font-size:.88rem;color:#B54708}.fg-po-diff s{color:#98A2B3}.fg-po-diff strong{color:#B54708}
.fg-po-who{margin-left:4px;font-size:.75rem;color:var(--muted,#667085)}
.fg-po-new{font-weight:800}
.fg-po-meta{display:flex;flex-wrap:wrap;gap:4px 16px;margin-bottom:8px;font-size:.88rem;color:var(--ink2,#475467)}.fg-po-meta strong{color:var(--dark,#101828)}
.fg-po-note{overflow-wrap:anywhere}
.fg-po-was s{color:#98A2B3}
.fg-po-history{margin-top:10px;font-size:.82rem;color:var(--muted,#667085)}
.fg-po-history>summary{display:flex;align-items:center;min-height:36px;cursor:pointer}
.fg-po-history:not([open])>*:not(summary){display:none!important}
.fg-po-events{margin:4px 0 0;padding-left:18px;color:var(--ink2,#475467);overflow-wrap:anywhere}.fg-po-events li{margin:3px 0}
.fg-po-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.fg-po-mode{display:inline-flex;border:1px solid var(--border-input,#D0D5DD);border-radius:6px;overflow:hidden}
.fg-po-mode-btn{min-height:44px;padding:8px 14px;border:0;background:#fff;color:var(--ink2,#475467);font:inherit;font-size:.86rem;font-weight:750}
.fg-po-mode-btn+.fg-po-mode-btn{border-left:1px solid var(--border-input,#D0D5DD)}
.fg-po-mode-btn[aria-pressed="true"]{background:var(--p,#4F46E5);color:#fff}
.fg-po-filter{min-height:44px;padding:8px 12px;border:1px solid var(--border-input,#D0D5DD);border-radius:999px;background:#fff;color:var(--ink2,#475467);font:inherit;font-size:.86rem;font-weight:750}
.fg-po-filter[aria-pressed="true"]{background:var(--p,#4F46E5);border-color:var(--p,#4F46E5);color:#fff}
.fg-po-filter-n{display:inline-block;min-width:22px;margin-left:4px;padding:0 6px;border-radius:999px;background:#FFFAEB;color:#B54708;text-align:center}
.fg-pp-note{margin:0 0 8px}
.fg-pp-wrap{width:100%;max-width:100%;overflow-x:auto;border:1px solid #EAECF0;border-radius:7px;background:#fff}
.fg-pp{min-width:100%;border-collapse:collapse;font-size:.84rem}
.fg-pp th,.fg-pp td{padding:6px 8px;border-bottom:1px solid #EAECF0;text-align:right;white-space:nowrap;vertical-align:top}
.fg-pp tbody tr:last-child th,.fg-pp tbody tr:last-child td{border-bottom:0}
.fg-pp thead th{font-size:.72rem;font-weight:750;color:var(--muted,#667085);background:#F9FAFB}
.fg-pp .fg-pp-name{position:sticky;left:0;z-index:1;min-width:130px;max-width:200px;text-align:left;white-space:normal;background:#fff;font-weight:700}
.fg-pp thead .fg-pp-name{background:#F9FAFB}
.fg-pp .fg-pp-name small{display:block;font-weight:500;color:var(--muted,#667085)}
.fg-pp .fg-pp-total{font-weight:800;background:#F9FAFB}
.fg-pp-cell>summary{display:block;min-height:30px;padding-top:4px;list-style:none;cursor:pointer;font-weight:700;color:var(--p,#4F46E5)}
.fg-pp-cell>summary::-webkit-details-marker{display:none}
.fg-pp-cell:not([open])>*:not(summary){display:none!important}
.fg-pp-cell ul{margin:2px 0 0;padding:0;list-style:none;text-align:left;font-size:.74rem;color:var(--ink2,#475467)}
.fg-pp-cust{display:flex;flex-wrap:wrap;gap:1px 8px;margin-top:2px;max-width:170px;white-space:normal;text-align:left;font-size:.72rem;font-weight:600;color:var(--ink2,#475467)}
.fg-pp-cust b{font-weight:800;color:var(--dark,#101828)}
/* Kalender (delivery calendar stage 1): compact month grid + selected day + "Belum dijadwalkan". Orange stays the
   one "customer change not seen" signal (--warn), as on the order cards. */
.fg-cal-body{padding:10px 12px}
.fg-cal-head{display:flex;align-items:center;gap:6px;margin:0 0 6px;flex-wrap:wrap}
.fg-cal-month{font-size:1rem;min-width:0;white-space:nowrap;text-align:center;flex:0 1 auto}
.fg-cal-nav{min-width:44px;min-height:44px;padding:4px 8px;font-size:1.3rem;line-height:1}
.fg-cal-todaybtn{min-height:44px;padding:6px 10px}
.fg-cal-belumbtn{min-height:44px;padding:6px 10px;margin-left:auto}
.fg-cal-belumbtn b{display:inline-block;min-width:22px;padding:0 6px;border-radius:999px;background:#F2F4F7;color:#344054;text-align:center}
.fg-cal-dow,.fg-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.fg-cal-dow span{font-size:.7rem;font-weight:750;color:#667085;text-align:center;padding:2px 0}
.fg-cal-cell{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;min-height:46px;padding:3px 4px;border:1px solid #EAECF0;border-radius:5px;background:#fff;color:#101828;font:inherit;text-align:left;cursor:pointer;overflow:hidden}
.fg-cal-cell:hover{background:#F2F4F7}
.fg-cal-cell:focus-visible{outline:3px solid #A5B4FC;outline-offset:1px}
.fg-cal-out{background:#F9FAFB;color:#98A2B3}
.fg-cal-dn{font-size:.78rem;font-weight:800;line-height:1.2}
.fg-cal-today .fg-cal-dn{display:inline-block;min-width:20px;padding:0 4px;border-radius:999px;background:#312E81;color:#fff;text-align:center}
.fg-cal-sel{border:2px solid #4338CA;background:#EEF2FF}
.fg-cal-unseen{border-left:4px solid var(--warn,#D97706)}
.fg-cal-n{font-size:.7rem;font-weight:750;line-height:1.25;white-space:nowrap;color:#344054}
.fg-cal-rq{padding:0 3px;border:1px dashed #98A2B3;border-radius:3px;color:#475467}
.fg-cal-names{display:none}
.fg-cal-day{margin-top:10px}
.fg-cal-dayttl{font-size:.95rem;margin:0 0 4px}
.fg-cal-todaytag{font-size:.72rem;font-weight:800;color:#312E81;background:#EEF2FF;border-radius:4px;padding:1px 6px;vertical-align:middle}
.fg-cal-lbl{margin:8px 0 4px;font-size:.74rem;font-weight:800;color:#667085;text-transform:uppercase;letter-spacing:.03em}
.fg-cal-empty{padding:12px}
.fg-cal-trip{border:1px solid #D0D5DD;border-radius:6px;margin:0 0 8px;padding:6px 8px;min-width:0}
.fg-cal-trip-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:.84rem;min-width:0}
.fg-cal-plate{font-weight:800;border:1.5px solid #344054;border-radius:4px;padding:0 6px;white-space:nowrap}
.fg-cal-cust{margin:6px 0 2px;font-size:.8rem;font-weight:800;color:#344054;overflow-wrap:anywhere}
.fg-cal-po{min-width:0;border-radius:5px}
.fg-cal-po.fg-po-unseen{border-left:4px solid var(--warn,#D97706);padding-left:4px}
.fg-cal-po-btn{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;width:100%;min-height:44px;padding:6px 8px;border:1px solid #EAECF0;border-radius:5px;background:#fff;color:#101828;font:inherit;font-size:.86rem;text-align:left;cursor:pointer;overflow-wrap:anywhere}
.fg-cal-po-btn[aria-expanded="true"]{border-color:#4338CA;background:#F5F5FF}
.fg-cal-po-no{font-weight:800}
.fg-cal-qty{font-weight:750}
.fg-cal-u{white-space:nowrap}
.fg-cal-meta{font-size:.78rem;color:#667085}
.fg-cal-meta b{color:#101828}
.fg-cal-card{margin:6px 0 4px}
.fg-cal-card .fg-order-group{margin:0}
.fg-cal-belum{margin-top:10px;border:1px solid #D0D5DD;border-radius:6px;background:#fff}
.fg-cal-belum>summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 10px;cursor:pointer;font-weight:800;font-size:.88rem;list-style:none}
.fg-cal-belum>summary::-webkit-details-marker{display:none}
.fg-cal-belum:not([open])>*:not(summary){display:none!important}
.fg-cal-belum-list{padding:0 8px 8px}
.fg-cal-legend{margin-top:8px}
/* Kalender views (owner 2026-10-14): Bulan / Minggu / Hari, Day view with "Buat kirim". Phone first: 44px targets,
   one-line trip header rows, no sideways scroll at 360px. */
.fg-cal-modes{display:flex;gap:4px;margin:0 0 6px}
.fg-cal-mode{flex:1 1 0;min-width:0;min-height:44px;border:1px solid #C7CDD7;border-radius:6px;background:#fff;color:#344054;font:inherit;font-size:.86rem;font-weight:800;cursor:pointer}
.fg-cal-mode[aria-pressed="true"]{background:#312E81;color:#fff;border-color:#312E81}
.fg-cal-mode:focus-visible,.fg-cal-wday:focus-visible,.fg-cal-pk-tog:focus-visible{outline:3px solid #A5B4FC;outline-offset:1px}
.fg-cal-strip .fg-cal-cell{min-height:50px}
.fg-cal-dtop{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:0 0 4px}
.fg-cal-dtop .fg-cal-dayttl{margin:0}
.fg-cal-newbtn{min-height:44px;white-space:nowrap}
.fg-cal-sec{margin-top:8px;border:1px solid #D0D5DD;border-radius:6px;background:#fff;min-width:0}
.fg-cal-sec>summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 10px;cursor:pointer;font-weight:800;font-size:.9rem;list-style:none}
.fg-cal-sec>summary::-webkit-details-marker{display:none}
.fg-cal-sec>summary::after{content:'▾';margin-left:auto;color:#667085}
.fg-cal-sec:not([open])>summary::after{content:'▸'}
.fg-cal-sec-n{min-width:22px;padding:0 6px;border-radius:999px;background:#F2F4F7;color:#344054;text-align:center}
.fg-cal-sec:not([open])>*:not(summary){display:none!important}
.fg-cal-sec-body{padding:0 8px 8px;min-width:0}
.fg-cal-dhead{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;min-width:0;font-size:.84rem;white-space:nowrap}
.fg-cal-dno,.fg-cal-dhead .fg-cal-plate,.fg-cal-dst{flex:none}
.fg-cal-drv{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.fg-cal-dst{font-size:.72rem}
.fg-cal-noplate{border-style:dashed;border-color:#D92D20;color:#B42318}
.fg-cal-prods{display:flex;flex-direction:column;width:100%;font-size:.84rem;color:#344054}
.fg-cal-prod{display:flex;justify-content:space-between;gap:8px;min-width:0}
.fg-cal-pname{min-width:0;overflow-wrap:anywhere}
.fg-cal-prod b{white-space:nowrap}
.fg-cal-po-ro{cursor:default}
.fg-cal-tacts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.fg-cal-tacts .fg-btn{min-height:44px;flex:1 1 140px}
.fg-cal-week{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.fg-cal-wday{display:flex;flex-direction:column;gap:2px;width:100%;min-width:0;min-height:48px;padding:6px 10px;border:1px solid #EAECF0;border-radius:6px;background:#fff;color:#101828;font:inherit;text-align:left;cursor:pointer}
.fg-cal-wtop{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%}
.fg-cal-wd{font-weight:800;white-space:nowrap}
.fg-cal-wn{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.fg-cal-wtrips{display:flex;flex-direction:column;width:100%;min-width:0;font-size:.8rem;color:#475467}
.fg-cal-wtrips span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fg-cal-wtoday .fg-cal-wd{color:#312E81}
.fg-cal-wsel{border:2px solid #4338CA}
.fg-cal-editor{margin:6px 0}
.fg-cal-editor>.fg-panel{margin-bottom:8px!important}
.fg-cal-picker{margin:8px 0;padding-top:8px;border-top:1px solid #EAECF0;min-width:0}
.fg-cal-pk-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.fg-cal-pk-n{font-size:.8rem;font-weight:800;color:#312E81;white-space:nowrap}
.fg-cal-pk-hint{margin:2px 0 0}
.fg-cal-pk-list{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.fg-cal-pk{border:1px solid #EAECF0;border-radius:6px;padding:4px;min-width:0}
.fg-cal-pk-on{border-color:#4338CA;background:#F5F5FF}
.fg-cal-pk-tog{display:flex;align-items:flex-start;gap:8px;width:100%;min-height:44px;padding:4px;border:0;background:transparent;color:#101828;font:inherit;text-align:left;cursor:pointer}
.fg-cal-pk-tog:disabled{cursor:not-allowed;opacity:.6}
.fg-cal-pk-box{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:2px solid #667085;border-radius:5px;background:#fff;color:#fff;font-weight:900}
.fg-cal-pk-on .fg-cal-pk-box{background:#4338CA;border-color:#4338CA}
.fg-cal-pk-txt{display:flex;flex-direction:column;min-width:0;font-size:.88rem;overflow-wrap:anywhere}
.fg-cal-pk-l2{color:#475467;font-size:.84rem}
.fg-cal-pk-l2 b{white-space:nowrap}
.fg-cal-pk-q{display:block;margin:4px 4px 2px 38px}
.fg-cal-pk-q .fg-input{min-height:44px;font-size:16px}
.fg-cal-pk-st{display:block;margin:2px 4px 2px 38px;font-size:.82rem;font-weight:800}
.fg-cal-pk-fail{color:#B42318}
.fg-cal-pk-unsure{color:#B54708}
.fg-cal-pk-more{width:100%;min-height:44px;margin-top:6px}
.fg-cal-plans-load{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.fg-cal-plans-load .fg-btn{min-height:44px}
.fg-cal-plan{padding:6px 0;border-top:1px solid #EAECF0;font-size:.84rem;overflow-wrap:anywhere}
.fg-cal-plans-undated{margin-top:8px;padding-top:4px;border-top:2px solid #D0D5DD}.fg-cal-plans-sub{font-weight:800;font-size:.84rem;color:#344054;padding:4px 0}.fg-cal-plan-tent{font-weight:700;color:#B54708;white-space:nowrap}
@media(max-width:1100px){.fg-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:650px){
  /* one row of 4 small tabs on phones so the first truck lands on the first screen */
  .fg-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-bottom:8px}
  .fg-tab{min-height:40px;padding:4px 3px;font-size:.72rem;line-height:1.15}
  .fg-tab .fg-tab-badge{display:block;margin:2px 0 0;padding:0 3px;font-size:.66rem;line-height:1.2}
  .fg-root[data-fg-view="calendar"] .fg-heading p{display:none}
  .fg-cal-body{padding:8px}
  .fg-cal-month{font-size:.92rem}
  .fg-cal-head{flex-wrap:nowrap;gap:4px}
  .fg-cal-nav{min-width:40px;padding:4px}
  .fg-cal-mlong{display:none}
  .fg-cal-todaybtn,.fg-cal-belumbtn{padding:4px 7px;font-size:.78rem}
  .fg-cal-belumbtn{max-width:118px;white-space:normal;line-height:1.15;text-align:left}
}
@media(min-width:651px){.fg-cal-mshort{display:none}}
@media(min-width:900px){
  .fg-cal-cell{min-height:84px;padding:4px 6px}
  .fg-cal-names{display:flex;flex-direction:column;width:100%;min-width:0;font-size:.7rem;color:#475467;line-height:1.25}
  .fg-cal-names span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fg-cal-dn{font-size:.85rem}
}
/* Delivery calendar stage 2: PO comments. A labelled button on every card; the thread opens in its own panel.
   Orange stays the "customer wrote, not read yet" signal only; the internal tab looks different on purpose. */
.fg-cmt-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:6px;padding:0 12px;border:1.5px solid #4338CA;border-radius:7px;background:#fff;color:#4338CA;font:inherit;font-size:.86rem;font-weight:800;cursor:pointer;white-space:nowrap;max-width:100%}
.fg-cmt-btn .fg-cmt-n,.fg-cmt-tab .fg-cmt-n{min-height:20px;padding:1px 6px}
.fg-cmt-new{background:#EFF4FF;color:#3538CD}
.fg-cmt{display:flex;flex-direction:column;width:min(640px,100%)}
.fg-cmt-cust-name{font-size:.8rem;color:#667085;margin-top:2px}
.fg-cmt-body{display:flex;flex-direction:column;min-height:0}
.fg-cmt-tabs{display:flex;gap:6px;margin-bottom:8px}
.fg-cmt-tab{flex:1 1 0;min-width:0;min-height:44px;padding:4px 8px;border:1.5px solid #D0D5DD;border-radius:7px;background:#fff;color:#344054;font:inherit;font-size:.86rem;font-weight:800;cursor:pointer}
.fg-cmt-tab-shared[aria-selected="true"]{border-color:#4338CA;background:#EFF4FF;color:#3538CD}
.fg-cmt-tab-internal[aria-selected="true"]{border-color:#344054;background:#F2F4F7;color:#101828}
.fg-cmt-pane{border-radius:8px}
.fg-cmt-pane-internal{background:#F2F4F7;border:1.5px dashed #667085;padding:8px}
.fg-cmt-who{font-size:.84rem;font-weight:800;color:#344054}
.fg-cmt-hint{margin:3px 0 6px;font-size:.78rem;color:#667085}
.fg-cmt-list{min-height:80px;max-height:45dvh;overflow:auto;padding:2px 0;border-top:1px solid #EAECF0;border-bottom:1px solid #EAECF0}
.fg-cmt-empty{padding:12px 0;color:#667085;font-size:.86rem}
.fg-cmt-msg{max-width:86%;margin:6px 0;padding:6px 9px;border:1px solid #EAECF0;border-radius:9px;background:#fff}
.fg-cmt-cust{background:#F9FAFB;border-color:#D0D5DD}
.fg-cmt-mine{margin-left:auto;background:#EFF4FF;border-color:#C7D7FE}
.fg-cmt-meta{font-size:.74rem;color:#667085;margin-bottom:1px}
.fg-cmt-meta b{color:#101828}
.fg-cmt-tag{display:inline-block;padding:0 5px;border-radius:4px;background:#F2F4F7;color:#344054;font-weight:800}
.fg-cmt-txt{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.95rem;line-height:1.35;color:#101828}
.fg-cmt-text{display:block;width:100%;min-height:76px;max-height:30dvh;margin-top:8px;padding:8px 10px;border:1px solid #C7CDD7;border-radius:6px;background:#fff;font:inherit;font-size:16px;resize:vertical}
.fg-cmt-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.fg-cmt-err{flex:1 1 auto;min-width:0;color:#B42318;font-size:.82rem;font-weight:800}
.fg-cmt-count{margin-left:auto;font-size:.78rem;color:#667085;white-space:nowrap}
.fg-cmt-row .fg-cmt-send{flex:none;width:auto;min-width:96px;min-height:44px}
@media(max-width:640px){
  .fg-cmt-backdrop{align-items:flex-end;padding:0}
  .fg-cmt-backdrop .fg-cmt{max-height:92dvh;border-radius:14px 14px 0 0}
}
.fg-schedule-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.fg-schedule-columns>div{min-width:0}
.fg-revision-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fg-revision-line{display:grid;grid-template-columns:minmax(0,1fr) 110px auto;gap:8px;align-items:end;margin:10px 0}
.fg-revision-fields .fg-field,.fg-revision-line .fg-field{min-width:0}
.fg-revision-fields textarea{min-height:80px;resize:vertical}
@media(max-width:640px){.fg-revision-fields{grid-template-columns:minmax(0,1fr)}.fg-revision-line{grid-template-columns:minmax(0,1fr) 86px}.fg-revision-line>.fg-field:first-child{grid-column:1/-1}}
.fg-schedule-columns .fg-btn{min-height:44px}
[data-order-print-open],[data-order-print-go],[data-order-print-retry],[data-order-print-close]{min-height:44px}
.fg-schedule-columns .fg-panel{margin-bottom:16px}
.fg-schedule-columns h3{overflow-wrap:anywhere}
@media(max-width:1000px){.fg-schedule-columns{grid-template-columns:minmax(0,1fr)}}
/* Phone / tablet compaction of the Kirim screen (owner 2026-10-14: "手機UI排列 跟標籤Icon ... 斷字位置要緊湊一點").
   Below 900px only; desktop is unchanged. The warehouse is already in the app header, so the "Gudang: X" text goes and
   Rencana kirim sits on the heading line. Tabs = icon + short word on one line (full name = aria-label / title). */
.fg-tab-short{display:none}
@media(max-width:899px){
  .fg-root{padding:8px 8px 20px}
  .fg-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 8px;margin:0 0 8px}
  .fg-heading>div:first-child{display:contents}
  .fg-heading h1{grid-column:1;grid-row:1;font-size:1.1rem;margin:0;min-width:0}
  .fg-heading p{grid-column:1/-1;grid-row:2;font-size:.84rem;margin:0}
  .fg-warehouse{grid-column:2;grid-row:1;display:block;margin:0;padding:0;border:0;background:none}
  .fg-wh-name{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .fg-warehouse .fg-btn{min-height:44px;padding:6px 10px;white-space:nowrap}
  .fg-tabs{display:flex;flex-wrap:nowrap;gap:4px;overflow-x:auto;overflow-y:hidden;margin:0 0 8px;padding-bottom:2px;scrollbar-width:none}
  .fg-tabs::-webkit-scrollbar{display:none}
  .fg-tab{display:inline-flex;align-items:center;justify-content:center;gap:4px;flex:1 0 auto;min-width:0;min-height:44px;padding:4px 8px;font-size:.88rem;line-height:1.2;white-space:nowrap}
  .fg-tab-long{display:none}
  .fg-tab-short{display:inline}
  .fg-tab::before{font-size:1rem;line-height:1}
  .fg-tab[data-fg-tab="orders"]::before{content:"📋"}
  .fg-tab[data-fg-tab="planning"]::before{content:"🚚"}
  .fg-tab[data-fg-tab="trips"]::before{content:"🗓"}
  .fg-tab[data-fg-tab="calendar"]::before{content:"📅"}
  .fg-tab .fg-tab-badge{display:inline-block;margin:0;padding:0 6px;border-radius:999px;font-size:0;line-height:1.5}
  .fg-tab .fg-tab-badge::after{content:attr(data-n);font-size:.78rem}
  .fg-banner{margin-bottom:8px}
  .fg-panel-head,.fg-panel-body{padding:10px}
  .fg-panel-head{align-items:center;gap:8px}
  .fg-panel-head h2{font-size:1rem;margin:0 0 2px}
  .fg-panel-head .fg-btn{min-height:44px;white-space:nowrap}
  .fg-toolbar{gap:8px;margin-bottom:10px}
  .fg-po-bar{margin-bottom:8px}
  .fg-card-list{gap:8px}
  .fg-card-head{padding:8px 10px}
  .fg-card-body{padding:8px 10px}
  .fg-customer-group+.fg-customer-group{margin-top:8px}
  .fg-customer-group>summary{align-items:center;min-height:48px;padding:8px 10px}
  .fg-customer-summary{gap:2px 8px}
  .fg-order-group>summary{padding:8px 10px}
  .fg-customer-orders,.fg-order-products{padding:6px 8px}
  .fg-shipment-form{gap:8px;margin:8px 0;grid-auto-flow:row dense}
  /* Inputs in one row line up even when one label wraps ("Nomor kendaraan (wajib saat kirim)"): the input sits at the
     bottom of its cell. The GMS chips take their own full row under the plate/Catatan row instead of a cell. */
  .fg-shipment-form>.fg-field{display:flex;flex-direction:column}
  .fg-shipment-form>.fg-field>.fg-input,.fg-shipment-form>.fg-field>.fg-select{margin-top:auto}
  .fg-shipment-form>.gg-chips{grid-column:1/-1}
  .fg-cal-body{padding:8px}
}
/* Live refresh note ("Pesanan diperbarui" / "Ada perubahan baru"): same place and look as the app toast, never blocks a tap. */
.fg-live-note{position:fixed;bottom:82px;left:50%;transform:translateX(-50%);z-index:500;max-width:88vw;width:max-content;padding:.7rem 1.2rem;border-radius:18px;background:rgba(16,24,40,.92);color:#fff;font-size:.9rem;font-weight:600;line-height:1.45;text-align:center;box-shadow:0 8px 24px rgba(16,24,40,.28);pointer-events:none}
.fg-live-note-ok{background:rgba(3,152,85,.95)}
/* Kirim product list in series groups (owner 2026-10-28): every product stays in its collapsible group, chosen or not (the header says "· n dipilih"). 360 = one row per line, 768 = two columns, 1280 = as many as fit. */
.fg-pgroups{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.fg-pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:0 12px;align-items:start;min-width:0}
.fg-pgroup{display:block;min-width:0;background:#fff;border:1px solid #D0D5DD;border-radius:8px;overflow:hidden}
.fg-pgroup[hidden]{display:none}
.fg-pgroup:not([open])>.fg-pgrid{display:none}
.fg-pgroup-head{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 12px;cursor:pointer;list-style:none;font-weight:750;overflow-wrap:anywhere}
.fg-pgroup-lbl{min-width:0}.fg-pg-chosen{color:#4338CA;white-space:nowrap}.fg-pg-chosen[hidden]{display:none}
.fg-pgroup-head::-webkit-details-marker{display:none}
.fg-pgroup-head::before{content:"";flex:0 0 8px;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s ease}
.fg-pgroup[open]>.fg-pgroup-head::before{transform:rotate(45deg)}
.fg-pgroup[open]>.fg-pgroup-head{border-bottom:1px solid #EAECF0}
.fg-pgroup>.fg-pgrid{padding:0}
.fg-product .fg-btn{min-height:44px}
.fg-stock-note.fg-stock-low{color:#667085;font-weight:500}
.fg-chip-zero{display:inline-block;padding:2px 9px;border-radius:999px;background:#EAECF0;color:#475467;font-weight:700;font-size:.74rem}
.fg-stock-warn{color:#B42318;font-weight:700}
.fg-stock-warn[hidden]{display:none}
@media(max-width:900px){.fg-pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.fg-pgrid{grid-template-columns:minmax(0,1fr)}}
/* Batalkan PO (unlocked order cancel) */
.fg-cancel-wrap{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px}
.fg-btn-cancel{color:#B42318;border-color:#B42318;background:#fff}
.fg-btn-cancel:disabled{color:#667085;border-color:#D0D5DD;cursor:not-allowed}
.fg-btn-danger{background:#B42318;border-color:#B42318;color:#fff}
/* Pesanan pelanggan reads left to right (owner 2026-10-28: "客戶名字放在中間 ... 要左邊"; orders are typed on the computer first).
   Order summary = fixed columns [PS + customer PO] [address · n produk] [status] [Komentar / chips], the same x in every order on a wide list;
   tablet: PS / address stacked with the status on the right; phone: one column. Switches on the card width (container), not the viewport, so the
   same card inside the Kalender day panel keeps the narrow layout. Products: a table with one header row once the card is >= 600px wide. */
.fg-order-group{container:fgog/inline-size}
.fg-order-group>summary.fg-order-summary{display:grid;grid-template-columns:10px minmax(0,1fr);grid-template-areas:"ar id" ". sub" ". st" ". more";align-items:center;gap:3px 10px}
.fg-order-summary::before{grid-area:ar}
.fg-order-summary>.fg-card-title{grid-area:id;min-width:0}
.fg-order-summary>.fg-card-sub{grid-area:sub;min-width:0;margin-top:0;font-weight:600}
.fg-order-qty small{font-size:.78rem;font-weight:650;line-height:1.25}
.fg-order-summary>.fg-status{grid-area:st;justify-self:start}
.fg-order-summary>.fg-cmt-btn{grid-area:more;justify-self:start;margin-top:0}
.fg-order-summary>.fg-po-chip-row{grid-column:2;grid-row:5;justify-self:start;margin-top:0}
@container fgog (min-width:560px){
  .fg-order-group>summary.fg-order-summary{grid-template-columns:10px minmax(0,1fr) auto;grid-template-areas:"ar id st" ". sub st" ". more more";column-gap:12px}
  .fg-order-summary>.fg-status{justify-self:end}
  .fg-order-summary>.fg-po-chip-row{grid-column:2/-1;grid-row:4}
  .fg-order-products{padding-left:32px}
}
@container fgog (min-width:860px){
  .fg-order-group>summary.fg-order-summary{grid-template-columns:10px minmax(0,280px) minmax(0,1fr) 170px minmax(0,250px);grid-template-areas:"ar id sub st more";column-gap:16px;min-height:52px}
  .fg-order-summary>.fg-status{justify-self:start}
  .fg-order-summary>.fg-po-chip-row{grid-column:5;grid-row:2}
  .fg-order-summary>.fg-card-sub{font-size:.84rem;color:#475467}
}
.fg-order-products{container:fgop/inline-size}
.fg-ol-head{display:none}
@container fgop (min-width:600px){
  .fg-order-products .fg-ol-head,.fg-order-products .fg-order-line{display:grid;grid-template-columns:minmax(150px,1fr) repeat(4,96px);column-gap:14px;align-items:start}
  .fg-order-products .fg-ol-head{padding:6px 0;border-bottom:1px solid #D0D5DD;font-size:.74rem;font-weight:800;line-height:1.25;color:#667085}
  .fg-ol-head>span:not(:first-child){text-align:right}
  .fg-ol-h-unassigned{color:#B54708}.fg-ol-h-planned{color:#175CD3}.fg-ol-h-shipped{color:#067647}
  .fg-order-products .fg-order-line{padding:8px 0}
  .fg-order-products .fg-order-qty{display:contents}
  .fg-order-products .fg-order-qty>*{position:relative;padding:0;border:0;background:none;text-align:right;white-space:nowrap}
  .fg-order-products .fg-order-qty small{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .fg-order-products .fg-order-qty strong{display:inline;margin:0;font-size:.95rem;line-height:1.35;font-variant-numeric:tabular-nums}
  .fg-order-products .fg-order-qty>span:first-child strong{color:#101828}
  .fg-order-products .fg-po-removed>div{grid-column:1/-1}
}
@container fgop (min-width:900px){
  .fg-order-products .fg-ol-head,.fg-order-products .fg-order-line{grid-template-columns:minmax(200px,360px) repeat(4,128px)}
}
/* One customer per row and at most ~1200px of reading width on a big screen; the per-product table keeps the full width. */
.fg-card-list.fg-order-list{grid-template-columns:minmax(0,1fr)}
/* the orange 4px left border of an unseen order takes 3px from the margin, so its columns stay on the same x as the other orders */
.fg-order-list .fg-order-group.fg-po-unseen{margin-left:9px}
@media(max-width:650px){.fg-order-list .fg-order-group.fg-po-unseen{margin-left:4px}}
@media(min-width:1024px){.fg-panel:has(>.fg-panel-body>.fg-toolbar):not(:has(.fg-pp-wrap)){max-width:1248px}}
/* Order editor on a computer: summary beside the list, fields not stretched (Pelanggan | No. PO + Tanggal on one row, search under them). */
@media(min-width:1101px){
  .fg-products-layout{max-width:1440px}
  .fg-panel:has(>.fg-panel-body>.fg-products-layout){max-width:1476px}
  .fg-products-layout>.fg-panel>.fg-panel-body{display:grid;grid-template-columns:minmax(220px,380px) minmax(0,520px) minmax(0,1fr);column-gap:12px;align-items:end}
  .fg-products-layout>.fg-panel>.fg-panel-body>label.fg-field:first-of-type{grid-column:1}
  .fg-products-layout>.fg-panel>.fg-panel-body>.fg-po-fields,.fg-products-layout>.fg-panel>.fg-panel-body>.fg-po-wait{grid-column:2;margin-top:0}
  .fg-products-layout>.fg-panel>.fg-panel-body>label.fg-field:nth-of-type(2){grid-column:1/3}
  .fg-products-layout>.fg-panel>.fg-panel-body>#fg-products,.fg-products-layout>.fg-panel>.fg-panel-body>#fg-search-empty{grid-column:1/-1}
}
/* Kirim order editor as a cart (owner 2026-10-28; same day on the phone: "可以再緊湊一點 ... 直接打開之後就可以填數量 ... 要有加減的符號", "code 小字寫在品項下方，庫存數量也是 ...
   下單會立即扣除", "要有一列的資訊是所有品項的數量加減都在那邊及時變動"). Every row = [name / code · stock] [−] [box] [+] on ONE 50px line (44px targets, 78px box, the
   name on one line with an ellipsis, the stock line too); the echo (>= 1000, a fraction, the red refusal) under the box only when needed. Each row is a small grid; the
   wrappers qtyBoxHTML needs are display:contents so box / echo take their own cells. Cart rows add "×". Phones (<768px, the app's own phone breakpoint): a fixed cart
   bar (chip strip above the count line) above the bottom nav, the aside opens as a bottom sheet (data-fg-cart="open"); from 768px the aside stays in the page (below
   the list up to 1100px, beside it after, as #331 laid out). */
.fg-hint-short{display:none}
.fg-product-info,.fg-qty-inline,.fg-qty-wrap,.fg-cart-info{display:contents}
.fg-product .fg-product-name{grid-area:name;min-width:0;font-size:.95rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
.fg-product-l2{grid-area:info;min-width:0;font-size:.78rem;line-height:1.3;color:#667085;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fg-product-l2 .fg-product-code,.fg-product .fg-product-spec{display:inline;margin:0;font-size:inherit;line-height:inherit;color:inherit}
.fg-product .fg-stock-note{display:inline;margin:0;min-height:0;font-size:inherit}
.fg-product .fg-chip-zero{padding:1px 8px;font-size:.74rem}
.fg-stk-full b,.fg-stk-short b,.fg-sisa{color:#101828;font-weight:800}
.fg-stk-short{display:none}
@media(max-width:420px){.fg-product .fg-stk-full{display:none}.fg-product .fg-stk-short{display:inline}}
.fg-product[data-fg-live="1"] .fg-stk,.fg-product[data-fg-live="1"] .fg-stk-full,.fg-product[data-fg-live="1"] .fg-stk-short{display:none!important}
.fg-sisa-neg{color:#B42318}
@media(max-width:900px){.fg-product[data-fg-live="1"] .fg-stk-w{display:none}}
.fg-step{min-width:44px;min-height:44px;padding:0;font-size:1.5rem;line-height:1;font-weight:700;border-radius:8px}
.fg-step:disabled{opacity:.3}
.fg-step-minus{grid-area:minus;color:#475467}
.fg-step-plus{grid-area:plus;color:#4338CA;border-color:#A5B4FC;background:#EEF2FF}
.fg-step-plus:hover{background:#E0E7FF}
.fg-qty-wrap .fg-input{grid-area:box;width:100%;min-width:0;min-height:44px;padding:4px;font-size:16px;font-weight:700;text-align:center}
.fg-qty-wrap .fg-input::placeholder{font-weight:500;color:#98A2B3}
.fg-qty-wrap .qbox-echo{grid-area:echo;margin:0 0 2px;font-size:.76rem;line-height:1.25;text-align:right;overflow-wrap:anywhere}
.fg-qty-wrap .qbox-echo:empty{display:none}
.fg-qty-x{grid-area:x;align-self:center;min-width:40px;min-height:44px;padding:0;font-size:1.5rem;line-height:1;color:#667085}
.fg-qty-x:hover{color:#B42318;background:#FEF3F2}
.fg-cart-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 6px}
.fg-cart-head h3{margin:0}
.fg-cart-close{display:none}
.fg-cart-strip{display:flex;gap:6px;min-width:0;margin:0 0 6px;padding:1px 0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.fg-cart-strip::-webkit-scrollbar{display:none}
.fg-cart-strip[hidden]{display:none}
.fg-chip{flex:none;display:inline-flex;align-items:center;gap:4px;min-width:44px;height:28px;padding:0 10px;border:1px solid #C7D7FE;border-radius:999px;background:#EEF2FF;color:#25236A;font:inherit;font-size:.78rem;font-weight:700;white-space:nowrap;cursor:pointer}
.fg-chip b{color:#101828}.fg-chip-blank b{color:#B54708}.fg-chip-bad b{color:#B42318}
.fg-chip:focus-visible{outline:3px solid #A5B4FC;outline-offset:1px}
.fg-cart-total{margin:0 0 6px;font-size:.84rem;color:#344054}.fg-cart-total b{color:#101828}.fg-cart-total[hidden]{display:none}
.fg-cart-rows{min-width:0}
.fg-cart-row{display:grid;grid-template-columns:minmax(0,1fr) 44px 70px 44px 40px;grid-template-areas:"name minus box plus x" "info minus box plus x" ". echo echo echo echo";gap:0 4px;align-items:center;padding:4px 0;border-bottom:1px solid #EAECF0}
.fg-cart-row:last-child{border-bottom:0}
.fg-cart-name{grid-area:name;min-width:0;font-weight:750;font-size:.9rem;line-height:1.25;overflow-wrap:anywhere}
.fg-cart-code{grid-area:info;min-width:0;font-size:.76rem;color:#667085;overflow-wrap:anywhere}
.fg-cart-flag{color:#B54708;font-weight:750}
.fg-cart-flag[hidden]{display:none}
.fg-cartbar,.fg-cart-backdrop{display:none}
.fg-selected .fg-footer-actions .fg-btn-primary{min-height:48px}
@media(max-width:767px){
  .fg-hint-long{display:none}.fg-hint-short{display:inline;font-size:.78rem;white-space:nowrap}
  /* while the editor is open the two explanatory sentences above it (screen and "Pesanan baru") give their lines to the product rows */
  .fg-root:has(.fg-products-layout) .fg-heading p,.fg-panel:has(>.fg-panel-body>.fg-products-layout)>.fg-panel-head p{display:none}
  .fg-products-layout{gap:10px;padding-bottom:96px}
  .fg-products-layout .fg-label{font-size:11px;margin:0 0 4px}
  .fg-products-layout .fg-po-fields{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:4px 8px;margin-top:4px}
  /* the Cari produk label keeps its inline margin-top:10px (order-customer-po-ui pins that literal); phones take 4px */
  .fg-products-layout>.fg-panel>.fg-panel-body>label.fg-field:nth-of-type(2){margin-top:4px!important}
  .fg-pgroups{gap:6px;margin-top:6px}
  .fg-pgroup-head{min-height:44px;padding:4px 10px}
  .fg-product{padding:3px 8px}
  /* the list runs edge to edge on a phone: every pixel goes to the name and the stock line */
  .fg-pgroups{margin-left:-10px;margin-right:-10px}
  .fg-pgroup{border-left:0;border-right:0;border-radius:0}
  .fg-cartbar{position:fixed;left:0;right:0;bottom:0;z-index:110;display:flex;flex-direction:column;gap:4px;padding:5px 10px calc(5px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #D0D5DD;box-shadow:0 -6px 18px rgba(16,24,40,.12)}
  body:has(.tabs) .fg-cartbar{bottom:calc(66px + env(safe-area-inset-bottom));padding-bottom:5px}
  .fg-cartbar-strip{margin:0}
  .fg-cartbar-main{display:flex;align-items:center;gap:8px}
  .fg-cartbar-txt{flex:1 1 auto;min-width:0;font-size:.86rem;font-weight:700;line-height:1.3;color:#344054;overflow-wrap:anywhere}
  .fg-cartbar-txt b{color:#B54708}
  .fg-cartbar-txt .fg-cartbar-bad{color:#B42318}
  .fg-cartbar-btn{flex:none;min-height:46px;padding:8px 14px;white-space:nowrap}
  .fg-cart-close{display:inline-flex;min-height:44px}
  .fg-products-layout[data-fg-cart="open"] .fg-cart-backdrop{display:block;position:fixed;inset:0;z-index:111;background:rgba(16,24,40,.45)}
  .fg-products-layout[data-fg-cart="open"] .fg-selected{position:fixed;left:0;right:0;bottom:0;z-index:112;max-height:88dvh;overflow:auto;margin:0;padding:12px 12px calc(12px + env(safe-area-inset-bottom));border:0;border-radius:14px 14px 0 0;background:#fff;box-shadow:0 -12px 40px rgba(16,24,40,.3)}
}
/* Rencana kirim date states (owner 2026-10-28, docs/SHIPPING_PLAN_STATES.md "UI"): the pasti / belum pasti toggle in the form, the error line under a field,
   two collapsible sections (side by side from 1101px), and one compact <details> row per plan (summary <= 64px on the phone, main action beside the text). */
.fg-plan-toggle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0 0}
.fg-plan-opt{min-height:44px;font-weight:700}.fg-plan-opt-on{background:#EEF2FF;border-color:#4338CA;color:#3730A3;box-shadow:inset 0 0 0 1px #4338CA}.fg-plan-opt:disabled{color:#98A2B3;background:#F9FAFB;cursor:not-allowed}
.fg-plan-toggle-note{margin:6px 0 0}
.fg-field-err{margin-top:5px;font-size:.8rem;font-weight:700;color:#B42318;line-height:1.4;overflow-wrap:anywhere}
.fg-plan-secs{display:grid;gap:12px;margin-top:10px;min-width:0}
.fg-plan-sec{border:1px solid #D0D5DD;border-radius:8px;background:#fff;min-width:0}
.fg-plan-sec-sum{display:flex;align-items:center;justify-content:flex-start;gap:8px;min-height:44px;padding:6px 10px;cursor:pointer;font-weight:800;list-style:none}
.fg-plan-sec-sum::-webkit-details-marker{display:none}
.fg-plan-sec-sum::after{content:'▾';margin-left:auto;color:#667085}
.fg-plan-sec:not([open])>.fg-plan-sec-sum::after{content:'▸'}
.fg-plan-sec:not([open])>*:not(summary){display:none!important}
.fg-plan-sec-body{padding:0 8px 8px;display:grid;gap:8px;min-width:0}
.fg-plan-day{font-size:.82rem;font-weight:800;color:#344054;margin:4px 0 -2px}
.fg-plan-row{min-width:0}
.fg-plan>summary.fg-plan-sum{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;min-height:44px;padding:6px 10px;cursor:pointer;list-style:none}
.fg-plan-sum::-webkit-details-marker{display:none}
.fg-plan-sum::before{content:'';width:8px;height:8px;border-right:2px solid #667085;border-bottom:2px solid #667085;transform:rotate(-45deg);transition:transform .15s}
.fg-plan[open]>.fg-plan-sum::before{transform:rotate(45deg)}
.fg-plan-txt{display:grid;gap:2px;min-width:0}
.fg-plan-l1,.fg-plan-l2{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fg-plan-l1{font-size:.92rem}.fg-plan-l2{font-size:.8rem;color:#475467}
.fg-plan-est{font-weight:700;color:#B54708}
.fg-plan-act{min-height:44px;white-space:nowrap;padding:6px 10px}
.fg-plan:not([open])>*:not(summary){display:none!important}
.fg-plan-body{padding:0 10px 10px 26px;border-top:1px solid #EAECF0;font-size:.86rem}
.fg-plan-body p{margin:8px 0 0}.fg-plan-body small{display:block;margin-top:6px;color:#667085}
.fg-plan-short{display:none}
/* Side by side only when the panel itself is wide enough (lesson desktop-table-switches-on-list-width-not-viewport-width): at 1280 the Jadwal Kirim panel is half the screen (~590px), two columns there cut every customer name. */
.fg-plan-wrap{container-type:inline-size;container-name:fgplan;min-width:0}
@container fgplan (min-width:760px){.fg-plan-secs{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
@media(max-width:650px){.fg-plan>summary.fg-plan-sum{padding:5px 8px}.fg-plan-body{padding-left:8px}.fg-plan-long{display:none}.fg-plan-short{display:inline}}
/* Perlu diurus (owner 2026-10-29): the bar on top of the PO list. "＋ PO baru" is the old Buat PO button; the chips are filters on the
   same list. Desktop: button and the four chips in one row; phone: full-width button, then the chips two by two. Big numbers, 44px+
   targets. Neutral by default; only a Terlambat chip with something in it takes the warning colour. */
.fg-need{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 14px;padding:10px 12px;border:1px solid var(--border,#E4E7EC);border-radius:8px;background:var(--light,#F2F4F7)}
.fg-need-new{flex:0 0 auto;min-height:56px;padding:10px 22px;font-size:1.05rem;font-weight:800;white-space:nowrap}
.fg-need-body{flex:1 1 360px;min-width:0}
.fg-need-title{display:block;margin:0 0 6px;font-size:.78rem;font-weight:800;color:var(--ink2,#475467)}
.fg-need-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.fg-need-chip{display:flex;align-items:center;gap:8px;min-width:0;min-height:48px;padding:6px 12px;border:1px solid var(--border-input,#D0D5DD);border-radius:10px;background:#fff;color:var(--dark,#101828);font:inherit;text-align:left;cursor:pointer}
.fg-need-n{flex:0 0 auto;min-width:1.5ch;font-size:1.4rem;font-weight:850;line-height:1}
.fg-need-l{min-width:0;font-size:.84rem;font-weight:750;line-height:1.2;overflow-wrap:anywhere}
.fg-need-chip.is-late{background:#FFFAEB;border-color:#FEC84B;color:#B54708}
.fg-need-chip.is-zero,.fg-need-chip.is-zero:disabled{background:transparent;border-color:var(--border,#E4E7EC);color:var(--muted,#667085);cursor:default}
.fg-need-chip.is-zero .fg-need-n{font-weight:700}
.fg-need-chip[aria-pressed="true"]{background:var(--p,#4F46E5);border-color:var(--p,#4F46E5);color:#fff}
.fg-need-chip:focus-visible,.fg-need-new:focus-visible{outline:3px solid #A5B4FC;outline-offset:2px}
.fg-need-tag{margin-left:6px;vertical-align:middle}
@media(max-width:650px){.fg-need{padding:8px}.fg-need-new{flex:1 1 100%}.fg-need-body{flex-basis:100%}.fg-need-chips{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.fg-need-chips{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Batalkan kiriman / two-step cancel sheets (owner 2026-10-29, docs/ORDER_CANCEL.md section 6): a touch-size button beside Siap kirim; the where / sure lines keep their line breaks readable */
.fg-btn[data-fg-trip-cancel]{min-height:44px}
.fg-note[data-fg-cancel-sched],.fg-note[data-fg-cancel-sure],.fg-note[data-fg-trip-sum],.fg-note[data-fg-trip-sure]{line-height:1.5;overflow-wrap:anywhere}
/* SJA factory floor login: index.html passes floor:true to FGOrders.render (owner 2026-10-29: "not in such an obvious place; the labels on top
   tighter; production is every day, receiving raw materials only now and then"). The root gets .fg-floor: the explanations under the title and
   the panel heads go (the editor's typing hint stays), heading / tabs / panel head / bar sit tighter, and "＋ PO baru" is a small outlined
   button at the END of the Perlu diurus bar instead of the big primary block at its start. Office / Super (no flag) keep everything above. */
.fg-floor .fg-heading{margin-bottom:8px}
.fg-floor .fg-heading p{display:none}
.fg-floor .fg-tabs{gap:6px;margin-bottom:8px}
.fg-floor .fg-tab{min-height:40px;padding:6px 10px}
.fg-floor .fg-panel-head{padding:10px 14px;align-items:center}
.fg-floor .fg-panel-head h2{margin:0}
.fg-floor .fg-panel-head p:not(:has(.fg-hint-long)){display:none}
.fg-need-floor{gap:8px 10px;margin-bottom:10px;padding:8px 10px}
.fg-need-floor .fg-need-body{flex-basis:100%}
.fg-need-floor .fg-need-title{margin-bottom:4px}
.fg-need-floor .fg-need-chip{min-height:44px}
.fg-need-floor .fg-need-new{flex:0 0 auto;margin-left:auto;min-height:40px;padding:6px 12px;font-size:.84rem;font-weight:750;background:#fff;color:#475467;border-color:#C7CDD7}
/* Jadwal planner (finished-goods-orders.js "Jadwal planner", owner 2026-10-29, gjwnsb): the pool of lines without a truck + 14 day cards. Phone / tablet: one
   column, the pool a collapsible section on top, its selection bar sticks to the bottom of the real scroller (.content: its padding-bottom keeps the app tabs
   clear) while the pool is on screen. >= 1024px: pool left (38%, sticky, its own scroll, the bar at its foot), 14 days right. .fg-root is overflow:auto but is
   not the box that scrolls (lesson kirim-sticky-bar-needs-the-real-scroller), so the planner lets the real scroller hold the sticky parts. NOT position:fixed:
   index.html gives every .sec contain:layout style, which makes #shipment the containing block of fixed children (the bar would sit at the end of the page). */
.fg-root:has(.fg-pl){overflow:visible}
.fg-pl{min-width:0}
.fg-pl-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.fg-pl-pool{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid #D0D5DD;border-radius:9px}
.fg-pl-poolhead{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;min-height:52px;padding:10px 14px;border:0;border-radius:8px 8px 0 0;background:#F5F5FF;color:#25236A;font:inherit;font-size:.95rem;font-weight:850;text-align:left;cursor:pointer}
.fg-pl-pool:not(.is-open) .fg-pl-poolhead{border-radius:8px}
.fg-pl-poolhead::after{content:"";flex:0 0 8px;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s ease}
.fg-pl-pool.is-open .fg-pl-poolhead::after{transform:rotate(45deg)}
.fg-pl-pooltt{flex:1 1 auto;min-width:0}
.fg-pl-pooln{flex:none;font-size:.82rem;font-weight:800;color:#4338CA;background:#E0E7FF;border-radius:999px;padding:3px 10px}
.fg-pl-poolbody{display:none;min-height:0}
.fg-pl-pool.is-open .fg-pl-poolbody{display:block}
.fg-pl-poolbody .fg-empty{padding:18px 14px}
.fg-pl-grp{border-top:1px solid #EAECF0}
.fg-pl-grph{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px 6px 14px;background:#F9FAFB}
.fg-pl-grpt{min-width:0;font-size:.9rem;color:#25236A;display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
.fg-pl-grpn{font-size:.76rem;font-weight:800;color:#475467;background:#EAECF0;border-radius:999px;padding:1px 8px}
.fg-pl-all{flex:none;min-height:44px;padding:6px 12px;font-size:.8rem}
.fg-pl-all[aria-pressed="true"]{background:#EEF2FF;border-color:#6366F1;color:#3730A3}
.fg-pl-row{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;min-height:58px;padding:6px 12px 6px 2px;border-top:1px solid #F2F4F7;cursor:pointer;background:#fff;-webkit-tap-highlight-color:transparent}
.fg-pl-row.is-on{background:#EEF2FF;box-shadow:inset 3px 0 0 #6366F1}
.fg-pl-chk{width:24px;height:24px;margin:10px;accent-color:#4338CA;cursor:pointer}
.fg-pl-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,max-content);gap:1px 10px;min-width:0}
.fg-pl-cust{grid-column:1;min-width:0;font-size:.95rem;overflow-wrap:anywhere}.fg-pl-cust b{font-weight:900;color:#25236A}.fg-pl-cust small{color:#667085;font-size:.78rem;margin-left:4px}
.fg-pl-prod{grid-column:1;min-width:0;font-size:.84rem;color:#344054;overflow-wrap:anywhere}
.fg-pl-pc{font-weight:800;color:#475467}
.fg-pl-qty{grid-column:2;grid-row:1/3;align-self:center;text-align:right;font-weight:800;font-size:.88rem;color:#101828;overflow-wrap:anywhere}
.fg-pl-po{grid-column:1/-1;min-width:0;color:#667085;font-size:.74rem;overflow-wrap:anywhere}
.fg-pl-sel{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:10px;padding:10px 12px;background:#fff;border-top:1px solid #D0D5DD;border-radius:0 0 8px 8px;box-shadow:0 -6px 18px rgba(16,24,40,.10)}
.fg-pl-seltx{flex:1 1 auto;min-width:0;font-size:.88rem;font-weight:800;line-height:1.3;color:#344054}
.fg-pl-open{flex:none;min-height:46px;padding:8px 16px;white-space:nowrap}
.fg-pl-days{min-width:0}
.fg-pl-dayshead{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0 0 10px}
.fg-pl-dayshead h2{font-size:1.05rem;margin:0}.fg-pl-dayshead h2 small{font-size:.84rem;font-weight:650;color:#667085;margin-left:6px}
.fg-pl-nav{display:flex;flex-wrap:wrap;gap:6px}.fg-pl-nav .fg-btn{min-height:44px}
.fg-pl-daylist{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.fg-pl-day{min-width:0;background:#fff;border:1px solid #D0D5DD;border-radius:9px;overflow:hidden}
.fg-pl-dh{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:44px;padding:8px 14px;background:#F5F5FF;border-bottom:1px solid #EAECF0;font-size:.95rem;color:#25236A}
.fg-pl-dh b{font-weight:900}.fg-pl-dn{font-size:.8rem;font-weight:750;color:#475467}
.fg-pl-day.is-sun .fg-pl-dh{background:#F2F4F7;color:#667085}
.fg-pl-day.is-today .fg-pl-dh{background:#E0E7FF;box-shadow:inset 4px 0 0 #4338CA}
.fg-pl-tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:10px;padding:10px 12px 2px}
.fg-pl-none{margin:0;padding:10px 14px 2px;color:#667085;font-size:.84rem}
.fg-pl-newtruck{margin:10px 12px 12px;min-height:44px}
.fg-pl-truck{display:flex;flex-direction:column;gap:6px;min-width:0;padding:8px 10px;border:1px solid #D0D5DD;border-radius:8px;background:#fff}
.fg-pl-th{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;min-width:0;font-size:.88rem;color:#475467}.fg-pl-th b{color:#25236A;font-size:.92rem}.fg-pl-th span{min-width:0;overflow-wrap:anywhere}
.fg-pl-edit{margin-left:auto;min-width:44px;min-height:44px;padding:0}
.fg-pl-cap{display:grid;gap:3px;min-width:0}
.fg-pl-bar{display:block;height:10px;background:#EAECF0;border-radius:6px;overflow:hidden}.fg-pl-bar i{display:block;height:100%;background:#4F46E5;border-radius:6px}
.fg-pl-captx{font-size:.8rem;font-weight:800;color:#344054}
.fg-pl-truck.is-over .fg-pl-bar i,.fg-pl-pt.is-over .fg-pl-bar i{background:#DC6803}.fg-pl-truck.is-over .fg-pl-captx,.fg-pl-pt.is-over .fg-pl-captx{color:#B54708}
.fg-pl-al{display:flex;justify-content:space-between;align-items:center;gap:6px;min-height:44px;border-top:1px solid #F2F4F7}
.fg-pl-alm{min-width:0;font-size:.84rem;overflow-wrap:anywhere}.fg-pl-alq{font-weight:750}
.fg-pl-alb{display:flex;flex:none;gap:4px}.fg-pl-alb .fg-btn{min-height:44px;padding:4px 9px;font-size:.78rem;background:#fff;border:1px solid #D0D5DD;color:#344054}.fg-pl-alb .fg-pl-rel{color:#B42318;border-color:#F1B6B1}
.fg-pl-add{align-self:flex-start;min-height:44px}
.fg-pl-hist{margin:12px 0 0}.fg-pl-hist .fg-btn{min-height:44px}
.fg-order-summary>.fg-pl-st{grid-area:st;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.fg-pl-go{min-height:44px;padding:8px 16px;font-size:.92rem;white-space:nowrap}
@container fgog (min-width:560px){.fg-order-summary>.fg-pl-st{align-items:flex-end;justify-self:end}}
@container fgog (min-width:860px){.fg-order-summary>.fg-pl-st{align-items:flex-start;justify-self:start}}
/* sheet "Jadwalkan ke…" (on document.body: draw() cannot wipe it) */
.fg-pl-wrap{position:fixed;inset:0;z-index:1200}
.fg-pl-back{position:absolute;inset:0;background:rgba(16,24,40,.45)}
.fg-pl-shsec{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(880px,calc(100% - 32px));max-height:90vh;max-height:90dvh;display:flex;flex-direction:column;min-height:0;background:#fff;border-radius:12px;box-shadow:0 20px 60px rgba(16,24,40,.35);color:#101828}
.fg-pl-shh{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none;padding:12px 16px;border-bottom:1px solid #EAECF0}.fg-pl-shh h2{margin:0;font-size:1.05rem}.fg-pl-shh .fg-btn{min-height:44px}
.fg-pl-shb{flex:1 1 auto;min-height:0;overflow:auto;padding:12px 16px;-webkit-overflow-scrolling:touch}
.fg-pl-ss{margin:0 0 14px}.fg-pl-ss h3{font-size:.92rem;margin:0 0 8px}.fg-pl-ss h3 small{font-weight:650;color:#667085;margin-left:6px}
.fg-pl-dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px}
.fg-pl-dayb{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;min-height:64px;padding:8px 10px;border:1.5px solid #D0D5DD;border-radius:9px;background:#fff;color:#101828;font:inherit;text-align:left;cursor:pointer}
.fg-pl-dayb b{font-size:.92rem}.fg-pl-dayb span{font-size:.84rem;font-weight:700}.fg-pl-dayb small{font-size:.72rem;color:#667085}
.fg-pl-dayb.is-sun{background:#F9FAFB;color:#667085}
.fg-pl-dayb.is-on,.fg-pl-pt.is-on{border-color:#4F46E5;background:#EEF2FF;box-shadow:0 0 0 2px #C7D2FE}
.fg-pl-tlist{display:grid;gap:8px}
.fg-pl-pt{display:grid;gap:6px;min-width:0;min-height:54px;padding:10px 12px;border:1.5px solid #D0D5DD;border-radius:9px;background:#fff;color:#101828;font:inherit;text-align:left;cursor:pointer}
.fg-pl-pt[disabled]{cursor:default;opacity:1}.fg-pl-ptt{font-size:.88rem;overflow-wrap:anywhere}
.fg-pl-nt{margin-top:10px;grid-template-columns:repeat(2,minmax(0,1fr))}.fg-pl-nt .fg-input{min-height:44px;font-size:16px}
.fg-pl-ntcap{grid-column:1/-1}.fg-pl-cappre{display:flex;flex-wrap:wrap;gap:6px}
.fg-pl-cappre button{min-height:44px;padding:0 12px;border:1.5px solid #D0D5DD;border-radius:10px;background:#fff;font:inherit;font-weight:700;color:#101828;cursor:pointer}
.fg-pl-cappre button.on{border-color:#4F46E5;background:#EEF2FF}.fg-pl-cappre .fg-input{flex:1 1 110px;width:auto}
.fg-pl-shrows{border:1px solid #EAECF0;border-radius:8px;overflow:hidden}
.fg-pl-shf{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;border-top:1px solid #EAECF0}
.fg-pl-ft{min-width:0;font-size:.84rem;color:#475467;line-height:1.35}.fg-pl-f3{margin-top:2px;font-size:.98rem;font-weight:900;color:#101828}.fg-pl-f3.is-over{color:#B54708}
.fg-pl-shbtn{display:flex;flex:none;gap:8px}.fg-pl-shbtn .fg-btn{min-height:48px}
@media(max-width:1023px){.fg-pl-sel.is-empty{display:none}}
@media(min-width:1024px){
  .fg-pl-grid{grid-template-columns:minmax(320px,38%) minmax(0,1fr)}
  .fg-pl-pool{position:sticky;top:12px;overflow:hidden;max-height:calc(100vh - 84px);max-height:calc(100dvh - 84px)}
  .fg-pl-poolhead{cursor:default;pointer-events:none}.fg-pl-poolhead::after{display:none}
  .fg-pl-pool .fg-pl-poolbody{display:block;flex:1 1 auto;overflow-y:auto}
  .fg-pl-sel{position:static;flex:none;box-shadow:none}
}
@media(max-width:767px){
  .fg-pl-shsec{left:0;right:0;top:auto;bottom:0;transform:none;width:100%;max-height:92vh;max-height:92dvh;border-radius:14px 14px 0 0}
  .fg-pl-shb{padding:10px 12px}.fg-pl-shh{padding:10px 12px}
  .fg-pl-shf{flex-direction:column;align-items:stretch;padding:8px 12px calc(8px + env(safe-area-inset-bottom))}.fg-pl-shbtn .fg-btn{flex:1}
  .fg-pl-nt{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){.fg-pl-poolhead::after{transition:none}}
/* "Cukup segini" note under a PO product (owner 2026-10-30): production closed this line before the quantity was reached */
.fg-cukup{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:6px;padding:6px 10px;border-radius:9px;background:#ECFDF3;color:#05603A;font-size:.9rem;font-weight:700}
.fg-cukup small{font-weight:600}
.fg-cukup-btn{min-height:40px;padding:4px 12px}
/* Batalkan pengiriman terkirim (owner 2026-11-01, docs/TRIP_VOID.md): Super only, demoted below the card (small, no fill) so it is not pressed by habit; the two sheets reuse the cancel styles */
.fg-void-row{display:flex;justify-content:flex-end;margin-top:14px;padding-top:8px;border-top:1px dashed #D0D5DD}
.fg-btn-void{background:transparent;border-color:transparent;color:#B42318;font-size:.85rem;font-weight:600;min-height:44px;text-decoration:underline}
.fg-btn-void:hover{background:#FEF3F2}
.fg-btn-void:disabled{color:#667085;cursor:not-allowed;text-decoration:none}
.fg-modal [data-fg-void-hint]{display:block;margin-top:4px}
.fg-modal [data-fg-void-docs],.fg-modal [data-fg-void-docs-missing]{margin-bottom:12px}
.fg-modal .fg-btn-danger:disabled{background:#F2F4F7;border-color:#D0D5DD;color:#667085;cursor:not-allowed}
/* Selesai - sisa tidak dikirim (owner 2026-11-01, docs/ORDER_CLOSE.md): a calm neutral secondary button with a tick (nothing is destroyed, so no red), one confirm sheet, and the grey note on a closed PO */
.fg-btn-close{color:#344054;border-color:#98A2B3;background:#fff;white-space:normal;text-align:center;line-height:1.25}
.fg-btn-close:hover{background:#F2F4F7}
.fg-btn-close:disabled{color:#667085;border-color:#D0D5DD;cursor:not-allowed}
.fg-closed-note{margin:10px 0 0;padding:8px 10px;border-left:3px solid #98A2B3;border-radius:0 6px 6px 0;background:#F2F4F7;color:#344054;font-size:.86rem;line-height:1.45;overflow-wrap:anywhere}
.fg-ol-closed .fg-ol-h-unassigned{color:#475467}
.fg-closed-line .fg-qty-unassigned{background:#F2F4F7;border-color:#D0D5DD;color:#344054}
.fg-close-lines{list-style:none;margin:0 0 8px;padding:0}
.fg-close-line{padding:8px 0;border-bottom:1px solid #EAECF0;font-size:.9rem;line-height:1.45;overflow-wrap:anywhere}
.fg-close-line:last-child{border-bottom:0}
.fg-close-rest{color:#101828}
.fg-modal [data-fg-close-cancel],.fg-modal [data-fg-close-go]{min-height:44px}
/* Jadwalkan ke… sheet: four steps on top + empty-day hint (owner 2026-11-06). Icon + word, colour only marks the role; >= 14px. */
.fg-pl-steps{display:flex;gap:6px;list-style:none;margin:0 0 14px;padding:0 0 2px;position:sticky;top:0;z-index:2;background:#fff}.fg-pl-step{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px 8px;border-bottom:3px solid #D0D5DD;font-size:.88rem;line-height:1.2;text-align:center;color:#667085}.fg-pl-step b{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid currentColor;font-size:.9rem}.fg-pl-step.is-done{color:#067647;border-bottom-color:#067647}.fg-pl-step.is-now{color:#111;font-weight:700;border-bottom-color:#4338CA}.fg-pl-step.is-now b{background:#4338CA;color:#fff;border-color:#4338CA}
.fg-pl-hint{margin:0 0 10px;padding:10px 12px;border:1px solid #FEC84B;border-left:4px solid #DC6803;border-radius:8px;background:#FFFAEB;color:#7A2E0E;font-size:.92rem;line-height:1.35}
/* "Baru dijadwalkan" strip (undo within 1 hour) and the warehouse login: no scheduling entry points (owner 2026-11-06). */
.fg-pl-undo{margin:0 0 12px;padding:10px 12px;border:1px solid #D0D5DD;border-left:4px solid #4338CA;border-radius:8px;background:#fff}.fg-pl-undo h3{margin:0 0 8px;font-size:.95rem}.fg-pl-undo h3 small{font-weight:600;color:#667085;margin-left:6px;font-size:.88rem}
.fg-pl-uitem{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #EAECF0}.fg-pl-uitem:first-of-type{border-top:0}.fg-pl-utx{flex:1;min-width:0;font-size:.95rem;line-height:1.3}.fg-pl-utx small{display:block;color:#667085;font-size:.88rem}.fg-pl-ubtn{min-height:44px;min-width:96px;font-weight:700}
.fg-floor button[onclick*="FGOrders.newTrip"],.fg-floor [data-fg-cal-new]{display:none!important}
/* Planner: overdue groups (icon + word, red role) and today's trucks on top (owner 2026-11-06). */
.fg-pl-lateb{background:#FFF5F4;border:1px solid #FDA29B;color:#912018;font-size:.88rem;min-height:28px}.fg-pl-grp.is-late{border-left:4px solid #D92D20}
.fg-pl-today{margin:0 0 12px;padding:10px 12px;border:1px solid #D0D5DD;border-left:4px solid #4338CA;border-radius:8px;background:#fff}.fg-pl-today h3{margin:0 0 6px;font-size:.95rem}.fg-pl-today h3 small{font-weight:600;color:#667085;margin-left:6px;font-size:.88rem}
.fg-pl-trow{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:8px 0;border-top:1px solid #EAECF0;font-size:.95rem;line-height:1.3}.fg-pl-trow:first-of-type{border-top:0}.fg-pl-trt{min-width:0}.fg-pl-trk{font-weight:700;white-space:nowrap}.fg-pl-trow.is-over .fg-pl-trk{color:#B42318}.fg-pl-todaygo{margin-top:6px;min-height:44px}
/* DENIKIN Surat Jalan modal (DIN sales PR 4): the trucking note (Super/Office only, never printed) and the one-line "no Faktur" explanation. */
.fg-truck{margin:14px 0 4px;padding-top:10px;border-top:1px dashed #D0D5DD}.fg-truck .fg-print-title small{font-weight:600;color:#475467}.fg-truck .fg-input{min-height:46px;font-size:16px}.fg-truck textarea.fg-input{min-height:70px}
.fg-truck-act{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px}.fg-truck-act .fg-btn{min-height:46px}.fg-truck-state{font-weight:700;color:#475467;overflow-wrap:anywhere}.fg-truck-state.fg-truck-bad{color:#B42318}
.fg-din-nofaktur{margin:0 0 10px;padding:8px 10px;border:1px solid #D0D5DD;border-radius:6px;background:#F2F4F7;color:#344054;font-weight:700}
/* audit 2026-11-06: first screen of Catat pengiriman: today's trucks and the steps (todayHTML) */
.fg-today{margin-bottom:14px}.fg-steps{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:0;list-style:none;counter-reset:st;font-size:.9rem;font-weight:750;color:#344054}.fg-steps li{padding:6px 10px;border:1px solid #D0D5DD;border-radius:6px;background:#F2F4F7}.fg-today-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid #EAECF0}.fg-today-go{min-height:52px;padding:8px 18px;font-size:1rem}