:root{--bg:#e8f0ed;--panel:#fff;--ink:#003f42;--muted:#68807d;--line:#c8d9d5;--teal:#078579;--teal-soft:#dbefeb;--red:#bd2b31;--red-soft:#fde9e9;--green:#087b53;--green-soft:#dcf3e8;--blue:#0769a9;--shadow:0 13px 35px rgba(26,63,60,.08)}
*{box-sizing:border-box}[hidden]{display:none!important}html{font-size:16px}body{margin:0;background:#dce6e3;color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.app-shell{width:100%;min-height:100vh;background:var(--bg);display:grid;grid-template-columns:146px minmax(0,1fr)}.side{grid-column:1;grid-row:1;position:sticky;top:14px;height:calc(100vh - 28px);margin:14px 10px;background:#fff;border:1px solid #d1dfdc;border-radius:22px;padding:18px 10px;display:flex;flex-direction:column;z-index:7;box-shadow:0 12px 32px rgba(23,62,58,.09)}.logo{display:grid;justify-items:center;gap:7px;padding:0 4px 22px}.logo span{display:grid;place-items:center;width:43px;height:43px;border-radius:13px;background:var(--ink);color:#fff;font-size:22px;font-weight:900}.logo strong{font-size:15px;text-align:center}.side nav{display:grid;gap:5px}.nav{position:relative;border:0;background:transparent;border-radius:15px;padding:10px 6px;display:grid;justify-items:center;gap:4px;color:#70817e;font:inherit;cursor:pointer}.nav:hover,.nav.active{background:var(--teal-soft);color:var(--red)}.nav-icon{display:grid;place-items:center;width:38px;height:34px}.nav-icon svg{width:31px;height:31px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.nav b{font-size:12px}.nav em{position:absolute;top:5px;right:21px;background:#0872af;color:#fff;border-radius:50%;min-width:21px;height:21px;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:10px}.settings{margin-top:auto}
main{grid-column:2;grid-row:1;width:100%;max-width:1370px;justify-self:center;min-width:0;padding:31px 44px 55px}.header{position:sticky;top:0;z-index:6;background:#fff;margin:-31px -44px 0;padding:24px 44px;display:grid;grid-template-columns:auto minmax(330px,1fr) auto;gap:28px;align-items:center;border-bottom:1px solid #d8e3e0;box-shadow:0 7px 18px rgba(26,63,60,.05)}.kicker{margin:0 0 5px;color:var(--blue);font-size:11px;letter-spacing:.11em;font-weight:900}.header h1{font-size:34px;margin:0;letter-spacing:-.03em}.header-right{display:flex;align-items:center;gap:12px}.saved{background:var(--teal-soft);color:#00685f;border-radius:30px;padding:11px 17px;font-size:14px;font-weight:750}.saved span{margin-right:4px}.add-btn,.main-btn,.soft-btn,.delete-btn,.close,.back-btn{font:inherit;cursor:pointer;border:0}.add-btn{display:flex;align-items:center;gap:9px;background:#fff;color:var(--ink);border:1px solid #adc4bf;border-radius:12px;padding:9px 16px;font-weight:800}.add-btn span{font-size:25px;font-weight:400}.main-btn{background:var(--ink);color:#fff;border-radius:10px;padding:11px 16px;font-weight:800}.main-btn:hover{background:#006466}.soft-btn{background:#edf2f0;color:#405b57;border-radius:10px;padding:11px 15px;font-weight:750}.delete-btn{background:transparent;color:var(--red);padding:10px;font-weight:800}.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.top-summary{margin:28px 0}.summary article{background:#fff;border:1px solid #d5e2df;border-radius:15px;padding:19px 20px}.summary small,.summary span{display:block;color:var(--muted);font-size:12px}.summary strong{display:block;font-size:26px;letter-spacing:-.035em;margin:7px 0 2px}.summary article.profit{background:var(--ink);border-color:var(--ink);color:#fff}.summary article.profit small,.summary article.profit span{color:#b9d1ce}
.toolbar{display:grid;grid-template-columns:minmax(190px,1fr) 175px;gap:10px;margin:0;padding:10px;background:var(--teal-soft);border:1px solid #bfd7d2;border-radius:16px}.toolbar.single{grid-template-columns:1fr}.header>.toolbar[hidden]+.header-right{grid-column:3}.search{background:#fff;border:1px solid #c4d5d1;border-radius:12px;display:flex;align-items:center;gap:10px;padding:0 14px}.search span{font-size:22px;color:var(--teal)}.search input{width:100%;border:0;outline:0;padding:12px 0;background:transparent;font:inherit}.toolbar select{min-width:0;border:1px solid #c4d5d1;background:#fff;border-radius:12px;padding:0 12px;font:inherit;color:var(--ink);font-weight:750}.section-line{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;font-weight:750;margin:27px 4px 12px}.card-list{display:grid;gap:14px}.customer-card,.purchase-card{background:#fff;border:1px solid transparent;border-radius:18px;padding:20px 22px;box-shadow:var(--shadow);display:grid;align-items:center;gap:20px}.customer-card{grid-template-columns:minmax(260px,1fr) minmax(300px,.85fr) 38px;cursor:pointer}.purchase-card{grid-template-columns:minmax(210px,1.2fr) minmax(180px,.8fr) minmax(190px,.8fr) auto}.customer-card:hover,.purchase-card:hover{border-color:#5cbcaf;transform:translateY(-1px)}.customer-card h2,.purchase-card h2{margin:7px 0 4px;font-size:21px;letter-spacing:-.02em}.meta{font-size:12px;color:var(--muted)}.updated{font-size:12px;color:#78908c;margin-top:8px;font-weight:650}.tags{display:flex;gap:7px;flex-wrap:wrap}.tag{display:inline-flex;align-items:center;background:#e6f2f8;color:var(--blue);border-radius:18px;padding:5px 9px;font-size:11px;font-weight:850}.tag.accessory{background:#eef0ee;color:#566864}.customer-earned{margin-top:12px;color:var(--muted);font-size:12px;font-weight:750}.customer-earned strong{font-size:16px;margin-left:5px}.customer-overview{text-align:right}.order-ref{display:block;color:#00675f;font-size:13px;font-weight:900;margin-bottom:9px}.status-pills{display:flex;gap:7px;justify-content:flex-end;flex-wrap:wrap}.status-pill{border:1px solid #bfd1cd;border-radius:20px;background:#f5f8f7;color:#607a75;padding:6px 9px;font-size:11px;font-weight:850}.status-pill.paid{background:var(--green-soft);border-color:#acd9c4;color:var(--green)}.status-pill.unpaid{background:var(--red-soft);border-color:#f4c5c6;color:var(--red)}.status-pill.delivered{background:#dfeefa;border-color:#bdd9ed;color:#176995}.money-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.money-grid div{border-left:1px solid #dbe4e2;padding-left:10px}.money-grid span{display:block;font-size:10px;color:var(--muted);text-transform:uppercase}.money-grid strong{font-size:14px}.margin-positive{color:var(--green)}.margin-negative{color:var(--red)}.state-stack{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.state-btn{border:1px solid #b9ceca;border-radius:20px;background:#f5f8f7;color:#5e7773;padding:7px 10px;font:inherit;font-size:12px;font-weight:850;cursor:pointer}.state-btn.paid{background:var(--green-soft);color:var(--green)}.state-btn.unpaid{background:var(--red-soft);color:var(--red)}.state-btn.delivered{background:#dfeefa;color:#176995}.edit-btn{border:0;background:#eff4f2;color:#58706c;border-radius:50%;width:36px;height:36px;font-size:18px;cursor:pointer}.notes-preview{font-size:12px;color:#526b67;margin-top:8px;padding-left:9px;border-left:2px solid #b8cfca;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:420px}.bottom-summary{margin-top:24px}.bottom-summary.three{grid-template-columns:repeat(3,1fr)}.empty{text-align:center;background:#fff;border:1px dashed #b9cbc7;border-radius:17px;padding:58px 20px}.empty.compact{padding:30px}.empty>span{display:grid;place-items:center;width:48px;height:48px;border:1px solid #b7cbc7;border-radius:13px;margin:auto;font-size:28px}.empty h2{margin:13px 0 5px}.empty p{margin:0 0 18px;color:var(--muted)}
.status-heading{display:flex;justify-content:space-between;align-items:end;margin:30px 3px 14px}.status-heading h2{margin:0;font-size:23px}.status-heading>span{color:var(--muted);font-size:13px}.margin-list{display:grid;gap:10px}.margin-row{background:#fff;border:1px solid #d5e2df;border-radius:14px;padding:17px 19px;display:grid;grid-template-columns:1.3fr repeat(4,.7fr) 26px;gap:14px;align-items:center;cursor:pointer}.margin-row:hover{border-color:#5cbcaf}.margin-row h3{margin:0;font-size:17px}.margin-row small{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;margin-bottom:3px}.margin-row strong{font-size:14px}.row-arrow{font-size:22px;color:var(--teal)}
.inventory-summary{margin:28px 0 24px;background:#fff;border:1px solid #d3e1de;border-radius:18px;display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden}.inventory-summary div{text-align:center;padding:18px;border-right:1px solid #d7e3e0}.inventory-summary div:last-child{border-right:0}.inventory-summary small{display:block;color:var(--muted);font-weight:750}.inventory-summary strong{display:block;font-size:27px;margin-top:4px}.inventory-head{display:flex;align-items:end;justify-content:space-between;margin:0 4px 14px}.inventory-head h2{margin:0;font-size:26px}.inventory-head>span{color:var(--muted);font-size:12px}.inventory-list{display:grid;gap:14px}.inventory-row{background:#fff;border:1px solid #d4e2df;border-radius:19px;padding:21px;display:grid;grid-template-columns:1.2fr 1.5fr 1.4fr;align-items:center;gap:22px;box-shadow:var(--shadow)}.inventory-row.low-stock{background:#fffaf0;border-left:6px solid #dda914}.inventory-row h3{font-size:18px}.inventory-row h3 span{color:var(--muted);font-size:13px}.stock-values{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.stock-values div{background:#eff5f3;border-radius:11px;padding:11px;text-align:center}.stock-values small{display:block;color:var(--muted);font-weight:750}.stock-values strong{font-size:23px}.stock-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}.stock-controls>button,.stock-controls label span button{border:1px solid #aac7c1;background:#fff;color:var(--ink);border-radius:11px;padding:9px;font:inherit;font-weight:800;cursor:pointer}.stock-controls>button{display:grid}.stock-controls button b{font-size:21px}.stock-controls button small{font-weight:800}.stock-controls .stock-add,.stock-controls label span button{background:#087064;color:#fff}.stock-controls label{grid-column:1/-1;color:var(--muted);font-size:10px;font-weight:800}.stock-controls label span{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}.stock-controls input{width:100%;min-width:0;border:1px solid #aac7c1;border-radius:11px;padding:10px;text-align:center;font:inherit;font-weight:800;color:var(--ink)}
.back-btn{background:transparent;color:var(--teal);font-weight:800;padding:2px 0;margin:27px 0 16px}.detail-card{background:#fff;border:1px solid #d3e1de;border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}.detail-hero{padding:28px;display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #dce6e3}.detail-hero h2{font-size:30px;margin:6px 0}.detail-actions{display:flex;align-items:flex-start;gap:9px}.detail-grid{display:grid;grid-template-columns:1.15fr .85fr}.detail-section{padding:25px 28px;border-right:1px solid #dce6e3}.detail-section:last-child{border-right:0}.detail-section h3{margin:0 0 18px;font-size:16px}.detail-facts{display:grid;grid-template-columns:1fr 1fr;gap:18px}.detail-facts div,.finance-box{background:#f2f7f5;border-radius:12px;padding:14px}.detail-facts small,.finance-box small{display:block;color:var(--muted);font-size:11px;margin-bottom:4px}.detail-facts strong,.finance-box strong{font-size:16px}.finance-stack{display:grid;gap:9px}.finance-box.profit-detail{background:var(--ink);color:#fff}.finance-box.profit-detail small{color:#bad2cf}.detail-notes{padding:24px 28px;border-top:1px solid #dce6e3}.detail-notes h3{margin-top:0}.detail-note{padding:12px 0;border-bottom:1px solid #e3ebe9}.detail-note time{display:block;color:var(--muted);font-size:11px;margin-top:4px}
dialog{width:min(760px,calc(100% - 24px));max-height:92vh;border:0;border-radius:18px;padding:0;box-shadow:0 30px 100px rgba(0,35,35,.35);color:var(--ink)}dialog::backdrop{background:rgba(0,35,35,.55);backdrop-filter:blur(3px)}dialog form,#settingsDialog{padding:25px;overflow:auto;max-height:92vh}.small-dialog{width:min(440px,calc(100% - 24px));padding:25px}.dialog-head{display:flex;justify-content:space-between;align-items:flex-start}.dialog-head h2{margin:0;font-size:27px}.close{background:#edf2f0;color:#506864;width:35px;height:35px;border-radius:50%;font-size:23px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:20px}.form-grid .span2{grid-column:1/-1}.form-grid label,.product-row label,.full-label{display:grid;gap:6px;font-size:12px;font-weight:800;color:#536c68}.form-grid input,.form-grid select,.product-row input,.product-row select,.full-label textarea,.note-entry textarea{width:100%;border:1px solid #cbd9d6;background:#fafcfb;border-radius:9px;padding:10px 11px;outline:0;font:inherit;color:var(--ink)}input:focus,select:focus,textarea:focus{border-color:var(--teal)!important;box-shadow:0 0 0 3px rgba(0,141,131,.1)}.form-heading{font-size:14px;margin:22px 0 10px;border-top:1px solid #e0e8e6;padding-top:17px}.product-row{display:grid;grid-template-columns:1.4fr repeat(3,.65fr);gap:10px}.calculated{background:var(--teal-soft);border-radius:9px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center}.calculated span{font-size:12px;color:#4d6d68}.calculated strong{font-size:17px}.notes-history{display:grid;gap:6px;max-height:110px;overflow:auto}.note{background:#f2f6f4;border-radius:8px;padding:8px 10px;font-size:13px}.note time{display:block;font-size:10px;color:#829590;margin-top:3px}.note-entry{display:grid;grid-template-columns:1fr auto;gap:8px}.dialog-actions{position:sticky;bottom:-25px;z-index:3;display:grid;grid-template-columns:auto 1fr auto auto;gap:9px;margin:24px -25px -25px;padding:15px 25px 25px;align-items:center;background:#fff;border-top:1px solid #dce6e3;box-shadow:0 -10px 22px rgba(26,63,60,.06)}.info{color:var(--muted);line-height:1.5;font-size:14px}.full{width:100%;display:block;text-align:center;margin-top:10px}.upload input{display:none}#toast{position:fixed;bottom:22px;left:50%;z-index:10;transform:translate(-50%,20px);opacity:0;background:var(--ink);color:#fff;padding:11px 16px;border-radius:10px;font-size:13px;transition:.2s;pointer-events:none}#toast.show{opacity:1;transform:translate(-50%,0)}.saved.sync-error{background:var(--red-soft);color:var(--red)}
.price-panel{margin:28px 0;background:#deece9;border:1px solid #bdd5d0;border-radius:19px;padding:20px}.price-panel-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:15px}.price-panel-head h2{margin:0;font-size:24px}.price-panel-head>span{color:var(--muted);font-size:12px}.price-list{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.price-row{background:#fff;border:1px solid #d0dfdc;border-radius:12px;padding:11px 12px;display:grid;grid-template-columns:70px 1fr auto;gap:10px;align-items:end}.price-row>strong{align-self:center}.price-row label{display:grid;gap:4px;color:var(--muted);font-size:10px;font-weight:800}.price-row input{width:100%;border:1px solid #cbd9d6;border-radius:8px;padding:8px;font:inherit;color:var(--ink)}.customer-earned{margin-top:12px;color:var(--muted);font-size:12px;font-weight:750}.customer-earned strong{font-size:16px;margin-left:5px}.order-history{padding:25px 28px}.order-history>h3{margin:0 0 16px}.order-drape{border:1px solid #d4e2df;border-radius:15px;margin-bottom:11px;overflow:hidden;background:#fff}.order-drape[open]{border-color:#80c5bb;box-shadow:0 9px 22px rgba(26,63,60,.06)}.order-drape summary{list-style:none;padding:17px 48px 17px 17px;position:relative;cursor:pointer}.order-drape summary::-webkit-details-marker{display:none}.order-drape summary:after{content:"⌄";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:24px;color:var(--teal);transition:.2s}.order-drape[open] summary:after{transform:translateY(-50%) rotate(180deg)}.order-drape h4{margin:9px 0 3px}.order-drape small{color:var(--muted)}.drape-hint{position:absolute;right:48px;top:19px;color:var(--muted);font-size:11px;font-weight:800}.order-drape-content{border-top:1px solid #e1e9e7;background:#f9fbfa;padding:16px 17px;display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:22px;align-items:center}.history-finance{display:grid;gap:5px;max-width:390px}.history-finance span{display:flex;justify-content:space-between;gap:14px;color:var(--muted);font-size:12px}.history-finance b{color:var(--ink)}.inline-order{margin:22px 28px 0;padding:20px!important;max-height:none!important;overflow:visible!important;background:#eef7f4;border:1px solid #9dcfc7;border-radius:16px}.inline-order-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:16px}.inline-order-head h3{margin:2px 0 0;font-size:20px}.inline-order-grid{display:grid;grid-template-columns:1.25fr repeat(3,.7fr);gap:10px}.inline-order label{display:grid;gap:6px;color:#536c68;font-size:11px;font-weight:800}.inline-order input,.inline-order select{width:100%;min-width:0;border:1px solid #c4d7d3;background:#fff;border-radius:9px;padding:10px;font:inherit;color:var(--ink)}.inline-order-bottom{display:grid;grid-template-columns:1fr 1.2fr auto;gap:12px;align-items:end;margin-top:12px}.inline-calculation{background:#fff;border-radius:10px;padding:10px 12px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.inline-calculation span{color:var(--muted);font-size:11px}.inline-calculation b{display:block;color:var(--ink);font-size:16px;margin-top:3px}.inline-actions{display:flex;gap:8px}.empty.compact{padding:30px}.form-heading small{color:var(--muted);font-weight:600}.product-quantities{grid-template-columns:repeat(3,1fr)}.full-label select{width:100%;border:1px solid #cbd9d6;background:#fafcfb;border-radius:9px;padding:10px 11px;outline:0;font:inherit;color:var(--ink)}
@media(max-width:1050px){.header{grid-template-columns:auto 1fr}.header .toolbar{grid-column:1/-1;grid-row:2}.header-right{grid-column:2;grid-row:1;justify-self:end}.customer-card{grid-template-columns:1fr minmax(250px,.8fr) 38px}.purchase-card{grid-template-columns:1fr 1fr}.summary{grid-template-columns:repeat(2,1fr)}.margin-row{grid-template-columns:1.2fr repeat(2,.7fr) 26px}.margin-row .optional{display:none}.history-order{grid-template-columns:1fr 1fr}.history-order .status-pills{grid-column:1/-1}.price-list{grid-template-columns:1fr}}
@media(max-width:720px){body{background:var(--bg)}.app-shell{display:block}.side{position:fixed;top:auto;bottom:0;left:0;right:0;height:74px;padding:7px 6px;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid #cad9d5;border-left:0}.logo{display:none}.side nav{display:contents}.nav,.settings{margin:0;padding:5px;gap:2px}.nav-icon{width:28px;height:25px}.nav-icon svg{width:24px;height:24px}.nav b{font-size:9px}.nav em{top:0;right:18%;min-width:19px;height:19px;font-size:10px}main{padding:22px 14px 96px}.header{margin:-22px -14px 0;padding:20px 14px}.header h1{font-size:27px}.saved{display:none}.add-btn b{display:none}.add-btn{padding:5px 11px}.toolbar{grid-template-columns:1fr;padding:10px}.toolbar select{height:43px}.customer-card,.purchase-card,.margin-row,.inventory-row{grid-template-columns:1fr;padding:17px}.customer-overview{text-align:left}.status-pills{justify-content:flex-start}.customer-card>.edit-btn{position:absolute;right:27px}.money-grid{margin:4px 0}.summary{gap:8px}.summary article{padding:13px}.summary strong{font-size:20px}.section-line span:last-child,.status-heading>span,.inventory-head>span{display:none}.product-row{grid-template-columns:1fr 1fr}.bottom-summary.three{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-grid .span2{grid-column:auto}.dialog-actions{grid-template-columns:auto 1fr auto}.dialog-actions .soft-btn{display:none}.detail-hero{padding:21px;display:block}.detail-actions{margin-top:17px}.detail-grid{grid-template-columns:1fr}.detail-section{border-right:0;border-bottom:1px solid #dce6e3;padding:21px}.detail-facts{grid-template-columns:1fr 1fr}.detail-notes{padding:21px}.status-heading{margin-top:24px}.inventory-summary div{padding:13px 6px}.inventory-summary strong{font-size:21px}}
@media(max-width:720px){.header{grid-template-columns:1fr auto;gap:14px}.header .toolbar{grid-column:1/-1}.header-right{grid-column:2}.price-panel{padding:14px}.price-panel-head>span{display:none}.price-row{grid-template-columns:58px 1fr}.price-row>button{grid-column:1/-1}.history-order{grid-template-columns:1fr}.history-order .status-pills{grid-column:auto}.order-history{padding:20px}.detail-actions{flex-wrap:wrap}.product-quantities{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1050px){.header>.toolbar[hidden]+.header-right{grid-column:2}}
@media(max-width:1050px){.inline-order-bottom{grid-template-columns:1fr 1fr}.inline-actions{grid-column:1/-1;justify-content:flex-end}}
@media(max-width:720px){.side{margin:0;width:auto;border-radius:0}.header{top:0}.inline-order{margin:14px 14px 0;padding:16px!important}.inline-order-grid{grid-template-columns:1fr 1fr}.inline-order-bottom{grid-template-columns:1fr}.inline-actions{grid-column:auto}.order-drape-content{grid-template-columns:1fr}.order-drape-content .status-pills{justify-content:flex-start}.drape-hint{display:none}}
.order-state-actions{display:grid;justify-items:end;gap:10px}.order-buttons{display:flex;gap:7px}.order-buttons .soft-btn{padding:7px 11px;font-size:12px}.order-delete{border:0;background:var(--red-soft);color:var(--red);border-radius:10px;padding:7px 11px;font:inherit;font-size:12px;font-weight:800;cursor:pointer}.price-note{margin:12px 0 0;color:#55716c;font-size:11px}.price-warning{margin:12px 0 0;background:#fff5dc;border:1px solid #e3bc55;border-radius:9px;padding:9px 11px;color:#7b5700;font-size:12px;font-weight:750}.price-row [data-price-save]{min-width:68px}
@media(max-width:720px){.order-state-actions{justify-items:start}.order-buttons{flex-wrap:wrap}}
.card-list{gap:11px}.customer-card{padding:15px 18px;gap:14px;border-radius:15px}.customer-card h2{margin:5px 0 2px;font-size:19px}.customer-card .tags{gap:5px}.customer-card .tag{padding:4px 8px;font-size:10px}.customer-card .order-ref{margin-bottom:6px}.customer-card .updated{margin-top:5px}.customer-finance-strip{display:flex;align-items:center;gap:18px;margin-top:8px;color:var(--muted);font-size:11px;font-weight:750}.customer-finance-strip span{display:flex;align-items:center;gap:6px}.customer-finance-strip strong{font-size:15px;color:var(--ink)}.status-pill.waiting,.state-btn.waiting,.purchase-card .state-btn:not(.delivered){background:var(--red-soft);border-color:#f4c5c6;color:var(--red)}.detail-note-entry{display:grid;grid-template-columns:1fr auto;gap:9px;margin:0 0 14px}.detail-note-entry textarea{width:100%;resize:vertical;border:1px solid #cbd9d6;background:#fafcfb;border-radius:9px;padding:10px 11px;outline:0;font:inherit;color:var(--ink)}.detail-note-entry .main-btn{align-self:stretch}.customer-expected-date{margin-top:12px}.inline-order-grid{grid-template-columns:1.2fr repeat(4,.65fr)}
@media(max-width:1050px){.inline-order-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.inline-order-grid{grid-template-columns:1fr 1fr}.customer-finance-strip{flex-wrap:wrap;gap:8px 16px}.detail-note-entry{grid-template-columns:1fr}.detail-note-entry .main-btn{justify-self:end}}
.undo-customer{border:1px solid #e4a6a8;background:var(--red-soft);color:var(--red);border-radius:12px;padding:10px 13px;font:inherit;font-size:12px;font-weight:850;cursor:pointer;max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.undo-customer:hover{background:#f8dfe0}.undo-customer:disabled{border-color:#d5dfdd;background:#edf2f0;color:#7c8d89;cursor:not-allowed;opacity:.8}
@media(max-width:720px){.undo-customer{max-width:125px;padding:9px 10px}.header-right{gap:7px}}

/* Uppdatering 12: kompakt, fristående toppkort */
main{padding-top:18px}
.header{top:14px;margin:0 0 24px;padding:14px 18px;grid-template-columns:auto minmax(280px,1fr) auto;gap:16px;border:1px solid #d1dfdc;border-radius:22px;box-shadow:0 12px 32px rgba(23,62,58,.09)}
.header h1{font-size:30px}
.toolbar{padding:6px;border-radius:14px;grid-template-columns:minmax(170px,1fr) 155px;gap:7px}
.search{padding:0 12px;border-radius:10px}.search span{font-size:19px}.search input{padding:9px 0}
.toolbar select{padding:0 10px;border-radius:10px}
.saved{padding:9px 13px;font-size:12px}.add-btn{padding:7px 13px}.add-btn span{font-size:21px}
.undo-customer{padding:9px 11px}
@media(max-width:1050px){.header{grid-template-columns:auto 1fr}.header .toolbar{grid-column:1/-1;grid-row:2}.header-right{grid-column:2;grid-row:1}.toolbar{grid-template-columns:minmax(170px,1fr) 155px}}
@media(max-width:720px){main{padding:10px 10px 90px}.header{top:8px;margin:0 0 16px;padding:12px;border-radius:18px;grid-template-columns:1fr auto;gap:10px}.header h1{font-size:24px}.header .toolbar{grid-template-columns:1fr;padding:6px}.toolbar select{height:38px}.header-right{gap:5px}.undo-customer{max-width:108px;padding:7px 8px;font-size:10px}.add-btn{padding:5px 9px}}

/* Uppdatering 13: tätare kundkort */
.customer-card{position:relative;grid-template-columns:minmax(0,1fr) auto 38px;padding:11px 14px;gap:18px}
.customer-main{min-width:0}.customer-topline,.customer-name-line,.customer-bottomline{display:flex;align-items:center;gap:14px}.customer-topline{justify-content:space-between}.customer-name-line{align-items:baseline}.customer-bottomline{margin-top:2px}
.customer-card h2{margin:4px 0 1px}.customer-number{color:#00675f;font-size:13px;font-weight:900;white-space:nowrap}
.customer-price,.customer-earned{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:11px;font-weight:750;white-space:nowrap}.customer-price strong,.customer-earned strong{font-size:15px;color:var(--ink)}.customer-earned{margin:0}
.customer-overview .status-pills{gap:14px;align-items:center}.delivery-pill{display:grid;gap:1px;min-width:104px;text-align:center}.delivery-pill b{font-size:11px}.delivery-pill small{font-size:10px;color:inherit;white-space:nowrap}.payment-pill{margin-left:2px}
@media(max-width:720px){.customer-card{grid-template-columns:1fr;padding:12px}.customer-topline{align-items:flex-start;padding-right:40px}.customer-topline,.customer-bottomline{flex-wrap:wrap;gap:6px 14px}.customer-name-line{gap:8px}.customer-overview{grid-column:1;text-align:left}.customer-overview .status-pills{justify-content:flex-start;gap:12px}.customer-card>.edit-btn{top:12px;right:12px}}

/* Uppdatering 14: styckpris och ombyggd kundrad */
.customer-name-line{margin-bottom:7px}
.customer-product-line{display:flex;align-items:center;flex-wrap:wrap;gap:7px}
.customer-product-line .tags{gap:5px}
.customer-product-line .customer-price{margin-left:3px}
.customer-product-line .customer-earned{margin-left:12px}
.order-count-pill{background:#eef2f1;color:#526965;border-color:#d3dedb;white-space:nowrap}
.customer-overview .status-pills{gap:12px}
@media(max-width:720px){.customer-product-line{padding-right:38px}.customer-product-line .customer-earned{margin-left:0}}

/* Uppdatering 15: extra WTR-rad i leverantörsbeställning */
#purchaseWtrProductWrap input[readonly]{background:#eef4f2;color:var(--ink);font-weight:850}
.purchase-addon{display:inline-block;margin-left:8px;color:#00675f;font-size:13px;font-weight:850}
.logo small{display:block;color:#6b827e;font-size:10px;font-weight:850;letter-spacing:.08em;margin-top:-5px}

/* Uppdatering 16: större toppkort och lagersaldo per produkt */
.header{padding:19px 22px;min-height:116px}.header h1{font-size:32px}
.inventory-head{margin-top:28px}
.inventory-balance-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0}
.inventory-balance-card{border:1px solid;border-radius:14px;padding:13px 14px;display:grid;gap:3px;min-width:0}
.inventory-balance-card strong{font-size:24px;line-height:1}.inventory-balance-card b{font-size:13px}.inventory-balance-card small{font-size:10px;font-weight:750;opacity:.8}
.inventory-balance-card.in-stock{background:#e2f5eb;border-color:#a7d9bf;color:#007047}
.inventory-balance-card.out-stock{background:var(--red-soft);border-color:#f0b9bc;color:var(--red)}
.inventory-summary{margin:12px 0 24px}
@media(max-width:1050px){.inventory-balance-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.header{padding:15px;min-height:0}.header h1{font-size:26px}.inventory-balance-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.inventory-balance-card{padding:11px}.inventory-balance-card strong{font-size:21px}}

/* Uppdatering 18: lagersaldo synligt direkt på kundsidan */
.customer-stock-panel{margin:22px 0 8px;background:#fff;border:1px solid #d1dfdc;border-radius:18px;padding:13px 14px;box-shadow:var(--shadow)}
.customer-stock-head{display:flex;justify-content:space-between;align-items:center;margin:0 2px 10px;color:var(--ink)}.customer-stock-head span{color:var(--muted);font-size:11px;font-weight:750}
.customer-balance-grid{grid-template-columns:repeat(8,minmax(0,1fr));margin:0;gap:7px}.customer-balance-grid .inventory-balance-card{padding:9px 10px;border-radius:11px}.customer-balance-grid .inventory-balance-card strong{font-size:20px}.customer-balance-grid .inventory-balance-card small{font-size:8px}
@media(max-width:1050px){.customer-balance-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:720px){.customer-stock-panel{margin-top:14px;padding:10px}.customer-stock-head span{display:none}.customer-balance-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Uppdatering 19: gemensamt och låst kundhuvud med lagersaldo */
.header .customer-stock-panel{grid-column:1/-1;width:100%;margin:0;padding:13px 0 0;background:transparent;border:0;border-top:1px solid #d8e3e0;border-radius:0;box-shadow:none}
.header .customer-stock-head{margin:0 2px 9px}
@media(max-width:720px){.header .customer-stock-panel{margin:0;padding:10px 0 0}.header .customer-balance-grid{display:flex;overflow-x:auto;gap:7px;padding:0 0 2px;scroll-snap-type:x proximity}.header .customer-balance-grid .inventory-balance-card{flex:0 0 118px;scroll-snap-align:start}}


/* Version 20 rebuild: forced layout + mobile 4x2, based on v19 */
.inventory-balance-card{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:auto auto!important;
  column-gap:8px!important;
  row-gap:3px!important;
  padding:9px 10px!important;
  min-height:60px!important;
  align-items:start!important;
}
.inventory-balance-card>b{
  grid-column:1!important;
  grid-row:1!important;
  align-self:start!important;
  justify-self:start!important;
  margin:0!important;
  font-size:13px!important;
  line-height:1.1!important;
}
.inventory-balance-card>strong{
  grid-column:2!important;
  grid-row:1!important;
  align-self:start!important;
  justify-self:end!important;
  margin:0!important;
  padding:0!important;
  font-size:22px!important;
  line-height:1!important;
}
.inventory-balance-card>small{
  grid-column:1/-1!important;
  grid-row:2!important;
  margin:0!important;
  font-size:9px!important;
  line-height:1.25!important;
}
.customer-balance-grid{grid-template-columns:repeat(8,minmax(0,1fr))!important;gap:7px!important}
.customer-balance-grid .inventory-balance-card{min-width:0!important;min-height:54px!important;padding:8px 9px!important}

@media(max-width:720px){
  .header{
    grid-template-columns:minmax(0,1fr)!important;
    gap:7px!important;
    padding:10px 11px!important;
  }
  .header>div:first-child{grid-column:1!important;grid-row:1!important}
  .header .toolbar{
    grid-column:1!important;
    grid-row:2!important;
    grid-template-columns:minmax(0,1fr) 108px!important;
    gap:5px!important;
    padding:5px!important;
  }
  .header-right{
    grid-column:1!important;
    grid-row:3!important;
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
  }
  .header-right .undo-customer,
  .header-right .saved,
  .header-right .add-btn{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:34px!important;
    padding:5px 4px!important;
    border-radius:9px!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    font-size:9px!important;
    line-height:1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
  }
  .header-right .add-btn{gap:2px!important}.header-right .add-btn span{font-size:15px!important}.header-right .saved span{margin-right:2px!important}
  .header .customer-stock-panel{grid-column:1!important;grid-row:4!important;padding-top:7px!important}
  .header .customer-stock-head{margin-bottom:5px!important}.header .customer-stock-head strong{font-size:11px!important}.header .customer-stock-head span{display:none!important}
  .header .customer-balance-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,auto)!important;
    gap:4px!important;
    overflow:visible!important;
    padding:0!important;
    scroll-snap-type:none!important;
  }
  .header .customer-balance-grid .inventory-balance-card{
    min-width:0!important;
    width:auto!important;
    min-height:42px!important;
    padding:5px 5px!important;
    border-radius:8px!important;
    column-gap:2px!important;
    row-gap:1px!important;
    flex:none!important;
  }
  .header .customer-balance-grid .inventory-balance-card>b{font-size:9px!important;white-space:nowrap!important}
  .header .customer-balance-grid .inventory-balance-card>strong{font-size:15px!important}
  .header .customer-balance-grid .inventory-balance-card>small{font-size:6px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .inventory-balance-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important}
}

/* Version 21: kompakt saldo + renare kundkort */
.inventory-balance-card{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:7px!important;
  min-height:66px!important;
  padding:10px 12px!important;
}
.inventory-balance-card>b{font-size:13px!important;line-height:1!important}
.inventory-balance-card>strong{font-size:25px!important;line-height:1!important;margin:0!important}
.inventory-balance-card>small{display:none!important}
.customer-card{grid-template-columns:minmax(180px,1fr) minmax(90px,.45fr) auto 38px!important;align-items:start!important}
.customer-main h2{margin:3px 0 2px!important}
.customer-price{display:flex!important;margin:0 0 9px!important;gap:6px!important}
.customer-product-line .tags{gap:7px!important}
.customer-card .tag{padding:6px 11px!important;font-size:12px!important;font-weight:900!important}
.customer-number{justify-self:center!important;align-self:start!important;margin-top:4px!important;font-size:13px!important}
.customer-overview{align-self:start!important}
.customer-earned{display:none!important}
@media(max-width:720px){
  .header .customer-balance-grid .inventory-balance-card{min-height:54px!important;padding:7px 7px!important;gap:5px!important}
  .header .customer-balance-grid .inventory-balance-card>b{font-size:10px!important}
  .header .customer-balance-grid .inventory-balance-card>strong{font-size:21px!important;line-height:1!important}
  .customer-card{grid-template-columns:minmax(0,1fr) auto!important;padding:12px!important;gap:8px 10px!important}
  .customer-main{grid-column:1!important;grid-row:1/3!important;padding-top:16px!important}
  .customer-main h2{font-size:20px!important}
  .customer-price{font-size:10px!important;margin-bottom:8px!important}.customer-price strong{font-size:14px!important}
  .customer-card .tag{padding:6px 10px!important;font-size:12px!important}
  .customer-number{position:absolute!important;top:9px!important;left:50%!important;transform:translateX(-50%)!important;margin:0!important;font-size:11px!important;white-space:nowrap!important}
  .customer-overview{grid-column:2!important;grid-row:1/3!important;padding-top:16px!important;padding-right:34px!important}
  .customer-overview .status-pills{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:5px!important}
  .customer-overview .status-pill{min-width:94px!important;text-align:center!important}
}

/* Version 22: tydligare orderstatus och exakt centrerat kundnummer */
.customer-card{position:relative!important}
.customer-number{position:absolute!important;top:20px!important;left:50%!important;transform:translateX(-50%)!important;margin:0!important;justify-self:auto!important;z-index:1}
.status-pill.delivered,.delivery-pill.delivered{background:var(--green-soft)!important;border-color:#acd9c4!important;color:var(--green)!important}
.delivery-pill.waiting{background:var(--red-soft)!important;border-color:#f4c5c6!important;color:var(--red)!important}
.delivery-pill{min-width:165px!important}
.payment-pill.paid{background:var(--green-soft)!important;border-color:#acd9c4!important;color:var(--green)!important}
@media(max-width:720px){
 .customer-number{top:9px!important;left:50%!important;transform:translateX(-50%)!important}
 .delivery-pill{min-width:120px!important}
}

/* Version 23: fasta statuskolumner enligt JE-kortet */
.customer-overview .status-pills{display:grid!important;grid-template-columns:266px 100px!important;gap:14px!important;justify-content:end!important;align-items:start!important}
.customer-overview .status-pill{box-sizing:border-box!important;width:100%!important;min-width:0!important;text-align:center!important;white-space:nowrap!important}
.delivery-pill{min-width:0!important}
@media(max-width:1050px) and (min-width:721px){
 .customer-overview .status-pills{grid-template-columns:210px 100px!important;gap:10px!important}
}
@media(max-width:720px){
 .customer-overview .status-pills{display:grid!important;grid-template-columns:120px 94px!important;gap:5px!important;justify-content:end!important;align-items:start!important}
 .customer-overview .status-pill{min-width:0!important;width:100%!important;font-size:10px!important;padding:6px 5px!important}
}

/* Version 24: kundnummer exakt centrerat, statusfält låsta till höger */
@media (min-width:721px){
  .customer-card{
    grid-template-columns:minmax(260px,1fr) 380px 38px!important;
    align-items:center!important;
  }
  .customer-number{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    margin:0!important;
    z-index:2!important;
    pointer-events:none!important;
  }
  .customer-overview{
    grid-column:2!important;
    align-self:center!important;
    width:100%!important;
  }
  .customer-card>.edit-btn{
    grid-column:3!important;
    align-self:center!important;
  }
}
@media (max-width:1050px) and (min-width:721px){
  .customer-card{grid-template-columns:minmax(230px,1fr) 320px 38px!important}
}
@media (max-width:720px){
  .customer-number{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    margin:0!important;
    z-index:2!important;
    pointer-events:none!important;
  }
}

/* Version 26: Med-10 visar 10 st/förs. och antal styrs i steg om 10 */
.customer-balance-grid{grid-template-columns:repeat(9,minmax(0,1fr))!important;gap:6px!important}
.customer-balance-grid .inventory-balance-card{padding:7px 8px!important}
@media (min-width:721px){.customer-number{top:15px!important;left:50%!important;transform:translateX(-50%)!important}}
@media (max-width:720px){
 .header .customer-balance-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;overflow:visible!important;gap:5px!important}
 .header .customer-balance-grid .inventory-balance-card{min-width:0!important;min-height:46px!important;padding:6px!important}
 .customer-number{top:9px!important;left:50%!important;transform:translateX(-50%)!important}
}

.pack-note{font-size:10px;font-weight:800;color:var(--teal);margin-left:4px;white-space:nowrap}


/* Version 27: kompakt mobilheader, tydligare lagersaldo och backup */
.backup-info{margin:18px 0 14px;padding:13px 14px;background:#f3f7f6;border:1px solid #d7e3e0;border-radius:12px;color:var(--muted);font-size:12px;line-height:1.45}
.backup-info p{margin:0 0 9px}.backup-info p:last-child{margin-bottom:0}.backup-info strong,.backup-info b{color:var(--ink)}
.backup-info .backup-tip{padding-top:9px;border-top:1px solid #dce6e3;color:#4e6b66;font-weight:750}

@media(max-width:720px){
  /* Alla nio lagersaldon syns i det låsta toppkortet på två rader. */
  .header .customer-stock-panel{padding-top:5px!important}
  .header .customer-stock-head{display:flex!important;align-items:baseline!important;justify-content:space-between!important;margin:0 1px 4px!important;gap:6px!important}
  .header .customer-stock-head strong{font-size:10px!important}
  .header .customer-stock-head span{display:block!important;font-size:7px!important;line-height:1.1!important;white-space:nowrap!important}
  .header .customer-balance-grid{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,auto)!important;
    gap:3px!important;
    overflow:visible!important;
    padding:0!important;
  }
  .header .customer-balance-grid .inventory-balance-card{
    min-width:0!important;
    min-height:38px!important;
    padding:4px 4px!important;
    gap:3px!important;
    border-radius:7px!important;
  }
  .header .customer-balance-grid .inventory-balance-card>b{font-size:8px!important;line-height:1!important;white-space:nowrap!important}
  .header .customer-balance-grid .inventory-balance-card>strong{font-size:17px!important;line-height:1!important}
  /* Den fullständiga lagersaldosidan använder också smalare kort för mindre höjd. */
  #inventoryView .inventory-balance-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:4px!important}
  #inventoryView .inventory-balance-card{min-height:46px!important;padding:6px!important;gap:4px!important}
  #inventoryView .inventory-balance-card>b{font-size:9px!important;white-space:nowrap!important}
  #inventoryView .inventory-balance-card>strong{font-size:19px!important}
}

/* Version 29: större och tydligare mobilgränssnitt */
@media(max-width:720px){
  /* Låst topp: ångra/synk/ny kund högst upp och större tryckytor. */
  .header{gap:9px!important;padding:13px!important}
  .header>div:first-child{grid-row:2!important}
  .header .toolbar{grid-row:3!important;padding:7px!important;gap:7px!important;grid-template-columns:minmax(0,1fr) 124px!important}
  .header-right{grid-row:1!important;gap:7px!important}
  .header-right .undo-customer,.header-right .saved,.header-right .add-btn{height:44px!important;padding:8px 6px!important;border-radius:11px!important;font-size:11px!important;font-weight:850!important;overflow:visible!important}
  .header-right .add-btn span{font-size:19px!important}
  .header .search input,.header .toolbar select{font-size:14px!important}.header .toolbar select{height:44px!important}
  .header h1{font-size:28px!important}.header .kicker{font-size:12px!important}
  .header .customer-stock-panel{grid-row:4!important;padding-top:7px!important}
  .header .customer-stock-head strong{font-size:13px!important}.header .customer-stock-head span{font-size:9px!important}
  .header .customer-balance-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:5px!important}
  .header .customer-balance-grid .inventory-balance-card{min-height:54px!important;padding:7px 6px!important;border-radius:9px!important;gap:4px!important}
  .header .customer-balance-grid .inventory-balance-card>b{font-size:10px!important}.header .customer-balance-grid .inventory-balance-card>strong{font-size:22px!important}

  /* Lagersaldosidan: större kort/text, fortfarande fem per rad så nedersta raden hålls högt. */
  #inventoryView .inventory-head h2{font-size:28px!important}#inventoryView .inventory-head .kicker{font-size:12px!important}
  #inventoryView .inventory-balance-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:6px!important}
  #inventoryView .inventory-balance-card{min-height:62px!important;padding:9px 7px!important;border-radius:10px!important}
  #inventoryView .inventory-balance-card>b{font-size:11px!important}#inventoryView .inventory-balance-card>strong{font-size:24px!important}

  /* Kundkort: större namn, pris, produkt och statusfält. */
  .customer-card{padding:16px 13px!important;min-height:132px!important;gap:10px 12px!important}
  .customer-main{padding-top:19px!important}.customer-main h2{font-size:23px!important}.customer-price{font-size:12px!important}.customer-price strong{font-size:17px!important}
  .customer-card .tag{padding:8px 12px!important;font-size:14px!important}.customer-number{top:11px!important;font-size:13px!important}
  .customer-overview{padding-top:21px!important;padding-right:38px!important}.customer-overview .status-pills{grid-template-columns:138px 104px!important;gap:7px!important}
  .customer-overview .status-pill{font-size:12px!important;padding:9px 6px!important;min-height:36px!important}.delivery-pill b{font-size:12px!important}.delivery-pill small{font-size:10px!important}
  .customer-card>.edit-btn{width:40px!important;height:40px!important;font-size:20px!important}

  /* Inköp: större text i topp, prisfält och inköpskort. */
  #purchaseView .price-panel-head h2{font-size:25px!important}#purchaseView .price-panel-head .kicker{font-size:12px!important}
  #purchaseView .price-panel-head>span{font-size:12px!important}.price-card,.price-item{font-size:13px!important}
  .purchase-card{padding:19px 16px!important;gap:13px!important}.purchase-card h2{font-size:23px!important}.purchase-card .meta,.purchase-card .updated{font-size:13px!important}
  .purchase-card .state-btn{font-size:13px!important;padding:10px 12px!important}.purchase-card .money-grid span{font-size:11px!important}.purchase-card .money-grid strong{font-size:16px!important}
  #purchaseView .section-line{font-size:15px!important}.bottom-summary.three article{padding:16px!important}.bottom-summary.three small{font-size:13px!important}.bottom-summary.three strong{font-size:23px!important}

  /* Status: större låst topp, statuskort och lönsamhetslista. */
  #statusView .top-summary{gap:9px!important;margin-top:18px!important}#statusView .top-summary article{padding:16px 12px!important;min-height:82px!important}
  #statusView .top-summary small,#statusView .top-summary span{font-size:12px!important}#statusView .top-summary strong{font-size:24px!important}
  #statusView .status-heading h2{font-size:26px!important}#statusView .status-heading .kicker{font-size:12px!important}
  #statusView .margin-row{padding:19px 16px!important;gap:12px!important}#statusView .margin-row h3{font-size:20px!important}#statusView .margin-row small{font-size:11px!important}#statusView .margin-row strong{font-size:16px!important}
  #statusView .bottom-summary article{padding:16px 12px!important}#statusView .bottom-summary small{font-size:12px!important}#statusView .bottom-summary strong{font-size:22px!important}
}

/* Version 30: mobil finjustering */
@media(max-width:720px){
  /* Kunder till vänster i samma topprad som de tre åtgärderna. */
  .header{grid-template-columns:auto minmax(0,1fr)!important;column-gap:7px!important;row-gap:8px!important;padding:11px!important}
  .header>div:first-child{grid-column:1!important;grid-row:1!important;align-self:center!important;min-width:72px!important}
  .header>div:first-child .kicker{display:none!important}
  .header h1{font-size:23px!important;white-space:nowrap!important}
  .header-right{grid-column:2!important;grid-row:1!important;display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(0,1.15fr) 42px!important;gap:5px!important;width:100%!important;min-width:0!important}
  .header-right .undo-customer,.header-right .saved,.header-right .add-btn{width:100%!important;min-width:0!important;max-width:none!important;height:40px!important;padding:6px 4px!important;font-size:9px!important;border-radius:10px!important;justify-content:center!important;white-space:nowrap!important}
  .header-right .saved{display:flex!important;align-items:center!important}.header-right .saved span{margin-right:2px!important}
  .header-right .add-btn{width:42px!important}.header-right .add-btn span{font-size:21px!important}.header-right .add-btn b{display:none!important}
  .header .toolbar{grid-column:1/-1!important;grid-row:2!important}.header .customer-stock-panel{grid-column:1/-1!important;grid-row:3!important}

  /* Lageretiketter tydligare. */
  .header .customer-balance-grid .inventory-balance-card>b{font-size:12px!important;line-height:1!important;white-space:nowrap!important;word-break:normal!important}
  .header .customer-balance-grid .inventory-balance-card>strong{font-size:23px!important}

  /* Kundkort: produkten på en rad och betalning över leveransstatus. */
  .customer-card .tag{font-size:15px!important;white-space:nowrap!important;word-break:keep-all!important;line-height:1!important}
  .customer-overview .status-pills{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:7px!important;width:122px!important;margin-left:auto!important}
  .customer-overview .payment-pill{order:1!important}.customer-overview .delivery-pill{order:2!important}
  .customer-overview .status-pill{width:122px!important;min-height:39px!important;font-size:13px!important;padding:9px 6px!important}
  .customer-overview{padding-top:20px!important;padding-right:42px!important}

  /* Beställningshistorik. */
  .order-history{padding:22px!important}.order-history>h3{font-size:21px!important}
  .order-drape summary{padding:19px 42px 19px 16px!important}.order-drape h4{font-size:17px!important}.order-drape small{font-size:13px!important}
  .order-drape .tag{font-size:13px!important;padding:7px 10px!important}.history-finance span{font-size:14px!important}.history-finance b{font-size:15px!important}
  .order-state-actions .state-btn,.order-buttons button{font-size:13px!important;padding:9px 11px!important}

  /* Inköpspriser: produkt, etikett och pris större. */
  #purchaseView .price-row{grid-template-columns:70px 1fr!important;padding:13px!important;gap:10px!important}
  #purchaseView .price-row>strong{font-size:16px!important;white-space:nowrap!important}
  #purchaseView .price-row label{font-size:12px!important}
  #purchaseView .price-row input{font-size:16px!important;font-weight:750!important;padding:10px!important}
  #purchaseView .price-row>button{grid-column:1/-1!important;font-size:13px!important}

  /* Status/lönsamhet ytterligare ett steg större. */
  #statusView .top-summary small,#statusView .top-summary span{font-size:13px!important}
  #statusView .top-summary strong{font-size:26px!important}
  #statusView .status-heading h2{font-size:28px!important}
  #statusView .margin-row h3{font-size:21px!important}#statusView .margin-row small{font-size:12px!important}#statusView .margin-row strong{font-size:17px!important}
}

/* Version 31: mobil läsbarhet och kundkort */
@media(max-width:720px){
  /* Kundsidans lagersaldo: produkt till vänster, antal tydligt till höger. */
  .header .customer-balance-grid .inventory-balance-card{
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:1fr!important;
    align-items:center!important;
    column-gap:4px!important;
  }
  .header .customer-balance-grid .inventory-balance-card>b{
    grid-column:1!important;grid-row:1!important;font-size:13px!important;
  }
  .header .customer-balance-grid .inventory-balance-card>strong{
    grid-column:2!important;grid-row:1!important;justify-self:end!important;
    font-size:24px!important;text-align:right!important;
  }
  .header .customer-balance-grid .inventory-balance-card>small{display:none!important}

  /* Kundnamnet längst upp till vänster. */
  .customer-main{padding-top:0!important;align-self:start!important}
  .customer-main h2{margin:0 0 4px!important;font-size:24px!important;line-height:1.05!important}
  .customer-price{font-size:13px!important}.customer-price strong{font-size:18px!important}

  /* Ingen beställning använder samma statusposition som betalning/leverans. */
  .customer-overview .no-order-pill{
    order:1!important;width:122px!important;min-height:39px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    font-size:12px!important;text-align:center!important;
  }

  /* Kund- och beställningsdetaljer större. */
  .detail-card,.detail-card .meta,.detail-card p,.detail-card label{font-size:14px!important}
  .detail-hero h2{font-size:27px!important}.detail-hero .meta{font-size:14px!important}
  .order-history>h3,.detail-notes>h3{font-size:22px!important}
  .order-drape h4{font-size:18px!important}.order-drape small{font-size:14px!important}
  .history-finance span{font-size:15px!important}.history-finance b{font-size:16px!important}

  /* Inköp ytterligare större. */
  #purchaseView .price-panel-head h2{font-size:27px!important}
  #purchaseView .price-row>strong{font-size:18px!important}
  #purchaseView .price-row label{font-size:13px!important}
  #purchaseView .price-row input{font-size:18px!important}
  .purchase-card h2{font-size:25px!important}.purchase-card .meta,.purchase-card .updated{font-size:14px!important}
  .purchase-card .money-grid span{font-size:12px!important}.purchase-card .money-grid strong{font-size:18px!important}

  /* Kunder och lönsamhet: större rubriker och siffror. */
  #statusView .status-heading h2{font-size:30px!important}
  #statusView .margin-row h3{font-size:23px!important}
  #statusView .margin-row small{font-size:13px!important}
  #statusView .margin-row strong{font-size:19px!important}
  #statusView .bottom-summary small{font-size:14px!important}
  #statusView .bottom-summary strong{font-size:25px!important}
}

/* v32: compact customer status controls; payment above delivery on desktop + mobile */
.customer-overview .status-pills{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:7px!important;
  width:138px!important;
  margin-left:auto!important;
}
.customer-overview .payment-pill{order:1!important}
.customer-overview .delivery-pill{order:2!important}
.customer-overview .status-pill{
  box-sizing:border-box!important;
  width:138px!important;
  min-width:0!important;
  text-align:center!important;
  white-space:normal!important;
  line-height:1.15!important;
  padding:8px 7px!important;
}
.delivery-pill b{white-space:normal!important;line-height:1.15!important}
@media(max-width:720px){
  .customer-overview .status-pills{width:118px!important;gap:6px!important}
  .customer-overview .status-pill{width:118px!important;min-height:38px!important;font-size:12px!important;padding:7px 5px!important}
  .customer-overview .delivery-pill b{display:block!important;font-size:12px!important;white-space:normal!important;line-height:1.15!important}
}


/* Version 33: översikt, fasta statuskort och större typografi */
.inventory-balance-card{position:relative;display:block!important;min-height:76px!important;padding:13px 14px!important}
.inventory-balance-card>b{display:block!important;padding-right:42px!important}
.inventory-balance-card>strong{position:absolute!important;right:13px!important;bottom:11px!important;margin:0!important;text-align:right!important}
.customer-balance-grid .inventory-balance-card{min-height:64px!important}
.product-price-tag{gap:7px!important;white-space:nowrap}.product-price-tag em{font-style:normal;font-weight:800;color:#315f59;font-size:.9em}
.detail-nav{display:flex;gap:10px;margin:24px 0 14px}.detail-nav .back-btn{margin:0!important;padding:11px 16px!important;border:1px solid #a9c7c1!important;border-radius:12px!important;background:#fff!important;font-size:16px!important;box-shadow:var(--shadow)}
.inline-order{margin-top:0!important;border-radius:0!important;border-left:0!important;border-right:0!important;background:#eef7f4!important}
.inline-order .inline-order-head .close{display:none!important}
.detail-hero{border-bottom:0!important}.order-history{padding-top:22px!important}
#purchaseView .price-row label{font-size:13px!important}#purchaseView .price-row input{font-size:18px!important;font-weight:800!important}
#statusView .top-summary{position:sticky;top:104px;z-index:5;background:var(--bg);padding:12px 0;margin:0 0 18px!important}
#statusView .margin-row .optional{display:block!important}
@media(max-width:1050px){#statusView .margin-row{grid-template-columns:1.15fr repeat(4,.7fr) 24px!important}}
@media(max-width:720px){
 .inventory-balance-card{min-height:68px!important;padding:10px!important}.inventory-balance-card>strong{right:10px!important;bottom:9px!important}
 .header .customer-balance-grid .inventory-balance-card{min-height:58px!important}.header .customer-balance-grid .inventory-balance-card>strong{right:7px!important;bottom:7px!important}
 .detail-nav{margin:14px 0 10px;gap:7px}.detail-nav .back-btn{font-size:14px!important;padding:10px 12px!important;flex:1}
 .inline-order{margin:0!important;padding:18px 16px!important}.inline-order label{font-size:13px!important}.inline-order input,.inline-order select{font-size:16px!important}.inline-calculation span{font-size:13px!important}.inline-calculation b{font-size:19px!important}
 #purchaseView .price-panel-head h2{font-size:27px!important}#purchaseView .price-row>strong{font-size:20px!important}#purchaseView .price-row label{font-size:14px!important}#purchaseView .price-row input{font-size:19px!important}
 #statusView .top-summary{top:196px!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important;padding:7px 0!important;overflow:visible!important}
 #statusView .top-summary article{padding:10px 7px!important;min-width:0!important}.top-summary small,.top-summary span{font-size:10px!important}.top-summary strong{font-size:18px!important}
 #statusView .margin-row{grid-template-columns:1.15fr repeat(4,.72fr) 18px!important;gap:5px!important;padding:15px 9px!important}
 #statusView .margin-row h3{font-size:18px!important}#statusView .margin-row small{font-size:9px!important}#statusView .margin-row strong{font-size:13px!important;white-space:nowrap}
}


/* v34 */
@media (min-width: 761px){
  .customer-detail .order-product-price,
  .customer-detail .product-price,
  .customer-detail .order-product-chip,
  .customer-detail .product-chip { font-size: 1.08rem !important; }

  /* Status summary stays visually attached directly under locked status header */
  body[data-page="status"] .status-summary,
  .status-page .status-summary,
  #statusSummary {
    margin-top: -1.1rem !important;
    position: relative;
    z-index: 2;
  }
}

/* Product and customer price remain separate pills/cards */
.customer-detail .order-product-price,
.customer-detail .product-price,
.order-history .order-product-price,
.order-history .product-price {
  display: inline-flex !important;
  width: auto !important;
  margin-left: .55rem !important;
  padding: .45rem .7rem !important;
  border: 1px solid var(--line, #b9d8d4) !important;
  border-radius: .75rem !important;
  background: #fff !important;
  white-space: nowrap !important;
}

/* Mobile status: compact 2 x 2 summary immediately under the locked header */
@media (max-width: 760px){
  body[data-page="status"] .status-summary,
  .status-page .status-summary,
  #statusSummary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: .55rem !important;
    margin-top: .55rem !important;
    padding-top: 0 !important;
  }
  body[data-page="status"] .status-summary > *,
  .status-page .status-summary > *,
  #statusSummary > * {
    min-width: 0 !important;
    width: auto !important;
    padding: .75rem .8rem !important;
    overflow: hidden !important;
  }
  body[data-page="status"] .status-summary *,
  .status-page .status-summary *,
  #statusSummary * {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }
}

/* v37 latest layout; v34 data logic */
button[onclick*="history.back"]{display:none!important}
.customer-card .product-chip,.customer-card .order-product-chip,.customer-card .product-tag{display:inline-flex!important;margin-right:.45rem!important}
.customer-card .product-price,.customer-card .customer-price,.customer-card .order-product-price{display:inline-flex!important;margin-left:0!important;padding:.42rem .68rem!important;border:1px solid var(--line,#b9d8d4)!important;border-radius:.75rem!important;background:#fff!important;white-space:nowrap!important}
@media(min-width:761px){.customer-card .product-chip,.customer-card .order-product-chip,.customer-card .product-tag,.customer-card .product-price,.customer-card .customer-price,.customer-card .order-product-price{font-size:1.08rem!important}}
.purchase-page main,.purchases-page main{display:flex!important;flex-direction:column!important}
.purchase-page .purchase-summary,.purchases-page .purchase-summary,#purchaseSummary{order:1!important;margin-bottom:1rem!important}
.purchase-page .purchase-prices,.purchases-page .purchase-prices,#purchasePrices{order:2!important;margin-top:0!important}
body[data-page="status"] .top-card,.status-page .top-card,body[data-page="status"] .page-top,.status-page .page-top{position:sticky!important;top:0!important;z-index:60!important;margin-bottom:0!important}
body[data-page="status"] .status-summary,.status-page .status-summary,#statusSummary{position:sticky!important;top:var(--status-head-height,150px)!important;z-index:59!important;margin-top:0!important;padding:.7rem 1rem 1rem!important;background:var(--page-bg,#eaf3f1)!important}
@media(max-width:760px){
body[data-page="status"] .status-summary,.status-page .status-summary,#statusSummary{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.55rem!important;top:var(--status-head-mobile-height,150px)!important}
body[data-page="status"] .status-summary>*,.status-page .status-summary>*,#statusSummary>*{min-width:0!important;width:auto!important;padding:.75rem .8rem!important;overflow:hidden!important}
body[data-page="status"] .status-summary *,.status-page .status-summary *,#statusSummary *{max-width:100%!important;overflow-wrap:anywhere!important}
}

/* v49 */
.customer-product-line .tags{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.customer-product-line .product-only-tag,.customer-product-line .customer-price-tag{display:inline-flex;align-items:center;width:auto}
.customer-product-line .customer-price-tag{background:#fff;border:1px solid #c9ddda}

/* Locked KPI rows immediately below their headers */
#purchaseView>.purchase-top-summary,#statusView>.top-summary{position:sticky;top:150px;z-index:17;margin-top:0;background:#eaf3f1}
#purchaseView>.purchase-top-summary{margin-bottom:18px}

/* Bigger quantity spinner target */
[data-inline-main],#mainQty{min-height:60px;font-size:18px;padding-right:20px}
[data-inline-main]::-webkit-inner-spin-button,[data-inline-main]::-webkit-outer-spin-button,
#mainQty::-webkit-inner-spin-button,#mainQty::-webkit-outer-spin-button{opacity:1;width:40px;height:54px;cursor:pointer}

/* Web customer information: larger text in boxes */
@media (min-width:769px){
 #customerDetailView .detail-card p,#customerDetailView .detail-card small,#customerDetailView .detail-card label,
 #customerDetailView .detail-card button,#customerDetailView .detail-card input,#customerDetailView .detail-card select,
 #customerDetailView .detail-card textarea,#customerDetailView .order-history{font-size:17px}
 #customerDetailView .detail-card h3{font-size:24px}
}

/* Mobile */
@media (max-width:768px){
 .customer-card .customer-main h2{white-space:normal!important;line-height:1.08;max-width:11ch}
 .customer-product-line .product-only-tag,.customer-product-line .customer-price-tag{display:inline-flex!important;white-space:nowrap}
 #statusCustomerList .margin-row small{font-size:14px!important;font-weight:800!important}
 #statusCustomerList .margin-row strong{font-size:16px!important}
 #purchaseView>.purchase-top-summary,#statusView>.top-summary{top:132px}
}


/* ===== v50 compact locked headers ===== */

/* Inköp: much lower KPI row on web */
#purchaseView>.purchase-top-summary{
  gap:0 !important;
  padding:0 !important;
  margin:0 0 12px !important;
  background:transparent !important;
}
#purchaseView>.purchase-top-summary article{
  min-height:92px !important;
  padding:14px 20px !important;
  border-radius:18px !important;
}
#purchaseView>.purchase-top-summary article small{font-size:14px !important}
#purchaseView>.purchase-top-summary article strong{font-size:28px !important;line-height:1.05 !important}

/* Status: no vertical gap and substantially more compact */
#statusView>.top-summary{
  gap:0 !important;
  padding:0 !important;
  margin:0 0 10px !important;
  background:transparent !important;
}
#statusView>.top-summary article{
  min-height:96px !important;
  padding:13px 18px !important;
  border-radius:18px !important;
}
#statusView>.top-summary article small,
#statusView>.top-summary article span{font-size:14px !important}
#statusView>.top-summary article strong{font-size:27px !important;line-height:1.05 !important}

/* Inventory: the large global header is hidden only on Lager.
   Undo + backup/sync controls are moved visually next to Lagersaldo by JS. */
body.inventory-mode .top-card{display:none !important}
body.inventory-mode main{padding-top:18px !important}
#inventoryView .inventory-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:0 !important;
}
.inventory-head-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.inventory-inline-actions{display:flex;align-items:center;gap:10px}
.inventory-inline-actions button,.inventory-inline-actions .sync-pill{white-space:nowrap}

@media(max-width:768px){
  /* Inköp: all 3 KPI cards on one compact row */
  #purchaseView>.purchase-top-summary{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:5px !important;
    top:112px !important;
  }
  #purchaseView>.purchase-top-summary article{
    min-width:0 !important;
    min-height:72px !important;
    padding:9px 7px !important;
    border-radius:13px !important;
  }
  #purchaseView>.purchase-top-summary article small{
    font-size:11px !important;
    line-height:1.05 !important;
    white-space:normal !important;
  }
  #purchaseView>.purchase-top-summary article strong{
    font-size:18px !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
  }

  /* Status: compact 2x2, text stays inside, no large empty area */
  #statusView>.top-summary{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:5px !important;
    top:112px !important;
    margin-bottom:6px !important;
  }
  #statusView>.top-summary article{
    min-width:0 !important;
    min-height:76px !important;
    padding:8px 10px !important;
    border-radius:13px !important;
  }
  #statusView>.top-summary article small,
  #statusView>.top-summary article span{
    font-size:11px !important;
    line-height:1.05 !important;
    white-space:normal !important;
  }
  #statusView>.top-summary article strong{
    font-size:18px !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
  }
  #statusView .status-heading{margin-top:8px !important;padding-top:0 !important}

  /* Lager actions beside heading, compact on mobile too */
  #inventoryView .inventory-head{align-items:flex-start}
  .inventory-head-right{gap:7px;max-width:65%;font-size:11px}
  .inventory-inline-actions{gap:5px;flex-wrap:wrap;justify-content:flex-end}
  .inventory-inline-actions button,.inventory-inline-actions .sync-pill{
    padding:8px 10px !important;
    font-size:11px !important;
  }
}

/* ===== v51: compact fixed KPI layout matching approved reference ===== */
#purchaseView>.purchase-top-summary,
#statusView>.top-summary{
  background:#eaf3f1 !important;
  box-shadow:0 8px 18px rgba(0,65,62,.05);
  isolation:isolate;
}

/* WEB: ~70px KPI cards, tight horizontal strip */
@media (min-width:769px){
  #purchaseView>.purchase-top-summary{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px !important;
    padding:8px 0 !important;
    margin:0 0 12px !important;
    top:166px !important;
  }
  #purchaseView>.purchase-top-summary article{
    min-height:70px !important;
    height:70px !important;
    padding:8px 18px !important;
    border-radius:15px !important;
    display:flex !important;
    flex-direction:column;
    justify-content:center;
  }
  #purchaseView>.purchase-top-summary article small{font-size:14px !important;line-height:1 !important}
  #purchaseView>.purchase-top-summary article strong{font-size:25px !important;line-height:1.05 !important;margin-top:5px}

  #statusView>.top-summary{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:8px !important;
    padding:8px 0 !important;
    margin:0 0 8px !important;
    top:166px !important;
  }
  #statusView>.top-summary article{
    min-height:70px !important;
    height:70px !important;
    padding:7px 16px !important;
    border-radius:15px !important;
    display:flex !important;
    flex-direction:column;
    justify-content:center;
  }
  #statusView>.top-summary article small,
  #statusView>.top-summary article span{font-size:13px !important;line-height:1 !important}
  #statusView>.top-summary article strong{font-size:24px !important;line-height:1.02 !important;margin:4px 0 2px}
}

/* MOBILE: Inköp = exactly 3 cards on one row; Status = compact 2x2 attached to header */
@media (max-width:768px){
  #purchaseView>.purchase-top-summary{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:4px !important;
    padding:5px 0 !important;
    margin:0 0 6px !important;
    top:104px !important;
  }
  #purchaseView>.purchase-top-summary article{
    min-width:0 !important;
    width:auto !important;
    height:62px !important;
    min-height:62px !important;
    padding:6px 5px !important;
    border-radius:11px !important;
    overflow:hidden;
  }
  #purchaseView>.purchase-top-summary article small{
    display:block;
    font-size:10px !important;
    line-height:1.05 !important;
    white-space:normal !important;
  }
  #purchaseView>.purchase-top-summary article strong{
    display:block;
    font-size:16px !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
    margin-top:5px;
  }

  #statusView>.top-summary{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:4px !important;
    padding:5px 0 !important;
    margin:0 0 5px !important;
    top:104px !important;
  }
  #statusView>.top-summary article{
    min-width:0 !important;
    width:auto !important;
    height:66px !important;
    min-height:66px !important;
    padding:6px 8px !important;
    border-radius:11px !important;
    overflow:hidden;
  }
  #statusView>.top-summary article small,
  #statusView>.top-summary article span{
    display:block;
    font-size:12px !important;
    line-height:1.05 !important;
    white-space:normal !important;
  }
  #statusView>.top-summary article strong{
    display:block;
    font-size:18px !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
    margin:3px 0;
  }
  #statusView .status-heading,
  #statusView .margin-section{
    margin-top:4px !important;
    padding-top:0 !important;
  }
}

/* ===== v52: zero-gap opaque locked header + KPI block ===== */

/* The sticky top card and KPI strip form one visually closed block.
   Opaque masks prevent scrolling content from showing behind it. */
#purchaseView>.purchase-top-summary,
#statusView>.top-summary{
  margin-top:0 !important;
  border-top-left-radius:0 !important;
  border-top-right-radius:0 !important;
  background:#eaf3f1 !important;
  box-shadow:none !important;
}
#purchaseView>.purchase-top-summary::before,
#statusView>.top-summary::before{
  content:"";
  position:absolute;
  left:-8px; right:-8px;
  top:-18px;
  height:20px;
  background:#eaf3f1;
  z-index:-1;
  pointer-events:none;
}

/* Web: pull KPI strips directly up to the header, no visible gap. */
@media (min-width:769px){
  #purchaseView>.purchase-top-summary,
  #statusView>.top-summary{
    top:150px !important;
    transform:translateY(-1px);
    padding-top:0 !important;
    padding-bottom:6px !important;
  }
  #purchaseView>.purchase-top-summary{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  #statusView>.top-summary{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:6px !important;
  }
}

/* Mobile: same zero-gap closed block. Purchase KPIs remain 3 across;
   Status remains compact 2x2 so all text stays readable. */
@media (max-width:768px){
  #purchaseView>.purchase-top-summary,
  #statusView>.top-summary{
    top:96px !important;
    transform:translateY(-1px);
    padding-top:0 !important;
    padding-bottom:4px !important;
  }
  #purchaseView>.purchase-top-summary{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:3px !important;
  }
  #statusView>.top-summary{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:3px !important;
  }
}

/* ===== v53: KPI rows physically attached to header bottom ===== */
#purchaseView>.purchase-top-summary,
#statusView>.top-summary{
  margin-top:-18px !important;
  padding-top:18px !important;
  background:#eaf3f1 !important;
  position:sticky !important;
  z-index:19 !important;
  box-shadow:none !important;
}

/* Solid opaque curtain behind the locked KPI area */
#purchaseView>.purchase-top-summary::after,
#statusView>.top-summary::after{
  content:"";
  position:absolute;
  z-index:-2;
  left:-20px;
  right:-20px;
  top:-30px;
  bottom:-8px;
  background:#eaf3f1;
  pointer-events:none;
}

/* Web: header bottom is about 150px; KPI cards begin immediately there. */
@media (min-width:769px){
  #purchaseView>.purchase-top-summary,
  #statusView>.top-summary{
    top:132px !important;
    margin-bottom:6px !important;
  }
  #purchaseView>.purchase-top-summary article,
  #statusView>.top-summary article{
    margin-top:0 !important;
  }
}

/* Mobile: attach directly beneath compact header too. */
@media (max-width:768px){
  #purchaseView>.purchase-top-summary,
  #statusView>.top-summary{
    top:78px !important;
    margin-top:-14px !important;
    padding-top:14px !important;
    margin-bottom:4px !important;
  }
}

/* ===== v54 requested-only fixes ===== */

/* Inköp: no purchase search function */
#purchaseView #purchaseSearch,
#purchaseView input[placeholder*="Sök inköp"],
#purchaseView .purchase-search{display:none !important}

/* Correct the sticky stack: KPI background starts BELOW the white header,
   never covers it. KPI cards sit directly at its lower edge. */
#purchaseView>.purchase-top-summary,
#statusView>.top-summary{
  margin-top:0 !important;
  padding-top:0 !important;
  transform:none !important;
  background:#eaf3f1 !important;
  z-index:18 !important;
}
#purchaseView>.purchase-top-summary::before,
#purchaseView>.purchase-top-summary::after,
#statusView>.top-summary::before,
#statusView>.top-summary::after{
  display:none !important;
  content:none !important;
}

/* Opaque curtain only BELOW KPI strip, so scrolling content cannot show through,
   while the upper white Inköp/Status header remains untouched. */
#purchaseView>.purchase-top-summary,
#statusView>.top-summary{position:sticky !important}
#purchaseView>.purchase-top-summary{box-shadow:0 14px 0 #eaf3f1 !important}
#statusView>.top-summary{box-shadow:0 14px 0 #eaf3f1 !important}

/* Status web: larger text in Kunder och lönsamhet area */
@media (min-width:769px){
  #statusView .margin-section,
  #statusView .profitability-section,
  #statusView .customer-profitability,
  #statusView .status-list,
  #statusView .status-table{
    font-size:18px !important;
  }
  #statusView .margin-section p,
  #statusView .margin-section span,
  #statusView .margin-section td,
  #statusView .margin-section th{
    font-size:18px !important;
  }
}

/* ===== v55: fixed compact headers, editable customer price, inventory header ===== */

/* Inköp: remove search completely and keep actions aligned right */
#purchaseView input[placeholder*="Sök inköp"],
#purchaseView .purchase-search,
#purchaseView .search-wrap:has(input[placeholder*="Sök inköp"]){display:none !important}

/* Inköp + Status: header and KPI strip are one opaque sticky stack. */
#purchaseView>.purchase-top-summary,
#statusView>.top-summary{
  position:sticky !important;
  z-index:40 !important;
  margin:0 !important;
  padding:0 !important;
  background:#eaf3f1 !important;
  box-shadow:0 10px 0 #eaf3f1 !important;
  transform:none !important;
}
#purchaseView>.purchase-top-summary::before,
#purchaseView>.purchase-top-summary::after,
#statusView>.top-summary::before,
#statusView>.top-summary::after{display:none !important;content:none !important}

@media(min-width:769px){
  #purchaseView>.purchase-top-summary,
  #statusView>.top-summary{top:154px !important}
  #purchaseView>.purchase-top-summary article,
  #statusView>.top-summary article{
    min-height:64px !important;height:64px !important;
    padding:7px 16px !important;
  }
}

/* Lager: remove the large upper Lager header completely.
   Lagersaldo + actions + stock cards become the fixed opaque top block. */
body.inventory-mode .top-card{display:none !important}
body.inventory-mode main{padding-top:0 !important}
#inventoryView{
  padding-top:0 !important;
}
#inventoryView .inventory-head{
  position:sticky !important;
  top:0 !important;
  z-index:45 !important;
  margin:0 !important;
  padding:10px 6px 6px !important;
  background:#eaf3f1 !important;
}
#inventoryView .inventory-grid{
  position:sticky !important;
  top:76px !important;
  z-index:44 !important;
  margin-top:0 !important;
  padding:0 0 8px !important;
  background:#eaf3f1 !important;
  box-shadow:0 12px 0 #eaf3f1 !important;
}
#inventoryView .inventory-head + .inventory-grid{margin-top:0 !important}

/* Customer price field must remain directly editable. */
#orderCustomerPrice,
input[name="customerPrice"],
input[data-field="customer-price"]{
  pointer-events:auto !important;
  opacity:1 !important;
  background:#fff !important;
}

@media(max-width:768px){
  #purchaseView>.purchase-top-summary,
  #statusView>.top-summary{top:96px !important}
  #inventoryView .inventory-head{top:0 !important}
  #inventoryView .inventory-grid{top:68px !important}
}

/* ===== v56: KPI strips flush to fixed headers, fully opaque ===== */
#purchaseView>.purchase-top-summary,
#statusView>.top-summary{
  margin-top:0 !important;
  border-top-left-radius:0 !important;
  border-top-right-radius:0 !important;
  background:#eaf3f1 !important;
  box-shadow:
    0 -24px 0 #eaf3f1,
    0 18px 0 #eaf3f1 !important;
  isolation:isolate !important;
}
#purchaseView>.purchase-top-summary{
  transform:translateY(-1px) !important;
}
#statusView>.top-summary{
  transform:translateY(-1px) !important;
}

/* Keep the fixed header itself opaque so scrolling content can never show through. */
#purchaseView .top-card,
#statusView .top-card{
  background:#fff !important;
  z-index:60 !important;
}
#purchaseView>.purchase-top-summary,
#statusView>.top-summary{
  z-index:59 !important;
}

/* Remove any layout gap between fixed header and KPI strip. */
#purchaseView .top-card + .purchase-top-summary,
#statusView .top-card + .top-summary{
  margin-top:0 !important;
}






/* ===== v62: one solid fixed header, same principle as Kunder ===== */
#purchaseView > .top-card,
#statusView > .top-card{
  position:sticky !important;
  top:0 !important;
  z-index:1000 !important;
  background:#fff !important;
  margin:0 !important;
  padding-bottom:0 !important;
  overflow:hidden !important;
  isolation:isolate !important;
}

/* Opaque summary is part of the SAME white card; zero gap. */
#purchaseView > .top-card > .purchase-top-summary,
#statusView > .top-card > .top-summary{
  position:relative !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  transform:none !important;
  z-index:auto !important;
  width:auto !important;
  margin:0 !important;
  padding:8px 28px 14px !important;
  background:#fff !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
#purchaseView > .top-card > .purchase-top-summary{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px !important;
}
#statusView > .top-card > .top-summary{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:10px !important;
}
#purchaseView > .top-card > .purchase-top-summary article,
#statusView > .top-card > .top-summary article{
  height:70px !important;
  min-height:70px !important;
  margin:0 !important;
  padding:7px 14px !important;
}

/* White mask is inside the sticky card, so content can never show through it. */
#purchaseView > .top-card:after,
#statusView > .top-card:after{
  content:"" !important;
  display:block !important;
  height:10px !important;
  background:#fff !important;
  position:relative !important;
  z-index:2 !important;
}

/* Kill earlier pseudo masks/strips around summaries. */
#purchaseView .purchase-top-summary:before,
#purchaseView .purchase-top-summary:after,
#statusView .top-summary:before,
#statusView .top-summary:after{
  content:none !important;
  display:none !important;
}

@media(max-width:768px){
  #purchaseView > .top-card > .purchase-top-summary,
  #statusView > .top-card > .top-summary{
    padding:5px 8px 8px !important;
  }
  #purchaseView > .top-card > .purchase-top-summary{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:3px !important;
  }
  #statusView > .top-card > .top-summary{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:3px !important;
  }
  #purchaseView > .top-card > .purchase-top-summary article,
  #statusView > .top-card > .top-summary article{
    height:58px !important;
    min-height:58px !important;
    padding:4px 6px !important;
  }
}

/* ===== v63 REAL FIX: rows live inside the same .header as Kunder ===== */
main > .header{
  position:sticky !important;
  top:0 !important;
  z-index:1000 !important;
  background:#fff !important;
  overflow:hidden !important;
  isolation:isolate !important;
}

/* Header rows use the exact same inner width as customer header content. */
main > .header > .purchase-top-summary,
main > .header > .top-summary{
  grid-column:1 / -1 !important;
  position:static !important;
  inset:auto !important;
  transform:none !important;
  width:100% !important;
  margin:0 !important;
  padding:10px 0 0 !important;
  background:#fff !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  z-index:auto !important;
}
main > .header > .purchase-top-summary{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px !important;
}
main > .header > .top-summary{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:10px !important;
}
main > .header > .purchase-top-summary[hidden],
main > .header > .top-summary[hidden]{display:none !important}

main > .header > .purchase-top-summary article,
main > .header > .top-summary article{
  min-height:72px !important;
  height:72px !important;
  padding:7px 14px !important;
  margin:0 !important;
}

/* eliminate every old separate sticky behavior */
#purchaseView > .purchase-top-summary,
#statusView > .top-summary{
  position:static !important;
}

/* opaque bottom edge: nothing scrolling below can show through */
main > .header:after{
  content:"" !important;
  position:absolute !important;
  left:0 !important; right:0 !important; bottom:0 !important;
  height:8px !important;
  background:#fff !important;
  z-index:5 !important;
  pointer-events:none !important;
}

@media(max-width:768px){
  main > .header > .purchase-top-summary{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:3px !important;
  }
  main > .header > .top-summary{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:3px !important;
  }
  main > .header > .purchase-top-summary,
  main > .header > .top-summary{padding-top:5px !important}
  main > .header > .purchase-top-summary article,
  main > .header > .top-summary article{
    min-height:58px !important;
    height:58px !important;
    padding:4px 6px !important;
  }
}

/* v64 — requested cleanup only */
main > .header:has(> .purchase-top-summary),
main > .header:has(> .top-summary){
  border:1px solid #b8d4d0 !important;
  border-radius:28px !important;
  box-shadow:0 18px 38px rgba(20,70,65,.10) !important;
}
.price-panel-head .kicker,
.status-heading .kicker{display:none !important;}
.price-panel-head > div,
.status-heading > div{padding-top:0 !important;}