/* =========================================================
   MacauGo — Polish Layer (v=36)
   Loaded LAST so it can override the base stylesheets.
   Contains: 1) Dark theme  2) Back-to-top  3) Empty states
   4) Performance optimizations  5) Accessibility  6) Print
   Light theme is completely untouched — all dark rules are
   scoped to html[data-theme="dark"].
   ========================================================= */

/* ---------- 1. DARK THEME ---------- */
html[data-theme="dark"] {
  /* Tinted neutrals → warm dark */
  --c-cream:         #12100E;
  --c-warm:          #191512;
  --c-surface:       #1E1A17;
  --c-dark:          #F5EDE4;
  --c-text:          #E3D8CE;
  --c-text-muted:    #A79A8F;
  --c-border:        #332C26;
  --c-border-strong: #473D34;
  --c-navy:          #0F1720;
  --c-navy-deep:     #0A0F15;

  /* Brand colours lifted for legibility on dark backgrounds */
  --c-primary:       #E07A62;
  --c-primary-dark:  #C45F48;
  --c-primary-light: #F0A08C;
  --c-accent:        #F0BE7C;
  --c-accent-dark:   #D2A05C;
  --c-gold:          #D9B455;
  --c-teal:          #45B8A8;
  --c-teal-dark:     #2E8C80;

  /* Shadows: deeper + darker on dark surfaces */
  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.50);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.60);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 0 40px rgba(224, 122, 98, 0.22);
  --shadow-sm-h: 0 4px 12px rgba(0, 0, 0, 0.55);
  --shadow-md-h: 0 10px 30px rgba(0, 0, 0, 0.60);
  --shadow-lg-h: 0 18px 50px rgba(0, 0, 0, 0.65);
}

/* Base surfaces that hardcode light colours in the base CSS */
html[data-theme="dark"] body,
html[data-theme="dark"] .page,
html[data-theme="dark"] .app-shell {
  background-color: var(--c-cream);
  color: var(--c-text);
}

/* Common hardcoded-white card / panel surfaces */
html[data-theme="dark"] .post-card,
html[data-theme="dark"] .chat-widget-panel,
html[data-theme="dark"] .chat-widget-messages .ai-bubble,
html[data-theme="dark"] .chat-widget-input,
html[data-theme="dark"] .chat-widget-suggestions,
html[data-theme="dark"] .create-post-modal,
html[data-theme="dark"] .achievement-card,
html[data-theme="dark"] .passport-item,
html[data-theme="dark"] .diary-day,
html[data-theme="dark"] .ai-recommend-panel,
html[data-theme="dark"] .ai-translator,
html[data-theme="dark"] .nearby-item,
html[data-theme="dark"] .smart-feed-card,
html[data-theme="dark"] .trip-stop .card,
html[data-theme="dark"] .itl-card,
html[data-theme="dark"] .map-controls,
html[data-theme="dark"] .map-panel,
html[data-theme="dark"] .modal-box,
html[data-theme="dark"] .today-card,
html[data-theme="dark"] .medical-card,
html[data-theme="dark"] .phrase-item,
html[data-theme="dark"] .translate-box textarea,
html[data-theme="dark"] .translate-result,
html[data-theme="dark"] .info-tile,
html[data-theme="dark"] .tools-card,
html[data-theme="dark"] .aihub-modal-content,
html[data-theme="dark"] .community-create-bar,
html[data-theme="dark"] .social-connect-bar,
html[data-theme="dark"] .journey-option-card:hover,
html[data-theme="dark"] .itin-tab-btn.active {
  background-color: var(--c-surface) !important;
  border-color: var(--c-border);
  color: var(--c-text);
}

/* Inputs, selects, textareas */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background-color: var(--c-surface);
  color: var(--c-text);
  border-color: var(--c-border-strong);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--c-text-muted);
}

/* Navbar + dropdowns */
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .nav-mini,
html[data-theme="dark"] .navbar-search-dropdown,
html[data-theme="dark"] .nav-avatar {
  background-color: var(--c-surface) !important;
  border-color: var(--c-border);
  color: var(--c-text);
}

html[data-theme="dark"] .nav-mini a,
html[data-theme="dark"] .nav-mini-head {
  color: var(--c-text);
}

html[data-theme="dark"] .nav-mini a:hover {
  background-color: var(--c-warm);
}

/* Borders & dividers */
html[data-theme="dark"] hr,
html[data-theme="dark"] .nav-mini-sep {
  border-color: var(--c-border) !important;
}

/* Muted helper text that hardcodes a light grey */
html[data-theme="dark"] [style*="color:var(--c-muted)"],
html[data-theme="dark"] [style*="color: #999"],
html[data-theme="dark"] [style*="color:#999"],
html[data-theme="dark"] [style*="color: #666"],
html[data-theme="dark"] [style*="color:#666"] {
  color: var(--c-text-muted) !important;
}

/* Leaflet map tiles look harsh on dark — dim them slightly */
html[data-theme="dark"] .leaflet-tile-pane {
  filter: brightness(0.82) saturate(0.85);
}

/* ---------- 2. THEME TOGGLE BUTTON ---------- */
#themeToggle {
  position: relative;
}
#themeToggle .fa-sun { color: #F0BE7C; }

/* ---------- 3. BACK TO TOP ---------- */
.mfe-top-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--c-primary);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, background .2s ease;
  z-index: 9999;
}
.mfe-top-btn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mfe-top-btn:hover {
  background: var(--c-primary-dark);
  transform: translateY(-2px);
}
@media (max-width: 640px) {
  .mfe-top-btn { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

/* ---------- 4. EMPTY STATES ---------- */
.mfe-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 56px 24px;
  gap: 6px;
}
.mfe-empty svg {
  width: 132px;
  height: 132px;
  margin-bottom: 10px;
  opacity: .95;
}
.mfe-empty h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--c-dark);
  margin: 0;
}
.mfe-empty p {
  font-size: 14px;
  color: var(--c-text-muted);
  margin: 0;
  max-width: 380px;
  line-height: 1.6;
}
.mfe-empty .mfe-empty-btn {
  margin-top: 14px;
  padding: 10px 22px;
  border: none;
  border-radius: 999px;
  background: var(--c-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.mfe-empty .mfe-empty-btn:hover {
  background: var(--c-primary-dark);
  transform: translateY(-1px);
}
html[data-theme="dark"] .mfe-empty h3 { color: var(--c-dark); }

/* ---------- 5. PERFORMANCE OPTIMIZATIONS ---------- */

/* GPU acceleration for animated elements to prevent jank */
.hero-content,
.hero-ai-bar,
.hero-stats,
.ai-feature-card,
.how-step-icon,
.chat-widget-btn,
.mfe-top-btn,
.navbar,
.navbar-logo,
.navbar-toggle,
.modal-content {
  will-change: transform, opacity;
}

/* Reduce layout thrashing: contain paint to card boundaries */
.food-card,
.restaurant-card,
.attr-card,
.event-card-home,
.hotel-card,
.shop-card,
.info-card,
.ai-feature-card,
.post-card,
.modal-content {
  contain: layout style paint;
}

/* Optimize scroll performance for scrolling containers */
.navbar-links,
.chat-widget-messages,
.modal-content,
.gallery-grid {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Use content-visibility for off-screen sections (major perf win) */
.section-header + *,
.footer-grid > *,
.ai-features-grid,
.food-grid,
.attractions-grid,
.events-grid,
.hotels-grid,
.shops-grid,
.community-grid {
  content-visibility: auto;
  content-visibility: unset; /* fallback */
}

/* Defer image rendering until scrolled into view */
img[loading="lazy"] {
  background: var(--c-warm);
}

/* Smooth scroll with reduced motion support */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Touch device optimization: remove hover-only effects on touch */
@media (hover: none) {
  .ai-feature-card:hover,
  .food-card:hover,
  .restaurant-card:hover,
  .attr-card:hover,
  .event-card-home:hover,
  .hotel-card:hover,
  .shop-card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }
}

/* ---------- 6. ACCESSIBILITY ---------- */

/* Focus visible: clear focus indicator for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Screen reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip to main content link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--c-primary);
  color: #fff;
  padding: 8px 16px;
  z-index: 10000;
  border-radius: 0 0 8px 0;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.skip-link:focus {
  top: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .navbar {
    background: #fff;
    border-bottom: 2px solid var(--c-dark);
  }
  .food-card, .restaurant-card, .attr-card {
    border: 2px solid var(--c-dark);
  }
}

/* ---------- 7. PRINT STYLES ---------- */
@media print {
  .navbar,
  .footer,
  .floating-chat-widget,
  .mfe-top-btn,
  .navbar-search,
  #themeToggle,
  .navbar-toggle,
  .chat-widget-btn {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
  }
  .container {
    max-width: 100% !important;
  }
  a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}