:root {
  --brand: #f97316;
  --brand-dark: #c2410c;
  --mint: #16a34a;
  --sun: #facc15;
  --danger: #ef4444;
  --blue: #2563eb;
  --ink: #1f2937;
  --soft: #fff7ed;
}
body { background: #f6f8fb; color: var(--ink); }
.staff-app { font-size: 14px; }
.staff-main { padding-inline: 20px; }
.staff-main .row > *, .staff-main .d-flex > * { min-width: 0; }
.staff-main h3 { font-size: 24px; }
.staff-main h5 { font-size: 18px; }
.staff-main .table { vertical-align: middle; }
.staff-main .table th { white-space: nowrap; font-size: 13px; color: #526072; }
.staff-main .table td { overflow-wrap: anywhere; }
.staff-main .table-responsive { overscroll-behavior-x: contain; }
.staff-main .form-control, .staff-main .form-select { min-height: 40px; }
.staff-app .pos-nav { padding-block: 8px; }
.software-brand-logo { object-fit: contain; background: #fff; border-radius: 6px; flex-shrink: 0; }
.staff-app .pos-nav > .container-fluid { flex-wrap: wrap; gap: 8px 0; padding-inline: 20px; }
.staff-app .pos-nav .navbar-collapse { flex-basis: 100%; }
.staff-app .pos-nav .navbar-nav { gap: 4px; }
.staff-app .pos-nav .nav-link { padding: 8px 12px; color: #fff; border-radius: 6px; white-space: nowrap; }
.staff-app .pos-nav .nav-link:hover { background: #ffffff1a; }
.staff-app .pos-nav .nav-link.active { background: #fff; color: #9f1239; font-weight: 700; }
.staff-account { display: flex; align-items: center; gap: 12px; }
.staff-account form { margin: 0; flex-shrink: 0; }
.staff-user { color: #fff; font-weight: 600; max-width: 240px; overflow-wrap: anywhere; line-height: 1.25; }
.staff-user small { display: block; font-size: 11px; font-weight: 400; opacity: .9; }
.staff-main .dashboard-hero { border-radius: 0; box-shadow: none; }
.staff-main .dashboard-stat strong { overflow-wrap: anywhere; }
.staff-main .dash-running { color: #422006; }
.staff-main .dashboard-stat::after { display: none; }
.pos-screen .order-type { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); }
.pos-screen .touch-btn { font-size: 13px; padding-inline: 8px; white-space: normal; }
.pos-screen .menu-card { height: 100%; overflow-wrap: anywhere; }
.pos-screen .table-tile { width: 100%; }
.pos-screen #orderMeta, .pos-screen #orderItems strong { overflow-wrap: anywhere; }
.pos-screen #orderItems .btn { flex-shrink: 0; align-self: flex-start; }
.pos-screen .qty-control { flex: 0 0 44px; min-height: 32px; }
.pos-screen #grandTotal { white-space: nowrap; }
@media (min-width: 992px) {
  .pos-checkout { align-self: flex-start; position: sticky; top: 78px; }
  #currentOrderPanel { max-height: calc(100dvh - 176px); overflow-y: auto; overscroll-behavior: contain; }
  .pos-screen .order-list { max-height: 26dvh; min-height: 80px; }
}
@media (min-width: 1200px) {
  .pos-checkout { top: 122px; }
  #currentOrderPanel { max-height: calc(100dvh - 220px); }
  .pos-screen .order-type { grid-template-columns: repeat(6,minmax(0,1fr)); }
}
@media (max-width: 1199px) {
  .staff-app .pos-nav .navbar-collapse { max-height: calc(100dvh - 84px); overflow-y: auto; }
  .staff-app .pos-nav .navbar-nav { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding-block: 8px; }
}
@media (max-width: 767px) {
  .staff-main { padding-inline: 12px; }
  .staff-app .pos-nav > .container-fluid { padding-inline: 12px; }
  .staff-app .navbar-brand { font-size: 17px; }
  .staff-account { gap: 6px; }
  .staff-user { display: none; }
  .staff-account .btn { font-size: 12px; padding: 7px 8px; }
  .staff-app .navbar-toggler { padding: 5px; font-size: 17px; }
  .staff-app .pos-nav .navbar-nav { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .staff-app .pos-nav .nav-link { padding: 10px 8px; font-size: 13px; }
  .staff-main .dashboard-hero { flex-direction: column; align-items: flex-start; padding: 18px; }
  .staff-main .dashboard-hero h3 { font-size: 22px; }
  .staff-main .dashboard-stat { min-height: 114px; padding: 14px; }
  .staff-main .dashboard-stat strong { font-size: 26px; }
  .staff-main .dashboard-stat-label { font-size: 13px; }
  .staff-main .dashboard-stat span { font-size: 12px; }
  .pos-screen .order-list { max-height: 360px; }
  .staff-main form.row { margin-inline: 0; }
  .modal-dialog { margin: 10px; }
  .modal-content { max-height: calc(100dvh - 20px); }
  .modal-body { overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .staff-app *, .staff-app *::before, .staff-app *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 379px) {
  .staff-app .software-brand-logo { width: 22px; height: 22px; }
  .staff-app .navbar-brand { font-size: 14px; margin-right: 4px; }
  .staff-account { gap: 4px; }
  .staff-account .btn { font-size: 11px; padding-inline: 6px; }
  .staff-main .dashboard-stat strong { font-size: 22px; }
}
.pos-nav { background: linear-gradient(90deg, #f97316, #db2777); box-shadow: 0 6px 20px rgba(219, 39, 119, .18); }
.page-card, .pos-panel { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 8px 22px rgba(15, 23, 42, .05); }
.stat-card { border-radius: 8px; color: #fff; padding: 18px; min-height: 110px; }
.stat-card strong { font-size: 28px; display: block; }
.dashboard-hero { border-radius: 8px; padding: 22px; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: linear-gradient(120deg, #f97316, #db2777 52%, #2563eb); box-shadow: 0 18px 40px rgba(219,39,119,.18); }
.dashboard-stat { border-radius: 8px; min-height: 126px; padding: 18px; color: #fff; position: relative; overflow: hidden; animation: dashboardRise .45s ease both; }
.dashboard-stat::after { content: ""; position: absolute; inset: auto -24px -42px auto; width: 110px; height: 110px; border-radius: 50%; background: rgba(255,255,255,.18); }
.dashboard-stat-label { font-weight: 800; opacity: .86; }
.dashboard-stat strong { display: block; font-size: 30px; line-height: 1.15; margin: 8px 0; }
.dashboard-stat span { opacity: .82; font-size: 13px; }
.dash-sales { background: linear-gradient(135deg, #f97316, #dc2626); }
.dash-running { background: linear-gradient(135deg, #facc15, #f97316); }
.dash-bills { background: linear-gradient(135deg, #2563eb, #06b6d4); }
.dash-cash { background: linear-gradient(135deg, #16a34a, #0f766e); }
.dash-digital { background: linear-gradient(135deg, #7c3aed, #db2777); }
.dash-comp { background: linear-gradient(135deg, #475569, #111827); }
@keyframes dashboardRise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.bg-orange { background: #f97316; }
.bg-pink { background: #db2777; }
.bg-green { background: #16a34a; }
.bg-blue { background: #2563eb; }
.bg-slate { background: #475569; }
.touch-btn { min-height: 48px; font-weight: 700; border-radius: 8px; }
.order-type .btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.table-tile { border: 0; border-radius: 8px; color: #111827; min-height: 74px; font-weight: 800; position: relative; }
.table-tile small { display: block; font-weight: 600; }
.table-available { background: #bbf7d0; }
.table-reserved { background: #fde68a; }
.table-running { background: #fecaca; }
.table-completed { background: #bfdbfe; }
.table-tile.active { outline: 4px solid #111827; }
.menu-card { border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; padding: 12px; min-height: 118px; cursor: pointer; transition: .15s ease; }
.menu-card:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: 0 10px 20px rgba(249, 115, 22, .14); }
.menu-card .price { color: var(--brand-dark); font-size: 18px; font-weight: 800; }
.menu-card.item-pop { animation: itemPop .34s ease both; }
.pos-panel.order-added { animation: orderPanelGlow .85s ease; }
.order-item-new { animation: orderItemSlide .55s ease both; border-color: #22c55e !important; background: #f0fdf4; }
.add-success-burst { position: fixed; z-index: 3000; width: 10px; height: 10px; border-radius: 999px; pointer-events: none; background: #f97316; box-shadow: 0 0 0 6px rgba(249,115,22,.14); animation: burstDot .7s ease forwards; }
@keyframes itemPop {
  0% { transform: scale(1); }
  45% { transform: scale(.96); }
  100% { transform: scale(1.03); box-shadow: 0 16px 28px rgba(34,197,94,.2); border-color: #22c55e; }
}
@keyframes orderPanelGlow {
  0% { box-shadow: 0 8px 22px rgba(15, 23, 42, .05); }
  35% { box-shadow: 0 0 0 5px rgba(34,197,94,.18), 0 18px 34px rgba(34,197,94,.16); }
  100% { box-shadow: 0 8px 22px rgba(15, 23, 42, .05); }
}
@keyframes orderItemSlide {
  from { opacity: 0; transform: translateX(22px) scale(.98); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes burstDot {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--burst-x), var(--burst-y)) scale(.2); }
}
.order-list { max-height: 42vh; overflow: auto; }
.qty-control { width: 44px; text-align: center; }
.badge-soft { background: var(--soft); color: var(--brand-dark); }
.qr-bell-alert { animation: qrBellPulse .75s ease-in-out 4; }
@keyframes qrBellPulse {
  0%, 100% { transform: scale(1); box-shadow: none; }
  35% { transform: scale(1.08); box-shadow: 0 0 0 .35rem rgba(239, 68, 68, .18); }
}
.qr-menu-body { background: linear-gradient(135deg, #fff7ed 0%, #eef2ff 48%, #ecfeff 100%); }
.qr-hero { background: linear-gradient(135deg, #f97316, #db2777); color: #fff; border-radius: 8px; }
.qr-item-card { border: 0; border-radius: 8px; background: #fff; min-height: 176px; box-shadow: 0 12px 28px rgba(15,23,42,.08); overflow: hidden; }
.qr-item-card::before { content: ""; display: block; height: 6px; background: linear-gradient(90deg, #f97316, #22c55e, #2563eb); }
.qr-stepper { display: grid; grid-template-columns: 42px 1fr 42px; max-width: 140px; }
.qr-stepper .btn { border-radius: 8px; font-weight: 900; }
.qr-stepper input { text-align: center; font-weight: 800; }
.qr-status-pill { border-radius: 999px; padding: 6px 12px; display: inline-flex; font-weight: 800; }
.print-page { max-width: 320px; margin: 0 auto; background: #fff; color: #000; font-family: Arial, sans-serif; }
.print-page table { width: 100%; font-size: 12px; }
.print-page hr { border-top: 1px dashed #000; opacity: 1; }
.table-qr-code { width: 252px; max-width: 100%; min-height: 252px; padding: 16px; margin: 12px auto; background: #fff; }
.table-qr-code img, .table-qr-code canvas { width: 220px; height: auto; max-width: 100%; image-rendering: pixelated; }
@media print {
  body { background: #fff; }
  .no-print { display: none !important; }
  .print-page { width: 80mm; margin: 0; box-shadow: none; }
  .staff-app .pos-nav { display: none !important; }
  .table-qr-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
  .table-qr-grid > div { width: auto; break-inside: avoid; }
  .table-qr-card { box-shadow: none; break-inside: avoid; }
}
@media (max-width: 991px) {
  .order-list { max-height: 320px; }
}