/* ============================================================
   Poznote — Dracula Theme
   Based on the actual Poznote source CSS variables
   Palette: https://draculatheme.com/contribute
   ============================================================
   Background:   #282a36
   Current Line: #44475a
   Foreground:   #f8f8f2
   Comment:      #6272a4
   Cyan:         #8be9fd
   Green:        #50fa7b
   Orange:       #ffb86c
   Pink:         #ff79c6
   Purple:       #bd93f9
   Red:          #ff5555
   Yellow:       #f1fa8c
   ============================================================ */

/* ============================================================
   Override ALL Poznote dark mode variables with Dracula palette
   This is the single source of truth — everything else flows
   from these variable overrides via Poznote's own CSS.
   ============================================================ */

html[data-theme='dark'],
body.dark-mode {
    /* Backgrounds */
    --dm-bg:              #282a36;
    --dm-content-bg:      #282a36;
    --dm-sidebar-bg:      #21222c;
    --dm-sidebar-surface: #2d2e3b;
    --dm-surface:         #2d2e3b;
    --dm-surface-hover:   #44475a;

    /* Text */
    --dm-text:            #f8f8f2;
    --dm-text-muted:      #6272a4;

    /* Borders */
    --dm-border:          #44475a;
    --dm-border-light:    #6272a4;

    /* Accent / Active */
    --dm-accent:          #bd93f9;
    --dm-active:          #44475a;

    /* Code */
    --dm-code-bg:         #21222c;

    /* Tab bar */
    --dm-tabbar-bg:       #191a21;
    --dm-tab-bg:          #21222c;
    --dm-tab-hover-bg:    #2d2e3b;
    --dm-tab-active-bg:   #44475a;
}

/* ============================================================
   Icon buttons — keep transparent (sidebar-plus, toolbar icons)
   ============================================================ */

html[data-theme='dark'] button.sidebar-plus,
body.dark-mode button.sidebar-plus,
html[data-theme='dark'] button[data-action],
body.dark-mode button[data-action] {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--dm-text-muted) !important;
}

html[data-theme='dark'] button.sidebar-plus:hover,
body.dark-mode button.sidebar-plus:hover,
html[data-theme='dark'] button[data-action]:hover,
body.dark-mode button[data-action]:hover {
    color: var(--dm-accent) !important;
}

/* ============================================================
   Accent color overrides — replace Poznote's blue #4a9eff / #5cb3e9
   with Dracula purple throughout
   ============================================================ */

html[data-theme='dark'] .sidebar-menu-btn,
body.dark-mode .sidebar-menu-btn {
    color: var(--dm-accent) !important;
}

html[data-theme='dark'] .sidebar-menu-btn:hover,
body.dark-mode .sidebar-menu-btn:hover {
    background: rgba(189, 147, 249, 0.1) !important;
}

html[data-theme='dark'] .sidebar-menu-item:hover,
body.dark-mode .sidebar-menu-item:hover {
    background: rgba(189, 147, 249, 0.1) !important;
    color: var(--dm-accent) !important;
}

html[data-theme='dark'] .sidebar-menu-item i,
body.dark-mode .sidebar-menu-item i {
    color: var(--dm-accent) !important;
}

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

html[data-theme='dark'] .links_arbo_left.active,
body.dark-mode .links_arbo_left.active {
    border-left-color: var(--dm-accent) !important;
}

html[data-theme='dark'] .searchbar-date-toggle:hover,
html[data-theme='dark'] .searchbar-date-toggle.active,
body.dark-mode .searchbar-date-toggle:hover,
body.dark-mode .searchbar-date-toggle.active,
html[data-theme='dark'] .searchbar-options-toggle:hover,
body.dark-mode .searchbar-options-toggle:hover,
html[data-theme='dark'] .searchbar-options-toggle.active,
body.dark-mode .searchbar-options-toggle.active,
html[data-theme='dark'] .searchbar-type-btn:hover,
body.dark-mode .searchbar-type-btn:hover,
html[data-theme='dark'] .searchbar-type-btn.active,
body.dark-mode .searchbar-type-btn.active {
    color: var(--dm-accent) !important;
}

html[data-theme='dark'] .searchbar-type-btn.active i,
body.dark-mode .searchbar-type-btn.active i,
html[data-theme='dark'] .searchbar-type-btn.active i::before,
body.dark-mode .searchbar-type-btn.active i::before {
    color: var(--dm-accent) !important;
}

html[data-theme='dark'] .toggle-sidebar-btn:hover,
body.dark-mode .toggle-sidebar-btn:hover {
    color: var(--dm-accent) !important;
}

html[data-theme='dark'] .clickable-tag,
body.dark-mode .clickable-tag,
html[data-theme='dark'] .clickable-tag:visited,
body.dark-mode .clickable-tag:visited {
    color: var(--dm-accent) !important;
}

html[data-theme='dark'] .clickable-tag:hover,
body.dark-mode .clickable-tag:hover {
    color: #cfa9ff !important;
}

html[data-theme='dark'] a,
body.dark-mode a {
    color: var(--dm-accent) !important;
}

html[data-theme='dark'] a:hover,
body.dark-mode a:hover {
    color: #ff79c6 !important;
}

html[data-theme='dark'] .back-link,
body.dark-mode .back-link {
    color: var(--dm-accent) !important;
}

/* ============================================================
   Primary button — Dracula purple instead of Poznote blue
   ============================================================ */

html[data-theme='dark'] .btn-primary,
body.dark-mode .btn-primary {
    background-color: #bd93f9 !important;
    border-color: #bd93f9 !important;
    color: #282a36 !important;
}

html[data-theme='dark'] .btn-primary:hover,
body.dark-mode .btn-primary:hover {
    background-color: #ff79c6 !important;
    border-color: #ff79c6 !important;
    color: #282a36 !important;
}

/* ============================================================
   Notification accent — purple instead of blue
   ============================================================ */

html[data-theme='dark'] #notificationPopup.notification-warning,
body.dark-mode #notificationPopup.notification-warning {
    color: var(--dm-accent) !important;
    border-color: var(--dm-accent) !important;
    box-shadow: 0 4px 16px rgba(189, 147, 249, 0.2) !important;
}

/* ============================================================
   Success — Dracula green
   ============================================================ */

html[data-theme='dark'] .alert-success,
body.dark-mode .alert-success {
    background-color: #1a3a1a !important;
    color: #50fa7b !important;
    border-color: #50fa7b !important;
}

html[data-theme='dark'] #notificationPopup.notification-success,
body.dark-mode #notificationPopup.notification-success {
    color: #50fa7b !important;
    border-color: #50fa7b !important;
    box-shadow: 0 4px 16px rgba(80, 250, 123, 0.2) !important;
}

html[data-theme='dark'] .setting-status.enabled,
body.dark-mode .setting-status.enabled {
    background-color: #1a3a1a !important;
    color: #50fa7b !important;
}

/* ============================================================
   Danger — Dracula red
   ============================================================ */

html[data-theme='dark'] .alert-danger,
html[data-theme='dark'] .alert-error,
body.dark-mode .alert-danger,
body.dark-mode .alert-error {
    background-color: #3a1a1a !important;
    color: #ff5555 !important;
    border-color: #ff5555 !important;
}

html[data-theme='dark'] #notificationPopup.notification-error,
body.dark-mode #notificationPopup.notification-error {
    color: #ff5555 !important;
    border-color: #ff5555 !important;
    box-shadow: 0 4px 16px rgba(255, 85, 85, 0.2) !important;
}

html[data-theme='dark'] .setting-status.disabled,
body.dark-mode .setting-status.disabled {
    background-color: #3a1a1a !important;
    color: #ff5555 !important;
}

html[data-theme='dark'] .tag-delete-button:hover,
body.dark-mode .tag-delete-button:hover {
    color: #ff5555 !important;
}

html[data-theme='dark'] .task-delete-btn:hover i,
body.dark-mode .task-delete-btn:hover i {
    color: #ff5555 !important;
}

/* ============================================================
   Task important — Dracula orange/red
   ============================================================ */

html[data-theme='dark'] .task-important-btn.is-favorite i,
body.dark-mode .task-important-btn.is-favorite i {
    color: #ff79c6 !important;
}

html[data-theme='dark'] .task-item.important,
body.dark-mode .task-item.important {
    border-color: #ff5555 !important;
    background: #3a1a1a !important;
}

html[data-theme='dark'] .task-item.important .task-text,
body.dark-mode .task-item.important .task-text {
    color: #ff5555 !important;
}

/* ============================================================
   Tag highlight — Dracula yellow
   ============================================================ */

html[data-theme='dark'] .clickable-tag-wrapper.tag-highlight,
body.dark-mode .clickable-tag-wrapper.tag-highlight {
    background: #3a3a00 !important;
}

html[data-theme='dark'] .clickable-tag-wrapper.tag-highlight .clickable-tag,
body.dark-mode .clickable-tag-wrapper.tag-highlight .clickable-tag {
    color: #f1fa8c !important;
}

/* ============================================================
   Table picker / form inputs accent
   ============================================================ */

html[data-theme='dark'] .table-picker-cell:hover,
body.dark-mode .table-picker-cell:hover {
    border-color: var(--dm-accent) !important;
}

html[data-theme='dark'] .table-picker-cell.highlighted,
body.dark-mode .table-picker-cell.highlighted {
    background-color: var(--dm-active) !important;
    border-color: var(--dm-accent) !important;
}

html[data-theme='dark'] .table-picker-input-field:focus,
body.dark-mode .table-picker-input-field:focus {
    border-color: var(--dm-accent) !important;
    box-shadow: 0 0 0 2px rgba(189, 147, 249, 0.15) !important;
}

html[data-theme='dark'] .table-picker-insert-btn,
body.dark-mode .table-picker-insert-btn {
    background: var(--dm-accent) !important;
    color: #282a36 !important;
}

html[data-theme='dark'] .table-picker-insert-btn:hover,
body.dark-mode .table-picker-insert-btn:hover {
    background: #ff79c6 !important;
}

html[data-theme='dark'] .form-group input:focus,
body.dark-mode .form-group input:focus {
    border-color: var(--dm-accent) !important;
}

html[data-theme='dark'] .task-edit-input,
body.dark-mode .task-edit-input {
    border-color: var(--dm-accent) !important;
}

/* ============================================================
   Tag suggestion highlight
   ============================================================ */

html[data-theme='dark'] .tag-suggestion-item.highlighted,
body.dark-mode .tag-suggestion-item.highlighted {
    background-color: var(--dm-accent) !important;
    color: #282a36 !important;
}

/* ============================================================
   Scrollbar — Dracula palette
   ============================================================ */

html[data-theme='dark'] ::-webkit-scrollbar,
body.dark-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html[data-theme='dark'] ::-webkit-scrollbar-track,
body.dark-mode ::-webkit-scrollbar-track {
    background: #282a36;
}

html[data-theme='dark'] ::-webkit-scrollbar-thumb,
body.dark-mode ::-webkit-scrollbar-thumb {
    background: #44475a;
    border-radius: 4px;
}

html[data-theme='dark'] ::-webkit-scrollbar-thumb:hover,
body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #6272a4;
}

/* ============================================================
   Selection
   ============================================================ */

::selection {
    background-color: #44475a !important;
    color: #f8f8f2 !important;
}