:root{
  --bg:#0f1720;
  --panel:#1a2530;
  --panel2:#22303d;
  --line:#324150;
  --text:#f2f5f7;
  --muted:#93a4b3;
  --accent:#e8622c;
  --accent2:#ffb347;
  --good:#2fb46a;
  --bad:#e64545;
  --tile:#22303d;
  --tile-active:#e8622c;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-user-select:none; user-select:none;
  padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom);
}
button{font-family:inherit;}
input{font-family:inherit;}
[hidden]{display:none !important;}

/* ---------- LOGIN ---------- */
.loginwrap{
  min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:20px;
}
.loginbox{
  width:100%; max-width:340px; background:var(--panel); border:1px solid var(--line);
  border-radius:16px; padding:26px 22px;
}
.loginbox h1{margin:0 0 4px; font-size:1.4rem; text-align:center;}
.loginbox .sub{color:var(--muted); font-size:.85rem; text-align:center; margin-bottom:20px;}
.loginbox label{display:block; font-size:.78rem; color:var(--muted); margin:12px 0 4px;}
.loginbox input{
  width:100%; padding:12px; border-radius:10px; border:1px solid var(--line);
  background:var(--panel2); color:var(--text); font-size:1rem;
}
.loginbox .err{color:var(--bad); font-size:.85rem; margin-top:10px; min-height:1.1em;}
.loginbox button{
  width:100%; margin-top:18px; padding:13px; border:none; border-radius:10px;
  background:var(--accent); color:#fff; font-weight:800; font-size:1rem; cursor:pointer;
}
.loginbox button:disabled{opacity:.6;}

/* ---------- APP SHELL / TOPBAR ---------- */
.app{display:flex; flex-direction:column; height:100vh; height:100dvh;}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 12px; background:var(--panel); border-bottom:1px solid var(--line); flex:0 0 auto;
}
.topbar .who{font-size:.8rem; color:var(--muted);}
.topbar .who b{color:var(--text);}
.tabbtn{
  background:var(--panel2); border:1px solid var(--line); color:var(--text);
  border-radius:9px; padding:8px 12px; font-size:.85rem; font-weight:700; cursor:pointer;
}
.tabbtn.active{background:var(--accent); border-color:var(--accent);}
.topbar-actions{display:flex; gap:6px; align-items:center; flex-wrap:wrap;}

.offlinebar{
  background:var(--bad); color:#fff; text-align:center; font-size:.78rem; font-weight:700;
  padding:6px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:8px;
}
.offlinebar button{background:#fff; color:var(--bad); border:none; border-radius:6px; padding:4px 8px; font-weight:800; cursor:pointer;}

/* ---------- KASSE VIEW (reused from prototype) ---------- */
main.kasse{flex:1 1 auto; display:flex; min-height:0;}
.products{
  flex:1 1 55%; overflow-y:auto; padding:12px; display:grid;
  grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:10px; align-content:start;
}
.tile{
  background:var(--tile); border:1px solid var(--line); border-radius:14px;
  padding:12px 8px; text-align:center; cursor:pointer; position:relative;
  display:flex; flex-direction:column; justify-content:center; min-height:88px;
  transition:transform .06s ease, background .15s ease;
}
.tile:active{transform:scale(.95); background:var(--tile-active);}
.tile .name{font-weight:700; font-size:1.02rem; word-break:break-word;}
.tile .price{color:var(--accent2); font-size:.95rem; margin-top:4px;}
.tile .pfand-tag{font-size:.68rem; color:var(--muted); margin-top:2px;}
.tile .badge{
  position:absolute; top:-8px; right:-8px; background:var(--accent);
  color:#fff; border-radius:999px; min-width:26px; height:26px; padding:0 6px;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem;
  border:2px solid var(--bg);
}
.empty-hint{color:var(--muted); padding:20px; text-align:center; grid-column:1/-1;}

.orderpanel{
  flex:1 1 45%; max-width:420px; background:var(--panel); border-left:1px solid var(--line);
  display:flex; flex-direction:column; min-height:0;
}
.orderlist{flex:1 1 auto; overflow-y:auto; padding:10px 12px;}
.orderrow{display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--line);}
.orderrow .oname{flex:1; font-weight:600; font-size:.95rem;}
.orderrow .osub{color:var(--muted); font-size:.72rem;}
.qtybtn{
  width:34px; height:34px; border-radius:9px; border:1px solid var(--line);
  background:var(--panel2); color:var(--text); font-size:1.2rem; line-height:1; cursor:pointer;
}
.qtybtn:active{background:var(--accent);}
.qtyval{min-width:22px; text-align:center; font-weight:700;}
.olinetotal{width:66px; text-align:right; font-weight:700; font-size:.9rem;}

.pfandreturn{padding:10px 12px; border-top:1px dashed var(--line);}
.pfandreturn h3{margin:0 0 6px; font-size:.8rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.03em;}
.pfrow{display:flex; align-items:center; gap:8px; padding:5px 0;}
.pfrow .plabel{flex:1; font-size:.88rem;}

.totals{padding:10px 12px; border-top:1px solid var(--line); background:var(--panel2);}
.trow{display:flex; justify-content:space-between; font-size:.88rem; color:var(--muted); padding:2px 0;}
.trow.grand{font-size:1.5rem; font-weight:800; color:var(--text); padding-top:6px;}
.trow.grand span:last-child{color:var(--accent2);}

.paypad{padding:10px 12px 14px; border-top:1px solid var(--line);}
.givenrow{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.givenrow .lbl{font-size:.85rem; color:var(--muted);}
.givenrow .val{font-size:1.3rem; font-weight:800;}
.quickcash{display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap;}
.qc{
  flex:1 1 auto; background:var(--panel2); border:1px solid var(--line); color:var(--text);
  border-radius:9px; padding:8px 4px; font-size:.85rem; font-weight:700; cursor:pointer; min-width:50px;
}
.qc:active{background:var(--accent);}
.keypad{display:grid; grid-template-columns:repeat(3,1fr); gap:6px;}
.key{
  background:var(--panel2); border:1px solid var(--line); color:var(--text);
  border-radius:9px; padding:12px; font-size:1.1rem; font-weight:700; cursor:pointer;
}
.key:active{background:var(--accent);}

.changebar{
  margin-top:10px; padding:12px; border-radius:12px; text-align:center;
  font-weight:800; font-size:1.35rem; background:var(--panel2); border:1px solid var(--line);
}
.changebar.ok{background:rgba(47,180,106,.18); border-color:var(--good); color:var(--good);}
.changebar.bad{background:rgba(230,69,69,.18); border-color:var(--bad); color:var(--bad);}
.changebar small{display:block; font-weight:600; font-size:.7rem; color:var(--muted); margin-top:2px;}

.finishbtn{
  margin-top:10px; width:100%; padding:14px; border:none; border-radius:12px;
  background:var(--good); color:#08210f; font-weight:800; font-size:1.05rem; cursor:pointer;
}
.finishbtn:disabled{background:var(--panel2); color:var(--muted);}
.finishbtn:active:not(:disabled){filter:brightness(.9);}
.clearbtn{
  margin-top:6px; width:100%; padding:9px; border:1px solid var(--line); border-radius:10px;
  background:transparent; color:var(--muted); font-weight:700; font-size:.85rem; cursor:pointer;
}

@media (max-width: 760px){
  main.kasse{flex-direction:column; overflow-y:auto;}
  .products{flex:0 0 auto; max-height:38vh;}
  .orderpanel{max-width:none; border-left:none; border-top:2px solid var(--line); flex:1 1 auto;}
}

/* ---------- ADMIN VIEW ---------- */
main.admin{flex:1 1 auto; overflow-y:auto; padding:14px;}
.admintabs{display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap;}
.adminpanel{display:none;}
.adminpanel.active{display:block;}
.card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:14px;}
.card h2{margin:0 0 10px; font-size:1.05rem;}
.itemrow{
  display:grid; grid-template-columns:1fr 78px 78px 70px 40px; gap:6px; align-items:center;
  padding:8px 0; border-bottom:1px solid var(--line);
}
.itemrow input{
  background:var(--panel2); border:1px solid var(--line); color:var(--text);
  border-radius:8px; padding:8px 6px; font-size:.9rem; width:100%;
}
.itemrow .del{background:var(--bad); border:none; color:#fff; border-radius:8px; height:36px; font-weight:800; cursor:pointer;}
.itemrow .actflag{font-size:.7rem; color:var(--muted); text-align:center;}
.fieldlabel{font-size:.65rem; color:var(--muted); text-transform:uppercase;}

.userrow{
  display:grid; grid-template-columns:1fr 90px 90px 1fr 40px; gap:6px; align-items:center;
  padding:8px 0; border-bottom:1px solid var(--line); font-size:.85rem;
}
.userrow select, .userrow input{
  background:var(--panel2); border:1px solid var(--line); color:var(--text);
  border-radius:8px; padding:7px 5px; font-size:.85rem; width:100%;
}
.userrow .del{background:var(--bad); border:none; color:#fff; border-radius:8px; height:32px; font-weight:800; cursor:pointer;}

.newuserform{display:grid; grid-template-columns:1fr 1fr 110px auto; gap:6px; margin-top:10px;}
.newuserform input, .newuserform select{
  background:var(--panel2); border:1px solid var(--line); color:var(--text);
  border-radius:8px; padding:9px; font-size:.9rem;
}

.addbtn, .primarybtn{
  width:100%; margin-top:10px; padding:12px; border:none; border-radius:10px;
  background:var(--accent); color:#fff; font-weight:800; font-size:.95rem; cursor:pointer;
}
.secondarybtn{
  padding:10px 14px; border:1px solid var(--line); border-radius:10px;
  background:var(--panel2); color:var(--text); font-weight:700; font-size:.9rem; cursor:pointer;
}
.dangerbtn{
  padding:10px 14px; border:1px solid var(--bad); border-radius:10px;
  background:transparent; color:var(--bad); font-weight:700; font-size:.9rem; cursor:pointer;
}
.hint{font-size:.78rem; color:var(--muted); line-height:1.4; margin-top:6px;}
.note{background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:10px; font-size:.8rem; color:var(--muted); margin-top:10px; line-height:1.4;}

.statgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-bottom:12px;}
.stattile{background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center;}
.stattile .v{font-size:1.3rem; font-weight:800; color:var(--accent2);}
.stattile .l{font-size:.72rem; color:var(--muted); margin-top:2px;}

.summarytable{width:100%; border-collapse:collapse; margin-top:4px;}
.summarytable th, .summarytable td{padding:7px 6px; border-bottom:1px solid var(--line); font-size:.85rem; text-align:left;}
.summarytable th{color:var(--muted); font-weight:600; font-size:.72rem; text-transform:uppercase;}
.summarytable td.num, .summarytable th.num{text-align:right;}

.msg{font-size:.85rem; margin-top:8px; min-height:1.2em;}
.msg.ok{color:var(--good);}
.msg.bad{color:var(--bad);}

.pending-toast{
  position:fixed; bottom:14px; left:50%; transform:translateX(-50%);
  background:var(--panel2); border:1px solid var(--accent); color:var(--text);
  padding:10px 16px; border-radius:12px; font-size:.85rem; z-index:80; display:flex; gap:10px; align-items:center;
}
.pending-toast button{background:var(--accent); border:none; color:#fff; border-radius:7px; padding:6px 10px; font-weight:700; cursor:pointer;}