: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}
}