/*
 * Theme overrides for manual dark/light toggle via html[data-theme].
 * Mirrors all @media (prefers-color-scheme: dark) rules in other CSS files
 * so the user-selected theme wins over the OS preference.
 * Loads last alphabetically via propshaft :all.
 */

/* Override rails_icons/preview.css which sets body { font-family: system-ui } */
body { font-family: var(--font-family); }

/* ── sidebar.css ── */
html[data-theme="dark"] #sidebar {
  --sidebar-bg: #0D1D32;
  --sidebar-header-bg: #0D1D32;
  --sidebar-tools-bg: #0D1D32;
}

html[data-theme="dark"] #nav {
  background-color: #0D1D32;
}

html[data-theme="light"] #nav {
  background-color: oklch(93% 0.006 268);
}

html[data-theme="light"] #sidebar {
  --sidebar-bg: oklch(93% 0.006 268);
  --sidebar-header-bg: oklch(93% 0.006 268);
  --sidebar-tools-bg: oklch(93% 0.006 268);
}

html[data-theme="dark"] .sidebar-item--current {
  background-color: #25262E;
  box-shadow: inset 0 0 0 1px var(--color-alert);
}

html[data-theme="light"] .sidebar-item--current {
  background-color: oklch(97% 0.004 268);
  box-shadow: inset 0 0 0 1px var(--color-alert);
}

/* ── colorize.css ── */
html[data-theme="dark"] .colorize--white { filter: invert(0%); }
html[data-theme="dark"] .colorize--black { filter: invert(100%); }
html[data-theme="light"] .colorize--white { filter: invert(100%); }
html[data-theme="light"] .colorize--black { filter: invert(0%); }

/* ── utilities.css ── */
html[data-theme="dark"] .fill-shade { background-color: var(--color-message-bg); }
html[data-theme="dark"] .fill-white { background-color: #2A3744; }

html[data-theme="dark"] .shadow {
  box-shadow:
    0 0 0 1px oklch(var(--lch-always-black) / 0.42),
    0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.6),
    0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.7),
    0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.8),
    0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.9),
    0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 1);
}

/* ── avatars.css ── */
html[data-theme="dark"] .banned::after { filter: invert(100%); }
html[data-theme="light"] .banned::after { filter: invert(0%); }

/* ── actiontext.css (Trix editor toolbar icons) ── */
html[data-theme="dark"] .trix-button::before,
html[data-theme="dark"] .trix-button-group::before {
  filter: invert(100);
}

html[data-theme="dark"] .trix-button.trix-active::before {
  filter: invert(0);
}

html[data-theme="light"] .trix-button::before,
html[data-theme="light"] .trix-button-group::before {
  filter: none;
}

html[data-theme="light"] .trix-button.trix-active::before {
  filter: invert(100);
}

/* ── composer.css (file attachment remove icon) ── */
html[data-theme="dark"] .composer__file-caption::after { filter: invert(100%); }
html[data-theme="light"] .composer__file-caption::after { filter: none; }


/* ── buttons.css ── */
html[data-theme="light"] { --btn-hover-bg: oklch(85% 0.012 268); }
html[data-theme="dark"]  { --btn-hover-bg: var(--color-border-dark); }

html[data-theme="dark"] .btn:where(:has(img, svg):not(.avatar)) img:not([class]) {
  filter: brightness(0) invert(44%) sepia(10%) saturate(300%) hue-rotate(180deg);
}

html[data-theme="light"] .btn:where(:has(img, svg):not(.avatar)) img:not([class]) {
  filter: invert(40%);
}

html[data-theme="dark"] .btn:has(input:checked) img {
  filter: invert(0);
}

html[data-theme="light"] .btn:has(input:checked) img {
  filter: invert(100%);
}

html[data-theme="light"] .btn--reversed img:not(.avatar) {
  filter: invert(100%);
}

html[data-theme="dark"] .btn--negative img:not(.avatar),
html[data-theme="light"] .btn--negative img:not(.avatar) {
  filter: invert(0%);
}

/* ── messages.css (mentioned message highlight) ── */
html[data-theme="dark"] .message--mentioned .message__body-content {
  --message-background: oklch(var(--lch-red) / 0.2);
}

html[data-theme="light"] .message--mentioned .message__body-content {
  --message-background: oklch(var(--lch-red) / 0.1);
}

/* ── code.css (syntax highlighting) ── */
html[data-theme="dark"] .highlight {
  --keyword:        oklch(73.45% 0.163 25.78);
  --entity:         oklch(80.05% 0.127 305.86);
  --constant:       oklch(78.57% 0.115 246.66);
  --string:         oklch(78.57% 0.115 246.66);
  --variable:       oklch(79.91% 0.141 60.1);
  --comment:        oklch(66.25% 0.018 250.92);
  --entity-tag:     oklch(84.16% 0.164 145.75);
  --markup-heading: oklch(56.86% 0.202 259.67);
  --markup-list:    oklch(85.74% 0.133 89.95);
  --markup-inserted:oklch(90.72% 0.112 146.34);
  --markup-deleted: oklch(92.23% 0.040 27.49);
}

/* ── base.css (notifications help inline images) ── */
html[data-theme="dark"] .notifications-help img { filter: invert(100); }
html[data-theme="light"] .notifications-help img { filter: none; }