/* Kebarick POS global transformation — Stage 4/8
   Visual-only commercial and customer workflows. All API, business logic, roles, data preserved.
   Scope to pos-stage4; retain checkout and previous stages unaffected. */
body.pos-stage4{background:#eff4fb;color:#142b50}
body.pos-stage4 .pos-commerce-workspace{width:100%;max-width:1540px;margin:0 auto;padding:20px clamp(13px,2vw,30px) 56px;min-width:0}
body.pos-stage4 .pos4-hero{background:linear-gradient(118deg,#0c428f,#1263d9);color:#fff;border-radius:16px;padding:21px 23px;display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:13px;box-shadow:0 6px 22px #104d9c22}
body.pos-stage4 .pos4-eyebrow{display:block;letter-spacing:.13em;text-transform:uppercase;font-size:10px;font-weight:850;color:#bed7ff;margin-bottom:7px}
body.pos-stage4 .pos4-hero h1{color:#fff;font-size:clamp(22px,2.3vw,30px);line-height:1.15;margin:0 0 7px;font-weight:850}
body.pos-stage4 .pos4-hero p{color:#deebff;font-size:13px;max-width:775px;line-height:1.55;margin:0}
body.pos-stage4 .pos4-hero-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;flex:none}
body.pos-stage4 .pos4-hero-actions a{display:inline-flex;align-items:center;min-height:38px;padding:8px 12px;text-decoration:none;border-radius:9px;font-size:12px;font-weight:800}
body.pos-stage4 .pos4-subtle-link{background:#ffffff1c;color:#fff;border:1px solid #ffffff60}
body.pos-stage4 .pos4-hero-primary{background:#fff;color:#1454a5;border:1px solid #fff}
body.pos-stage4 .pos4-context{display:flex;align-items:center;gap:9px 12px;flex-wrap:wrap;background:#fff;border:1px solid #dbe7f9;padding:10px 13px;border-radius:12px;margin:0 0 12px;box-shadow:0 5px 20px #1e467509}
body.pos-stage4 .pos4-context label{margin:0;color:#25466e;font-size:12px;font-weight:750;display:inline-flex;align-items:center;gap:7px;max-width:100%}
body.pos-stage4 .pos4-context select{min-width:140px;max-width:240px;width:auto;margin:0;min-height:38px;font-weight:650;background:#f8fbff}
body.pos-stage4 .pos4-context button{min-height:38px;margin:0;padding:8px 14px}
body.pos-stage4 .pos4-section-nav{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 14px;padding:3px 0 10px;border-bottom:1px solid #d9e5f5}
body.pos-stage4 .pos4-section-nav a{background:#e3efff;border:1px solid #d4e4fa;color:#174d91;border-radius:8px;padding:9px 12px;font-size:12px;font-weight:800;text-decoration:none}
body.pos-stage4 .pos4-section-nav a:focus-visible,body.pos-stage4 .pos4-section-nav a:hover{background:#cbdefc;outline-color:#105fcd}
body.pos-stage4 .pos4-two-pane{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,.92fr);gap:13px;align-items:start;margin-bottom:13px}
body.pos-stage4 .pos4-stack{display:grid;gap:13px;min-width:0}
body.pos-stage4 .pos4-task-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;align-items:start;margin-bottom:13px}
body.pos-stage4 .pos4-bottom-stack{display:grid;gap:13px}
body.pos-stage4 .pos4-trailing-settings{margin-top:14px;max-width:100%}
body.pos-stage4 .pos4-secondary-row{margin-top:15px}
body.pos-stage4 .pos-commerce-workspace .card{background:#fff;border:1px solid #dfe9f6;border-radius:14px;box-shadow:0 5px 18px #16467509;padding:18px;margin:0;min-width:0;overflow-wrap:anywhere}
body.pos-stage4 .pos-commerce-workspace .card>h2,body.pos-stage4 .pos-commerce-workspace .card .sectionhead h2{color:#0f4b9b;font-size:18px;font-weight:850;line-height:1.25;margin:3px 0 9px}
body.pos-stage4 .pos-commerce-workspace .card h3{color:#25508c;font-size:14px;font-weight:800;margin-top:18px}
body.pos-stage4 .pos-commerce-workspace .card :is(p,.muted,.hint){line-height:1.55;font-size:12px}
body.pos-stage4 .pos4-panel-kicker{display:block;color:#1d65c0;font-weight:850;font-size:10px!important;letter-spacing:.11em;text-transform:uppercase;margin:0 0 7px!important}
body.pos-stage4 .pos-commerce-workspace :is(input:not([type="checkbox"]),select,textarea){max-width:100%;min-width:0;box-sizing:border-box;border:1px solid #cbdcf2;border-radius:9px;background:#fbfdff;font-size:13px;min-height:38px}
body.pos-stage4 .pos-commerce-workspace input[type="checkbox"]{accent-color:#1262d9}
body.pos-stage4 .pos-commerce-workspace :is(button:not(.secondary),input[type="submit"]){border-radius:9px}
body.pos-stage4 .pos-commerce-workspace :is(input,select,textarea):focus-visible{outline:2px solid #4287e4;outline-offset:1px}
body.pos-stage4 .pos-commerce-workspace :is(form,.items,.sourcing-list,#customers,#orders,#ageing,#product-list){min-width:0}
body.pos-stage4 .pos-commerce-workspace :is(.twocol,.crmline){min-width:0}
body.pos-stage4 .pos-commerce-workspace :is(table){max-width:100%}
body.pos-stage4 .pos-commerce-workspace section.card[id]{scroll-margin-top:24px}
body.pos-stage4 .pos-commerce-workspace :is(.card>#customers,.card>#orders,.card>#tabs,.card>#tickets,.card>#rfqs,.card>#suppliers,.card>#invitations){min-height:95px;background:#fafcff;border-radius:10px;padding:9px;border:1px solid #e9eff8}
body.pos-stage4 .pos-commerce-workspace .card:has(>div#orders),body.pos-stage4 .pos-commerce-workspace .card:has(>div#customers){min-height:265px}
body.pos-stage4 .pos-commerce-workspace #message,body.pos-stage4 .pos-commerce-workspace #status{overflow-wrap:anywhere}
body.pos-stage4 .pos-commerce-workspace .sourcing-grid,body.pos-stage4 .pos-commerce-workspace .crmgrid,body.pos-stage4 .pos-commerce-workspace .commerce-grid{display:contents}
/* Commerce focus */
body.pos-stage4-commerce .pos4-commerce-primary{grid-template-columns:minmax(0,1.45fr) minmax(330px,1fr)}
body.pos-stage4-commerce #store-setup form{max-width:760px}
body.pos-stage4-commerce #online-orders{min-height:350px}
/* Sourcing RFQ search and offers: no fixed-width columns on smaller screens */
body.pos-stage4-sourcing .pos4-sourcing-primary{grid-template-columns:minmax(0,.92fr) minmax(0,1.25fr)}
body.pos-stage4-sourcing #directory{min-height:360px}
body.pos-stage4-sourcing #request-quote{min-height:360px}
/* CRM: consent and gift module keep their existing draft-only semantics */
body.pos-stage4-crm .crmnote{margin:0 0 12px;border-left-color:#1667d6;background:#eaf3ff;color:#284d80}
body.pos-stage4-crm .crmfield input,body.pos-stage4-crm .crmfield select{width:100%}
/* Hospitality: respect existing data-pack visibility; NEVER force hidden sections to display */
body.pos-stage4-hospitality .pos4-hospitality-primary{grid-template-columns:minmax(0,1.5fr) minmax(330px,.95fr)}
body.pos-stage4-hospitality #running-tabs{min-height:320px}
body.pos-stage4-hospitality #new-order form{display:grid;gap:8px}
body.pos-stage4-hospitality #new-order form label{min-width:0}
body.pos-stage4-hospitality .pos4-task-grid:has(>[hidden]){display:grid}
body.pos-stage4-trade #accounts{min-height:330px}
body.pos-stage4-trade #ageing{min-height:120px}
body.pos-stage4-trade .pos4-context label{white-space:normal}
@media(min-width:1050px){body.pos-stage4 .pos-commerce-workspace .pos4-trade-overview>section:first-child,body.pos-stage4 .pos-commerce-workspace #online-orders{position:relative}}
@media(max-width:1000px){
 body.pos-stage4 .pos4-two-pane,body.pos-stage4 .pos4-task-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 body.pos-stage4 .pos4-trade-overview,body.pos-stage4 .pos4-hospitality-primary,body.pos-stage4 .pos4-commerce-primary,body.pos-stage4 .pos4-sourcing-primary{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:670px){
 body.pos-stage4 .pos-commerce-workspace{padding:11px 10px 34px}
 body.pos-stage4 .pos4-hero{padding:17px 15px;align-items:stretch;flex-direction:column;border-radius:12px}
 body.pos-stage4 .pos4-hero-actions{width:100%}
 body.pos-stage4 .pos4-hero-actions a{flex:1;justify-content:center}
 body.pos-stage4 .pos4-two-pane,body.pos-stage4 .pos4-task-grid{grid-template-columns:minmax(0,1fr)!important;gap:10px}
 body.pos-stage4 .pos-commerce-workspace .card{padding:14px;border-radius:11px}
 body.pos-stage4 .pos4-context{display:grid;grid-template-columns:1fr 1fr;align-items:end}
 body.pos-stage4 .pos4-context label{display:grid;grid-template-columns:1fr;gap:4px}
 body.pos-stage4 .pos4-context select{width:100%;max-width:none;min-width:0}
 body.pos-stage4 .pos4-context button{grid-column:1/-1}
 body.pos-stage4 .pos4-section-nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;max-width:100%;padding-bottom:9px}
 body.pos-stage4 .pos4-section-nav a{white-space:nowrap;flex:none}
 body.pos-stage4 .pos-commerce-workspace .twocol{grid-template-columns:minmax(0,1fr)}
 body.pos-stage4 .pos-commerce-workspace .card{min-width:0}
}

body.pos-stage4 .pos4-procurement-flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:11px 13px;margin:-2px 0 13px;background:#fff;border:1px solid #d9e6f7;border-radius:12px}
body.pos-stage4 .pos4-procurement-caption{color:#5c7192;letter-spacing:.09em;font-size:10px;font-weight:850;margin-right:5px}
body.pos-stage4 .pos4-procurement-flow a{display:inline-flex;gap:6px;align-items:center;text-decoration:none;font-size:11px;font-weight:750;color:#21569d;background:#f1f6ff;padding:7px 9px;border-radius:8px;border:1px solid #dce9fb}
body.pos-stage4 .pos4-procurement-flow b{display:grid;place-items:center;background:#1769d7;color:#fff;width:22px;height:22px;font-size:10px;border-radius:7px}
body.pos-stage4 .pos4-procurement-flow a:hover{background:#dbeaff}
/* Existing hospitality `.wide` spans two columns in its legacy grid; reset in the new independent layout. */
body.pos-stage4-hospitality .pos4-hospitality-primary>#running-tabs{grid-column:auto!important;grid-row:auto!important}
body.pos-stage4-hospitality .pos4-hospitality-primary>#new-order{grid-column:auto!important;grid-row:auto!important}