/*
  Dark mode palette and overrides.
  Scoped to html[data-theme="dark"] so light mode is completely untouched.
  Loaded last in the CSS bundle so it can override everything above it.

  Shared colors are defined as custom properties here, with light-mode values in "hanabi.css";
  prefer consuming a variable over hardcoding a color so the two themes cannot drift apart.
*/

html[data-theme="dark"] {
  /* Palette custom properties */
  --dm-bg: #0b1410;
  --dm-surface: #1c1f22;
  --dm-surface-2: #23262a;
  --dm-border: #3a3f45;
  --dm-text: #e6e6e6;
  --dm-text-muted: #a9a9a9;
  --dm-link: #7fb2ff;
  --dm-header-bg: #15181c;
  --dm-accent-green: #2e7d32;
  --dm-accent-green-hover: #256a29;

  /* Shared component colors that differ between themes (light values in "hanabi.css") */
  --lobby-table-joined: #29294a;
  --lobby-table-joined-hover: #33335a;
  --lobby-table-unstarted: #3b3a24;
  --lobby-table-unstarted-hover: #4b4a34;
  --lobby-table-unstarted-password: #402626;
  --lobby-table-unstarted-password-hover: #503636;
  --lobby-table-started: #1d3a29;
  --lobby-table-started-hover: #2d4a39;
  --lobby-table-replay: #3a2740;
  --lobby-table-replay-hover: #4a3750;
  --login-alert-bg: #3a2020;
  --login-alert-border: #5a3030;
  --login-alert-text: #ffcccc;

  --note-input-bg: var(--dm-surface-2);
  --note-input-border: var(--dm-border);
  --note-input-border-focus: var(--dm-link);

  --body-bg-dark-lobby: #0b1410;
}

html[data-theme="dark"] body:not([data-screen="game"]) {
  background-color: var(--body-bg-dark-lobby);
}

/* Text defaults */
html[data-theme="dark"] body,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] #header {
  color: var(--dm-text);
}

/*
  Table headers and bold text are #646464 in light mode, which is unreadable on the dark
  surfaces. ("strong" deliberately has no "!important" so that any more specific color, like
  the red private-message text, still wins.)
*/
html[data-theme="dark"] table th {
  color: var(--dm-text-muted);
}

html[data-theme="dark"] strong {
  color: var(--dm-text);
}

/* Links */
html[data-theme="dark"] a {
  color: var(--dm-link);
}

html[data-theme="dark"] a.name-me {
  color: var(--color-name-me);
}

html[data-theme="dark"] a.friend {
  color: var(--color-friend);
}

/* Header bar */
html[data-theme="dark"] #header {
  background-color: var(--dm-header-bg);
  border-bottom: 1px solid var(--dm-border);
}

html[data-theme="dark"] #header a {
  color: var(--dm-text);
}

/* Nav buttons (e.g. "Help") have colored backgrounds, so they keep white text. */
html[data-theme="dark"] #header .button {
  color: var(--color-text-on-accent);
}

/*
  The green nav/toggle buttons keep white text, so they use a darker green in dark mode for
  sufficient contrast (the light-mode green is only 3.7:1 against white).
  ("!important" is needed because "hanabi.css" sets these backgrounds with "!important".)
*/
html[data-theme="dark"] .help-button,
html[data-theme="dark"] a.toggle-active {
  background-color: var(--dm-accent-green) !important;
}

html[data-theme="dark"] .help-button:hover {
  background-color: var(--dm-accent-green-hover) !important;
}

/* Alpha template: .box panels (lobby sections, modals) */
html[data-theme="dark"] .box {
  background-color: var(--dm-surface);
  box-shadow: 0 2px 0 0 var(--dm-border);
}

/* Alpha template: .modal / .dialog */
html[data-theme="dark"] .modal,
html[data-theme="dark"] .dialog {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
}

/* Alpha template: tables */
html[data-theme="dark"] table tbody tr {
  border-bottom: 1px solid var(--dm-border);
}

/*
  Zebra stripes: alpha.css gives odd rows a light background. The lobby games table rows get
  their status colors back further down, with ID specificity, so they beat these zebra rules.
*/
html[data-theme="dark"] table tbody tr:nth-child(2n),
html[data-theme="dark"] table.alt tbody tr:nth-child(2n) {
  background-color: var(--dm-surface-2);
}

html[data-theme="dark"] table tbody tr:nth-child(2n + 1),
html[data-theme="dark"] table.alt tbody tr:nth-child(2n + 1) {
  background-color: transparent;
}

/* Alpha template: form controls */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background-color: var(--dm-surface-2);
  border-color: var(--dm-border);
  color: var(--dm-text);
}

html[data-theme="dark"] input[type="text"]:focus,
html[data-theme="dark"] input[type="password"]:focus,
html[data-theme="dark"] input[type="email"]:focus,
html[data-theme="dark"] input[type="number"]:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
  border-color: var(--dm-link);
}

/* Alpha template: buttons (filled with mid-tone colors, so they keep white text) */
html[data-theme="dark"] .button {
  color: var(--color-text-on-accent);
}

html[data-theme="dark"] .button.alt {
  background-color: var(--dm-surface-2);
  border-color: var(--dm-border);
}

html[data-theme="dark"] .button.alt:hover {
  background-color: var(--dm-surface);
}

html[data-theme="dark"] input[type="submit"],
html[data-theme="dark"] input[type="reset"],
html[data-theme="dark"] input[type="button"] {
  background-color: var(--dm-surface-2);
  border-color: var(--dm-border);
  color: var(--color-text-on-accent);
}

/* Alpha template: code / pre */
html[data-theme="dark"] pre,
html[data-theme="dark"] code {
  background-color: var(--dm-surface-2);
  border-color: var(--dm-border);
  color: var(--dm-text);
}

/* Lobby: chat text boxes
   ("!important" is needed because "hanabi.css" sets "border-color" with "!important".) */
html[data-theme="dark"] .lobby-chat-text-box {
  border-color: var(--dm-border) !important;
  background-color: var(--dm-surface-2);
  color: var(--dm-text);
}

html[data-theme="dark"] .chat-text {
  color: var(--dm-text);
}

/*
  Lobby: table row variants (dark muted hues).
  ("!important" is needed because "hanabi.css" sets these backgrounds with "!important".)
*/
html[data-theme="dark"] #lobby-games-table tbody tr.lobby-games-table-joined {
  background-color: var(--lobby-table-joined) !important;
}
html[data-theme="dark"]
  #lobby-games-table
  tbody
  tr.lobby-games-table-joined:hover {
  background-color: var(--lobby-table-joined-hover) !important;
}

html[data-theme="dark"]
  #lobby-games-table
  tbody
  tr.lobby-games-table-unstarted {
  background-color: var(--lobby-table-unstarted) !important;
}
html[data-theme="dark"]
  #lobby-games-table
  tbody
  tr.lobby-games-table-unstarted:hover {
  background-color: var(--lobby-table-unstarted-hover) !important;
}

html[data-theme="dark"]
  #lobby-games-table
  tbody
  tr.lobby-games-table-unstarted-password {
  background-color: var(--lobby-table-unstarted-password) !important;
}
html[data-theme="dark"]
  #lobby-games-table
  tbody
  tr.lobby-games-table-unstarted-password:hover {
  background-color: var(--lobby-table-unstarted-password-hover) !important;
}

html[data-theme="dark"] #lobby-games-table tbody tr.lobby-games-table-started {
  background-color: var(--lobby-table-started) !important;
}
html[data-theme="dark"]
  #lobby-games-table
  tbody
  tr.lobby-games-table-started:hover {
  background-color: var(--lobby-table-started-hover) !important;
}

html[data-theme="dark"] #lobby-games-table tbody tr.lobby-games-table-replay {
  background-color: var(--lobby-table-replay) !important;
}
html[data-theme="dark"]
  #lobby-games-table
  tbody
  tr.lobby-games-table-replay:hover {
  background-color: var(--lobby-table-replay-hover) !important;
}

/* Lobby: game table border */
html[data-theme="dark"] #lobby-games-table {
  border-color: var(--dm-border);
}

/* Settings volume slider */
html[data-theme="dark"] #settings-volume-slider {
  background: var(--dm-surface-2);
}

/* Login page */
html[data-theme="dark"] #main-login > header p,
html[data-theme="dark"] #main-tutorial > header p {
  border-top-color: var(--dm-border);
}

html[data-theme="dark"] .login-header {
  color: var(--dm-text);
}

/* Login alert (error box) */
html[data-theme="dark"] #login-alert {
  background-color: var(--login-alert-bg);
  border-color: var(--login-alert-border);
  color: var(--login-alert-text);
}

/* Modals container */
html[data-theme="dark"] #modals-container > div {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
}

/* Settings modal */
html[data-theme="dark"] #settings-modal {
  background-color: var(--dm-surface);
}

html[data-theme="dark"] #settings-modal h5 {
  color: var(--dm-text-muted);
}

/* Alpha template: feature row borders */
html[data-theme="dark"] .features-row section {
  border-color: var(--dm-border);
}

/* Alpha template: labels on inputs */
html[data-theme="dark"] label,
html[data-theme="dark"] .label-text {
  color: var(--dm-text);
}

/* Alpha template: horizontal lists */
html[data-theme="dark"] .horizontal > li {
  color: var(--dm-text);
}

/* Game chat */
html[data-theme="dark"] #game-chat-text {
  background-color: var(--dm-surface-2);
  color: var(--dm-text);
}

html[data-theme="dark"] #game-chat-modal {
  border-color: var(--dm-border);
}

/* Alpha template: row divider */
html[data-theme="dark"] .row {
  border-bottom-color: var(--dm-border);
}

/* Alpha template: nav button hover */
html[data-theme="dark"] #nav a:hover {
  background-color: var(--dm-surface-2);
}

/* Alpha template: footer */
html[data-theme="dark"] footer {
  color: var(--dm-text-muted);
}

html[data-theme="dark"]
  .tooltipster-sidetip.tooltipster-shadow
  .tooltipster-box {
  background-color: var(--dm-surface);
  border: 1px solid var(--dm-border);
}

html[data-theme="dark"]
  .tooltipster-sidetip.tooltipster-shadow
  .tooltipster-content {
  color: var(--dm-text);
}

html[data-theme="dark"]
  .tooltipster-sidetip.tooltipster-shadow.tooltipster-bottom
  .tooltipster-arrow-border {
  border-bottom-color: var(--dm-surface);
}

html[data-theme="dark"]
  .tooltipster-sidetip.tooltipster-shadow.tooltipster-top
  .tooltipster-arrow-border {
  border-top-color: var(--dm-surface);
}

html[data-theme="dark"]
  .tooltipster-sidetip.tooltipster-shadow.tooltipster-left
  .tooltipster-arrow-border {
  border-left-color: var(--dm-surface);
}

html[data-theme="dark"]
  .tooltipster-sidetip.tooltipster-shadow.tooltipster-right
  .tooltipster-arrow-border {
  border-right-color: var(--dm-surface);
}

html[data-theme="dark"] div.noteTitle {
  border-bottom-color: var(--dm-border);
}

html[data-theme="dark"] div.noteTitle span {
  background-color: var(--dm-surface);
}

html[data-theme="dark"]
  .tooltipster-sidetip.tooltipster-shadow
  input[type="text"] {
  background-color: var(--note-input-bg);
  border-color: var(--note-input-border);
  color: inherit;
}

html[data-theme="dark"]
  .tooltipster-sidetip.tooltipster-shadow
  input[type="text"]:focus {
  border-color: var(--note-input-border-focus);
  box-shadow: 0 0 0 2px var(--note-input-border-focus);
}