/* ================================================================
   RestoQ — Mobile-first Thai Restaurant Ordering System
================================================================ */
:root {
  --primary:       #e85d04;
  --primary-dk:    #c14a00;
  --primary-lt:    #fff3ed;
  --success:       #16a34a;
  --warning:       #d97706;
  --danger:        #dc2626;
  --cooking-color: #3b82f6;
  --ready-color:   #10b981;
  --pending-color: #f59e0b;
  --bg:            #f5f5f5;
  --surface:       #ffffff;
  --border:        #e5e7eb;
  --text:          #111827;
  --muted:         #6b7280;
  --radius:        12px;
  --shadow:        0 2px 8px rgba(0,0,0,.1);
  --shadow-lg:     0 4px 20px rgba(0,0,0,.15);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Sarabun','Prompt',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;}

/* ── TOPBAR ── */
.topbar{background:var(--primary);color:#fff;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:var(--shadow);}
.topbar h1{font-size:18px;font-weight:700;}
.topbar .sub{font-size:13px;opacity:.85;}
.topbar .right{display:flex;align-items:center;gap:10px;}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:8px;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;padding:10px 18px;transition:all .15s;text-decoration:none;}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-dk);}
.btn-success{background:var(--success);color:#fff;}
.btn-warning{background:var(--warning);color:#fff;}
.btn-danger{background:var(--danger);color:#fff;}
.btn-outline{background:transparent;color:var(--text);border:1.5px solid var(--border);}
.btn-sm{padding:6px 12px;font-size:13px;}
.btn-lg{padding:14px 24px;font-size:16px;}
.btn-block{width:100%;}
.btn:disabled{opacity:.45;cursor:not-allowed;}

/* ── BADGES ── */
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;}
.badge-pending{background:#fef3c7;color:#92400e;}
.badge-cooking{background:#dbeafe;color:#1e40af;}
.badge-ready{background:#d1fae5;color:#065f46;}
.badge-paid{background:#f3f4f6;color:#6b7280;}

/* ── CARDS ── */
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}

/* ── STATUS BORDERS ── */
.s-pending{border-left:4px solid var(--pending-color);}
.s-cooking{border-left:4px solid var(--cooking-color);}
.s-ready  {border-left:4px solid var(--ready-color);}

/* ── FORMS ── */
.form-group{margin-bottom:16px;}
.form-label{display:block;margin-bottom:6px;font-size:14px;font-weight:600;color:var(--muted);}
.form-control{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:8px;font-family:inherit;font-size:15px;transition:border-color .2s;background:#fff;}
.form-control:focus{outline:none;border-color:var(--primary);}
select.form-control{cursor:pointer;}

/* ── TOAST ── */
.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(16px);background:#111;color:#fff;padding:12px 20px;border-radius:24px;font-size:14px;z-index:9999;opacity:0;transition:all .3s;pointer-events:none;white-space:nowrap;max-width:90vw;text-align:center;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ── PIN PAD ── */
.pin-wrap{max-width:320px;margin:0 auto;padding:28px 20px;}
.pin-display{text-align:center;font-size:38px;letter-spacing:14px;padding:14px;background:var(--surface);border-radius:var(--radius);min-height:68px;color:var(--primary);font-weight:700;margin-bottom:20px;box-shadow:var(--shadow);}
.pin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.pin-btn{background:var(--surface);border:1.5px solid var(--border);border-radius:12px;padding:18px;font-size:22px;font-weight:700;cursor:pointer;transition:all .12s;box-shadow:var(--shadow);font-family:inherit;}
.pin-btn:active{transform:scale(.94);background:var(--primary-lt);}
.pin-btn.del{color:var(--danger);}

/* ── LOADING / EMPTY ── */
.loading{display:flex;align-items:center;justify-content:center;padding:48px;color:var(--muted);font-size:14px;gap:12px;}
.spinner{width:24px;height:24px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.empty{text-align:center;padding:56px 20px;color:var(--muted);}
.empty .icon{font-size:52px;margin-bottom:10px;}

/* ── MODAL (bottom sheet) ── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;}
.overlay.open{opacity:1;pointer-events:all;}
.modal{background:#fff;border-radius:20px 20px 0 0;width:100%;max-width:600px;max-height:92vh;overflow-y:auto;padding:24px;transform:translateY(100%);transition:transform .3s;}
.overlay.open .modal{transform:translateY(0);}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.modal-title{font-size:18px;font-weight:700;}
.modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:var(--muted);padding:4px;}

/* ── TABS ── */
.tabs{display:flex;gap:4px;padding:8px 12px;background:var(--surface);border-bottom:1px solid var(--border);overflow-x:auto;}
.tab{padding:8px 16px;border-radius:8px;border:none;background:none;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;color:var(--muted);transition:all .15s;}
.tab.active{background:var(--primary);color:#fff;}

/* ── MENU CUSTOMER PAGE ── */
.cat-scroll{display:flex;gap:8px;padding:12px 16px;overflow-x:auto;background:#fff;border-bottom:1px solid var(--border);}
.cat-btn{padding:8px 16px;border-radius:20px;border:1.5px solid var(--border);font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;background:#fff;font-family:inherit;transition:all .15s;}
.cat-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px;}
@media(min-width:480px){.menu-grid{grid-template-columns:repeat(3,1fr);}}
.menu-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);cursor:pointer;transition:all .15s;}
.menu-card:hover{box-shadow:var(--shadow-lg);}
.menu-card.sold-out{opacity:.5;pointer-events:none;}
.menu-thumb{width:100%;aspect-ratio:1;object-fit:cover;background:#f3f0eb;}
.menu-no-img{width:100%;aspect-ratio:1;background:linear-gradient(135deg,#fff3ed,#ffdbb8);display:flex;align-items:center;justify-content:center;font-size:40px;}
.menu-info{padding:10px 12px;}
.menu-name{font-size:14px;font-weight:700;line-height:1.3;}
.menu-desc{font-size:12px;color:var(--muted);margin-top:3px;}
.menu-price{font-size:15px;font-weight:700;color:var(--primary);margin-top:6px;}

/* ── CART FAB ── */
.cart-fab{position:fixed;bottom:20px;right:16px;z-index:150;background:var(--primary);color:#fff;border-radius:28px;padding:14px 20px;box-shadow:var(--shadow-lg);border:none;cursor:pointer;font-family:inherit;font-size:15px;font-weight:700;display:flex;align-items:center;gap:10px;transition:all .2s;}
.cart-fab.hidden{display:none;}
.cart-cnt{background:#fff;color:var(--primary);border-radius:12px;padding:2px 8px;font-size:13px;}

/* ── CART ITEMS ── */
.cart-item{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--border);}
.cart-item-name{flex:1;font-size:15px;font-weight:600;}
.qty-ctrl{display:flex;align-items:center;gap:8px;}
.qty-btn{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--primary);background:#fff;color:var(--primary);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.qty-btn:hover{background:var(--primary);color:#fff;}
.cart-sub{font-weight:700;color:var(--primary);min-width:60px;text-align:right;}

/* ── ORDER STATUS (customer) ── */
.order-status-section{padding:16px;}
.ord-card{background:#fff;border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);margin-bottom:10px;}
.ord-steps{display:flex;align-items:center;margin-top:12px;}
.step{flex:1;text-align:center;font-size:11px;color:var(--muted);}
.step-dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;margin:0 auto 4px;font-size:12px;}
.step-dot.done{background:var(--success);border-color:var(--success);color:#fff;}
.step-dot.active{background:var(--primary);border-color:var(--primary);color:#fff;}
.step-line{flex:0 0 20px;height:2px;background:var(--border);}
.step-line.done{background:var(--success);}

/* ── TABLE GRID (cashier) ── */
.table-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;padding:16px;}
.table-card{background:#fff;border-radius:12px;padding:16px 12px;text-align:center;cursor:pointer;box-shadow:var(--shadow);border:2px solid transparent;transition:all .15s;}
.table-card:hover{box-shadow:var(--shadow-lg);}
.table-card.empty{border-color:var(--border);color:var(--muted);}
.table-card.pending{border-color:var(--pending-color);background:#fffbf0;}
.table-card.cooking{border-color:var(--cooking-color);background:#eff6ff;}
.table-card.ready{border-color:var(--ready-color);background:#f0fdf4;}
.table-card .tname{font-size:17px;font-weight:700;}
.table-card .tstatus{font-size:12px;margin-top:4px;}
.table-card .ttotal{font-size:15px;font-weight:700;color:var(--primary);margin-top:6px;}

/* ── KITCHEN ORDER CARDS ── */
.ord-list{padding:16px;display:flex;flex-direction:column;gap:12px;}
.ord-card2{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.ord-card2-head{padding:12px 16px;display:flex;justify-content:space-between;align-items:center;}
.ord-card2-body{padding:0 16px 4px;}
.ord-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--bg);font-size:15px;}
.ord-row:last-child{border-bottom:none;}
.ord-actions{display:flex;gap:8px;padding:10px 16px 14px;}

/* ── ADMIN TABLE ── */
.data-table{width:100%;border-collapse:collapse;font-size:14px;}
.data-table th{background:var(--bg);padding:10px 12px;text-align:left;font-weight:600;border-bottom:2px solid var(--border);}
.data-table td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle;}
.data-table tr:hover td{background:#fafafa;}

/* ── UTILS ── */
.flex{display:flex;}.flex-between{display:flex;justify-content:space-between;align-items:center;}.gap-2{gap:8px;}.gap-3{gap:12px;}
.text-center{text-align:center;}.text-right{text-align:right;}.text-muted{color:var(--muted);}.text-sm{font-size:13px;}.font-bold{font-weight:700;}
.mt-2{margin-top:8px;}.mt-3{margin-top:12px;}.mt-4{margin-top:16px;}.mb-3{margin-bottom:12px;}.mb-4{margin-bottom:16px;}
.p-3{padding:12px;}.p-4{padding:16px;}
.price{font-weight:700;color:var(--primary);}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.w-full{width:100%;}

/* ── PRINT ── */
@media print{
  .topbar,.btn,.tabs,.cart-fab,.no-print{display:none!important;}
  .print-only{display:block!important;}
  body{background:#fff;}
  .card,.ord-card{box-shadow:none;border:1px solid #ccc;}
}