/* ===== BASE ===== */
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* Brand-tinted text selection */
::selection { background: rgba(233, 120, 15, 0.18); color: #023E84; }

/* ===== ACCESSIBLE FOCUS ===== */
/* Keyboard users get a visible accent ring; mouse users don't (no :focus-visible on click). */
a, button, input, select, textarea, [tabindex], summary, [role="button"] { outline: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid #E9780F;
  outline-offset: 2px;
  border-radius: 6px;
}
/* On the dark sidebar, ring the item in white for contrast against #023E84. */
#sidebar a:focus-visible,
#sidebar button:focus-visible { outline-color: #ffffff; }

/* ===== REDUCED MOTION ===== */
/* Honor the OS "reduce motion" setting — kill the decorative animations/transitions. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ===== SIDEBAR ===== */
#sidebar { transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); }
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 40; }
.sidebar-overlay.active { display: block; }

/* ===== TOAST ===== */
.toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999;
  animation: slideUp 0.3s ease forwards;
  min-width: 280px; max-width: 400px;
}
@keyframes slideUp {
  from { transform: translateY(1.5rem); opacity: 0; }
  to   { transform: translateY(0);      opacity: 1; }
}
.toast-exit { animation: slideDown 0.3s ease forwards; }
@keyframes slideDown {
  from { transform: translateY(0);      opacity: 1; }
  to   { transform: translateY(1.5rem); opacity: 0; }
}

/* ===== PAYMENT SUCCESS CHECKMARK ===== */
.checkmark-circle {
  animation: scaleIn 0.5s cubic-bezier(0.175,0.885,0.32,1.275) forwards;
}
@keyframes scaleIn {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.checkmark-path {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: drawCheck 0.4s 0.3s ease forwards;
}
@keyframes drawCheck {
  to { stroke-dashoffset: 0; }
}

/* ===== SEAT GRID ===== */
.seat-cell { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.seat-cell:not(.occupied):hover { transform: scale(1.12); box-shadow: 0 4px 12px rgba(233,120,15,0.25); }
.seat-cell.selected { animation: selectedPulse 0.25s ease; }
@keyframes selectedPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ===== FLOOR PLAN ===== */
#floormap-container { transition: transform 0.2s ease; transform-origin: top left; }
.floor-seat { transition: transform 0.15s ease, opacity 0.15s ease; cursor: pointer; }
.floor-seat:hover { transform: scale(1.3); z-index: 10; position: relative; }

/* ===== MODAL ===== */
.modal-backdrop { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal-content {
  animation: modalIn 0.25s cubic-bezier(0.175,0.885,0.32,1.275) forwards;
}
@keyframes modalIn {
  from { transform: scale(0.95) translateY(10px); opacity: 0; }
  to   { transform: scale(1)    translateY(0);    opacity: 1; }
}

/* ===== TOGGLE SWITCH ===== */
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: #cbd5e1; border-radius: 24px;
  transition: background 0.2s ease;
}
.toggle-slider::before {
  content: ''; position: absolute;
  height: 18px; width: 18px; left: 3px; bottom: 3px;
  background: white; border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .toggle-slider { background: #E9780F; }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

/* ===== PRICING CARD ===== */
.pricing-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.pricing-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(233,120,15,0.12); }

/* ===== STEP INDICATOR ===== */
.step-connector { flex: 1; height: 2px; background: #e2e8f0; margin: 0 8px; margin-top: 16px; }
.step-connector.completed { background: #E9780F; }

/* ===== CALENDAR ===== */
.calendar-day {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.875rem; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.calendar-day:hover:not(.disabled):not(.selected) { background: #fff4e8; color: #E9780F; }
.calendar-day.today { font-weight: 700; color: #E9780F; }
.calendar-day.selected { background: #E9780F; color: white; font-weight: 600; }
.calendar-day.disabled { color: #cbd5e1; cursor: not-allowed; }
.calendar-day.has-booking { position: relative; }
.calendar-day.has-booking::after {
  content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: #E9780F;
}

/* ===== QR CODE ===== */
.qr-placeholder { image-rendering: pixelated; border: 8px solid white; border-radius: 4px; }

/* ===== PRINT STYLES ===== */
@media print {
  .no-print { display: none !important; }
  #sidebar-root { display: none !important; }
  .main-content { margin-left: 0 !important; }
  body { background: white !important; }
  .invoice-print-area { box-shadow: none !important; }
}

/* ===== TABS ===== */
.tab-btn { transition: color 0.15s ease, border-color 0.15s ease; }
.tab-btn.active { color: #E9780F; border-bottom-color: #E9780F; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ===== PROGRESS BAR ===== */
.progress-fill { transition: width 0.6s cubic-bezier(0.4,0,0.2,1); }

/* ===== NAV ITEM ===== */
.nav-item { transition: background 0.15s ease, color 0.15s ease; }

/* ===== TABLE ROW ===== */
tbody tr { transition: background 0.1s ease; }

/* ===== CARD HOVER ===== */
.kpi-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }

/* ===== SEAT POPUP ===== */
#seat-popup {
  transition: opacity 0.15s ease, transform 0.15s ease;
  transform-origin: top left;
}
#seat-popup.hidden { opacity: 0; pointer-events: none; }

/* ===== NOTIFICATION DOT ===== */
.notif-dot { animation: pulse 2s infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.7; transform: scale(1.1); }
}

/* ===== GRADIENT TEXT ===== */
.gradient-text {
  background: linear-gradient(135deg, #023E84, #E9780F);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== AVATAR INITIALS ===== */
.avatar-initials {
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; line-height: 1; user-select: none;
  /* letter-spacing + a matching text-indent keeps 2-letter initials optically centred
     (letter-spacing adds a trailing gap after the last glyph; the indent compensates). */
  letter-spacing: 0.05em; text-indent: 0.05em;
}

/* ===== RESPONSIVE UTILITY ===== */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}