/* =========================================================================
   Lolly Candy Shop — counter console
   Same blackcurrant ink as the storefront, inverted for a screen that lives
   under shop lights all day. Signature: the ticket rail on the order board.
   ========================================================================= */

:root{
  --bg:#150B22;
  --panel:#1F1230;
  --panel-2:#2A1A3E;
  --line:#3A2A52;
  --line-2:#4A3667;
  --ink:#F2E9F9;
  --mute:#A08CB8;
  --mute-2:#7A6690;
  --raspberry:#FF5C86;
  --raspberry-d:#D93A66;
  --mint:#3BD1AA;
  --mint-d:#1E9E7C;
  --lemon:#FFC93C;
  --lemon-d:#D19E12;
  --blue:#6BA8FF;
  --r:12px;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 14px/1.55 Karla,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--mint);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--lemon);outline-offset:2px;border-radius:4px}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
h1,h2,h3{font-family:Fredoka,system-ui,sans-serif;font-weight:600;margin:0;line-height:1.2}
h1{font-size:1.6rem}
h2{font-size:1.15rem}
h3{font-size:1rem}
.hide{display:none !important}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:230px 1fr;min-height:100dvh}
.side{background:var(--panel);border-right:1px solid var(--line);padding:18px 0;position:sticky;top:0;height:100dvh;overflow-y:auto}
.side .brand{display:flex;align-items:center;gap:9px;padding:0 18px 18px;font-family:Fredoka,sans-serif;
  font-weight:700;font-size:1.15rem;color:#fff}
.side .brand .dot{width:22px;height:22px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 32% 32%, #fff 0 12%, var(--raspberry) 13% 42%, var(--lemon) 43% 66%, var(--mint) 67% 100%)}
.side .grp{padding:14px 18px 6px;font-family:'IBM Plex Mono',monospace;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mute-2)}
.side a.nav{display:flex;align-items:center;gap:10px;padding:9px 18px;color:var(--mute);
  font-weight:700;font-size:.88rem;border-left:3px solid transparent}
.side a.nav:hover{background:var(--panel-2);color:var(--ink);text-decoration:none}
.side a.nav.on{background:var(--panel-2);color:#fff;border-left-color:var(--raspberry)}
.side a.nav .pill{margin-left:auto;background:var(--raspberry);color:#fff;font-size:.68rem;
  border-radius:999px;padding:1px 7px;font-family:'IBM Plex Mono',monospace}
.side a.nav .pill.warn{background:var(--lemon);color:#3B2A00}
.side .who{margin-top:auto;padding:16px 18px;border-top:1px solid var(--line);font-size:.8rem;color:var(--mute)}

.main{min-width:0;padding:22px 26px 60px}
.top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.top .sub{color:var(--mute);font-size:.86rem}
.top .right{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap}

@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;display:flex;flex-wrap:wrap;gap:2px;padding:12px}
  .side .brand{width:100%;padding:0 6px 10px}
  .side .grp,.side .who{display:none}
  .side a.nav{border-left:0;border-radius:8px;padding:7px 12px;font-size:.82rem}
  .side a.nav.on{border-left:0;background:var(--raspberry);color:#fff}
  .main{padding:16px}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line-2);
  background:var(--panel-2);color:var(--ink);border-radius:9px;padding:9px 15px;font-weight:700;font-size:.85rem}
.btn:hover{background:var(--line);text-decoration:none;color:var(--ink)}
.btn.pri{background:var(--raspberry);border-color:var(--raspberry);color:#fff}
.btn.pri:hover{background:var(--raspberry-d);border-color:var(--raspberry-d);color:#fff}
.btn.go{background:var(--mint);border-color:var(--mint);color:#06251C}
.btn.go:hover{background:var(--mint-d);color:#fff}
.btn.warn{background:var(--lemon);border-color:var(--lemon);color:#3B2A00}
.btn.warn:hover{background:var(--lemon-d)}
.btn.sm{padding:6px 11px;font-size:.78rem}
.btn.block{width:100%}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ---------- panels ---------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:18px}
.panel > h2, .panel > h3{margin-bottom:4px}
.panel .cap{color:var(--mute);font-size:.83rem;margin:0 0 14px}

/* ---------- KPI cards ---------- */
.kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));margin-bottom:18px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;position:relative;overflow:hidden}
.kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line-2)}
.kpi.mint::before{background:var(--mint)} .kpi.lemon::before{background:var(--lemon)}
.kpi.rasp::before{background:var(--raspberry)} .kpi.blue::before{background:var(--blue)}
.kpi .lbl{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mute-2);margin-bottom:7px}
.kpi .val{font-family:Fredoka,sans-serif;font-size:1.65rem;font-weight:600;line-height:1}
.kpi .note{font-size:.76rem;color:var(--mute);margin-top:6px}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:.85rem}
th{text-align:left;font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mute-2);font-weight:500;padding:11px 13px;
  border-bottom:1px solid var(--line);white-space:nowrap;background:var(--panel-2)}
td{padding:11px 13px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--panel-2)}
td.num,th.num{text-align:right;font-family:'IBM Plex Mono',monospace}
.tbl-empty{padding:40px 20px;text-align:center;color:var(--mute)}

/* ---------- tags ---------- */
.tg{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.05em;
  padding:3px 9px;border-radius:999px;border:1px solid var(--line-2);color:var(--mute);white-space:nowrap}
.tg.new{border-color:var(--blue);color:var(--blue)}
.tg.preparing{border-color:var(--lemon);color:var(--lemon)}
.tg.ready{border-color:var(--mint);color:var(--mint);background:rgba(59,209,170,.12)}
.tg.picked_up,.tg.received,.tg.won{border-color:var(--mint-d);color:var(--mint-d)}
.tg.cancelled,.tg.lost,.tg.out{border-color:var(--raspberry);color:var(--raspberry)}
.tg.low,.tg.partial,.tg.contacted,.tg.sent{border-color:var(--lemon);color:var(--lemon)}
.tg.gold{border-color:var(--lemon);color:var(--lemon);background:rgba(255,201,60,.12)}

/* ---------- THE TICKET RAIL (signature) ---------- */
.rail{display:grid;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start}
@media(max-width:1100px){.rail{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.rail{grid-template-columns:1fr}}
.lane{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px;min-height:120px}
.lane > .hd{display:flex;align-items:center;gap:8px;padding:2px 4px 12px;
  font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mute-2)}
.lane > .hd .n{margin-left:auto;background:var(--panel-2);border-radius:999px;padding:1px 8px;color:var(--ink)}
.lane.ready > .hd{color:var(--mint)}

.ticket{background:#FFFDF7;color:#231433;border-radius:3px;padding:0 13px 13px;margin-bottom:11px;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.6);position:relative;animation:drop .22s ease}
@keyframes drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ticket .perf{height:11px;margin:0 -13px 10px;
  background:radial-gradient(circle at 6px 0, transparent 0 5px, #FFFDF7 6px);
  background-size:12px 11px;background-repeat:repeat-x}
.ticket .num{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:.95rem;letter-spacing:.03em}
.ticket .meta{font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:#6B5A7D;margin:3px 0 9px;
  display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ticket .who{font-weight:700;font-size:.82rem;color:#3A2450}
.ticket ul{list-style:none;margin:8px 0;padding:0;border-top:1px dashed #D9CBE4;padding-top:8px}
.ticket li{font-size:.82rem;padding:2px 0;display:flex;gap:8px}
.ticket li b{font-family:'IBM Plex Mono',monospace;color:#B92552;flex:none;min-width:22px}
.ticket .noteline{background:#FFF3D4;border-left:3px solid var(--lemon-d);padding:6px 9px;
  font-size:.78rem;margin:8px 0;border-radius:0 4px 4px 0;color:#5A4400}
.ticket .acts{display:flex;gap:6px;margin-top:10px}
.ticket .acts .btn{flex:1;border-color:#D9CBE4;background:#F4EEF9;color:#3A2450}
.ticket .acts .btn:hover{background:#E8DDF2}
.ticket .acts .btn.go{background:var(--mint-d);border-color:var(--mint-d);color:#fff}
.ticket .acts .btn.pri{background:var(--raspberry-d);border-color:var(--raspberry-d);color:#fff}
.ticket.late{box-shadow:0 0 0 2px var(--raspberry), 0 6px 16px -8px rgba(0,0,0,.6)}
.ticket.late .num::after{content:' · LATE';color:#B92552;font-size:.72rem}
.lane .none{color:var(--mute-2);font-size:.8rem;text-align:center;padding:22px 8px;font-family:'IBM Plex Mono',monospace}

/* ---------- forms ---------- */
label.f{display:block;font-size:.78rem;font-weight:700;color:var(--mute);margin-bottom:5px}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password],
input[type=date],input[type=search],select,textarea{
  width:100%;background:var(--bg);border:1px solid var(--line-2);color:var(--ink);
  border-radius:9px;padding:9px 11px;font:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--raspberry)}
textarea{min-height:84px;resize:vertical}
.fgrid{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.frow{display:flex;gap:9px;align-items:flex-end;flex-wrap:wrap}
.frow > div{flex:1;min-width:130px}
fieldset{border:1px solid var(--line);border-radius:var(--r);padding:14px;margin:0 0 16px}
legend{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute-2);padding:0 7px}

/* ---------- flash ---------- */
.flash{border-radius:9px;padding:11px 14px;margin-bottom:14px;font-size:.87rem;border:1px solid}
.flash.ok{background:rgba(59,209,170,.1);border-color:var(--mint-d);color:var(--mint)}
.flash.err{background:rgba(255,92,134,.1);border-color:var(--raspberry-d);color:var(--raspberry)}
.flash.warn{background:rgba(255,201,60,.1);border-color:var(--lemon-d);color:var(--lemon)}

/* ---------- login ---------- */
.login{min-height:100dvh;display:grid;place-items:center;padding:24px}
.login .box{width:100%;max-width:370px;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:30px}
.login .brand{display:flex;align-items:center;gap:10px;font-family:Fredoka,sans-serif;font-weight:700;
  font-size:1.3rem;margin-bottom:6px}
.login .brand .dot{width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 32% 32%, #fff 0 12%, var(--raspberry) 13% 42%, var(--lemon) 43% 66%, var(--mint) 67% 100%)}
.login p.cap{color:var(--mute);font-size:.85rem;margin:0 0 22px}
.login .field{margin-bottom:14px}

/* ---------- POS ---------- */
.pos{display:grid;gap:16px;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);align-items:start}
@media(max-width:960px){.pos{grid-template-columns:1fr}}
.pos-results{max-height:340px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r);margin-top:10px}
.pos-results button{display:flex;width:100%;gap:12px;align-items:center;background:none;border:0;
  border-bottom:1px solid var(--line);padding:11px 13px;color:var(--ink);text-align:left}
.pos-results button:hover{background:var(--panel-2)}
.pos-results .p{margin-left:auto;font-family:'IBM Plex Mono',monospace;color:var(--lemon)}
.pos-results .s{font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--mute-2)}
.pos-line{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.pos-line .nm{flex:1;font-size:.86rem}
.pos-line .amt{font-family:'IBM Plex Mono',monospace}
.stepper{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.stepper button{background:var(--panel-2);border:0;color:var(--ink);width:28px;height:28px;line-height:1}
.stepper button:hover{background:var(--line)}
.stepper span{min-width:30px;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:.82rem}
.tot-line{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;
  font-size:.87rem;padding:4px 0}
.tot-line.big{font-size:1.3rem;border-top:1px dashed var(--line-2);margin-top:8px;padding-top:11px;color:var(--lemon)}

/* ---------- bars (reports) ---------- */
.bars{display:flex;align-items:flex-end;gap:3px;height:130px;padding:10px 0}
.bars .b{flex:1;background:var(--raspberry);border-radius:3px 3px 0 0;min-height:2px;position:relative}
.bars .b:hover{background:var(--lemon)}
.bars .b span{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  font-family:'IBM Plex Mono',monospace;font-size:.62rem;color:var(--mute);white-space:nowrap;
  opacity:0;transition:opacity .12s}
.bars .b:hover span{opacity:1}
.meter{height:6px;background:var(--panel-2);border-radius:999px;overflow:hidden;min-width:70px}
.meter i{display:block;height:100%;background:var(--mint);border-radius:999px}
.meter i.low{background:var(--lemon)} .meter i.out{background:var(--raspberry)}

@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}