/* ZOUQ — shared design system (from the approved brand prototype) */
:root{
  --blue:#1E7FE0; --blue-deep:#0C3E82; --blue-soft:#EAF3FF;
  --green:#00A651; --green-soft:#E7F8EF;
  --red:#ED1B2E;   --red-soft:#FDE8E9;
  --orange:#F5A623;--orange-soft:#FFF3E0;
  --purple:#7C5CFC;--purple-soft:#F1EDFF;
  --ink:#12151B; --ink-soft:#5B6472; --ink-faint:#9AA2AD;
  --paper:#F3F6FB; --card:#FFFFFF; --line:rgba(18,21,27,0.09);
  --shadow:0 2px 8px rgba(18,21,27,0.06);
  --shadow-lg:0 10px 24px rgba(12,20,40,0.14);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper); color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; font-size:14px;
}
h1,h2,h3,h4,h5{font-family:'Baloo 2','Inter',sans-serif; margin:0;}
button,input,select,textarea{font-family:inherit;}
button{cursor:pointer;}
a{color:var(--blue);text-decoration:none;}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;}
.hide{display:none !important;}

/* ---------- generic pieces ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--blue);color:#fff;font-weight:800;font-size:13px;
  padding:12px 16px;border-radius:13px;border:none;
  box-shadow:0 8px 18px rgba(30,127,224,0.28);
}
.btn:active{transform:scale(.985);}
.btn:disabled{opacity:.55;box-shadow:none;cursor:not-allowed;}
.btn.block{width:100%;}
.btn.ghost{background:var(--card);color:var(--ink);box-shadow:var(--shadow);}
.btn.dark{background:var(--ink);box-shadow:0 8px 18px rgba(0,0,0,.2);}
.btn.green{background:var(--green);box-shadow:0 8px 18px rgba(0,166,81,.28);}
.btn.red{background:var(--red);box-shadow:0 8px 18px rgba(237,27,46,.25);}
.btn.sm{padding:8px 12px;font-size:12px;border-radius:10px;box-shadow:none;}

.field-label{font-size:10px;font-weight:800;color:var(--ink-soft);margin-bottom:5px;letter-spacing:.04em;text-transform:uppercase;}
.field{background:var(--card);border-radius:12px;box-shadow:var(--shadow);margin-bottom:12px;display:flex;overflow:hidden;}
.field .prefix{padding:12px 10px;font-size:12px;font-weight:800;color:var(--ink-soft);border-right:1px solid var(--line);white-space:nowrap;}
.field input,.field select,.field textarea{
  flex:1;border:none;padding:12px 13px;font-size:13px;color:var(--ink);background:none;outline:none;width:0;min-width:0;
}
.field textarea{resize:vertical;min-height:64px;}

.card{background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:14px;}
.tag{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:100px;font-size:10px;font-weight:800;letter-spacing:.02em;}
.tag.blue{background:var(--blue-soft);color:var(--blue);}
.tag.green{background:var(--green-soft);color:var(--green);}
.tag.red{background:var(--red-soft);color:var(--red);}
.tag.orange{background:var(--orange-soft);color:#B97400;}
.tag.purple{background:var(--purple-soft);color:var(--purple);}
.tag.grey{background:#EEF1F6;color:var(--ink-soft);}

.muted{color:var(--ink-soft);}
.faint{color:var(--ink-faint);}
.row{display:flex;align-items:center;gap:10px;}
.between{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.spacer{flex:1;}

/* ---------- toast ---------- */
#toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;padding:11px 18px;border-radius:12px;font-size:12.5px;font-weight:600;
  box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:.25s;z-index:9999;max-width:88vw;text-align:center;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#toast.err{background:var(--red);}
#toast.ok{background:var(--green);}

/* ---------- loading ---------- */
.spinner{
  width:18px;height:18px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.skeleton{background:linear-gradient(90deg,#EDF1F7 25%,#F6F8FC 50%,#EDF1F7 75%);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:10px;}
@keyframes sk{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* ---------- status colours shared by all panels ---------- */
.st-placed{background:var(--blue-soft);color:var(--blue);}
.st-accepted{background:var(--purple-soft);color:var(--purple);}
.st-preparing{background:var(--orange-soft);color:#B97400;}
.st-ready{background:var(--green-soft);color:var(--green);}
.st-assigned{background:var(--blue-soft);color:var(--blue-deep);}
.st-picked{background:var(--purple-soft);color:var(--purple);}
.st-delivered{background:var(--green-soft);color:var(--green);}
.st-cancelled{background:var(--red-soft);color:var(--red);}
.st-refunded{background:#EEF1F6;color:var(--ink-soft);}

/* ---------- desktop panel shell (admin + market) ---------- */
.shell{display:flex;min-height:100vh;}
.side{
  width:230px;flex-shrink:0;background:#0B1A2E;color:#fff;padding:16px 12px;
  display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.side .brand{display:flex;align-items:center;gap:9px;padding:6px 8px 16px;}
.side .brand img{width:36px;height:36px;object-fit:contain;border-radius:9px;background:#fff;padding:3px;}
.side .brand b{font-size:15px;font-family:'Baloo 2',sans-serif;letter-spacing:.02em;}
.side .brand span{display:block;font-size:9px;color:#7D93B2;font-weight:700;letter-spacing:.09em;}
.navlink{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  color:#AFC0D8;font-size:12.5px;font-weight:700;background:none;border:none;text-align:left;width:100%;
}
.navlink .ic{font-size:15px;width:20px;text-align:center;}
.navlink:hover{background:rgba(255,255,255,.06);color:#fff;}
.navlink.active{background:var(--blue);color:#fff;box-shadow:0 6px 14px rgba(30,127,224,.35);}
.navlink .count{margin-left:auto;background:var(--red);color:#fff;font-size:9.5px;padding:2px 6px;border-radius:100px;font-weight:800;}
.side .foot{margin-top:auto;padding:12px 10px 4px;font-size:9.5px;color:#5D7characters;line-height:1.6;}
.side .foot{color:#6C82A0;}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{
  background:var(--card);border-bottom:1px solid var(--line);padding:12px 22px;
  display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:20;
}
.topbar h1{font-size:17px;}
.topbar .sub{font-size:11px;color:var(--ink-soft);font-weight:600;}
.content{padding:20px 22px 40px;}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px;margin-bottom:18px;}
.stat{background:var(--card);border-radius:14px;padding:14px 15px;box-shadow:var(--shadow);}
.stat .lbl{font-size:9.5px;font-weight:800;color:var(--ink-faint);letter-spacing:.07em;text-transform:uppercase;margin-bottom:6px;}
.stat .val{font-size:24px;font-weight:800;font-family:'Baloo 2',sans-serif;line-height:1;}
.stat .sub{font-size:10.5px;color:var(--ink-soft);margin-top:5px;font-weight:600;}
.stat.accent{background:linear-gradient(135deg,var(--blue-deep),var(--blue));color:#fff;}
.stat.accent .lbl,.stat.accent .sub{color:rgba(255,255,255,.75);}

table.zt{width:100%;border-collapse:collapse;background:var(--card);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);}
table.zt th{
  text-align:left;font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-faint);
  padding:11px 13px;background:#F8FAFD;border-bottom:1px solid var(--line);white-space:nowrap;font-weight:800;
}
table.zt td{padding:11px 13px;font-size:12.5px;border-bottom:1px solid var(--line);vertical-align:middle;}
table.zt tr:last-child td{border-bottom:none;}
table.zt tbody tr:hover{background:#FAFCFF;}
.empty{text-align:center;padding:50px 20px;color:var(--ink-faint);font-size:13px;}
.empty .em{font-size:38px;display:block;margin-bottom:10px;}

.tabs{display:flex;gap:7px;margin-bottom:14px;flex-wrap:wrap;}
.tab{padding:8px 14px;border-radius:100px;font-size:11.5px;font-weight:800;background:var(--card);color:var(--ink-soft);border:none;box-shadow:var(--shadow);}
.tab.active{background:var(--ink);color:#fff;}

.modal-bg{position:fixed;inset:0;background:rgba(9,15,26,.55);display:flex;align-items:center;justify-content:center;padding:18px;z-index:500;backdrop-filter:blur(2px);}
.modal{background:var(--card);border-radius:18px;width:100%;max-width:520px;max-height:88vh;overflow-y:auto;box-shadow:var(--shadow-lg);}
.modal header{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--card);}
.modal header h3{font-size:16px;}
.modal .body{padding:16px 18px;}
.modal .foot{padding:14px 18px;border-top:1px solid var(--line);display:flex;gap:9px;justify-content:flex-end;position:sticky;bottom:0;background:var(--card);}
.x{width:30px;height:30px;border-radius:9px;background:var(--paper);border:none;font-size:15px;color:var(--ink-soft);}

@media(max-width:860px){
  .shell{flex-direction:column;}
  .side{width:100%;height:auto;position:static;flex-direction:row;overflow-x:auto;padding:10px;gap:6px;align-items:center;}
  .side .brand{padding:0 10px 0 4px;}
  .side .brand span{display:none;}
  .navlink{width:auto;white-space:nowrap;padding:9px 12px;}
  .side .foot{display:none;}
  .content{padding:14px;}
  .topbar{padding:11px 14px;}
  table.zt{display:block;overflow-x:auto;}
}

/* ---------- phone-shaped apps (customer + rider) ---------- */
.phone-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#DCE4F0;padding:0;}
.app{width:100%;max-width:430px;min-height:100vh;background:var(--paper);position:relative;display:flex;flex-direction:column;overflow:hidden;}
@media(min-width:520px){
  .phone-wrap{padding:22px 14px;}
  .app{min-height:min(860px,94vh);height:min(860px,94vh);border-radius:30px;box-shadow:0 30px 60px rgba(12,20,40,.32);}
}
.view{flex:1;display:none;flex-direction:column;min-height:0;}
.view.active{display:flex;animation:fade .22s ease;}
@keyframes fade{from{opacity:0;transform:translateX(12px);}to{opacity:1;transform:none;}}
.vbody{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.vbody::-webkit-scrollbar{width:0;}

.appbar{padding:14px 18px 8px;flex-shrink:0;}
.subhead{display:flex;align-items:center;gap:11px;padding:14px 16px 8px;flex-shrink:0;}
.subhead h2{font-size:16px;flex:1;}
.back-btn,.icon-btn{width:32px;height:32px;border-radius:10px;background:var(--card);display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:var(--shadow);border:none;flex-shrink:0;}

.bottomnav{display:flex;justify-content:space-around;align-items:center;padding:9px 6px 12px;background:var(--card);border-top:1px solid var(--line);flex-shrink:0;}
.navitem{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9px;font-weight:800;color:var(--ink-faint);background:none;border:none;position:relative;padding:2px 10px;}
.navitem.active{color:var(--blue);}
.navitem .ic{font-size:17px;}
.nav-badge{position:absolute;top:-2px;right:4px;background:var(--red);color:#fff;font-size:8px;font-weight:800;min-width:15px;height:15px;padding:0 3px;border-radius:100px;display:flex;align-items:center;justify-content:center;}