/**
 * Sitewide dark-mode overrides — explicit surfaces, text, and borders.
 * Applies ONLY when data-theme='dark'. Root declares light+dark for Samsung; widgets keep only light.
 * this file provides the actual dark appearance via data-theme.
 */

html[data-theme='dark'] {
  color-scheme: only light;

  --bg-main: #1a2242;
  --bg-page: #0f1428;
  --bg-card: #1a2242;
  --bg-card-muted: #151b35;
  --text-main: #eef1ff;
  --text-body: #eef1ff;
  --text-muted: #b8c2e0;
  --text-muted-strong: #c5cee8;
  --border-subtle: #2a3560;
  --border-layout: #2a3560;
  --bg: var(--bg-page);
  --card-bg: var(--bg-card);
  --surface: var(--bg-card);
  --text: var(--text-main);
  --border: var(--border-layout);
}

html[data-theme='dark'] body,
html[data-theme='dark'] .app-shell,
html[data-theme='dark'] .home-shell,
html[data-theme='dark'] .topic-shell,
html[data-theme='dark'] .travel-page,
html[data-theme='dark'] .wallet-page,
html[data-theme='dark'] .auth-page,
html[data-theme='dark'] .emergency-page,
html[data-theme='dark'] .standard-page,
html[data-theme='dark'] .author-page,
html[data-theme='dark'] .admin-page {
  background-color: var(--bg-page);
  color: var(--text-main);
  color-scheme: only light;
}

html[data-theme='dark'] .app-main,
html[data-theme='dark'] .app-main-inner,
html[data-theme='dark'] .app-content,
html[data-theme='dark'] .home-main,
html[data-theme='dark'] .topic-main,
html[data-theme='dark'] .topic-content,
html[data-theme='dark'] .page-standard,
html[data-theme='dark'] .dashboard-main {
  background-color: transparent;
  color: var(--text-main);
}

html[data-theme='dark'] .page-standard-title,
html[data-theme='dark'] .section-title,
html[data-theme='dark'] .home-section-title,
html[data-theme='dark'] .page-title,
html[data-theme='dark'] h1,
html[data-theme='dark'] h2,
html[data-theme='dark'] h3 {
  color: var(--text-main);
}

html[data-theme='dark'] .text-muted,
html[data-theme='dark'] .page-standard-lead,
html[data-theme='dark'] .load-section-skeleton,
html[data-theme='dark'] .load-section-skeleton-label {
  color: var(--text-muted-strong) !important;
  -webkit-text-fill-color: var(--text-muted-strong) !important;
}

html[data-theme='dark'] .card,
html[data-theme='dark'] .card-article,
html[data-theme='dark'] .post-card,
html[data-theme='dark'] .stream-card,
html[data-theme='dark'] .topic-article-card,
html[data-theme='dark'] .family-card,
html[data-theme='dark'] .home-rank-panel,
html[data-theme='dark'] .settings-card,
html[data-theme='dark'] .auth-card,
html[data-theme='dark'] .admin-card,
html[data-theme='dark'] .wallet-card {
  background-color: var(--bg-card);
  color: var(--text-main);
  border-color: var(--border-subtle);
}

html[data-theme='dark'] input,
html[data-theme='dark'] textarea,
html[data-theme='dark'] select,
html[data-theme='dark'] .form-input,
html[data-theme='dark'] .home-travel-date-input {
  background-color: var(--bg-card-muted);
  color: var(--text-main);
  border-color: var(--border-subtle);
  color-scheme: only light;
}

/* Nested search inputs inherit parent bar styling — no inner box/border */
html[data-theme='dark'] .home-search .home-search-input,
html[data-theme='dark'] .home-paste-search-field .home-paste-search-input,
html[data-theme='dark'] .travel-sheet-search-wrap .travel-sheet-search-input,
html[data-theme='light'] .home-search .home-search-input,
html[data-theme='light'] .home-paste-search-field .home-paste-search-input,
html[data-theme='light'] .travel-sheet-search-wrap .travel-sheet-search-input {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

html[data-theme='dark'] .app-topbar,
html[data-theme='dark'] .topic-topbar,
html[data-theme='dark'] #topic-topbar,
html[data-theme='dark'] .nav-mobile-header,
html[data-theme='dark'] .mobile-tab-bar {
  background-color: var(--bg-card);
  color: var(--text-main);
  border-color: var(--border-subtle);
  color-scheme: only light;
}

html[data-theme='dark'] .app-sidebar,
html[data-theme='dark'] .home-sidebar,
html[data-theme='dark'] .topic-sidebar {
  background-color: var(--bg-page);
  color: var(--text-main);
  color-scheme: only light;
}

html[data-theme='dark'] table,
html[data-theme='dark'] th,
html[data-theme='dark'] td {
  color: var(--text-main);
  border-color: var(--border-subtle);
}

html[data-theme='dark'] .home-search,
html[data-theme='dark'] .home-search-suggestions,
html[data-theme='dark'] .home-travel-card,
html[data-theme='dark'] .home-paste-extras-card,
html[data-theme='dark'] .gotooi-recommended-panel {
  background-color: var(--bg-card);
  color: var(--text-main);
  border-color: var(--border-subtle);
  color-scheme: only light;
}

@media (prefers-color-scheme: dark) {
  html[data-theme='dark'] {
    color-scheme: only light;
  }
}