/* Catalog mp3/wav indicators: improve contrast in dark mode */
:root[data-theme="dark"] .cc-tag,
:root[data-theme="dark"] .modal-beats .mb-item .cc-tag {
  background: linear-gradient(90deg, #ff9800 60%, #ffb300 100%) !important;
  color: #181a1b !important;
  border: 2px solid #ffb300 !important;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  text-shadow: none !important;
}
/* Profile arrow popup dark mode */
:root[data-theme="dark"] .profile-arrow-popup {
  background: rgba(36, 38, 44, 0.97) !important;
  color: #e0e6eb !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.33) !important;
}
/* Nintendo Switch-style settings modal dark mode */
:root[data-theme="dark"] #settings-modal {
  background: none !important;
}
:root[data-theme="dark"] .settings-nav {
  background: #23272b !important;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.18) !important;
}
:root[data-theme="dark"] .settings-nav-item {
  color: #bfc9d1 !important;
  background: none !important;
}
:root[data-theme="dark"] .settings-nav-item.active {
  background: linear-gradient(90deg, #23272b 60%, #23272b 100%) !important;
  color: var(--accent-color, #6afbe6) !important;
  border-left: 4px solid var(--accent-color, #6afbe6) !important;
  box-shadow: 0 0 0 2px #1e2a2f44 !important;
}
:root[data-theme="dark"] .settings-panel {
  background: #181a1b !important;
  color: #e0e6eb !important;
}
:root[data-theme="dark"] .settings-panel-title {
  color: var(--accent-color, #6afbe6) !important;
}
:root[data-theme="dark"] .theme-row {
  border-bottom: 1px solid #23272b !important;
  background: none !important;
  color: #e0e6eb !important;
}
:root[data-theme="dark"] .theme-row.selected {
  background: linear-gradient(90deg, #23272b 60%, #181a1b 100%) !important;
  color: var(--accent-color, #6afbe6) !important;
}
:root[data-theme="dark"] .theme-row .theme-swatch {
  background: #181a1b !important;
  border-color: #353a40 !important;
}
:root[data-theme="dark"] .theme-row[data-theme="light"] .theme-swatch {
  background: #f5f5f5 !important;
  border-color: #bbb !important;
}
/* Make the modal dialog itself dark in dark mode */
:root[data-theme="dark"] .app-modal__dialog {
  background: #23272b !important;
  color: var(--main-color) !important;
  border-radius: 16px;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.65) !important;
}

/* Make the modal overlay slightly dimmer in dark mode */
:root[data-theme="dark"] .app-modal {
  background: rgba(24, 26, 27, 0.92) !important;
}
/* Darker settings modal and tabs in dark mode */
:root[data-theme="dark"] #settings-modal {
  background: #23272b !important;
  color: var(--main-color) !important;
  border-radius: 12px;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.55) !important;
}

:root[data-theme="dark"] .settings-tabs {
  background: #23272b !important;
}

:root[data-theme="dark"] .settings-tab {
  background: #23272b !important;
  color: #bfc9d1 !important;
}

:root[data-theme="dark"] .settings-tab.active {
  background: var(--accent-color, #00b7c1) !important;
  color: #fff !important;
}

:root[data-theme="dark"] .theme-options {
  background: transparent !important;
}

:root[data-theme="dark"] .theme-radio span {
  color: #e0e6eb !important;
}
/* Darker utility buttons in dark mode */
:root[data-theme="dark"] .hm-UtilityButton-newsfeed,
:root[data-theme="dark"] .hm-UtilityButton-eshop,
:root[data-theme="dark"] .hm-UtilityButton-garally,
:root[data-theme="dark"] .hm-UtilityButton-keyconfig,
:root[data-theme="dark"] .hm-UtilityButton-setting,
:root[data-theme="dark"] .hm-UtilityButton-music,
:root[data-theme="dark"] .hm-UtilityButton-power {
  background: #23272b !important;
  border: 2px solid #353a40 !important;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.55) !important;
}
/* Darker GameLauncher placeholders in dark mode */
:root[data-theme="dark"] .hm-GameLauncher-placeholder {
  background: #23272b !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) !important;
}
/* Dark mode theme for outtamyealement site */
:root[data-theme="dark"] {
  --bg-color: #181a1b;
  --main-color: #f5f5f5;
  --accent-color: #00b7c1;
  --highlight-top-color: #6afbe6;
  --highlight-bottom-color: #27c1d1;
  --main-font-family: "a-otf-ud-shin-go-pr6n", sans-serif;
  --semibold-font-family: "fot-udkakugo-large-pr6n", sans-serif;
  --number-font-family: "din-2014", sans-serif;
}

body[data-theme="dark"],
:root[data-theme="dark"] body {
  background: var(--bg-color) !important;
  color: var(--main-color) !important;
}

/* Example: override card backgrounds, modals, nav, etc. */
.catalog-grid,
.catalog-card,
.catalog-feature-card,
.hm-HomeMenu,
.hm-Header,
.hm-GameList,
.hm-GameLauncher,
.beat-modal-full,
.beat-modal-overlay,
.volume-popup,
.hm-UtilityNavigation,
.hm-Footer,
.catalog-nav-section {
  background: var(--bg-color) !important;
  color: var(--main-color) !important;
}

.catalog-card,
.catalog-feature-card,
.hm-GameLauncher {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) !important;
}

.catalog-card .cc-title,
.catalog-feature-title,
.catalog-feature-desc,
.cc-tag,
.cc-audio,
.cc-price,
.beat-modal-title,
.beat-modal-price,
.beat-modal-info,
.hm-GameLauncher_Title {
  color: var(--main-color) !important;
}

/* Example: nav section orange stays, but text is lighter in dark mode */
.catalog-nav-section {
  color: #fff !important;
}

/* Fade overlays for dark mode */
.catalog-top-fade,
.catalog-bottom-fade {
  display: none; /* hide fades by default for non-desktop */
}

@media (min-width: 1040px) {
  .catalog-top-fade {
    display: block !important;
    background: linear-gradient(
      to bottom,
      rgba(24, 26, 27, 1) 0%,
      rgba(24, 26, 27, 0) 100%
    ) !important;
  }
  .catalog-bottom-fade {
    display: block !important;
    background: linear-gradient(
      to top,
      rgba(24, 26, 27, 1) 0%,
      rgba(24, 26, 27, 0) 100%
    ) !important;
  }
}

/* Add more overrides as needed for your UI */