/* High-End Haute Cuisine Design Tokens
   Palette: Pure White (#ffffff), Soft Blush Pink (#fdf0f3 / #fce6ec), Deep Midnight Navy (#14192e)
   Typography: Playfair Display (Serif) + Be Vietnam Pro (Sans)
*/
:root {
  --color-white: #ffffff;
  --color-offwhite: #faf7f8;
  --color-pink-soft: #fdf2f4;
  --color-pink-surface: #fce8ed;
  --color-pink-border: #f4d0d9;
  --color-pink-accent: #b8234a;
  
  --color-navy-dark: #12172b;
  --color-navy-surface: #181e36;
  --color-navy-border: #283052;
  --color-navy-muted: #5e688c;

  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
}

body {
  background-color: var(--color-offwhite);
  color: var(--color-navy-dark);
  font-family: var(--font-sans);
  overflow-x: hidden;
  margin: 0;
  padding-bottom: 85px; /* Room for bottom navigation bar */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-editorial {
  font-family: var(--font-serif);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: var(--color-offwhite);
}
::-webkit-scrollbar-thumb {
  background: var(--color-pink-border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-pink-accent);
}

/* Card & Surface Styling */
.luxury-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-pink-border);
  box-shadow: 0 4px 20px -2px rgba(20, 25, 46, 0.04);
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.luxury-card:hover {
  box-shadow: 0 10px 30px -4px rgba(20, 25, 46, 0.08);
  border-color: var(--color-pink-accent);
}

/* Buttons */
.btn-navy {
  background-color: var(--color-navy-dark);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-weight: 600;
  transition: all 0.2s ease;
  border: 1px solid var(--color-navy-dark);
}
.btn-navy:hover {
  background-color: var(--color-navy-surface);
  box-shadow: 0 4px 14px rgba(18, 23, 43, 0.2);
}

.btn-pink {
  background-color: var(--color-pink-soft);
  color: var(--color-pink-accent);
  font-family: var(--font-sans);
  font-weight: 600;
  border: 1px solid var(--color-pink-border);
  transition: all 0.2s ease;
}
.btn-pink:hover {
  background-color: var(--color-pink-surface);
  border-color: var(--color-pink-accent);
}

.btn-navy-outline {
  background-color: transparent;
  color: var(--color-navy-dark);
  border: 1px solid var(--color-navy-border);
  font-weight: 600;
  transition: all 0.2s ease;
}
.btn-navy-outline:hover {
  background-color: var(--color-navy-dark);
  color: var(--color-white);
}

/* Status Badges */
.badge-status {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: 9999px;
  display: inline-block;
  white-space: nowrap;
}

.badge-available {
  background-color: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}
.badge-occupied {
  background-color: #f1f5f9;
  color: var(--color-navy-dark);
  border: 1px solid #cbd5e1;
}
.badge-ordered {
  background-color: var(--color-pink-soft);
  color: var(--color-pink-accent);
  border: 1px solid var(--color-pink-border);
}
.badge-service {
  background-color: #fff1f2;
  color: #be123c;
  border: 1px solid #fecdd3;
  animation: pulse-soft 2s infinite;
}
.badge-paying {
  background-color: #faf5ff;
  color: #7e22ce;
  border: 1px solid #e9d5ff;
}
.badge-cleaning {
  background-color: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

@keyframes pulse-soft {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(190, 18, 60, 0.3);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(190, 18, 60, 0);
  }
}

/* Floor Plan Card */
.table-card {
  transition: all 0.2s ease;
  cursor: pointer;
}
.table-card:hover {
  transform: translateY(-2px);
}

/* Print Styles for K80 Receipt */
@media print {
  body * {
    visibility: hidden;
  }
  #thermal-print-area, #thermal-print-area * {
    visibility: visible;
  }
  #thermal-print-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 80mm;
    margin: 0;
    padding: 8px;
    background: #ffffff !important;
    color: #000000 !important;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    line-height: 1.4;
  }
  .no-print {
    display: none !important;
  }
}

/* Luxury Haute Cuisine Dialog & Toast Animations */
@keyframes vnsModalIn {
  0% {
    opacity: 0;
    transform: scale(0.94) translateY(8px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes vnsToastSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-16px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.vns-modal-anim {
  animation: vnsModalIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.vns-toast-anim {
  animation: vnsToastSlideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}