/* ============================================================
   CHOCO'S BITES — ADMIN
   Dark dashboard matching the owner's mockup
   ============================================================ */
:root{
  --amber:#E0A73C;
  --amber-2:#D4952B;
  --amber-deep:#B87E1C;
  --bg:#0E0B08;
  --panel:#171310;
  --panel-2:#1F1913;
  --line:#2C241C;
  --line-2:#3A3027;
  --text:#EFE9E1;
  --text-2:#A2988C;
  --muted:#6E655B;
  --ok:#4FB877;
  --warn:#E0A73C;
  --info:#5B9BD5;
  --bad:#E5484D;
  --f-display:"Bebas Neue",Impact,sans-serif;
  --f-body:"Nunito Sans",system-ui,sans-serif;
  --shadow:0 4px 20px rgba(0,0,0,.4);
  --shadow-lg:0 16px 46px rgba(0,0,0,.55);
}
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:hidden;max-width:100%}
body{
  font-family:var(--f-body);background:var(--bg);color:var(--text);
  line-height:1.55;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;max-width:100%;
}
img,video,table{max-width:100%}
button,input,select,textarea{font-family:inherit;font-size:inherit}
button{cursor:pointer;border:none;background:none;color:inherit}
a{text-decoration:none;color:inherit}
h1,h2,h3{font-family:var(--f-body);font-weight:800;color:#fff;line-height:1.2}

/* ---------- LOGIN ---------- */
.login-wrap{min-height:100dvh;display:grid;place-items:center;padding:1.2rem;
  background:radial-gradient(900px 500px at 50% 0%, rgba(224,167,60,.13), transparent 60%), var(--bg)}
.login-card{width:min(400px,100%);background:var(--panel);border:1px solid var(--line);
  border-radius:18px;padding:2rem 1.6rem;box-shadow:var(--shadow-lg);text-align:center}
.login-card .lg{width:88px;height:88px;border-radius:50%;margin:0 auto 1rem;object-fit:cover;
  box-shadow:0 0 0 3px rgba(224,167,60,.25)}
.login-card h1{font-size:1.35rem;margin-bottom:.2rem}
.login-card .sub{color:var(--text-2);font-size:.88rem;margin-bottom:1.5rem}

/* ---------- SHELL ---------- */
.shell{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100dvh;max-width:100%}
.side{background:#12100D;border-right:1px solid var(--line);padding:1.1rem .8rem;
  display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;overflow-y:auto}
.side-brand{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.4rem 0 1.2rem;
  border-bottom:1px solid var(--line);margin-bottom:.9rem}
.side-brand img{width:72px;height:72px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 2px rgba(224,167,60,.3)}
.side-brand b{font-family:var(--f-display);font-size:1.15rem;letter-spacing:.06em;color:var(--amber)}
.side-brand span{font-size:.7rem;color:var(--muted)}
.side a.nav{display:flex;align-items:center;gap:.7rem;padding:.68rem .8rem;border-radius:9px;
  font-size:.88rem;font-weight:600;color:var(--text-2);transition:.15s;margin-bottom:.15rem}
.side a.nav:hover{background:var(--panel-2);color:var(--text)}
.side a.nav.on{background:linear-gradient(135deg,var(--amber),var(--amber-deep));color:#211705;font-weight:800}
.side a.nav .ic{font-size:1.02rem;width:20px;text-align:center}
.side a.nav .ct{margin-left:auto;background:var(--line-2);color:var(--text);font-size:.68rem;
  font-weight:800;padding:.1rem .42rem;border-radius:99px;min-width:20px;text-align:center}
.side a.nav.on .ct{background:rgba(33,23,5,.25);color:#211705}
.side .sp{flex:1}
.side .out{color:#8A8078;font-size:.84rem}
.side .out:hover{color:var(--bad)}

.main{padding:1.3rem 1.5rem 2.5rem;min-width:0;max-width:100%}
.top{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.3rem;flex-wrap:wrap}
.top h1{font-size:1.45rem}
.top p{color:var(--text-2);font-size:.87rem}
.top-r{margin-left:auto;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.burger{display:none;font-size:1.3rem;color:var(--text);width:38px;height:38px;
  border-radius:9px;background:var(--panel);border:1px solid var(--line)}

.who{display:flex;align-items:center;gap:.6rem;background:var(--panel);border:1px solid var(--line);
  border-radius:11px;padding:.4rem .8rem .4rem .4rem}
.who img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.who b{display:block;font-size:.8rem;line-height:1.2}
.who span{font-size:.7rem;color:var(--muted)}

/* ---------- STAT CARDS ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:.85rem;margin-bottom:1.2rem}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:1.1rem;
  display:flex;align-items:flex-start;gap:.8rem;min-width:0}
.stat .sb{flex:1;min-width:0}
.stat .lb{font-size:.68rem;font-weight:800;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.stat .vl{font-family:var(--f-display);font-size:1.9rem;color:#fff;line-height:1.1;letter-spacing:.02em}
.stat .dt{font-size:.74rem;color:var(--ok);font-weight:700;margin-top:.15rem}
.stat .dt.down{color:var(--bad)}
.stat .ic{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;font-size:1.2rem;
  background:linear-gradient(135deg,rgba(224,167,60,.22),rgba(184,126,28,.1));color:var(--amber);flex-shrink:0}

/* ---------- PANELS ---------- */
.grid2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:.9rem;margin-bottom:.9rem}
.grid3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);gap:.9rem;margin-bottom:.9rem}
.pnl{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:1.1rem;min-width:0;overflow:hidden}
.pnl-h{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.9rem}
.pnl-h h2{font-size:.98rem}
.pnl-h a,.pnl-h button{font-size:.76rem;color:var(--amber);font-weight:700}
.pnl-h select{background:var(--panel-2);border:1px solid var(--line);border-radius:7px;
  padding:.3rem .6rem;color:var(--text);font-size:.78rem}

/* ---------- ORDER LIST ---------- */
.ord{display:flex;align-items:center;gap:.7rem;padding:.7rem 0;border-bottom:1px solid var(--line);min-width:0}
.ord:last-child{border-bottom:none}
.ord-av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--amber),var(--amber-deep));
  display:grid;place-items:center;font-weight:800;color:#211705;font-size:.82rem;flex-shrink:0}
.ord-b{flex:1;min-width:0}
.ord-b .no{font-size:.74rem;color:var(--muted);font-weight:700}
.ord-b b{display:block;font-size:.85rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ord-b span{font-size:.74rem;color:var(--text-2);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ord-r{text-align:right;flex-shrink:0}
.ord-r .tm{font-size:.7rem;color:var(--muted);margin-top:.2rem}

.chip{display:inline-block;font-size:.68rem;font-weight:800;padding:.2rem .55rem;border-radius:99px;white-space:nowrap}
.chip.pending{background:rgba(224,167,60,.16);color:var(--amber)}
.chip.preparing{background:rgba(224,120,60,.16);color:#E0783C}
.chip.out{background:rgba(91,155,213,.16);color:var(--info)}
.chip.delivered{background:rgba(79,184,119,.16);color:var(--ok)}
.chip.cancelled{background:rgba(229,72,77,.16);color:var(--bad)}
.chip.paid{background:rgba(79,184,119,.16);color:var(--ok)}
.chip.await{background:rgba(224,167,60,.16);color:var(--amber)}
.chip.claimed{background:rgba(124,77,255,.18);color:#B79BF0}

/* ---------- CHART ---------- */
.chart{width:100%;height:210px;display:block}
.chart-legend{display:flex;gap:1rem;font-size:.74rem;color:var(--text-2);margin-bottom:.5rem}
.chart-legend i{display:inline-block;width:14px;height:2.5px;border-radius:2px;margin-right:.35rem;vertical-align:middle}

/* ---------- DONUT ---------- */
.donut-wrap{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.donut{width:132px;height:132px;flex-shrink:0;position:relative}
.donut-mid{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.donut-mid b{font-family:var(--f-display);font-size:1.7rem;color:#fff;line-height:1}
.donut-mid span{font-size:.66rem;color:var(--muted)}
.donut-key{flex:1;min-width:0}
.dk{display:flex;align-items:center;gap:.5rem;font-size:.79rem;padding:.22rem 0}
.dk i{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.dk span{color:var(--text-2)}
.dk b{margin-left:auto;color:var(--text);font-weight:700}

/* ---------- TOP ITEMS ---------- */
.ti{display:flex;align-items:center;gap:.65rem;padding:.55rem 0;border-bottom:1px solid var(--line);min-width:0}
.ti:last-child{border-bottom:none}
.ti .rk{width:19px;font-size:.78rem;color:var(--muted);font-weight:800;flex-shrink:0}
.ti-img{width:38px;height:38px;border-radius:8px;background:var(--panel-2);display:grid;place-items:center;
  font-size:1.05rem;flex-shrink:0;overflow:hidden}
.ti-img img{width:100%;height:100%;object-fit:cover}
.ti-b{flex:1;min-width:0}
.ti-b b{display:block;font-size:.81rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ti-b span{font-size:.75rem;color:var(--amber)}
.ti .ct{background:var(--panel-2);border:1px solid var(--line);border-radius:99px;padding:.15rem .5rem;
  font-size:.72rem;font-weight:800;flex-shrink:0}

/* ---------- REVIEWS ---------- */
.rv{display:flex;gap:.65rem;padding:.65rem 0;border-bottom:1px solid var(--line);min-width:0}
.rv:last-child{border-bottom:none}
.rv-av{width:34px;height:34px;border-radius:50%;background:var(--panel-2);display:grid;place-items:center;
  font-weight:800;font-size:.8rem;color:var(--amber);flex-shrink:0}
.rv-b{flex:1;min-width:0}
.rv-b .hd{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.rv-b b{font-size:.81rem}
.rv-b .st{color:var(--amber);font-size:.72rem;letter-spacing:.05em}
.rv-b p{font-size:.78rem;color:var(--text-2);margin-top:.15rem;line-height:1.4}
.rv .tm{font-size:.68rem;color:var(--muted);flex-shrink:0}

/* ---------- QUICK ACTIONS ---------- */
.qa{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(130px,100%),1fr));gap:.6rem}
.qa a{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:.85rem .6rem;
  text-align:center;transition:.15s;min-width:0}
.qa a:hover{border-color:var(--amber);background:rgba(224,167,60,.08)}
.qa a .ic{font-size:1.3rem;display:block;margin-bottom:.3rem}
.qa a b{font-size:.75rem;font-weight:700;display:block;line-height:1.25}

/* ---------- BUTTONS / FORMS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.62rem 1.15rem;
  border-radius:9px;font-weight:800;font-size:.83rem;transition:.15s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-amber{background:var(--amber);color:#211705}
.btn-amber:hover{background:var(--amber-2)}
.btn-out{border:1.4px solid var(--line-2);color:var(--text)}
.btn-out:hover{border-color:var(--amber);color:var(--amber)}
.btn-sm{padding:.42rem .8rem;font-size:.76rem}
.btn-block{width:100%}
.btn-bad{background:var(--bad);color:#fff}
.btn:disabled{opacity:.5;pointer-events:none}

.fld{margin-bottom:.85rem;text-align:left}
.fld label{display:block;font-size:.76rem;font-weight:700;color:var(--text-2);margin-bottom:.3rem}
.fld input,.fld textarea,.fld select{width:100%;background:var(--panel-2);border:1px solid var(--line);
  border-radius:9px;padding:.68rem .85rem;color:var(--text);outline:none;transition:.15s}
.fld input:focus,.fld textarea:focus{border-color:var(--amber)}
.fld input::placeholder{color:var(--muted)}
.frow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.7rem}
.msg{font-size:.82rem;min-height:1.2em;margin-top:.4rem}
.msg.err{color:var(--bad)}
.msg.ok{color:var(--ok)}

/* ---------- TABLE ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -.3rem}
table{width:100%;border-collapse:collapse;font-size:.83rem;min-width:520px}
th{text-align:left;font-size:.7rem;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;
  padding:.55rem .5rem;border-bottom:1px solid var(--line);font-weight:800;white-space:nowrap}
td{padding:.6rem .5rem;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:none}

/* ---------- MODAL ---------- */
.modal{position:fixed;inset:0;z-index:600;background:rgba(8,6,4,.8);backdrop-filter:blur(5px);
  display:none;place-items:center;padding:1rem;overflow-y:auto}
.modal.open{display:grid}
.mcard{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:1.4rem;
  width:min(460px,100%);max-height:92dvh;overflow-y:auto;box-shadow:var(--shadow-lg);
  animation:mIn .25s cubic-bezier(.2,.9,.3,1.2)}
@keyframes mIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.mcard h3{font-size:1.08rem;margin-bottom:.2rem}
.mcard .sub{color:var(--text-2);font-size:.83rem;margin-bottom:1rem}
.macts{display:flex;gap:.6rem;margin-top:1.1rem}
.macts .btn{flex:1}

/* ---------- MISC ---------- */
.empty{text-align:center;padding:2rem 1rem;color:var(--muted)}
.empty .e{font-size:2.1rem;display:block;margin-bottom:.4rem;opacity:.5}
.empty span{font-size:.85rem}
.load{display:grid;place-items:center;padding:2.4rem}
.spin{width:30px;height:30px;border:3px solid var(--line);border-top-color:var(--amber);
  border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);z-index:800;
  background:#251D15;border:1px solid var(--amber);color:#fff;border-radius:10px;
  padding:.7rem 1.1rem;font-size:.84rem;font-weight:600;box-shadow:var(--shadow-lg);
  max-width:calc(100vw - 2rem);text-align:center;animation:tIn .26s ease}
@keyframes tIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

.cb-load{position:fixed;inset:0;z-index:900;background:rgba(14,11,8,.85);backdrop-filter:blur(4px);
  display:none;place-items:center}
.cb-load.on{display:grid}
.cb-load img{width:84px;height:84px;border-radius:50%;object-fit:cover;
  animation:sp 1.1s cubic-bezier(.5,0,.5,1) infinite;box-shadow:0 0 0 3px rgba(224,167,60,.25)}

.scrim{display:none}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1080px){
  .grid3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .grid3 > :nth-child(3){grid-column:1/-1}
}
@media(max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;left:0;top:0;bottom:0;width:250px;z-index:500;transform:translateX(-100%);
    transition:transform .26s ease;height:100dvh}
  .side.open{transform:none}
  .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:400;opacity:0;
    pointer-events:none;transition:opacity .22s}
  .scrim.on{opacity:1;pointer-events:auto}
  .burger{display:grid;place-items:center}
  .main{padding:1rem 1rem 2rem}
  .grid2,.grid3{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
  .main{padding:.9rem .8rem 2rem}
  .top h1{font-size:1.2rem}
  .top p{font-size:.8rem}
  .stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.6rem}
  .stat{padding:.8rem;gap:.55rem;flex-direction:column}
  .stat .ic{width:34px;height:34px;font-size:1rem;border-radius:9px}
  .stat .lb{font-size:.6rem;letter-spacing:.05em}
  .stat .vl{font-size:1.45rem}
  .stat .dt{font-size:.66rem}
  .pnl{padding:.9rem;border-radius:11px}
  .pnl-h h2{font-size:.9rem}
  .donut-wrap{gap:.8rem}
  .donut{width:112px;height:112px}
  .qa{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .who span{display:none}
  .mcard{padding:1.1rem}
  .macts{flex-direction:column-reverse}
  .frow{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:380px){
  .stats{grid-template-columns:minmax(0,1fr)}
}