.menu-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:12px; }
/* Paksa 2 kolom di handphone */
@media (max-width: 576px){
  .menu-grid { grid-template-columns: repeat(2, 1fr); }
  .menu-card img { height:110px; }
}
.table-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:12px; }
/* Meja dengan order aktif: kuning */
.table-btn.has-order { background: #fff3cd; border-color: #ffeeba; }

/* Kartu menu bergambar */
.menu-card { border:1px solid #d0d7de; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,0.04); cursor:pointer; transition:transform .08s ease, box-shadow .12s ease; }
.menu-card:hover { transform:translateY(-1px); box-shadow:0 2px 6px rgba(0,0,0,0.08); }
.menu-card img { display:block; width:100%; height:120px; object-fit:cover; }
.menu-card-meta { padding:8px; }
.menu-card-title { font-size:14px; font-weight:600; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.menu-card-price { font-size:12px; color:#6c757d; margin-top:2px; }

/* Gaya lama tombol tetap tersedia untuk kompatibilitas */
.menu-btn { font-size:18px; padding:18px; border-radius:12px; border:1px solid #d0d7de; background:#f8f9fa; cursor:pointer; }
.menu-btn:hover { background:#eef1f5; }

/* Minimalist chips for tables: no borders, clear look */
.table-btn { font-size:16px; padding:10px 12px; border-radius:12px; border:none; background:transparent; cursor:pointer; display:inline-flex; align-items:center; gap:8px; color:#212529; box-shadow:none; }
.table-btn .chip-icon { font-size:18px; line-height:1; }
.table-btn .chip-label { font-weight:600; }
.table-btn .chip-sub { color:#6c757d; }
.table-btn:hover { background:rgba(0,0,0,0.03); }

/* Differentiate tables with active order vs empty */
.table-btn.has-order { background:#e6ffed; }
.table-btn:not(.has-order) { background:transparent; }

/* Selection state: subtle highlight without strong button color */
.table-btn.btn-primary, .table-btn.selected { background:rgba(13,110,253,0.08); outline:2px solid rgba(13,110,253,0.20); }

/* Vertical chip layout for cashier sections */
.table-btn.chip-v { flex-direction: column; justify-content: center; padding:12px; }
.table-btn.chip-v .chip-icon { font-size:22px; margin-bottom:4px; }
.table-btn.chip-v .chip-label, .table-btn.chip-v .chip-sub { text-align:center; display:block; }

/* Tabs kategori menu */
.menu-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }

/* Thermal receipt layout */
.receipt-thermal { max-width: 320px; margin: 0 auto; font-size: 12px; line-height: 1.25; }
.receipt-thermal .receipt-line { margin: 2px 0; }
.receipt-thermal .receipt-items { list-style: none; padding-left: 0; margin: 4px 0; }
.receipt-thermal .receipt-items li { margin: 2px 0; }

/* Emphasis for payment summary totals */
.payment-total { font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
@media (max-width: 576px){
  .payment-total { font-size: 1.8rem; }
}

/* Emphasis for order total in header */
.order-total { font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
@media (max-width: 576px){
  .order-total { font-size: 1.8rem; }
}
@media print {
  /* Hilangkan elemen non-struk saat print */
  .navbar, .footer, .page-header, .d-print-none { display: none !important; }

  /* Set ukuran halaman thermal roll dan margin nol agar tidak ada feed berlebih */
  @page { size: 80mm auto; margin: 0; }

  /* Pastikan body dan wrapper tidak menambah margin/padding saat print */
  body { margin: 0 !important; }
  .container-xl, .card, .card-body { margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; }

  /* Lebar kontainer struk mengikuti lebar roll 80mm */
  .receipt-thermal { width: 80mm; margin: 0 !important; overflow: hidden; }

  /* Tambahkan spacer 10mm di akhir konten sebagai batas feed kertas */
  .receipt-thermal::after { content: ""; display: block; height: 10mm; }
}

/* Modal sederhana untuk POS */
.pos-modal { position: fixed; inset: 0; z-index: 1050; display: block; }
.pos-modal.d-none { display: none; }
.pos-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.35); }
.pos-modal-dialog { position: relative; width: 100%; max-width: 520px; margin: 60px auto; background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); overflow: hidden; }
.pos-modal-header, .pos-modal-footer { padding: 12px 16px; background: #f8f9fa; }
.pos-modal-header { display:flex; align-items:center; justify-content: space-between; border-bottom: 1px solid #e9ecef; }
.pos-modal-body { padding: 16px; }
.pos-modal-footer { border-top: 1px solid #e9ecef; }
.btn-close { background: transparent; border: none; font-size: 20px; line-height: 1; cursor: pointer; }

/* Badge visibility tweaks for dashboard status */
.badge { font-weight: 600; letter-spacing: .2px; padding: .35rem .5rem; }
.badge.bg-success, .badge.bg-secondary, .badge.bg-danger { color: #fff !important; }
.badge.bg-warning { color: #212529 !important; }
.badge.rounded-pill { border-radius: 999px; }