/* ============================================
   Dark Mode - Icon Filters
   ============================================
    Makes all Lucide icons lighter in dark mode.
   Excludes icons that have custom colors (folder icons,
   slash command icons, kanban icons, markdown buttons,
   toolbar active states, search type buttons).
   ============================================ */

/* Lucide icons are CSS masks painted with `background-color: currentColor`
   (see lucide.css), so recolouring one is just setting `color` on it.

   This used to be `filter: brightness(0) saturate(0%) invert(80%) !important`,
   which forces a grey whatever colour the icon asks for. Every icon that has a
   colour of its own then had to be carved out by hand, and the selector grew to
   fourteen chained :not(), several of them holding a descendant selector. A
   custom theme could not override it either: discussion #1261 shows a user
   copying that whole selector verbatim just to switch it off.

   With `color`, an icon that sets its own colour simply wins, by specificity or
   by being an inline style. No exclusion list is needed. */
html[data-theme='dark'] [class*="lucide-"] {
    color: var(--dm-icon);
    transition: transform 0.2s ease, color 0.2s ease;
}

html[data-theme='dark'] [class*="lucide-"]:hover {
    transform: scale(1.18);
    color: var(--dm-icon-hover);
}

/* Sidebar plus button */
html[data-theme='dark'] .sidebar-plus {
    filter: brightness(0) saturate(0%) invert(80%) !important;
}

html[data-theme='dark'] .sidebar-folder-toggle [class*="lucide-"] {
    color: inherit;
}

/* Icon rail: colours come from currentColor, never the global filter. The
   overflow menu clones the rail's icons, so it needs the same exemption. */
html[data-theme='dark'] .icon-sidebar-btn [class*="lucide-"],
html[data-theme='dark'] .icon-sidebar-btn [class*="lucide-"]:hover,
html[data-theme='dark'] .icon-sidebar-overflow-item [class*="lucide-"],
html[data-theme='dark'] .icon-sidebar-overflow-item [class*="lucide-"]:hover {
    color: inherit;
    transform: none;
}
