:root {
    --navy: #153b5b;
    ...
}

#atpl-sales-control {
    max-width: 100%;
    min-height: 500px;
}

#atpl-sales-control-app header {
    position: sticky;
    top: 32px;
}

@media screen and (max-width: 782px) {
    #atpl-sales-control-app header {
        top: 46px;
    }
}

:root{--navy:#153b5b;--blue:#245f8f;--sky:#e9f2f8;--ink:#17212b;--muted:#66717c;--line:#d9e1e8;--bg:#f3f6f8;--white:#fff;--red:#b42318;--redbg:#fee4e2;--amber:#9a6700;--amberbg:#fff3cd;--green:#067647;--greenbg:#dcfae6;--slate:#475467;--shadow:0 8px 24px rgba(21,59,91,.08)}
*{box-sizing:border-box} body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--ink)}
header{background:linear-gradient(120deg,var(--navy),var(--blue));color:white;padding:22px 28px;position:sticky;top:0;z-index:20;box-shadow:0 3px 14px rgba(0,0,0,.18)}
.header-row{max-width:1500px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:22px} h1{font-size:22px;margin:0} .subtitle{font-size:12px;opacity:.82;margin-top:5px} .actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
button,.file-label{border:0;border-radius:10px;padding:11px 16px;font-weight:750;cursor:pointer;font-size:13px;transition:transform .16s ease,box-shadow .16s ease,background .16s ease;display:inline-flex;align-items:center;gap:9px;white-space:nowrap}.file-label:hover,button:hover{transform:translateY(-1px)}.import-cso{background:#fff;color:var(--navy);box-shadow:0 6px 18px rgba(0,0,0,.16)}.import-cso:hover{background:#f4f8fb;box-shadow:0 9px 22px rgba(0,0,0,.2)}.import-stock{background:#dcfae6;color:#05603a;box-shadow:0 6px 18px rgba(0,0,0,.14)}.import-stock:hover{background:#c9f3d9;box-shadow:0 9px 22px rgba(0,0,0,.18)}.import-icon{font-size:17px;line-height:1}.action-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05}.action-title{font-size:13px}.action-sub{font-size:9.5px;font-weight:600;opacity:.72;margin-top:3px}button.secondary{background:rgba(255,255,255,.12);color:white;border:1px solid rgba(255,255,255,.34);box-shadow:none}button.secondary:hover{background:rgba(255,255,255,.2)}#fileInput,#stockFileInput{display:none!important}
main{max-width:1500px;margin:22px auto;padding:0 20px 40px}
.tabs{position:sticky;top:122px;z-index:12;display:grid;grid-template-columns:repeat(4,minmax(190px,1fr));gap:12px;margin:0 0 20px;padding:10px;background:rgba(243,246,248,.94);backdrop-filter:blur(10px);border:1px solid rgba(217,225,232,.9);border-radius:18px;box-shadow:0 8px 24px rgba(21,59,91,.08)}
.tab{position:relative;min-height:86px;width:100%;padding:14px 15px;border:1px solid #dbe4eb;border-radius:14px;background:linear-gradient(145deg,#fff,#f7fafc);color:#425466;box-shadow:0 3px 10px rgba(16,24,40,.05);display:grid;grid-template-columns:42px 1fr auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;white-space:normal;overflow:hidden}
.tab:hover{transform:translateY(-2px);border-color:#a9bfd0;box-shadow:0 9px 20px rgba(21,59,91,.12)}
.tab:before{content:'';position:absolute;left:0;top:0;right:0;height:4px;background:transparent}
.tab-icon{grid-row:1/3;width:42px;height:42px;border-radius:12px;background:#eaf1f6;color:var(--navy);display:grid;place-items:center;font-size:20px;font-weight:900}
.tab-copy{min-width:0}.tab-title{display:block;font-size:13.5px;font-weight:850;line-height:1.25;color:#263b4d}.tab-meta{display:block;margin-top:5px;font-size:10.5px;font-weight:650;color:#72808d;line-height:1.2}
.tab-badge{align-self:start;justify-self:end;min-width:28px;padding:5px 8px;border-radius:999px;background:#edf2f6;color:#344054;font-size:10px;font-weight:850;text-align:center}
.tab.active{background:#fff;color:var(--navy);border-color:#8eafc7;box-shadow:0 11px 25px rgba(21,59,91,.16)}.tab.active:before{background:linear-gradient(90deg,var(--navy),#2e90fa)}.tab.active .tab-icon{background:linear-gradient(145deg,var(--navy),var(--blue));color:#fff;box-shadow:0 5px 12px rgba(21,59,91,.22)}.tab.active .tab-title{color:var(--navy)}.tab.active .tab-badge{background:var(--navy);color:#fff}
.tab[data-tab="stock"] .tab-badge.has-action{background:#fee4e2;color:#b42318}.tab[data-tab="reconcile"] .tab-badge.has-action{background:#fff3cd;color:#9a6700}.tab[data-tab="dashboard"] .tab-badge.has-action{background:#fee4e2;color:#b42318}
.panel{display:none;animation:panelIn .22s ease}.panel.active{display:block}@keyframes panelIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}} .kpis{display:grid;grid-template-columns:repeat(6,minmax(150px,1fr));gap:12px;margin-bottom:18px} .kpi{background:white;border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:var(--shadow)} .kpi .label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.55px} .kpi .value{font-size:25px;font-weight:750;margin-top:7px} .kpi .note{font-size:11px;color:var(--muted);margin-top:4px}
.section{background:white;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);margin-bottom:18px;overflow:hidden} .section-head{display:flex;justify-content:space-between;align-items:center;padding:15px 17px;border-bottom:1px solid var(--line);gap:12px;flex-wrap:wrap} h2{font-size:16px;margin:0} .helper{font-size:12px;color:var(--muted)}
.toolbar{display:flex;gap:9px;flex-wrap:wrap;padding:12px 16px;background:#fafcfd;border-bottom:1px solid var(--line)} input,select{border:1px solid #cbd5df;border-radius:8px;padding:9px 10px;background:white;color:var(--ink);font-size:13px} input[type=search]{min-width:260px;flex:1} .table-wrap{overflow:auto;max-height:570px} table{border-collapse:separate;border-spacing:0;width:100%;font-size:12px} th{position:sticky;top:0;background:var(--navy);color:white;text-align:left;padding:10px;white-space:nowrap;z-index:2} td{padding:9px 10px;border-bottom:1px solid #edf0f3;vertical-align:top} tbody tr:hover{background:#f6fafc} .num{text-align:right;white-space:nowrap} .date{white-space:nowrap} .badge{display:inline-block;border-radius:999px;padding:4px 8px;font-size:10.5px;font-weight:700;white-space:nowrap} .delayed{background:var(--redbg);color:var(--red)} .due{background:var(--amberbg);color:var(--amber)} .open{background:#e8f1fb;color:#175cd3} .completed{background:var(--greenbg);color:var(--green)} .status{background:#eef2f6;color:#344054}.status-edit{display:flex;gap:6px;align-items:center;min-width:250px}.status-edit select{min-width:180px;padding:6px 8px;font-size:11px}.save-status{background:var(--navy);color:#fff;padding:7px 9px;border-radius:7px;font-size:11px}.saved-note{font-size:10px;color:var(--green);font-weight:700}.edit-strip{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 14px;background:#f7fafc;border-bottom:1px solid var(--line)}.payment-terms-panel{display:grid;grid-template-columns:170px minmax(280px,1fr) auto;gap:12px;align-items:center;padding:14px;background:#fffaf0;border-bottom:1px solid #ead9b8}.payment-terms-label{font-weight:800;color:#62420d}.payment-terms-label .small{font-weight:500;margin-top:3px}.payment-terms-input{width:100%;min-height:64px;resize:vertical;border:1px solid #d7b978;border-radius:10px;padding:10px 12px;font:inherit;color:var(--ink);background:#fff}.payment-terms-save{background:#8a5a00;color:#fff;border:none;border-radius:9px;padding:10px 16px;font-weight:800;cursor:pointer}.payment-terms-save:hover{background:#6f4800}@media(max-width:760px){.payment-terms-panel{grid-template-columns:1fr}.payment-terms-save{width:100%}}
.cso-list{padding:12px} details{border:1px solid var(--line);border-radius:10px;margin-bottom:10px;background:white;overflow:hidden} summary{cursor:pointer;list-style:none;padding:13px 15px;display:grid;grid-template-columns:minmax(180px,1.2fr) minmax(220px,2fr) 150px 125px 120px;gap:12px;align-items:center} summary::-webkit-details-marker{display:none} details[open] summary{background:#f8fbfd;border-bottom:1px solid var(--line)} .cso-title{font-weight:750;color:var(--navy)} .new-badge{display:inline-block;margin-left:7px;padding:3px 7px;border-radius:999px;background:#dff7e8;color:#067647;font-size:9.5px;font-weight:800;vertical-align:middle;letter-spacing:.3px} details.new-cso{border-color:#86d6a5;box-shadow:0 0 0 2px rgba(18,183,106,.08)} .small{font-size:11px;color:var(--muted)} .alert-section{border:2px solid #f0b429;box-shadow:0 10px 30px rgba(183,121,31,.14);overflow:hidden}.alert-section .section-head{background:linear-gradient(135deg,#fff7df 0%,#fff 65%);border-bottom:1px solid #f2d79a;padding:18px 20px}.alert-title-wrap{display:flex;align-items:center;gap:12px}.alert-beacon{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#d92d20,#f79009);display:grid;place-items:center;color:white;font-size:22px;box-shadow:0 8px 18px rgba(217,45,32,.25)}.alert-heading{font-size:20px!important;color:#7a2e0e!important}.alert-summary-pill{display:inline-flex;align-items:center;gap:7px;background:#7a2e0e;color:#fff;padding:8px 12px;border-radius:999px;font-weight:800;font-size:12px;box-shadow:0 5px 14px rgba(122,46,14,.18)}.alert-summary-pill:before{content:'';width:8px;height:8px;background:#ffcc66;border-radius:50%;box-shadow:0 0 0 5px rgba(255,204,102,.2);animation:pulse 1.8s infinite}@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.75);opacity:.65}}.alert-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:18px;background:linear-gradient(180deg,#fffaf0,#fff);border-bottom:1px solid #f2d79a}.alert-card{position:relative;min-width:0;min-height:132px;border:1px solid transparent;border-radius:14px;padding:16px 16px 14px 18px;background:white;cursor:pointer;text-align:left;color:var(--ink);box-shadow:0 5px 16px rgba(16,24,40,.08);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease;display:flex;flex-direction:column}.alert-card:before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;background:#98a2b3}.alert-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(16,24,40,.14)}.alert-card.active{outline:3px solid rgba(36,95,143,.18);box-shadow:0 10px 24px rgba(36,95,143,.18)}.alert-card.delivery30:before{background:#f79009}.alert-card.drawing10:before{background:#7f56d9}.alert-card.di3:before{background:#2e90fa}.alert-card.mfc15:before{background:#fdb022}.alert-card.overdue:before{background:#d92d20}.alert-card.inspection30:before{background:#12b76a}.alert-card.stockrisk30:before{background:#e31b54}.alert-card.stockrisk30{background:linear-gradient(145deg,#fff,#fff0f5)}.alert-card.overdue{background:linear-gradient(145deg,#fff,#fff1f0)}.alert-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}.alert-card .alert-icon{font-size:19px;line-height:1;opacity:.9;flex:0 0 auto}.alert-card .alert-count{font-size:31px;font-weight:900;line-height:1;flex:0 0 auto;color:#182230}.alert-card.overdue .alert-count{color:#b42318}.alert-card.stockrisk30 .alert-count{color:#c11574}.alert-card .alert-label{font-size:12.5px;font-weight:850;line-height:1.35;overflow-wrap:anywhere}.alert-card .alert-note{font-size:10.5px;color:var(--muted);margin-top:auto;padding-top:10px;line-height:1.35;overflow-wrap:anywhere}.alert-section .toolbar{background:#fffdf8;border-bottom:1px solid #f2d79a}.alert-section .table-wrap{border-top:0}.alert-section thead th{background:#7a2e0e}.alert-section tbody tr:hover{background:#fff8eb}.alert-action{background:linear-gradient(135deg,#7a2e0e,#b54708)!important;box-shadow:0 4px 10px rgba(122,46,14,.2)}.severity-critical{background:var(--redbg);color:var(--red)} .severity-high{background:#ffe8cc;color:#9a4d00}.severity-warning{background:var(--amberbg);color:var(--amber)} .severity-info{background:#e8f1fb;color:#175cd3}.alert-action{background:var(--navy);color:white;padding:6px 8px;border-radius:6px;font-size:10px}.date-input{padding:6px 8px;font-size:11px} .line-table{overflow:auto;padding:0 12px 12px} .empty{padding:30px;text-align:center;color:var(--muted)} .count{font-size:12px;color:var(--muted)}
@media(max-width:1300px){.alert-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:1100px){.tabs{grid-template-columns:repeat(2,minmax(220px,1fr));top:110px}.kpis{grid-template-columns:repeat(3,1fr)} .alert-grid{grid-template-columns:repeat(2,minmax(0,1fr))} summary{grid-template-columns:1fr 1fr 120px} summary .hide-mid{display:none}} @media(max-width:650px){header{padding:16px}.tabs{position:static;grid-template-columns:1fr;padding:8px}.tab{min-height:72px;grid-template-columns:38px 1fr auto}.tab-icon{width:38px;height:38px} main{padding:0 10px} .kpis{grid-template-columns:repeat(2,1fr)} .alert-grid{grid-template-columns:1fr} summary{grid-template-columns:1fr} .actions{display:none}}

.stock-upload{background:#dff7e8!important;color:#065f46!important}.stock-kpis{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:12px;padding:16px;background:#f8fffb;border-bottom:1px solid var(--line)}.stock-kpi{background:white;border:1px solid #b7e4c7;border-radius:12px;padding:13px}.stock-kpi .label{font-size:10px;text-transform:uppercase;color:#52606d;letter-spacing:.45px}.stock-kpi .value{font-size:24px;font-weight:850;margin-top:6px}.stock-kpi.short .value{color:var(--red)}.stock-kpi.good .value{color:var(--green)}.stock-kpi.warn .value{color:var(--amber)}.stock-status-ok{background:var(--greenbg);color:var(--green)}.stock-status-short{background:var(--redbg);color:var(--red)}.stock-status-unmatched{background:var(--amberbg);color:var(--amber)}.stock-status-none{background:#eef2f6;color:#667085}.match-note{max-width:280px;font-size:10px;color:var(--muted);line-height:1.3}.stock-section{border:2px solid #7bc79b}.stock-section .section-head{background:linear-gradient(135deg,#eafaf0,#fff)}.stock-section thead th{background:#176b47}.stock-gap-negative{color:var(--red);font-weight:800}.stock-gap-positive{color:var(--green);font-weight:800}@media(max-width:1100px){.stock-kpis{grid-template-columns:repeat(3,1fr)}}


.reconcile-section{border:2px solid #7f56d9}.reconcile-section .section-head{background:linear-gradient(135deg,#f4f0ff,#fff)}.reconcile-section thead th{background:#5b3aa8}.reconcile-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.reconcile-btn{color:white;padding:9px 12px}.commit-action{background:#067647}.secondary-action{background:#6941c6}.reconcile-kpis{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px;padding:16px;background:#faf8ff;border-bottom:1px solid var(--line)}.reconcile-kpi{background:white;border:1px solid #d9d0f5;border-radius:12px;padding:13px}.reconcile-kpi .label{font-size:10px;text-transform:uppercase;color:#667085;letter-spacing:.45px}.reconcile-kpi .value{font-size:24px;font-weight:850;margin-top:6px}.decision-pending{background:#fff3cd;color:#9a6700}.decision-accepted{background:#dcfae6;color:#067647}.decision-rejected{background:#fee4e2;color:#b42318}.match-select{min-width:280px;max-width:420px}.row-actions{display:flex;gap:6px;flex-wrap:wrap}.accept-btn{background:#067647;color:white;padding:6px 9px}.reject-btn{background:#b42318;color:white;padding:6px 9px}.pending-banner{padding:10px 16px;background:#fff8e8;border-bottom:1px solid #f2d79a;font-size:12px;color:#7a4a00}.committed-note{color:#067647;font-weight:700}@media(max-width:1100px){.reconcile-kpis{grid-template-columns:repeat(2,1fr)}}


.stock-kpi{cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.stock-kpi:hover{transform:translateY(-2px);box-shadow:0 7px 18px rgba(23,107,71,.12)}.stock-kpi.active{outline:3px solid rgba(23,107,71,.18);border-color:#176b47}.stock-kpi button{all:unset;display:block;width:100%;cursor:pointer}.stock-link-btn{background:#176b47;color:#fff;padding:7px 10px;border-radius:7px;font-size:11px}.stock-summary-badge{display:inline-flex;align-items:center;gap:6px;margin-top:6px}.stock-summary-ok{background:var(--greenbg);color:var(--green)}.stock-summary-short{background:var(--redbg);color:var(--red)}.stock-summary-pending{background:var(--amberbg);color:var(--amber)}.stock-summary-na{background:#eef2f6;color:#667085}.deadline-stock-flag{display:inline-flex;margin-top:6px;background:#fff0f5;color:#c01048;border:1px solid #fecddf;font-weight:850}.deadline-stock-row{background:#fff7fa}.stock-cso-highlight{animation:stockFlash 1.8s ease}@keyframes stockFlash{0%,100%{background:transparent}30%{background:#fff3cd}}

.manual-stock-btn{background:#fff;border:1px solid #176b47;color:#176b47;padding:6px 9px;border-radius:7px;font-size:10.5px;white-space:nowrap}.stock-match-editor{display:flex;flex-direction:column;gap:6px;min-width:250px}.stock-match-editor select{width:100%;min-width:240px;padding:7px 8px;font-size:11px}.stock-match-actions{display:flex;gap:6px;flex-wrap:wrap}.stock-match-accept{background:#067647;color:#fff;padding:6px 9px;border-radius:7px;font-size:10.5px}.stock-match-reject{background:#fff;color:#b42318;border:1px solid #f2b8b5;padding:6px 9px;border-radius:7px;font-size:10.5px}.stock-match-state{font-size:10px;font-weight:700}.stock-match-state.accepted{color:#067647}.stock-match-state.rejected{color:#b42318}.manual-stock-btn:hover{background:#eafaf0}.manual-note{margin-top:5px;padding:6px 7px;border-left:3px solid #7f56d9;background:#f7f4ff;border-radius:4px;font-size:10px;line-height:1.35;color:#475467;max-width:260px}.manual-note b{color:#5b3aa8}.stock-status-na{background:#e0f2fe;color:#075985}.stock-status-manual{box-shadow:0 0 0 2px rgba(127,86,217,.14)}
.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.55);display:none;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal-backdrop.open{display:flex}.stock-modal{width:min(560px,96vw);background:#fff;border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.28);overflow:hidden}.stock-modal-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:18px 20px;background:linear-gradient(135deg,#eafaf0,#fff);border-bottom:1px solid var(--line)}.stock-modal-head h3{margin:0 0 4px;font-size:18px}.stock-modal-body{padding:18px 20px}.stock-modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.stock-modal-field{display:flex;flex-direction:column;gap:5px}.stock-modal-field.full{grid-column:1/-1}.stock-modal-field label{font-size:11px;font-weight:800;color:#475467;text-transform:uppercase;letter-spacing:.35px}.stock-modal-field textarea{min-height:90px;resize:vertical;border:1px solid #cbd5df;border-radius:8px;padding:10px;font:inherit}.stock-modal-context{background:#f8fafc;border:1px solid var(--line);border-radius:9px;padding:10px 12px;margin-bottom:14px;font-size:12px;line-height:1.45}.stock-modal-actions{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--line);background:#fafcfd}.stock-modal-actions .primary{background:#176b47;color:#fff}.stock-modal-actions .danger{background:#fff;color:#b42318;border:1px solid #f2b8b5}@media(max-width:650px){.stock-modal-grid{grid-template-columns:1fr}.stock-modal-field.full{grid-column:auto}}

/* ATPL branded application header */
header{background:linear-gradient(115deg,#0c2f4b 0%,#154f78 58%,#1d628f 100%);padding:16px 28px}
.branded-header{max-width:1560px;gap:28px;align-items:center}
.brand-block{display:flex;align-items:center;min-width:0;gap:18px}
.logo-wrap{width:220px;min-width:220px;height:82px;display:flex;align-items:center;justify-content:center;padding:5px 10px;border-radius:10px;background:rgba(255,255,255,.97);box-shadow:0 6px 18px rgba(0,0,0,.2)}
.logo-wrap img{display:block;width:100%;height:100%;object-fit:contain}
.brand-divider{width:1px;height:68px;background:rgba(255,255,255,.28);flex:0 0 auto}
.brand-copy{min-width:0}.brand-copy h1{font-size:25px;letter-spacing:.1px;line-height:1.08}.brand-tagline{font-size:13px;font-weight:750;color:#d8e9f5;letter-spacing:.8px;margin-top:5px}.brand-copy .subtitle{color:#c8dce9;opacity:1;max-width:560px;line-height:1.35}
.header-right{display:flex;align-items:flex-end;justify-content:flex-end;gap:18px;min-width:0;margin-left:auto}
.sync-strip{display:flex;gap:10px;align-items:stretch}.sync-item{min-width:138px;padding:9px 11px;border:1px solid rgba(255,255,255,.2);border-radius:9px;background:rgba(4,29,48,.22);display:flex;flex-direction:column;justify-content:center}.sync-label{font-size:9.5px;text-transform:uppercase;letter-spacing:.65px;color:#bcd4e4;font-weight:800}.sync-value{font-size:11px;color:#fff;font-weight:700;margin-top:4px;white-space:nowrap}
.actions{justify-content:flex-end}.reset-icon-btn{width:42px;height:42px;padding:0!important;border-radius:10px!important;display:grid!important;place-items:center!important;background:rgba(255,255,255,.1)!important;color:#fff!important;border:1px solid rgba(255,255,255,.34)!important;font-size:21px!important;box-shadow:none!important}.reset-icon-btn:hover{background:rgba(255,255,255,.2)!important;transform:rotate(-18deg)!important}
@media(max-width:1280px){.branded-header{align-items:flex-start}.header-right{flex-direction:column;align-items:flex-end}.sync-strip{order:2}.logo-wrap{width:190px;min-width:190px;height:74px}.brand-copy h1{font-size:22px}}
@media(max-width:980px){header{position:relative}.branded-header{flex-direction:column;align-items:stretch}.header-right{margin-left:0;align-items:stretch}.sync-strip{order:0}.actions{justify-content:flex-start}.brand-block{width:100%}}
@media(max-width:650px){.brand-block{align-items:flex-start;gap:10px}.logo-wrap{width:145px;min-width:145px;height:62px}.brand-divider{height:56px}.brand-copy h1{font-size:18px}.brand-copy .subtitle{display:none}.brand-tagline{font-size:11px}.sync-strip{display:grid;grid-template-columns:1fr 1fr}.sync-item{min-width:0}.header-right .actions{display:flex;gap:7px}.file-label{padding:9px 10px}.action-sub{display:none}.reset-icon-btn{width:38px;height:38px}}


/* Refined compact corporate header */
header{padding:16px 24px;background:linear-gradient(112deg,#0d3552 0%,#164f78 58%,#236b98 100%)}
.header-row.branded-header{max-width:1580px;display:grid;grid-template-columns:minmax(520px,1fr) auto;align-items:center;gap:28px}
.brand-block{gap:16px;min-width:0}
.logo-wrap{width:150px;min-width:150px;height:72px;padding:7px 11px;border-radius:12px;background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.18)}
.logo-wrap img{width:100%;height:100%;object-fit:contain}
.brand-divider{height:66px;width:1px;background:rgba(255,255,255,.28);flex:0 0 1px}
.brand-copy{min-width:0;max-width:650px}
.brand-copy h1{font-size:27px;line-height:1.08;letter-spacing:-.35px;margin:0 0 5px}
.brand-tagline{font-size:13px;font-weight:800;letter-spacing:.7px;color:#e4f0f8;margin-bottom:7px}
.brand-copy .subtitle{font-size:11.5px;line-height:1.35;margin:0;color:#d7e6f0;opacity:.9;max-width:620px}
.header-right{display:grid;grid-template-columns:auto;gap:10px;align-items:center;justify-items:end;margin-left:0}
.header-right .actions{display:grid;grid-template-columns:230px 230px 46px;gap:10px;align-items:stretch;justify-content:end;width:auto}
.header-right .file-label{height:58px;padding:10px 14px;border-radius:12px;justify-content:flex-start;box-shadow:0 5px 15px rgba(0,0,0,.16)}
.header-right .import-icon{width:25px;height:25px;border-radius:7px;display:grid;place-items:center;font-size:16px;background:rgba(21,59,91,.08);flex:0 0 25px}
.header-right .import-stock .import-icon{background:rgba(6,118,71,.11)}
.header-right .action-title{font-size:13px;line-height:1.1}
.header-right .action-sub{font-size:9.5px;line-height:1.25;margin-top:4px;white-space:normal}
.sync-strip{display:grid;grid-template-columns:repeat(2,230px);gap:10px;justify-content:end;width:auto}
.sync-item{min-width:0;height:46px;padding:7px 12px;border-radius:10px;background:rgba(4,29,48,.24);border:1px solid rgba(255,255,255,.18)}
.sync-label{font-size:8.5px;letter-spacing:.8px}
.sync-value{font-size:10.5px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;max-width:205px}
.reset-icon-btn{width:46px!important;height:58px!important;border-radius:12px!important;font-size:20px!important}
@media(max-width:1240px){
 .header-row.branded-header{grid-template-columns:1fr;gap:15px}
 .header-right{justify-items:stretch}
 .header-right .actions{grid-template-columns:1fr 1fr 46px;width:100%}
 .sync-strip{grid-template-columns:1fr 1fr;width:100%}
 .brand-copy{max-width:none}
}
@media(max-width:720px){
 header{padding:14px}
 .brand-block{gap:10px}
 .logo-wrap{width:112px;min-width:112px;height:58px;padding:6px}
 .brand-divider{height:52px}
 .brand-copy h1{font-size:19px}
 .brand-tagline{font-size:10.5px;margin-bottom:3px}
 .brand-copy .subtitle{display:none}
 .header-right .actions{grid-template-columns:1fr 1fr 42px;gap:7px}
 .header-right .file-label{height:48px;padding:8px 9px}
 .header-right .action-sub{display:none}
 .reset-icon-btn{width:42px!important;height:48px!important}
 .sync-item{height:42px}
}


.raise-inspection-btn{white-space:nowrap;cursor:pointer;position:relative;z-index:8;background:#184c78!important;color:#fff!important;border:1px solid #184c78!important;padding:10px 14px!important;border-radius:9px!important;font-size:11px!important;font-weight:800!important;box-shadow:0 4px 10px rgba(24,76,120,.18)}
.raise-inspection-btn:hover{background:#103a5e!important;transform:translateY(-1px)}
#csoList summary{grid-template-columns:minmax(245px,1.2fr) minmax(360px,2.25fr) minmax(185px,.95fr) 90px minmax(285px,1.15fr);gap:16px;padding:17px 20px;overflow:visible}
#csoList summary>div{min-width:0}
#csoList summary .cso-title{font-size:16px;line-height:1.25}
#csoList summary>div:nth-child(2)>b{font-size:15px;line-height:1.25;display:block}
#csoList summary .small{line-height:1.35;overflow-wrap:anywhere}
#csoList summary .master-action-cell{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px;overflow:visible}
#csoList summary .master-action-buttons{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;width:100%}
#csoList summary .master-action-buttons button{margin:0!important;min-height:38px}
#csoList summary .stock-link-btn{white-space:nowrap;padding:10px 13px;border-radius:9px;font-weight:800}
@media(max-width:1280px){#csoList summary{grid-template-columns:minmax(210px,1.1fr) minmax(280px,1.8fr) minmax(170px,.9fr) minmax(270px,1.15fr)}#csoList summary>div:nth-child(4){display:none}}
@media(max-width:900px){#csoList summary{grid-template-columns:1fr;gap:10px}#csoList summary .master-action-cell{align-items:flex-start;text-align:left}#csoList summary .master-action-buttons{justify-content:flex-start}}
.lot-item-row input[type="checkbox"]{width:18px;height:18px;cursor:pointer;accent-color:#1d4ed8}
.lot-item-row label{cursor:pointer;margin:0}
.lot-item-row.disabled-row{opacity:.58}
#lotModal.open{display:flex!important;visibility:visible!important;opacity:1!important}



/* Refined Inspection Lot popup */
#lotModal{padding:18px;background:rgba(8,25,43,.72);backdrop-filter:blur(5px)}
#lotModal .lot-modal-card{width:min(1320px,97vw);max-width:none;max-height:94vh;border-radius:20px;border:1px solid rgba(255,255,255,.45);box-shadow:0 32px 100px rgba(3,18,32,.42)}
#lotModal .modal-head{padding:22px 28px 20px;background:linear-gradient(135deg,#f4f9fd 0%,#ffffff 70%);border-bottom:1px solid #d9e5ef}
#lotModal .modal-head h2{font-size:23px;letter-spacing:-.25px;color:#123b5d}
#lotModal .modal-head .helper{font-size:12.5px;color:#667789;line-height:1.45}
#lotModal .modal-close{width:42px;height:42px;border-radius:12px;font-size:24px;box-shadow:0 2px 8px rgba(15,45,70,.08)}
#lotModal .modal-close:hover{background:#eef5fa;border-color:#9fb7ca;color:#123b5d}
#lotModal .modal-body{padding:22px 28px 24px;background:#fbfdff}
#lotModal .lot-form-grid{grid-template-columns:minmax(210px,.75fr) minmax(210px,.75fr) minmax(260px,1fr);gap:16px;padding:18px;border:1px solid #dce7f0;border-radius:15px;background:#fff;box-shadow:0 5px 16px rgba(15,45,70,.05)}
#lotModal .lot-form-grid>div{min-width:0}
#lotModal .lot-form-grid label{display:block;margin:0 0 7px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.48px;color:#52687a}
#lotModal .lot-form-grid input,#lotModal .lot-form-grid select{width:100%;height:44px;border:1px solid #c9d8e4;border-radius:10px;background:#fff;padding:0 12px;font-size:13px;color:#1f2937;box-sizing:border-box}
#lotModal .lot-form-grid input:focus,#lotModal .lot-form-grid select:focus{outline:none;border-color:#2d78b2;box-shadow:0 0 0 3px rgba(45,120,178,.12)}
#lotModal .lot-form-grid .wide{grid-column:1/-1}
#lotModal h3{font-size:17px;color:#174d78;margin:22px 0 5px!important}
#lotModal h3+.helper{font-size:12px;color:#667789;margin-bottom:12px!important}
#lotModal .lot-items-box{max-height:405px;border:1px solid #d6e3ed;border-radius:14px;background:#fff;box-shadow:0 5px 16px rgba(15,45,70,.04);scrollbar-color:#9fb7ca #eef4f8;scrollbar-width:thin}
#lotModal .lot-item-row{grid-template-columns:44px 64px minmax(360px,1fr) 92px 105px 92px 105px;gap:10px;min-height:54px;padding:9px 14px;border-bottom:1px solid #edf2f6;color:#344054;font-size:12.5px;line-height:1.35}
#lotModal .lot-item-row:nth-child(even):not(.head){background:#fbfdff}
#lotModal .lot-item-row:hover:not(.head){background:#f2f8fc}
#lotModal .lot-item-row.head{min-height:46px;padding-top:8px;padding-bottom:8px;background:#eaf3f9;color:#194e75;font-size:11px;text-transform:uppercase;letter-spacing:.35px;border-bottom:1px solid #cadce9;box-shadow:0 2px 5px rgba(15,45,70,.05)}
#lotModal .lot-item-row label{display:block;color:#25384a;line-height:1.38}
#lotModal .lot-item-row label:nth-child(2){font-size:13px;color:#165d96}
#lotModal .lot-item-row .small{margin-top:3px;color:#b54708;font-size:10.5px;font-weight:700}
#lotModal .lot-item-row .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
#lotModal .lot-item-row input[type="checkbox"]{width:19px;height:19px;margin:0;accent-color:#176b47}
#lotModal .lot-item-row.disabled-row{opacity:.62;background:#f7f8fa}
#lotModal .lot-item-row.disabled-row:hover{background:#f7f8fa}
#lotModal .lot-list{margin-top:16px}
#lotModal .lot-list-card{border-color:#d6e3ed;box-shadow:0 3px 10px rgba(15,45,70,.04)}
#lotModal .modal-actions{padding:15px 28px;background:#f7fafc;border-top:1px solid #d8e4ed;box-shadow:0 -4px 14px rgba(15,45,70,.04)}
#lotModal .modal-actions button{min-height:42px;border-radius:10px;padding:0 17px;font-size:12.5px;font-weight:800}
#lotModal .modal-actions .primary-btn{background:#176b47;color:#fff;border:1px solid #176b47;box-shadow:0 5px 12px rgba(23,107,71,.18)}
#lotModal .modal-actions .primary-btn:hover{background:#115b3c;transform:translateY(-1px)}
#lotModal .modal-actions .secondary-btn{background:#fff;color:#344054;border:1px solid #cbd8e2}
#lotModal .modal-actions .secondary-btn:hover{background:#eef4f8}
@media(max-width:1100px){#lotModal .lot-item-row{min-width:940px;grid-template-columns:42px 58px minmax(340px,1fr) 82px 96px 82px 95px}#lotModal .lot-form-grid{grid-template-columns:1fr 1fr}#lotModal .lot-form-grid>div:nth-child(3){grid-column:1/-1}}
@media(max-width:700px){#lotModal{padding:8px}#lotModal .lot-modal-card{max-height:97vh;border-radius:14px}#lotModal .modal-head,#lotModal .modal-body,#lotModal .modal-actions{padding-left:14px;padding-right:14px}#lotModal .lot-form-grid{grid-template-columns:1fr;padding:14px}#lotModal .lot-form-grid>div:nth-child(3){grid-column:auto}#lotModal .modal-actions{display:grid;grid-template-columns:1fr 1fr}#lotModal .modal-actions .primary-btn{grid-column:1/-1;grid-row:1}}



#portable-share-layout-fix
/* Portable sharing controls: fixed desktop and responsive header layout */
.header-right .actions{
  grid-template-columns:230px 230px minmax(250px,300px) 46px;
  align-items:stretch;
}
.share-tools{
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:1.35fr 1fr 1fr;
  grid-template-rows:34px auto;
  gap:6px;
  align-items:stretch;
  padding:6px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:12px;
  background:rgba(4,29,48,.18);
}
.share-tools .share-btn{
  min-width:0;
  width:100%;
  height:34px;
  padding:7px 8px;
  justify-content:center;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:10px;
  border-radius:7px;
}
.share-tools .share-meta{
  grid-column:1/-1;
  width:100%;
  min-width:0;
  padding:0 3px 1px;
  font-size:8.5px;
  line-height:1.2;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.header-right .reset-icon-btn{align-self:stretch}
@media(max-width:1450px){
  .header-row.branded-header{grid-template-columns:minmax(430px,1fr) auto;gap:18px}
  .header-right .actions{grid-template-columns:205px 205px 250px 44px;gap:8px}
  .sync-strip{grid-template-columns:repeat(2,205px);gap:8px}
  .brand-copy h1{font-size:24px}
  .brand-copy .subtitle{max-width:510px}
}
@media(max-width:1240px){
  .header-right .actions{grid-template-columns:1fr 1fr minmax(240px,1.25fr) 46px}
}
@media(max-width:900px){
  .header-right .actions{grid-template-columns:1fr 1fr 44px}
  .share-tools{grid-column:1/-1;grid-row:auto}
}
@media(max-width:620px){
  .header-right .actions{grid-template-columns:1fr 1fr 42px}
  .share-tools{grid-template-columns:1fr 1fr 1fr;padding:5px}
  .share-tools .share-btn{font-size:9px;padding:6px 4px}
  .share-tools .share-meta{white-space:normal}
}

/* Item-wise PO release visual status */
.po-row-ordered-pending{background:#fff9e6!important;}
.po-row-ordered-pending:hover{background:#fff4cc!important;}
.po-row-ordered-ready{background:#edfdf3!important;}
.po-row-ordered-ready:hover{background:#dcfae6!important;}
.po-release-cell{border-left:4px solid transparent;}
.po-row-ordered-pending .po-release-cell{border-left-color:#f0b429;}
.po-row-ordered-ready .po-release-cell{border-left-color:#12b76a;}
.po-order-state{display:inline-block;margin-top:5px;padding:3px 7px;border-radius:999px;font-size:10px;font-weight:800;}
.po-order-state.pending{background:#fff3cd;color:#9a6700;}
.po-order-state.ready{background:#dcfae6;color:#067647;}
.po-order-state.none{padding:0;background:transparent;color:var(--muted);font-weight:600;}

#po-status-column-filter-styles
.po-status-badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 10px;font-size:10.5px;font-weight:850;white-space:nowrap;border:1px solid transparent}
.po-status-badge.not-released{background:#f2f4f7;color:#667085;border-color:#e4e7ec}
.po-status-badge.ordered-pending{background:#fff3cd;color:#9a6700;border-color:#f3d98b}
.po-status-badge.ordered-sufficient{background:#dcfae6;color:#067647;border-color:#a6e7c3}
.po-release-cell .saved-note{display:block;margin-top:4px}


#item-wise-po-filter-style
.item-po-filter-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;background:#f7fafc;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.item-po-filter-bar label{font-size:11px;font-weight:850;color:#344054;text-transform:uppercase;letter-spacing:.35px}
.item-po-filter-bar select{min-width:245px;padding:8px 10px}
.item-po-filter-count{font-size:11px;color:var(--muted);font-weight:700}
.item-filter-empty td{text-align:center;color:var(--muted);padding:24px!important;background:#fafcfd}


/* Lot-wise inspection planning */
.lot-panel .lot-kpis{display:grid;grid-template-columns:repeat(4,minmax(170px,1fr));gap:14px;padding:18px 22px;background:#f6f9fc;border-bottom:1px solid var(--line)}
.lot-kpi{background:#fff;border:1px solid #d8e2ec;border-radius:15px;padding:16px;box-shadow:0 5px 15px rgba(15,45,70,.05);cursor:pointer;transition:.18s}
.lot-kpi:hover,.lot-kpi.active{transform:translateY(-2px);border-color:#1b5b88;box-shadow:0 9px 22px rgba(15,45,70,.12)}
.lot-kpi .value{font-size:30px;font-weight:800;margin-top:6px}.lot-kpi.critical .value{color:#b42318}.lot-kpi.good .value{color:#137a49}.lot-kpi.warn .value{color:#a66900}
.lot-toolbar{display:grid;grid-template-columns:minmax(280px,1fr) 230px 210px 160px;gap:10px;padding:14px 22px;border-bottom:1px solid var(--line)}
.lot-ready{background:#dcfce7;color:#166534}.lot-partial{background:#fff1d6;color:#9a5a00}.lot-notready{background:#fee2e2;color:#b42318}.lot-pending{background:#ede9fe;color:#6d28d9}.lot-na{background:#e8eef4;color:#51606f}
.lot-mini{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:7px}.lot-summary{padding:9px 12px;border:1px solid #d9e5ef;background:#f8fbfd;border-radius:10px;margin-top:8px}
.manage-lot-btn,.review-lot-btn{border:0;border-radius:9px;background:#184a70;color:#fff;font-weight:800;padding:8px 11px;cursor:pointer}.manage-lot-btn:hover,.review-lot-btn:hover{background:#0f3655}
.modal{position:fixed;inset:0;z-index:5000;display:none;align-items:center;justify-content:center;padding:22px;background:rgba(15,23,42,.62);backdrop-filter:blur(2px)}
.modal.open{display:flex}
.modal-card{width:min(1080px,96vw);max-height:92vh;display:flex;flex-direction:column;background:#fff;border-radius:16px;box-shadow:0 28px 90px rgba(0,0,0,.34);overflow:hidden}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:18px 22px;background:linear-gradient(135deg,#edf5fb,#fff);border-bottom:1px solid #d7e1eb}
.modal-head h2{margin:0 0 5px;color:#173f63;font-size:20px}
.modal-close{width:36px;height:36px;border:1px solid #cbd5df;border-radius:9px;background:#fff;color:#344054;font-size:22px;line-height:1;cursor:pointer}
.modal-body{padding:20px 22px;overflow:auto}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;padding:14px 22px;border-top:1px solid #d7e1eb;background:#f8fafc}
.modal-actions button{cursor:pointer}
body.modal-open{overflow:hidden}
.lot-modal-card{max-width:1050px}.lot-form-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px}.lot-form-grid .wide{grid-column:1/-1}.lot-items-box{max-height:390px;overflow:auto;border:1px solid #d7e1eb;border-radius:12px}.lot-item-row{display:grid;grid-template-columns:42px 75px minmax(260px,1fr) 95px 110px 115px 130px;gap:8px;align-items:center;padding:10px 12px;border-bottom:1px solid #e6edf3}.lot-item-row:last-child{border-bottom:0}.lot-item-row.head{font-weight:800;background:#eef5fa;position:sticky;top:0;z-index:1}
.lot-list{display:grid;gap:10px;margin-top:15px}.lot-list-card{border:1px solid #d8e2ec;border-radius:12px;padding:12px;background:#fff}.lot-list-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.lot-actions{display:flex;gap:7px;flex-wrap:wrap}.lot-danger{background:#fff;border:1px solid #f1a4a0;color:#b42318;border-radius:8px;padding:6px 9px;font-weight:700;cursor:pointer}
.lot-item-tag{display:inline-flex;padding:3px 7px;border-radius:999px;background:#eaf2f8;color:#244c69;font-size:11px;font-weight:700;margin:2px}
.lot-stock-flag{background:#ffe4e6;color:#be123c}.lot-ready-flag{background:#dcfce7;color:#166534}
@media(max-width:1050px){.lot-kpis{grid-template-columns:repeat(2,1fr)!important}.lot-toolbar{grid-template-columns:1fr 1fr}.lot-form-grid{grid-template-columns:1fr 1fr}.lot-item-row{grid-template-columns:36px 55px minmax(210px,1fr) 75px 85px 100px 110px}}
@media(max-width:680px){.lot-kpis,.lot-toolbar,.lot-form-grid{grid-template-columns:1fr!important}.lot-item-row{min-width:850px}}

.share-tools{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.share-btn{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3);padding:9px 12px;border-radius:9px;font-size:11px}.share-btn.primary-share{background:#fff;color:var(--navy)}.share-meta{font-size:9.5px;color:rgba(255,255,255,.72);line-height:1.25;text-align:right}.share-meta b{color:#fff}.restore-input{display:none!important}@media(max-width:900px){.share-meta{text-align:left;width:100%}}

.delete-cso-btn{border:1px solid #dc2626;background:#fff;color:#b91c1c;border-radius:8px;padding:7px 10px;font-weight:700;cursor:pointer;white-space:nowrap}.delete-cso-btn:hover{background:#fee2e2}