/* Slikbiksen — flad 2D-slikbutik: tykke sorte kanter, hårde skygger, glade farver. */
:root{
  --paper:#fff8ef; --sky:#ffe3f1; --card:#fff; --card2:#fff4e6; --ink:#1a1a1a; --line:#1a1a1a;
  --pink:#ff77c4; --red:#ff5e57; --gold:#ffc63c; --green:#4fcf6a; --blue:#4ab3ff; --purple:#b07bff; --mint:#5fe0c8;
  --shadow:0 5px 0 var(--line); --tabbar:66px;
  --font:'Fredoka','Trebuchet MS',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{font-family:var(--font);color:var(--ink);min-height:100vh;
  background:linear-gradient(180deg,var(--sky) 0%,var(--paper) 340px) no-repeat,var(--paper);
  -webkit-text-size-adjust:100%}
.hidden{display:none!important}
b{font-weight:700}
code{background:var(--card2);border:2px solid var(--line);border-radius:6px;padding:0 5px;font-size:.85em}

/* ---- animationer ---- */
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
.pop{animation:pop .25s ease-out}
.bob{animation:bob 1.2s ease-in-out infinite}
.shake{animation:shake .45s}
.confetti{position:fixed;width:12px;height:12px;z-index:200;pointer-events:none;border:2px solid var(--line);
  border-radius:3px;animation:fall 1.4s ease-in forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg);opacity:.3}}

/* ---- knapper ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:3px solid var(--line);
  border-radius:12px;padding:12px 14px;font:700 16px var(--font);color:var(--ink);background:#fff;
  box-shadow:0 4px 0 var(--line);cursor:pointer;text-decoration:none;transition:transform .05s,box-shadow .05s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.btn:disabled{opacity:.45;pointer-events:none}
.btn.green{background:var(--green);color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.25)}
.btn.red{background:var(--red);color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.25)}
.btn.blue{background:var(--blue);color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.25)}
.btn.gold{background:var(--gold)}
.btn.pink{background:var(--pink);color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.25)}
.btn.wide{width:100%;margin-top:10px}
.btn.big{padding:16px;font-size:1.15rem}
.mini{border:3px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:700 14px var(--font);
  padding:7px 10px;cursor:pointer;box-shadow:0 2px 0 var(--line);white-space:nowrap}
.mini:active{transform:translateY(2px);box-shadow:none}
.mini.danger{background:#ffd9d2}

/* ---- formularer ---- */
input[type=text],input[type=password],input[type=search],input[type=number],textarea,select{
  width:100%;padding:12px;border:3px solid var(--line);border-radius:12px;font:500 16px var(--font);
  background:#fff;color:var(--ink)}
input:focus,textarea:focus{outline:none;box-shadow:0 0 0 4px var(--gold)}
textarea{resize:vertical;font-size:15px}
.lbl{display:block;font-weight:700;margin:.6em 0 .3em;font-size:.9rem}
.hint{opacity:.6;font-size:.8rem;font-weight:400}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.row>*{flex:1;min-width:0}
.toggle{display:inline-flex;align-items:center;gap:9px;background:var(--card2);border:3px solid var(--line);
  border-radius:12px;padding:9px 12px;font-weight:700;margin-top:8px;cursor:pointer}
.toggle input{width:22px;height:22px;accent-color:var(--pink);margin:0}
details.more{margin-top:14px;border-top:3px dashed var(--line);padding-top:10px}
details.more summary{font-weight:700;cursor:pointer;padding:4px 0}

/* ---- login ---- */
body.login{display:flex;align-items:center;justify-content:center;padding:20px;
  background:repeating-linear-gradient(-45deg,#ffe3f1 0 28px,#fff8ef 28px 56px)}
.login-card{background:#fff;border:4px solid var(--line);border-radius:22px;padding:28px 24px;width:100%;
  max-width:380px;box-shadow:0 8px 0 var(--line);text-align:center}
.login-logo{font-size:4rem;line-height:1}
.login-card h1{margin:.2em 0 0;font-size:2.4rem;letter-spacing:-1px}
.login-card h1 b,.top-title b{color:var(--pink);-webkit-text-stroke:1.5px var(--line)}
.login-card .sub{margin:.2em 0 1em;font-weight:500;opacity:.7}
.login-card input{text-align:center;font-size:1.3rem}
.login-err{color:var(--red);font-weight:700}

/* ---- top & layout ---- */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));background:#fff;border-bottom:4px solid var(--line)}
.top::after{content:'';position:absolute;left:0;right:0;bottom:-12px;height:8px;
  background:repeating-linear-gradient(90deg,var(--pink) 0 18px,#fff 18px 36px);border-bottom:3px solid var(--line)}
.top-title{font-size:1.35rem;font-weight:700;letter-spacing:-.5px}
.top-camp{font-weight:600;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
main{max-width:1100px;margin:0 auto;padding:22px 0 110px}
.page{display:none}
.page.on{display:block}
.card{background:var(--card);margin:14px 16px;border:4px solid var(--line);border-radius:18px;padding:16px;
  box-shadow:var(--shadow)}
.card h2{margin:0 0 .6em;font-size:1.15rem;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}

/* ---- tabbar ---- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;background:#fff;border-top:4px solid var(--line);
  height:calc(var(--tabbar) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}
.tab{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;
  padding:9px 2px 8px;font:700 .8rem var(--font);color:#8a8f98;cursor:pointer;border-top:5px solid transparent;margin-top:-4px}
.tab .ti{font-size:1.55rem;line-height:1}
.tab.on{color:var(--ink);border-top-color:var(--pink);background:#fff0f8}
.tab.on .ti{animation:wiggle .35s}
.badge{position:absolute;top:4px;left:calc(50% + 8px);min-width:22px;height:22px;padding:0 6px;border-radius:99px;
  background:var(--red);color:#fff;border:2px solid var(--line);font:700 .75rem/18px var(--font);font-style:normal}

/* ---- salg: vælg person ---- */
#personSearch{font-size:1.15rem;margin-bottom:12px}
.person-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pchip{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:3px solid var(--line);
  border-radius:14px;padding:10px 12px;background:#fff;box-shadow:0 4px 0 var(--line);cursor:pointer;
  font:600 1rem var(--font);color:var(--ink);min-height:64px}
.pchip:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.pchip .pn{font-weight:700;line-height:1.15;word-break:break-word}
.pchip .pb{font-size:.9rem;font-weight:600;opacity:.75}
.pchip.neg{background:#ffe0dc}
.pchip.neg .pb{color:#c0261d;opacity:1}
.pchip.zero{background:#f1f1f1}
.crown{font-size:.85em}
.empty{padding:22px;text-align:center;opacity:.6;font-weight:600}

/* ---- salg: butik ---- */
.who{display:flex;align-items:center;gap:8px;background:var(--gold);position:sticky;top:76px;z-index:5;padding:10px 14px}
.who-main{flex:1;min-width:0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.who-name{font-size:1.25rem;font-weight:700;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-bal{font-weight:600}
main:has(#shop:not(.hidden)){max-width:1600px}

/* Kompakte produktkort, så det meste kan ses på én skærm */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px;margin:12px 16px}
.prod{position:relative;display:flex;flex-direction:column;border:3px solid var(--line);border-radius:14px;
  background:#fff;box-shadow:0 3px 0 var(--line);overflow:hidden;user-select:none;-webkit-user-select:none}
.prod-tap{flex:1;border:0;background:none;padding:7px 9px 5px;text-align:left;cursor:pointer;font:inherit;color:inherit}
.prod-name{font-size:.95rem;font-weight:700;line-height:1.12;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.24em;padding-right:14px}
.prod-meta{display:flex;align-items:baseline;justify-content:space-between;gap:4px;margin-top:3px}
.prod-price{font-size:1.05rem;font-weight:700;white-space:nowrap}
.prod-price s{font-size:.75rem;opacity:.5;font-weight:500;margin-left:3px}
.prod-stock{font-size:.72rem;font-weight:600;opacity:.6;white-space:nowrap}
.prod-stock.low{color:#c25a00;opacity:1}
.prod.sale::before{content:'%';position:absolute;top:5px;right:5px;width:20px;height:20px;border-radius:50%;background:var(--red);
  color:#fff;font-size:.72rem;font-weight:700;line-height:16px;text-align:center;border:2px solid var(--line)}
.prod.has{background:#e6fbe9}
.prod.out{opacity:.45}
.prod.out .prod-tap{cursor:not-allowed}
.qty{display:flex;align-items:stretch;border-top:3px solid var(--line)}
.qty button{flex:0 0 40px;border:0;background:var(--card2);font:700 1.3rem/1 var(--font);cursor:pointer;color:var(--ink);
  padding:5px 0;touch-action:manipulation}
.qty button:first-child{border-right:3px solid var(--line)}
.qty button:last-child{border-left:3px solid var(--line);background:var(--green);color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.25)}
.qty button:disabled{opacity:.35;cursor:not-allowed}
.qty span{flex:1;display:flex;align-items:center;justify-content:center;font-size:1.15rem;font-weight:700;
  font-variant-numeric:tabular-nums}
.prod.has .qty span{background:var(--gold)}

/* ---- kurv ---- */
.cart{position:fixed;left:0;right:0;bottom:calc(var(--tabbar) + env(safe-area-inset-bottom));z-index:25;background:#fff;border-top:4px solid var(--line);
  padding:8px 14px 10px;box-shadow:0 -4px 0 rgba(0,0,0,.06)}
.cart-inner{max-width:1600px;margin:0 auto}
.cart-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cart-nums div{display:flex;flex-direction:column;align-items:center;border:3px solid var(--line);border-radius:12px;
  padding:4px;background:var(--card2)}
.cart-nums span{font-size:.7rem;font-weight:600;opacity:.7;text-transform:uppercase;letter-spacing:.3px}
.cart-nums b{font-size:1.15rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.cart-nums div:nth-child(2){background:var(--gold)}
.cart-nums div:nth-child(3){background:#e6fbe9}
.cart.debt .cart-nums div:nth-child(3){background:var(--red);color:#fff;animation:shake .45s}
.cart-btns{display:flex;gap:10px;margin-top:8px}
.cart-btns .btn:last-child{flex:1}
.cart.debt #cartBuy{background:var(--red)}
.cart.empty #cartBuy{opacity:.45;pointer-events:none}
body.has-cart main{padding-bottom:200px}

/* Tablet/computer: kurven på én linje, og endnu flere produkter pr. række */
@media (min-width:760px){
  .cart-inner{display:flex;gap:12px;align-items:stretch}
  .cart-nums{flex:3}
  .cart-btns{flex:2;margin-top:0}
  .cart-btns .btn{padding:8px 14px}
  body.has-cart main{padding-bottom:150px}
  .product-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

/* ---- lister ---- */
.list{display:flex;flex-direction:column;gap:8px}
.lrow{display:flex;align-items:center;gap:10px;background:var(--card2);border:3px solid var(--line);border-radius:12px;
  padding:9px 12px}
.lrow.neg{background:#ffe0dc}
.lmain{flex:1;min-width:0}
.ltitle{font-weight:700;overflow:hidden;text-overflow:ellipsis}
.lsub{font-size:.82rem;opacity:.65;font-weight:500}
.lamt{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:1.05rem}
.lamt.neg{color:#c0261d}
.lamt.pos{color:#1f8f39}
.lbtns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
#kontiSearch{margin-bottom:10px}

/* lager: navn øverst i fuld bredde, knapper under. Gitter på store skærme. */
#stockList{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.stock-row{flex-wrap:wrap;gap:8px;padding:8px 10px}
.stock-row .lmain{flex-basis:100%;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.stock-row .ltitle{white-space:normal;line-height:1.15}
.stock-row .lsub{white-space:nowrap}
.stock-row .stock-num{flex:1}
.stock-row.low{background:#fff3cf}
.stock-row.zero{background:#ffe0dc}
.stock-num{min-width:64px;text-align:center;font:700 1.3rem var(--font);border:3px solid var(--line);border-radius:10px;
  background:#fff;padding:6px 8px;cursor:pointer;font-variant-numeric:tabular-nums;box-shadow:0 2px 0 var(--line)}
.stock-num.low{background:var(--gold)}
.stock-num.zero{background:var(--red);color:#fff}
.stat-row{display:flex;justify-content:space-between;padding:6px 2px;border-bottom:2px dashed #0002;font-weight:600}
.stat-row:last-child{border-bottom:0}
.stat-total{font-size:1.1rem;font-weight:700;margin-top:6px;display:flex;justify-content:space-between}

/* gæld */
.debt-card{background:#fff0ee}
.debt-total{display:flex;justify-content:space-between;font-weight:700;font-size:1.15rem;margin-top:10px;
  border-top:3px solid var(--line);padding-top:10px}

/* historik */
.hrow{background:var(--card2);border:3px solid var(--line);border-radius:12px;padding:9px 12px}
.hhead{display:flex;justify-content:space-between;gap:8px;align-items:center}
.htype{font-weight:700}
.hitems{font-size:.85rem;opacity:.75;margin-top:2px}
.htime{font-size:.78rem;opacity:.55}

/* ---- modal ---- */
.modal{position:fixed;inset:0;background:rgba(20,20,20,.5);display:flex;align-items:center;justify-content:center;
  padding:16px;z-index:100}
.modal-box{background:var(--card);border:4px solid var(--line);border-radius:20px;padding:20px;width:100%;
  max-width:480px;box-shadow:0 7px 0 var(--line);max-height:90vh;overflow:auto;animation:pop .22s ease-out}
.modal-box h3{margin:0 0 .5em;font-size:1.3rem}
.modal-box .row:last-child{margin-top:16px}
.modal-box.warn{background:#fff0ee;border-color:var(--line)}
.big-warn{font-size:3.2rem;text-align:center;line-height:1}
.warn-text{text-align:center;font-size:1.1rem;font-weight:600}
.warn-text .neg{color:#c0261d;font-size:1.5rem;font-weight:700;display:block;margin-top:4px}
.warn-strong{background:var(--red);color:#fff;border:3px solid var(--line);border-radius:12px;padding:10px;
  font-weight:700;text-align:center;margin-top:10px}
.receipt{text-align:center}
.receipt .r-emoji{font-size:3.4rem;line-height:1}
.receipt .r-name{font-size:1.4rem;font-weight:700;margin:.2em 0}
.receipt .r-grid{display:grid;grid-template-columns:1fr auto;gap:4px 14px;text-align:left;margin:12px auto;max-width:280px;
  font-size:1.05rem}
.receipt .r-grid b{text-align:right;font-variant-numeric:tabular-nums}
.receipt .r-after{font-size:1.25rem;border-top:3px solid var(--line);padding-top:6px}

/* ---- toast ---- */
.toast{position:fixed;left:50%;top:84px;transform:translateX(-50%);z-index:150;background:var(--ink);color:#fff;
  border-radius:12px;padding:12px 18px;font-weight:600;max-width:90vw;box-shadow:0 4px 0 rgba(0,0,0,.25);animation:pop .2s}
.toast.err{background:var(--red);border:3px solid var(--line)}

@media (max-width:520px){
  .product-grid{grid-template-columns:repeat(2,1fr);gap:8px;margin:10px 12px}
  .person-grid{grid-template-columns:repeat(2,1fr)}
  .card{margin:12px;padding:14px}
  .qty button{flex-basis:44px}
  .top-camp{display:none}
  .who{top:68px}
}