/* ============================================
   Dark Mode - Layout, Sidebar & Navigation
   ============================================ */

/* Main containers */
html[data-theme='dark'] #left_col {
    background-color: var(--dm-bg);
    color: var(--dm-text);
}

html[data-theme='dark'] #right_col,
html[data-theme='dark'] #right_pane {
    background-color: var(--dm-content-bg);
    color: var(--dm-text);
}

html[data-theme='dark'] .workspace-title-text {
    color: var(--dm-text);
}

/* ============================================
   Search Bar
   ============================================ */

html[data-theme='dark'] .searchbar-input {
    background-color: var(--dm-sidebar-surface);
    color: var(--dm-text);
    border-color: var(--dm-border);
}

html[data-theme='dark'] #search-bar-container.contains_forms_search {
    background-color: var(--dm-sidebar-bg);
    border-bottom-color: var(--dm-border);
}

html[data-theme='dark'] .searchbar-input::placeholder {
    color: var(--dm-text-subtle);
}

html[data-theme='dark'] .searchbar-icon {
    color: var(--dm-text);
}

html[data-theme='dark'] .searchbar-date-toggle:hover,
html[data-theme='dark'] .searchbar-date-toggle.active {
    background: transparent;
    color: var(--dm-accent-hover);
}

html[data-theme='dark'] .search-date-filter {
    background: var(--dm-surface);
    border-color: var(--dm-border);
}

html[data-theme='dark'] .folder-filter-banner {
    border-color: var(--dm-border);
    color: var(--dm-text-muted);
}

html[data-theme='dark'] .folder-filter-banner-name i {
    color: var(--dm-text-muted);
    background-color: var(--dm-text-muted);
}

html[data-theme='dark'] .folder-filter-banner-name i.folder-filter-banner-icon:hover,
html[data-theme='dark'] .folder-filter-banner-name i.folder-filter-banner-icon:focus-visible {
    color: var(--dm-accent, var(--dm-accent));
    background-color: var(--dm-accent, var(--dm-accent));
}

html[data-theme='dark'] .search-date-field label i {
    color: var(--dm-text-muted);
}

html[data-theme='dark'] .search-date-input {
    background: var(--dm-bg);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

/* Two flat states, no hover feedback (see searchbars.css). dark-mode/icons.css
   paints and scales every lucide icon on hover, so the icon's :hover is restated
   here with a more specific selector. */
html[data-theme='dark'] .searchbar-type-btn i[class*="lucide-"],
html[data-theme='dark'] .searchbar-type-btn i[class*="lucide-"]:hover {
    color: var(--dm-icon);
    transform: none;
}

html[data-theme='dark'] .searchbar-type-btn.active,
html[data-theme='dark'] .searchbar-type-btn.active:hover,
html[data-theme='dark'] .searchbar-type-btn.active i[class*="lucide-"],
html[data-theme='dark'] .searchbar-type-btn.active i[class*="lucide-"]:hover {
    color: var(--dm-accent-hover);
}

/* System menu dropdown */
html[data-theme='dark'] .system-menu-dropdown {
    background: var(--dm-surface);
    border-color: var(--dm-border);
    box-shadow: 0 4px 12px rgba(var(--pz-shadow-rgb), 0.4);
}

/* Favorites */
html[data-theme='dark'] #folder-favorites {
    border-bottom-color: var(--dm-border);
}

html[data-theme='dark'] #folder-favorites .note-title::before {
    color: var(--dm-text);
}

/* ============================================
   Folders
   ============================================ */

html[data-theme='dark'] .favorites-separator {
    border-bottom-color: var(--dm-border);
}

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

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

html[data-theme='dark'] .folder-toggle {
    color: var(--dm-text);
}

/* Dark counterpart of the light grey row hover in drag-drop.css: a darkening
   overlay is invisible on a dark ground, so this one lightens instead. */
html[data-theme='dark'] .folder-toggle:hover {
    background-color: rgba(var(--pz-highlight-rgb), 0.06);
}

html[data-theme='dark'] .folder-name {
    color: var(--dm-text);
}

html[data-theme='dark'] .folder-icon {
    color: var(--dm-text);
}

/* System folder note count - blue like in light mode */
html[data-theme='dark'] .system-folder .folder-note-count {
    color: var(--dm-accent);
}

/* ============================================
   Notes List
   ============================================ */

html[data-theme='dark'] .links_arbo_left {
    background-color: transparent !important;
    color: var(--dm-text);
}

html[data-theme='dark'] .links_arbo_left:hover,
html[data-theme='dark'] .links_arbo_left.selected-note {
    background-color: var(--dm-sidebar-surface) !important;
}

html[data-theme='dark'] .links_arbo_left:hover .note-title,
html[data-theme='dark'] .links_arbo_left.selected-note .note-title {
    color: var(--dm-accent) !important;
}

html[data-theme='dark'] .links_arbo_left.selected-note {
    background-color: var(--dm-sidebar-surface) !important;
}

html[data-theme='dark'] .links_arbo_left.selected-note .note-title {
    color: var(--dm-accent) !important;
}

html[data-theme='dark'] .links_arbo_left.active {
    background-color: var(--dm-active);
    border-left: 3px solid var(--dm-accent);
}

html[data-theme='dark'] .note-title {
    color: var(--dm-text);
}

/* Black theme - sidebar note and folder name colors */
html.theme-black[data-theme='dark'] .note-title {
    color: var(--dm-text-subtle);
}

html.theme-black[data-theme='dark'] .links_arbo_left {
    color: var(--dm-text-subtle);
}

html.theme-black[data-theme='dark'] .folder-name {
    color: var(--dm-text-subtle);
}

html[data-theme='dark'] .lastupdated {
    color: var(--dm-text-muted) !important;
}

/* ============================================
   Resize Handle & Toggle Sidebar
   ============================================ */

/* The handle is zero-width (see css/layout.css), so only its border shows;
   a background-color here would never paint. */
html[data-theme='dark'] .resize-handle {
    border-right: 1px solid var(--dm-border);
}

html[data-theme='dark'] .resize-handle:hover {
    border-right: 1px solid var(--dm-border-light);
}

html[data-theme='dark'] .toggle-sidebar-btn {
    background: var(--dm-surface);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

html[data-theme='dark'] .toggle-sidebar-btn:hover {
    background: var(--dm-surface-hover);
    color: var(--dm-accent);
    box-shadow: 0 2px 8px rgba(var(--pz-shadow-rgb), 0.3);
}

/* ============================================
   Icon Sidebar (index.php)
   ============================================ */

html[data-theme='dark'] #icon_sidebar {
    background-color: var(--dm-bg);
    border-right: 1px solid var(--dm-border);
}

html[data-theme='dark'] .icon-sidebar-bottom {
    border-top-color: var(--dm-border);
}

html[data-theme='dark'] .icon-sidebar-btn {
    color: var(--dm-text-muted);
    opacity: 0.4;
}

html[data-theme='dark'] .icon-sidebar-btn:hover,
html[data-theme='dark'] .icon-sidebar-btn:focus-visible,
html[data-theme='dark'] .icon-sidebar-btn.has-notifications {
    opacity: 1;
}

html[data-theme='dark'] .icon-sidebar-btn:hover,
html[data-theme='dark'] .icon-sidebar-btn:focus-visible {
    color: var(--dm-accent);
    background: var(--dm-surface-hover);
}

/* Current page. The light 12%-opacity blue washes out on a dark background, so
   the selected icon gets a brighter tint and full opacity to stand out from
   the merely-hovered state above. */
html[data-theme='dark'] .icon-sidebar-btn-active,
html[data-theme='dark'] .icon-sidebar-btn-active:hover {
    color: var(--dm-accent);
    background: rgba(var(--pz-accent-rgb), 0.30);
    opacity: 1;
}

html[data-theme='dark'] .icon-sidebar-btn-active .lucide {
    background-color: var(--dm-accent);
}

/* Overflow menu: a floating popup rather than part of the rail, so it takes the
   surface colours instead of the sidebar's. */
html[data-theme='dark'] #iconSidebarOverflowMenu {
    background: var(--dm-surface);
    border-color: var(--dm-border);
    box-shadow: 0 6px 20px rgba(var(--pz-shadow-rgb), 0.5);
}

/* Same resting treatment as .icon-sidebar-btn above, dimmed opacity included:
   the menu lists the rail's own entries and must not read brighter than them. */
html[data-theme='dark'] .icon-sidebar-overflow-item {
    color: var(--dm-text-muted);
    opacity: 0.4;
}

html[data-theme='dark'] .icon-sidebar-overflow-item:hover,
html[data-theme='dark'] .icon-sidebar-overflow-item:focus-visible,
html[data-theme='dark'] .icon-sidebar-overflow-item-active {
    opacity: 1;
}

html[data-theme='dark'] .icon-sidebar-overflow-item:hover,
html[data-theme='dark'] .icon-sidebar-overflow-item:focus-visible {
    background: var(--dm-surface-hover);
    color: var(--dm-accent);
}

html[data-theme='dark'] .icon-sidebar-overflow-item-active {
    background: rgba(var(--pz-accent-rgb), 0.30);
    color: var(--dm-accent);
}

html[data-theme='dark'] #iconSidebarToggle {
    background: var(--dm-surface);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

html[data-theme='dark'] #iconSidebarToggle:hover {
    background: var(--dm-surface-hover);
    color: var(--dm-accent);
    box-shadow: 0 2px 8px rgba(var(--pz-shadow-rgb), 0.3);
}