/*
 * PODOKO dark theme
 * A standalone visual system. Keep light-mode rules in styles.css and dark-mode
 * design here so the two themes can evolve independently.
 */
html[data-theme="dark"] {
  --dark-canvas: #0d0d10;
  --dark-header: #111115;
  --dark-surface: #17171c;
  --dark-surface-2: #1d1d23;
  --dark-surface-3: #24242b;
  --dark-line: #303038;
  --dark-line-strong: #41414b;
  --dark-text: #f5f5f6;
  --dark-text-2: #d2d2d7;
  --dark-muted: #9999a3;
  --dark-accent: #a93355;
  --dark-accent-hover: #bd4266;
  --dark-accent-soft: #352229;
  --dark-success: #67b38a;
  color-scheme: dark;
  background: var(--dark-canvas);
}

html[data-theme="dark"] body {
  background: var(--dark-canvas) !important;
  color: var(--dark-text) !important;
}

html[data-theme="dark"] .site-header {
  border-color: var(--dark-line) !important;
  background: var(--dark-header) !important;
  color: var(--dark-text);
  box-shadow: 0 12px 36px rgba(0,0,0,.28);
}

html[data-theme="dark"] :where(.utility,.masthead) {
  background: var(--dark-header) !important;
  color: var(--dark-text-2) !important;
}

html[data-theme="dark"] .brand .podoko-logo {
  width: 116px;
  height: 62px;
  filter: brightness(0) invert(1);
  object-fit: contain;
  opacity: .96;
}

html[data-theme="dark"] :where(.utility a,.utility button,.podoko-intro-line,.podoko-intro-line span,.podoko-intro-line button) {
  color: var(--dark-text-2) !important;
}

html[data-theme="dark"] .language-switcher {
  border-color: var(--dark-line) !important;
  background: var(--dark-surface-2) !important;
}

html[data-theme="dark"] .language-switcher button {
  background: transparent !important;
  color: var(--dark-muted) !important;
}

html[data-theme="dark"] .language-switcher button[aria-pressed="true"] {
  background: #1f6f76 !important;
  color: #fff !important;
}

/* The menu background hugs the first and last menu items instead of spanning the header. */
html[data-theme="dark"] .category-nav {
  width: var(--desktop-category-width, max-content) !important;
  max-width: calc(100% - 56px) !important;
  margin-right: 0 !important;
  margin-left: var(--desktop-category-left, auto) !important;
  border: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .category-primary {
  width: 100% !important;
  max-width: 100% !important;
  justify-content: space-between !important;
  gap: clamp(4px,.55vw,10px) !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  transform: none !important;
  border: 1px solid #292930;
  border-radius: 13px;
  padding: 2px 0 !important;
  background: #18181d;
  box-shadow: 0 9px 24px rgba(0,0,0,.18);
}

html[data-theme="dark"] .category-nav .category-primary > a,
html[data-theme="dark"] .category-more-toggle {
  flex: 0 0 auto;
  border: 0 !important;
  padding: 8px 0 7px !important;
  background: transparent !important;
  color: #c8c8ce !important;
  box-shadow: none;
}

html[data-theme="dark"] .category-nav .category-primary > a:hover,
html[data-theme="dark"] .category-nav .category-primary > a:focus-visible,
html[data-theme="dark"] .category-nav .category-primary > a.active,
html[data-theme="dark"] .category-more-toggle:hover,
html[data-theme="dark"] .category-more-toggle.is-open {
  color: #f5b4c6 !important;
  box-shadow: inset 0 -2px var(--dark-accent) !important;
}

html[data-theme="dark"] .category-more-panel {
  border-color: var(--dark-line) !important;
  background: rgba(23,23,28,.98) !important;
  color: var(--dark-text);
  box-shadow: 0 24px 64px rgba(0,0,0,.44);
}

html[data-theme="dark"] .category-more-panel section,
html[data-theme="dark"] .category-more-panel a {
  border-color: var(--dark-line) !important;
  background: transparent !important;
  color: var(--dark-text-2) !important;
}

html[data-theme="dark"] .category-more-panel h3 { color: #ec9ab1 !important; }
html[data-theme="dark"] .category-more-panel a:hover { background: var(--dark-surface-3) !important; color: #fff !important; }

/* Header information widgets and member data. */
html[data-theme="dark"] :where(.header-info-widget,.top-user-card.header-user-widget) {
  border-color: var(--dark-line) !important;
  background: var(--dark-surface) !important;
  color: var(--dark-text) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .header-info-widget div,
html[data-theme="dark"] .top-user-card.header-user-widget .user-head,
html[data-theme="dark"] .top-user-card.header-user-widget .user-stats > div {
  border-color: var(--dark-line) !important;
}

html[data-theme="dark"] .top-user-card.header-user-widget {
  display: grid;
  grid-template-rows: 30px minmax(0,1fr) !important;
  gap: 0;
  padding: 7px 9px;
}

html[data-theme="dark"] .top-user-card.header-user-widget .user-head {
  min-width: 0;
  padding: 0 2px 5px;
}

html[data-theme="dark"] .top-user-card.header-user-widget .user-head strong {
  color: var(--dark-text) !important;
  font-size: 12px;
}

html[data-theme="dark"] .top-user-card.header-user-widget .user-head button {
  border: 1px solid #56313d;
  border-radius: 999px;
  padding: 2px 6px;
  background: var(--dark-accent-soft);
  color: #efb3c3 !important;
  font-size: 9px;
}

html[data-theme="dark"] .top-user-card.header-user-widget .user-stats {
  grid-row: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  grid-template-rows: repeat(4,minmax(0,1fr)) !important;
  gap: 0 !important;
  min-height: 0;
}

html[data-theme="dark"] .top-user-card.header-user-widget .user-stats > div {
  display: grid !important;
  grid-template-columns: 31px minmax(0,1fr) !important;
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid var(--dark-line);
  padding: 0 3px !important;
}

html[data-theme="dark"] .top-user-card.header-user-widget .user-stats > div:nth-child(odd):not(.attendance-stat):not(.theme-mode-stat) {
  border-right: 1px solid var(--dark-line);
}

html[data-theme="dark"] .top-user-card.header-user-widget .attendance-stat,
html[data-theme="dark"] .top-user-card.header-user-widget .theme-mode-stat {
  grid-column: 1 / -1 !important;
  grid-template-columns: 34px minmax(0,1fr) !important;
}

html[data-theme="dark"] .top-user-card.header-user-widget .theme-mode-stat { border-bottom: 0; }

html[data-theme="dark"] .top-user-card.header-user-widget :where(dt,dd) {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--dark-text-2) !important;
  font-size: 9px !important;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-theme="dark"] .top-user-card.header-user-widget dd {
  justify-self: end;
  text-align: right;
}

html[data-theme="dark"] .top-user-card.header-user-widget .attendance-stat dd {
  display: flex;
  justify-content: flex-end;
  gap: 3px;
}

html[data-theme="dark"] :where(#attendanceCheckButton,#userMessages) {
  min-height: 18px;
  border-color: var(--dark-line-strong) !important;
  padding: 0 4px;
  background: var(--dark-surface-2) !important;
  color: var(--dark-text-2) !important;
  font-size: 8px !important;
}

html[data-theme="dark"] #attendanceStreak { color: var(--dark-muted) !important; font-size: 8px; }

html[data-theme="dark"] .top-user-card.header-user-widget .theme-mode-toggle {
  width: 94px;
  max-width: 94px;
  border-color: var(--dark-line) !important;
  background: #0f0f13 !important;
}

html[data-theme="dark"] .top-user-card.header-user-widget .theme-mode-toggle button {
  min-height: 18px;
  padding: 0 4px;
  color: var(--dark-muted) !important;
  font-size: 8px;
}

html[data-theme="dark"] .theme-mode-toggle button.is-active {
  background: var(--dark-accent) !important;
  color: #fff !important;
}

html[data-theme="dark"] .theme-mode-toggle,
html[data-theme="dark"] .theme-mode-toggle button {
  position: relative;
  z-index: 5;
  pointer-events: auto !important;
}

@media (min-width: 721px) {
  html[data-theme="dark"] .category-nav {
    margin-top: 28px !important;
  }
}

/* Global surfaces. */
html[data-theme="dark"] :where(
  .result-panel,.side-panel,.map-panel,.business-map-wrap,.business-map,
  .korea-briefing-card,.korea-briefing-clock,.korea-briefing-list,.korea-briefing-list li,
  .home-community-trends,.home-trend-box,.recent-photo-button,.recent-update-button,
  .podoko-latest-box,.podoko-now-status,.info-widget,.daily-info-card,
  .result-card,.detail-card,.listing-card,.listing-feature,.marketplace-card,
  .marketplace-board-shell,.marketplace-filter-panel,.massage-ad-board,.massage-ad-card,
  .massage-map-results,.massage-map-listing-card,.map-side-detail,.business-detail-panel,
  .mobile-market-section,.mobile-market-item,.mobile-food-board,.mobile-food-post-card,
  .mobile-account-sheet,.write-dialog,.auth-dialog,.chat-dialog,.podoko-about-dialog
) {
  border-color: var(--dark-line) !important;
  background-color: var(--dark-surface) !important;
  background-image: none !important;
  color: var(--dark-text) !important;
  box-shadow: none;
}

html[data-theme="dark"] :where(.dashboard,.podoko-landing,.dashboard.board-mode .result-panel) {
  background: var(--dark-canvas) !important;
}

html[data-theme="dark"] .dashboard.board-mode:not(.detail-mode) .section-head {
  border: 1px solid var(--dark-line) !important;
  border-radius: 20px;
  background: var(--dark-surface) !important;
  color: var(--dark-text) !important;
  box-shadow: 0 16px 44px rgba(0,0,0,.2);
}

html[data-theme="dark"] .dashboard.board-mode:not(.detail-mode) .section-head::before {
  content: "";
  align-self: stretch;
  width: 4px;
  border-radius: 999px;
  background: var(--dark-accent);
}

html[data-theme="dark"] .dashboard.board-mode:not(.detail-mode) .section-head h2 {
  color: var(--dark-text) !important;
}

html[data-theme="dark"] .dashboard.board-mode:not(.detail-mode) .section-head p {
  color: var(--dark-muted) !important;
}

html[data-theme="dark"] .dashboard.board-mode:not(.detail-mode) .results {
  border-color: var(--dark-line) !important;
  background: var(--dark-surface) !important;
  color: var(--dark-text) !important;
}

html[data-theme="dark"] :where(.landing-section,.landing-local-layout,.landing-weekly,.landing-business,.landing-story) {
  border-color: var(--dark-line) !important;
  background-color: var(--dark-surface) !important;
  background-image: none !important;
  color: var(--dark-text) !important;
}

html[data-theme="dark"] :where(h1,h2,h3,h4,h5,h6,strong,b,dt,dd,label) { color: var(--dark-text) !important; }
html[data-theme="dark"] :where(p,small,.meta,.desc,.map-note) { color: var(--dark-muted) !important; }
html[data-theme="dark"] :where(.landing-kicker,.massage-kicker,.marketplace-board-hero span) { color: #e07191 !important; }

html[data-theme="dark"] :where(input,textarea,select,.main-search,.board-search-form) {
  border-color: var(--dark-line-strong) !important;
  background: var(--dark-surface-2) !important;
  color: var(--dark-text) !important;
}

html[data-theme="dark"] :where(input,textarea)::placeholder { color: #767680 !important; opacity: 1; }

html[data-theme="dark"] :where(.post-button,.main-search button,.write-submit,.massage-detail-button,.landing-more-link) {
  border-color: var(--dark-accent) !important;
  background: var(--dark-accent) !important;
  color: #fff !important;
}

html[data-theme="dark"] :where(.post-button,.main-search button,.write-submit,.massage-detail-button,.landing-more-link):hover {
  background: var(--dark-accent-hover) !important;
}

html[data-theme="dark"] :where(.ad-slot,.header-side-ad:not(.is-managed-ad),.detail-side-ads,.detail-side-ad) {
  border-color: #4b3540 !important;
  background: var(--dark-surface-2) !important;
  color: #dca6b5 !important;
}

html[data-theme="dark"] :where(.business-tabs button,.food-subcategory-filter button,.massage-filter-check,.massage-card-meta div) {
  border-color: var(--dark-line) !important;
  background: var(--dark-surface-2) !important;
  color: var(--dark-text-2) !important;
}

html[data-theme="dark"] :where(.business-tabs button.active,.food-subcategory-filter button.is-active) {
  border-color: #804057 !important;
  background: var(--dark-accent-soft) !important;
  color: #f4b6c7 !important;
}

html[data-theme="dark"] :where(.badge,.verified-badge,.massage-card-tags span) {
  background: var(--dark-accent-soft) !important;
  color: #efb0c2 !important;
}

html[data-theme="dark"] :where(table,th,td) { border-color: var(--dark-line) !important; }
html[data-theme="dark"] :where(th,thead) { background: var(--dark-surface-2) !important; color: var(--dark-text) !important; }
html[data-theme="dark"] td { background: var(--dark-surface) !important; color: var(--dark-text-2) !important; }

html[data-theme="dark"] .site-footer { background: #08080a !important; color: var(--dark-muted) !important; }

@media (max-width: 720px) {
  html[data-theme="dark"] .site-header { background: var(--dark-header) !important; }

  html[data-theme="dark"] .category-nav.mobile-open {
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    background: var(--dark-header) !important;
  }

  html[data-theme="dark"] .category-nav.mobile-open .category-primary {
    width: 100% !important;
    max-width: 100% !important;
    border: 0;
    border-radius: 0;
    padding: 10px 12px !important;
    background: transparent;
    box-shadow: none;
  }

  html[data-theme="dark"] .category-nav.mobile-open .category-primary > a,
  html[data-theme="dark"] .category-nav.mobile-open .category-more-toggle,
  html[data-theme="dark"] .category-nav.mobile-open .category-more-panel section,
  html[data-theme="dark"] .category-nav.mobile-open .category-more-panel a {
    border: 1px solid var(--dark-line) !important;
    border-radius: 11px !important;
    background: var(--dark-surface-2) !important;
    color: var(--dark-text-2) !important;
  }

  html[data-theme="dark"] :where(.mobile-home-shortcuts,.mobile-bottom-nav) {
    border-color: var(--dark-line) !important;
    background: var(--dark-header) !important;
  }

  html[data-theme="dark"] .mobile-home-shortcuts a:nth-child(n) {
    border-color: var(--dark-line) !important;
    background: var(--dark-surface-2) !important;
    color: var(--dark-text) !important;
  }

  html[data-theme="dark"] :where(.mobile-important-notice,.mobile-market-item) {
    border-color: var(--dark-line) !important;
    background: var(--dark-surface) !important;
    color: var(--dark-text) !important;
  }

  html[data-theme="dark"] .mobile-market-thumb { background: var(--dark-surface-3) !important; }
  html[data-theme="dark"] .mobile-food-post-image { background: var(--dark-surface-3) !important; }
  html[data-theme="dark"] .mobile-account-backdrop { background: rgba(0,0,0,.78); }
}