/* ============================================
   Dark Mode - Dropdown Menus
   ============================================ */

/* ============================================
   Slash Command Menu
   ============================================ */

html[data-theme='dark'] .slash-command-menu {
    background: var(--dm-surface);
    border-color: var(--dm-border);
}

html[data-theme='dark'] .slash-command-item:hover,
html[data-theme='dark'] .slash-command-item.selected {
    background: rgba(var(--pz-highlight-rgb), 0.08);
}

html[data-theme='dark'] .slash-command-item[data-command-id='cancel']:hover,
html[data-theme='dark'] .slash-command-item[data-command-id='cancel'].selected {
    background: rgba(248, 113, 113, 0.16);
}

html[data-theme='dark'] .slash-command-item.slash-command-disabled:hover,
html[data-theme='dark'] .slash-command-item.slash-command-disabled.selected {
    background: transparent;
}

html[data-theme='dark'] .slash-command-hint {
    color: var(--dm-text-muted);
}

html[data-theme='dark'] .slash-command-item .slash-command-label,
html[data-theme='dark'] .slash-command-label {
    color: var(--pz-text-inverse) !important;
}

html[data-theme='dark'] .slash-command-item[data-command-id='cancel'] .slash-command-label {
    color: var(--dm-danger) !important;
}

html[data-theme='dark'] .slash-command-icon:not([style*="color"]) {
    color: var(--dm-text-muted);
}

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

html[data-theme='dark'] .slash-date-picker-title,
html[data-theme='dark'] .slash-date-picker-day {
    color: var(--pz-text-inverse);
}

html[data-theme='dark'] .slash-date-picker-nav:hover,
html[data-theme='dark'] .slash-date-picker-day:hover {
    background: rgba(var(--pz-highlight-rgb), 0.08);
}

html[data-theme='dark'] .slash-date-picker-day.today {
    background: rgba(59, 130, 246, 0.25);
    color: var(--dm-accent);
}

html[data-theme='dark'] .slash-date-picker-day.selected,
html[data-theme='dark'] .slash-date-picker-day.selected:hover {
    background: var(--dm-accent);
    color: var(--pz-text-inverse);
}

html[data-theme='dark'] .slash-date-picker-today-btn {
    color: var(--dm-accent);
}

html[data-theme='dark'] .slash-date-picker-today-btn:hover {
    background: rgba(59, 130, 246, 0.15);
}

html[data-theme='dark'] .slash-date-picker-remove-btn {
    background: var(--dm-content-bg);
    border-color: var(--dm-danger-hover);
    color: var(--dm-danger);
}

html[data-theme='dark'] .slash-date-picker-remove-btn:hover {
    background: var(--dm-danger-soft);
    border-color: var(--dm-danger-hover);
}

html[data-theme='dark'] .slash-date-picker-remove-time-btn {
    background: var(--dm-surface);
    border-color: var(--dm-border);
    color: var(--dm-text-muted);
}

html[data-theme='dark'] .slash-date-picker-remove-time-btn:hover {
    border-color: var(--dm-accent);
    color: var(--dm-accent);
}

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

html[data-theme='dark'] .slash-date-picker-time-btn i {
    color: var(--dm-text);
}

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

html[data-theme='dark'] .slash-time-cell:hover {
    background: rgba(var(--pz-highlight-rgb), 0.08);
}

html[data-theme='dark'] .slash-time-cell.selected,
html[data-theme='dark'] .slash-time-cell.selected:hover {
    background: var(--dm-accent);
    color: var(--pz-text-inverse);
}

html[data-theme='dark'] .slash-date-picker-actions-row {
    border-top-color: var(--dm-border);
}

html[data-theme='dark'] .slash-date-picker-apply-btn {
    background: var(--dm-accent);
    color: var(--pz-text-inverse);
}

html[data-theme='dark'] .slash-date-picker-apply-btn:hover {
    background: var(--dm-accent);
}

html[data-theme='dark'] .slash-command-back {
    background-color: transparent !important;
}

html[data-theme='dark'] .slash-command-back:hover {
    background-color: rgba(var(--pz-highlight-rgb), 0.08) !important;
}

/* ============================================
   Image Context Menu
   ============================================ */

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

html[data-theme='dark'] .image-menu-item {
    color: var(--dm-text);
    border-bottom-color: var(--dm-border);
}

html[data-theme='dark'] .image-menu-item:hover {
    background-color: rgba(var(--pz-highlight-rgb), 0.08);
    color: var(--dm-text);
}

html[data-theme='dark'] .image-menu-item i {
    color: var(--dm-text-muted);
}

html[data-theme='dark'] .image-submenu {
    background: var(--dm-content-bg);
    border-color: var(--dm-border);
}

html[data-theme='dark'] .image-submenu-item {
    color: var(--dm-text);
    border-bottom-color: var(--dm-border);
}

html[data-theme='dark'] .image-submenu-item:hover {
    background-color: var(--dm-surface);
    color: var(--dm-accent-hover);
}

html[data-theme='dark'] .image-menu-item[data-action='delete-image'] i {
    color: var(--dm-danger-hover);
}

html[data-theme='dark'] img.img-with-border {
    border-color: var(--dm-border);
    background: var(--dm-content-bg);
}

html[data-theme='dark'] img.img-with-border-no-padding {
    border-color: var(--dm-border);
}

/* ============================================
   Workspace Menu
   ============================================ */

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

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

html[data-theme='dark'] .workspace-menu-item:hover {
    background-color: var(--dm-surface-hover);
}

html[data-theme='dark'] .workspace-menu-item.current-workspace {
    background-color: transparent;
    color: var(--dm-accent);
}

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

html[data-theme='dark'] .workspace-menu-item .workspace-menu-dot {
    border-color: rgba(var(--pz-highlight-rgb), 0.18);
}

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

html[data-theme='dark'] .workspace-menu-item.current-workspace i {
    color: var(--dm-accent);
}

html[data-theme='dark'] .workspace-menu-divider {
    background-color: var(--dm-border);
}

/* ============================================
   Folder & Note Actions Menus (light rules: css/folders/actions-menu.css)
   ============================================ */

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

html[data-theme='dark'] .folder-actions-toggle:hover,
html[data-theme='dark'] .note-actions-toggle:hover,
html[data-theme='dark'] .note-actions-toggle.open,
html[data-theme='dark'] .note-actions-item:hover {
    background: rgba(var(--pz-highlight-rgb), 0.12);
    color: var(--dm-text);
}

html[data-theme='dark'] .folder-actions-toggle:hover i,
html[data-theme='dark'] .folder-actions-toggle:hover [class*="lucide-"],
html[data-theme='dark'] .note-actions-toggle:hover i,
html[data-theme='dark'] .note-actions-toggle:hover [class*="lucide-"],
html[data-theme='dark'] .note-actions-item:hover i,
html[data-theme='dark'] .note-actions-item:hover [class*="lucide-"] {
    color: var(--dm-accent-hover);
}

/* Group separators of both menus (light rule in css/folders/actions-menu.css):
   the light grey would read as a hard line on the dark surface. */
html[data-theme='dark'] .folder-actions-menu-separator,
html[data-theme='dark'] .note-actions-menu-separator {
    background: var(--dm-border);
}

html[data-theme='dark'] .folder-actions-menu,
html[data-theme='dark'] .note-actions-menu {
    background: var(--dm-surface);
    border: 1px solid var(--dm-border);
    box-shadow: 0 8px 24px rgba(var(--pz-shadow-rgb), 0.35);
}

html[data-theme='dark'] .folder-actions-menu-item,
html[data-theme='dark'] .note-actions-menu-item {
    color: var(--dm-text);
}

html[data-theme='dark'] .folder-actions-menu-item:hover,
html[data-theme='dark'] .note-actions-menu-item:hover {
    background-color: var(--dm-surface-hover);
}

html[data-theme='dark'] .folder-actions-menu-item i,
html[data-theme='dark'] .note-actions-menu-item i {
    color: var(--dm-text);
}

html[data-theme='dark'] .folder-actions-menu-item:hover i,
html[data-theme='dark'] .note-actions-menu-item:hover i {
    color: var(--dm-text);
}

html[data-theme='dark'] .folder-actions-menu-item.danger,
html[data-theme='dark'] .note-actions-menu-item.danger {
    color: var(--dm-danger);
}

html[data-theme='dark'] .folder-actions-menu-item.danger:hover,
html[data-theme='dark'] .note-actions-menu-item.danger:hover {
    background-color: rgba(220, 38, 38, 0.15);
}

html[data-theme='dark'] .folder-actions-menu-item.danger i,
html[data-theme='dark'] .note-actions-menu-item.danger i {
    color: var(--dm-danger);
}

html[data-theme='dark'] .folder-actions-menu-item.shared,
html[data-theme='dark'] .note-actions-menu-item.shared {
    color: var(--dm-danger);
}

html[data-theme='dark'] .folder-actions-menu-item.shared:hover,
html[data-theme='dark'] .note-actions-menu-item.shared:hover {
    background-color: rgba(220, 38, 38, 0.15);
}

html[data-theme='dark'] .folder-actions-menu-item.shared i,
html[data-theme='dark'] .note-actions-menu-item.shared i {
    color: var(--dm-danger);
}

html[data-theme='dark'] .folder-actions-menu-separator,
html[data-theme='dark'] .note-actions-menu-separator {
    background: var(--dm-border);
}

/* ============================================
   Export Options & Mobile Toolbar
   ============================================ */

html[data-theme='dark'] .export-option {
    border-color: var(--dm-border);
    background-color: transparent;
}

html[data-theme='dark'] .export-option:hover {
    background-color: var(--dm-surface);
    border-color: var(--pz-accent);
}

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

html[data-theme='dark'] .export-option p {
    color: var(--dm-text-muted);
}

html[data-theme='dark'] .export-option i {
    color: var(--pz-accent);
}

/* Mobile toolbar dropdown menu */
html[data-theme='dark'] .note-edit-toolbar .mobile-toolbar-menu {
    background: var(--dm-content-bg);
    border: 1px solid var(--dm-border);
    box-shadow: 0 8px 24px rgba(var(--pz-shadow-rgb), 0.35);
}

html[data-theme='dark'] .note-edit-toolbar .dropdown-menu {
    background-color: var(--dm-content-bg);
    border-color: var(--dm-border);
}

html[data-theme='dark'] .note-edit-toolbar .mobile-toolbar-item {
    color: var(--dm-text);
    border-bottom: 1px solid var(--dm-border);
}

html[data-theme='dark'] .note-edit-toolbar .mobile-toolbar-item:hover {
    background-color: var(--dm-surface);
}

html[data-theme='dark'] .note-edit-toolbar .mobile-toolbar-item i {
    color: var(--dm-accent);
}

/* ============================================
   Generic Dropdown Menus
   ============================================ */

html[data-theme='dark'] .dropdown-menu {
    background-color: var(--dm-bg);
    border-color: var(--dm-border);
    box-shadow: 0 4px 16px rgba(var(--pz-shadow-rgb), 0.5);
}

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

html[data-theme='dark'] .dropdown-item:hover {
    background-color: var(--dm-surface);
}

html[data-theme='dark'] .dropdown-item i {
    color: var(--dm-text-muted);
}

html[data-theme='dark'] .dropdown-item:hover i {
    color: var(--dm-accent);
}

/* ============================================
   Emoji Autocomplete Menu
   ============================================ */

html[data-theme='dark'] .emoji-autocomplete-menu {
    background: var(--dm-surface);
    border-color: var(--dm-border);
}

html[data-theme='dark'] .emoji-autocomplete-item:hover,
html[data-theme='dark'] .emoji-autocomplete-item.selected {
    background: rgba(var(--pz-highlight-rgb), 0.08);
}

html[data-theme='dark'] .emoji-autocomplete-name {
    color: var(--pz-text-inverse);
}

/* Create menu: the same dropdown as .folder-actions-menu / .note-actions-menu
   above, kept in its own block rather than folded into those selector lists so
   this file stays easy to diff. */
html[data-theme='dark'] .create-menu {
    background: var(--dm-surface);
    border: 1px solid var(--dm-border);
    box-shadow: 0 8px 24px rgba(var(--pz-shadow-rgb), 0.35);
}

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

html[data-theme='dark'] .create-menu-item:hover {
    background-color: var(--dm-surface-hover);
}

html[data-theme='dark'] .create-menu-item i {
    color: var(--dm-text);
}

html[data-theme='dark'] .create-menu-item:hover i {
    color: var(--dm-text);
}

html[data-theme='dark'] .create-menu .create-section:not(:first-child) {
    border-top-color: var(--dm-border);
}

html[data-theme='dark'] .folder-actions-menu-item .actions-menu-shortcut,
html[data-theme='dark'] .note-actions-menu-item .actions-menu-shortcut {
    color: var(--dm-text-subtle);
}