/* ============================================================
   DINE-IN SECTION
   ============================================================ */

.ds-stage-screen-dine {
  background: #0a0e22;
  aspect-ratio: unset !important;
  height: 580px !important;
  max-height: 580px !important;
  overflow: hidden;
}

/* ─── Floor plan ──────────────────────────── */
.dn-floor {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #0d1432, #0a0e22);
}
.dn-floor-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dn-floor-title { font-size: 13px; font-weight: 800; color: white; }
.dn-floor-clock { font-size: 11px; color: #8a92b8; font-weight: 700; }

.dn-floor-stage {
  position: relative;
  flex: 1; min-height: 0;
  margin: 12px 14px 6px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0 12px, transparent 12px 24px),
    #0a0e22;
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 12px;
}

.dn-floor-bar, .dn-floor-kitchen {
  position: absolute;
  font-size: 9px; font-weight: 800; color: rgba(255,255,255,0.35);
  letter-spacing: 0.2em;
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 4px 8px;
}
.dn-floor-bar {
  top: 4px; left: 50%; transform: translateX(-50%);
}
.dn-floor-kitchen {
  bottom: 4px; left: 50%; transform: translateX(-50%);
}

/* Tables */
.dn-table {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 6px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  cursor: default;
  transition: transform 0.15s, box-shadow 0.15s;
}
.dn-tb-free {
  background: rgba(16,185,129,0.10);
  border-color: rgba(16,185,129,0.3);
  color: #6ee7b7;
}
.dn-tb-busy {
  background: rgba(59,109,255,0.10);
  border-color: rgba(59,109,255,0.3);
  color: #93c5fd;
}
.dn-tb-ordering {
  background: rgba(251,191,36,0.10);
  border-color: rgba(251,191,36,0.4);
  color: #fbbf24;
}
.dn-tb-bill {
  background: rgba(244,114,182,0.10);
  border-color: rgba(244,114,182,0.4);
  color: #f9a8d4;
}
.dn-tb-target {
  cursor: pointer;
  border-color: #10b981;
  background: rgba(16,185,129,0.18);
  box-shadow: 0 0 0 0 rgba(16,185,129,0.5);
  animation: dnTargetPulse 1.6s ease-in-out infinite;
}
.dn-tb-target:hover {
  transform: scale(1.05);
}
@keyframes dnTargetPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.6); }
  50% { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
}

.dn-table-id { font-size: 12px; font-weight: 800; }
.dn-table-seats {
  display: flex; gap: 3px;
}
.dn-seat {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}
.dn-table-since {
  font-size: 8px; opacity: 0.7; font-weight: 600;
}
.dn-table-cta {
  position: absolute; top: -28px; left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: #10b981;
  color: white;
  font-size: 9px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 10px rgba(16,185,129,0.4);
}

.dn-legend {
  display: flex; justify-content: center; gap: 14px;
  padding: 8px 14px 12px;
  font-size: 10px; color: #8a92b8; font-weight: 600;
}
.dn-legend-item { display: flex; align-items: center; gap: 5px; }
.dn-dot { width: 8px; height: 8px; border-radius: 50%; }
.dn-dot-free { background: #10b981; }
.dn-dot-busy { background: #3b82f6; }
.dn-dot-ordering { background: #fbbf24; }
.dn-dot-bill { background: #f472b6; }

/* ─── Waiter PDA ──────────────────────────── */
.dn-pda {
  width: 100%; height: 100%;
  display: grid; grid-template-rows: auto auto 1fr auto;
  background: #0d1432;
}
.dn-pda-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: white;
}
.dn-pda-back {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  font-size: 14px; font-weight: 800;
}
.dn-pda-title { flex: 1; }
.dn-pda-name { font-size: 13px; font-weight: 800; }
.dn-pda-meta { font-size: 10px; opacity: 0.85; }
.dn-pda-time { font-size: 11px; font-weight: 700; opacity: 0.85; }

.dn-pda-cats {
  display: flex; gap: 0;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  overflow-x: auto;
}
.dn-pda-cat {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 10px;
  margin-right: 4px;
  background: transparent;
  border: 1px solid transparent;
  color: #8a92b8;
  font-size: 11px; font-weight: 700;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.dn-pda-cat-on {
  background: rgba(59,109,255,0.15);
  border-color: rgba(59,109,255,0.4);
  color: #93c5fd;
}
.dn-pda-cat-e { font-size: 13px; }

.dn-pda-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 12px;
  overflow-y: auto;
  align-content: start;
}
.dn-pda-item {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.1s, background 0.1s;
}
.dn-pda-item:hover {
  background: rgba(59,109,255,0.12);
  border-color: rgba(59,109,255,0.3);
  transform: translateY(-1px);
}
.dn-pda-item-emoji { font-size: 20px; margin-bottom: 4px; }
.dn-pda-item-name { font-size: 10px; font-weight: 700; color: white; text-align: center; line-height: 1.2; }
.dn-pda-item-price { font-size: 11px; font-weight: 800; color: #6ee7b7; margin-top: 4px; }

.dn-pda-cart {
  background: #0a0e22;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 8px;
  max-height: 180px;
}
.dn-pda-cart-head {
  display: flex; justify-content: space-between;
  font-size: 10px; font-weight: 700; color: #8a92b8;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.dn-pda-cart-tot { color: #6ee7b7; font-size: 13px; font-weight: 800; }
.dn-pda-cart-list {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
}
.dn-pda-cart-empty {
  padding: 10px;
  font-size: 11px; color: #4a5278;
  text-align: center;
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 6px;
}
.dn-pda-cart-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  font-size: 11px;
}
.dn-pda-cart-qty { font-weight: 800; color: white; min-width: 20px; }
.dn-pda-cart-name { flex: 1; color: rgba(255,255,255,0.85); }
.dn-pda-cart-price { font-weight: 700; color: white; }
.dn-pda-cart-x {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.3);
  color: #fca5a5;
  border-radius: 50%;
  font-size: 11px; font-weight: 800;
  cursor: pointer;
}
.dn-pda-send {
  background: linear-gradient(135deg, #10b981, #059669);
  border: none; color: white;
  padding: 11px;
  border-radius: 10px;
  font-size: 12px; font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(16,185,129,0.35);
  letter-spacing: 0.04em;
}
.dn-pda-send:disabled {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.3);
  cursor: not-allowed;
  box-shadow: none;
}

/* ─── Printing ticket ──────────────────────── */
.dn-print {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #0a0e22, #131836);
  padding: 24px;
}
.dn-print-printer {
  width: 240px; height: 30px;
  background: #2a2a35;
  border-radius: 8px 8px 2px 2px;
  border: 1px solid rgba(255,255,255,0.08);
  position: relative;
  margin-bottom: -2px;
  display: flex; align-items: center; padding: 0 14px;
}
.dn-print-led {
  width: 6px; height: 6px; border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: dnLed 1s ease-in-out infinite;
}
@keyframes dnLed { 50% { opacity: 0.3; } }
.dn-print-paper {
  background: white;
  color: #0d1330;
  width: 240px;
  padding: 14px 16px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  animation: dnPrintOut 1.5s ease-out;
  transform-origin: top;
}
@keyframes dnPrintOut {
  0% { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}
.dn-print-head {
  text-align: center;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.1em;
  padding-bottom: 8px;
  border-bottom: 1.5px dashed rgba(0,0,0,0.25);
  margin-bottom: 8px;
}
.dn-print-meta { display: flex; justify-content: space-between; font-size: 10px; padding: 1px 0; }
.dn-print-meta b { font-weight: 800; }
.dn-print-line {
  border-bottom: 1.5px dashed rgba(0,0,0,0.25);
  margin: 8px 0;
}
.dn-print-row { padding: 2px 0; }
.dn-print-foot {
  text-align: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1.5px dashed rgba(0,0,0,0.25);
  font-size: 10px;
  font-weight: 700;
}

/* ─── KDS Screen ──────────────────────────── */
.dn-kds {
  width: 100%; height: 100%;
  background: #0a0e22;
  display: grid; grid-template-rows: auto 1fr auto;
}
.dn-kds-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: #131836;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dn-kds-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 800; color: white;
  letter-spacing: 0.05em;
}
.dn-kds-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #10b981;
  animation: dnKdsPulse 1.2s ease-in-out infinite;
}
@keyframes dnKdsPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16,185,129,0.6); }
  50% { opacity: 0.5; box-shadow: 0 0 0 6px rgba(16,185,129,0); }
}
.dn-kds-stats { font-size: 10px; color: #8a92b8; font-weight: 700; }
.dn-kds-sep { margin: 0 5px; color: #4a5278; }

.dn-kds-tickets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 14px;
  align-content: start;
  overflow-y: auto;
}
.dn-kds-ticket {
  background: #131836;
  border: 1.5px solid rgba(16,185,129,0.4);
  border-radius: 10px;
  overflow: hidden;
  animation: dnKdsArrive 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes dnKdsArrive {
  0% { transform: translateY(-12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.dn-kds-ticket-ghost {
  border-color: rgba(255,255,255,0.08);
  opacity: 0.55;
}
.dn-kds-tk-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: rgba(16,185,129,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dn-kds-ticket-ghost .dn-kds-tk-head {
  background: rgba(255,255,255,0.03);
}
.dn-kds-tk-table {
  width: 38px; height: 38px;
  border-radius: 8px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  font-size: 14px; font-weight: 800;
  display: grid; place-items: center;
}
.dn-kds-tk-table-ghost {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.5);
}
.dn-kds-tk-info { flex: 1; }
.dn-kds-tk-no { font-size: 12px; font-weight: 800; color: white; }
.dn-kds-tk-meta { font-size: 9px; color: #8a92b8; }
.dn-kds-tk-timer {
  font-size: 14px; font-weight: 800; color: #6ee7b7;
  font-variant-numeric: tabular-nums;
}
.dn-kds-tk-timer-warn { color: #fbbf24; }

.dn-kds-tk-body {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px;
}
.dn-kds-tk-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  font-size: 11px;
}
.dn-kds-tk-row-done {
  background: rgba(16,185,129,0.08);
  opacity: 0.6;
  text-decoration: line-through;
}
.dn-kds-tk-qty { font-weight: 800; color: white; min-width: 20px; }
.dn-kds-tk-name { flex: 1; color: rgba(255,255,255,0.9); }
.dn-kds-tk-stat {
  font-size: 8px; padding: 2px 5px; border-radius: 999px;
  font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.dn-kds-tk-stat-grill { background: rgba(239,68,68,0.18); color: #fca5a5; }
.dn-kds-tk-stat-cold { background: rgba(59,130,246,0.18); color: #93c5fd; }
.dn-kds-tk-ready {
  background: linear-gradient(135deg, #10b981, #059669);
  border: none; color: white;
  padding: 4px 8px; border-radius: 5px;
  font-size: 9px; font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(16,185,129,0.3);
}
.dn-kds-tk-done-stamp {
  font-size: 14px; color: #10b981; font-weight: 800;
}

.dn-kds-served {
  padding: 10px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  text-align: center;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.05em;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  animation: dnServed 0.4s ease-out;
}
@keyframes dnServed {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.dn-kds-served-icon { font-size: 16px; }

/* ─── Served / Open Bill overlay ──────────── */
.dn-served {
  width: 100%; height: 100%;
  position: relative;
}
.dn-served-overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(10,14,34,0.7);
  backdrop-filter: blur(4px);
}
.dn-served-card {
  background: #131836;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 24px 28px;
  text-align: center;
  width: 320px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.dn-served-icon {
  font-size: 38px;
  margin-bottom: 10px;
  animation: dnBounce 1.6s ease-in-out infinite;
}
@keyframes dnBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.dn-served-title { font-size: 15px; font-weight: 800; color: white; margin-bottom: 4px; }
.dn-served-sub { font-size: 11px; color: #8a92b8; margin-bottom: 16px; }
.dn-served-bill {
  background: linear-gradient(135deg, #f472b6, #be185d);
  border: none; color: white;
  padding: 10px 24px; border-radius: 999px;
  font-size: 12px; font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(244,114,182,0.35);
}

/* ─── Waiter walking animation ──────────────── */
/* Path: kitchen (50%, 92%) → T8 (~61%, 54%) → back to kitchen */
.dn-waiter {
  position: absolute;
  z-index: 10;
  display: flex; align-items: center; gap: 4px;
  font-size: 26px;
  left: 50%; top: 92%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
  transition:
    left 1.4s cubic-bezier(0.4, 0, 0.6, 1),
    top 1.4s cubic-bezier(0.4, 0, 0.6, 1),
    opacity 0.4s ease;
  pointer-events: none;
}
.dn-waiter-walking { left: 61%; top: 54%; }
.dn-waiter-arrived { left: 61%; top: 54%; }
.dn-waiter-returning { left: 50%; top: 92%; opacity: 0.4; }

.dn-waiter-person {
  display: inline-block;
  animation: dnWaiterStep 0.5s ease-in-out infinite;
}
.dn-waiter-plate {
  display: inline-block;
  animation: dnPlateBob 0.7s ease-in-out infinite;
}
@keyframes dnWaiterStep {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-2px) rotate(2deg); }
}
@keyframes dnPlateBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.dn-waiter-msg {
  position: absolute;
  z-index: 11;
  left: 61%; top: 46%;
  transform: translate(-50%, -50%);
  background: rgba(16, 185, 129, 0.95);
  color: white;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(16, 185, 129, 0.4);
  pointer-events: none;
  animation: dnServingMsg 0.3s ease-out;
}
@keyframes dnServingMsg {
  from { opacity: 0; transform: translate(-50%, -30%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* ─── Bill ─────────────────────────────────── */
.dn-bill {
  width: 100%; height: 100%;
  display: grid; grid-template-rows: auto 1fr auto auto;
  background: #0d1432;
}
.dn-bill-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #f472b6, #be185d);
  color: white;
}
.dn-bill-h-l { display: flex; align-items: center; gap: 12px; flex: 1; }
.dn-bill-table {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255,255,255,0.18);
  font-size: 14px; font-weight: 800;
  display: grid; place-items: center;
}
.dn-bill-title { font-size: 14px; font-weight: 800; }
.dn-bill-sub { font-size: 10px; opacity: 0.85; }
.dn-bill-amount { font-size: 22px; font-weight: 800; }

.dn-bill-list {
  padding: 12px 18px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
}
.dn-bill-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  font-size: 12px;
}
.dn-bill-qty { font-weight: 800; color: white; min-width: 24px; }
.dn-bill-name { flex: 1; color: rgba(255,255,255,0.85); }
.dn-bill-price { font-weight: 700; color: white; }

.dn-bill-split {
  padding: 12px 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.dn-bill-split-label {
  font-size: 10px; font-weight: 700; color: #8a92b8;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 6px;
}
.dn-bill-split-opts { display: flex; gap: 6px; }
.dn-bill-split-opt {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  padding: 8px;
  border-radius: 8px;
  font-size: 11px; font-weight: 700;
  cursor: pointer;
}
.dn-bill-split-opt-on {
  background: rgba(244,114,182,0.18);
  border-color: rgba(244,114,182,0.4);
  color: #f9a8d4;
}
.dn-bill-split-each {
  margin-top: 8px;
  font-size: 14px; font-weight: 800;
  color: #f9a8d4;
}
.dn-bill-split-each span {
  font-size: 10px; color: #8a92b8; font-weight: 600; margin-left: 4px;
}

.dn-bill-pay {
  margin: 0 18px 16px;
  background: linear-gradient(135deg, #10b981, #059669);
  border: none; color: white;
  padding: 13px;
  border-radius: 12px;
  font-size: 13px; font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(16,185,129,0.35);
  letter-spacing: 0.04em;
}

/* ─── Done ────────────────────────────────── */
.dn-done {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 30px;
  background: linear-gradient(180deg, #0a0e22, #131836);
}
.dn-done-burst {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  font-size: 40px; font-weight: 800;
  display: grid; place-items: center;
  margin-bottom: 16px;
  box-shadow: 0 0 0 12px rgba(16,185,129,0.18), 0 12px 30px rgba(16,185,129,0.4);
  animation: dnBurst 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes dnBurst {
  0% { transform: scale(0); }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.dn-done-title { font-size: 20px; font-weight: 800; color: white; margin-bottom: 4px; }
.dn-done-sub { font-size: 12px; color: #8a92b8; margin-bottom: 18px; }
.dn-done-stamps { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.dn-done-stamp {
  background: rgba(16,185,129,0.10);
  border: 1px solid rgba(16,185,129,0.25);
  color: #6ee7b7;
  font-size: 11px; font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}