/* ============================================
   Dark Mode - Pages
   (Settings, Info, Login, Workspaces, Trash,
    Backup/Export, Shared, Public Note)
   ============================================ */

/* ============================================
   Settings
   ============================================ */

html[data-theme='dark'] .settings-container {
    background-color: var(--dm-content-bg);
    color: var(--dm-text);
}

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

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

/* Workspace chip: a raised surface on the dark ground, like its menu below. */
html[data-theme='dark'] .poznote-page-title-workspace {
    background: var(--dm-surface-hover);
    border-color: var(--dm-border-light);
    color: var(--dm-text);
}

html[data-theme='dark'] .poznote-page-title-workspace:hover,
html[data-theme='dark'] .poznote-page-title-workspace[aria-expanded="true"] {
    background: rgba(var(--pz-accent-rgb), 0.2);
    border-color: var(--dm-accent);
    color: var(--dm-accent);
}

html[data-theme='dark'] .poznote-page-title-workspace-static:hover {
    background: var(--dm-surface-hover);
    border-color: var(--dm-border-light);
    color: var(--dm-text);
}

/* Its workspace menu: a floating surface, like the rail's overflow menu. */
html[data-theme='dark'] .poznote-page-title-workspace-menu {
    background: var(--dm-surface);
    border-color: var(--dm-border);
    box-shadow: 0 6px 20px rgba(var(--pz-shadow-rgb), 0.5);
}

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

html[data-theme='dark'] .poznote-page-title-workspace-item:hover,
html[data-theme='dark'] .poznote-page-title-workspace-item:focus-visible {
    background: var(--dm-surface-hover);
    color: var(--dm-accent);
}

html[data-theme='dark'] .poznote-page-title-workspace-item .lucide-check {
    color: var(--dm-accent);
}

html[data-theme='dark'] .poznote-page-title-workspace-item-manage .lucide,
html[data-theme='dark'] .poznote-page-title-workspace-item-action .lucide {
    color: inherit;
}

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

html[data-theme='dark'] .poznote-page-title-workspace-dot-none {
    border-color: transparent;
}

html[data-theme='dark'] .poznote-page-title-workspace-menu-sep {
    background: var(--dm-border);
}

html[data-theme='dark'] .settings-current-user-badge {
    background: var(--dm-surface-hover);
    color: var(--dm-text);
}

html[data-theme='dark'] .settings-current-user-badge i {
    color: var(--dm-text);
}

html[data-theme='dark'] .poznote-back-to-note-btn,
html[data-theme='dark'] .poznote-back-btn {
    background-color: var(--dm-content-bg);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

html[data-theme='dark'] .poznote-back-to-note-btn:hover,
html[data-theme='dark'] .poznote-back-btn:hover {
    background-color: var(--dm-surface-hover);
    color: var(--dm-text);
}

html[data-theme='dark'] .settings-container h1 {
    color: var(--dm-text);
    border-bottom: 1px solid var(--dm-border);
    padding-bottom: 12px;
    margin-bottom: 16px;
}

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

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

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

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

html[data-theme='dark'] .settings-section h3 {
    color: var(--dm-text);
    border-bottom-color: var(--dm-accent);
}

/* The neutral buttons of a settings section only. At (0,3,1) this used to beat
   html[data-theme='dark'] .btn-primary at (0,2,1), so a filled button got this
   grey label on its accent fill: contrast 2.44, below WCAG AA, on the Create
   and Save buttons of the workspaces and settings pages. A filled variant
   carries its own label colour. */
html[data-theme='dark'] .settings-section .btn:not(.btn-primary):not(.btn-danger):not(.btn-success) {
    color: var(--dm-border);
}

html[data-theme='dark'] .settings-section .btn:enabled:not(.btn-primary):not(.btn-danger):not(.btn-success) {
    color: var(--dm-text);
}

/* ============================================
   Info Page
   ============================================ */

html[data-theme='dark'] .info-label {
    background-color: var(--dm-content-bg);
    color: var(--dm-text);
}

html[data-theme='dark'] .info-value {
    background-color: var(--dm-content-bg);
    color: var(--dm-text);
}

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

/* ============================================
   Login Page
   ============================================ */

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

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

/* ============================================
   Workspaces Page
   ============================================ */

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

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

html[data-theme='dark'] .workspace-list ul li {
    border-bottom-color: var(--dm-border);
}

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

html[data-theme='dark'] .action-btn:hover {
    background-color: var(--dm-border);
    border-color: var(--dm-border-light);
}

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

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

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

html[data-theme='dark'] #defaultWorkspaceStatus {
    color: var(--dm-success);
}

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

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

/* ============================================
   Trash Page
   ============================================ */

html[data-theme='dark'] .trash-container {
    background-color: var(--dm-content-bg);
    color: var(--dm-text);
}

html[data-theme='dark'] .trash-innernote {
    background-color: var(--dm-content-bg);
    color: var(--dm-text);
}

html[data-theme='dark'] .trash-sort-toggle {
    background-color: var(--dm-bg);
    border-color: var(--dm-border);
}

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

html[data-theme='dark'] .trash-sort-option.is-active {
    background-color: var(--dm-surface);
    color: var(--dm-accent);
    box-shadow: none;
}

html[data-theme='dark'] .trash-sort-option:hover {
    color: var(--dm-accent);
}

/* ============================================
   Attachments
   ============================================ */

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

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

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

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

html[data-theme='dark'] .selected-filename {
    background: var(--dm-accent-soft);
    border-color: var(--dm-accent);
    color: var(--dm-accent-hover);
}

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

html[data-theme='dark'] .attachment-link {
    color: var(--dm-accent);
    border-color: var(--dm-border);
}

html[data-theme='dark'] .attachment-link:hover {
    color: var(--dm-accent-hover);
    border-color: var(--dm-border-light);
}

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

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

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

html[data-theme='dark'] .error-message {
    background: var(--dm-surface);
    border-color: var(--dm-danger-soft);
    color: var(--dm-danger);
}

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

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

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

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

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

/* ============================================
   Backup / Export Page
   ============================================ */

html[data-theme='dark'] .backup-container {
    background-color: var(--dm-content-bg);
    color: var(--dm-text);
}

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

html[data-theme='dark'] .backup-section h3 {
    border-color: var(--dm-border);
    color: var(--dm-text);
}

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

html[data-theme='dark'] .backup-section .form-text,
html[data-theme='dark'] .backup-section .text-muted,
html[data-theme='dark'] .backup-section small {
    color: var(--dm-text) !important;
}

html[data-theme='dark'] .backup-section select {
    background-color: var(--dm-surface);
    color: var(--dm-text);
    border-color: var(--dm-border-light);
}

html[data-theme='dark'] .form-select-styled {
    background-color: var(--dm-surface);
    color: var(--dm-text);
    border-color: var(--dm-border-light);
}

html[data-theme='dark'] .form-select-styled:focus {
    border-color: var(--dm-accent);
    box-shadow: 0 0 0 3px rgba(var(--dm-accent-rgb), 0.2);
}

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

html[data-theme='dark'] .form-file-input:hover {
    border-color: var(--dm-accent);
    background-color: #1e3a4a;
}

html[data-theme='dark'] .backup-section select option {
    background-color: var(--dm-surface);
    color: var(--dm-text);
}

html[data-theme='dark'] .backup-section input[type="file"] {
    background-color: var(--dm-surface);
    color: var(--dm-text);
    border-color: var(--dm-border-light);
}

html[data-theme='dark'] .backup-section input[type="file"]::file-selector-button {
    background-color: var(--dm-border);
    color: var(--dm-text);
    border: 1px solid var(--dm-border-light);
    padding: 6px 12px;
    border-radius: var(--pz-radius-sm);
    cursor: pointer;
}

html[data-theme='dark'] .backup-section input[type="file"]::file-selector-button:hover {
    background-color: var(--dm-surface-raised);
}

/* Card containers (backup/export) */
html[data-theme='dark'] .card-container {
    background-color: var(--dm-content-bg);
    border-color: var(--dm-border);
    box-shadow: 0 2px 8px rgba(var(--pz-shadow-rgb), 0.3);
}

html[data-theme='dark'] .card-container:hover {
    box-shadow: 0 4px 16px rgba(var(--pz-shadow-rgb), 0.4);
    border-color: var(--pz-accent);
}

html[data-theme='dark'] .card-header {
    background: linear-gradient(135deg, var(--dm-surface) 0%, var(--dm-bg) 100%);
    border-bottom-color: var(--dm-border);
}

html[data-theme='dark'] .card-header:hover {
    background: linear-gradient(135deg, var(--dm-surface) 0%, var(--dm-surface) 100%);
}

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

html[data-theme='dark'] .card-header h3 i.card-icon {
    color: var(--dm-accent);
}

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

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

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

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

html[data-theme='dark'] .sub-card-header {
    background-color: transparent;
}

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

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

html[data-theme='dark'] .sub-card h4 i.chevron {
    color: var(--dm-text);
}

/* ============================================
   Shared Page
   ============================================ */

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

html[data-theme='dark'] .filter-input:focus {
    border-color: var(--pz-accent);
    box-shadow: 0 0 0 3px rgba(var(--pz-accent-rgb), 0.2);
}

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

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

html[data-theme='dark'] .clear-filter-btn:hover {
    background-color: var(--dm-surface);
    color: var(--dm-text);
}

html[data-theme='dark'] .filter-stats {
    background-color: rgba(var(--pz-accent-rgb), 0.2);
    color: var(--dm-accent-hover);
}

/* ============================================
   Public Note
   ============================================ */

/* Inline code only - don't override Highlight.js */
html[data-theme='dark'] .public-note .content code:not([class*="hljs"]):not([class*="language-"]) {
    background-color: var(--dm-surface);
    color: var(--dm-text);
}

html[data-theme='dark'] .public-note .content pre code:not([class*="hljs"]):not([class*="language-"]) {
    background-color: transparent !important;
    color: var(--dm-text-muted) !important;
}

html[data-theme='dark'] .public-note .content pre {
    background-color: transparent !important;
    border-color: var(--dm-border);
}

html[data-theme='dark'] .public-note .content pre code {
    background-color: transparent !important;
}

/* Important task styling for public view in dark mode */
html[data-theme='dark'] .public-note .content .task-item.important {
    border-color: var(--dm-danger-hover);
    background: var(--dm-content-bg);
}

html[data-theme='dark'] .public-note .content .task-item.important .task-text {
    color: var(--dm-danger);
    font-weight: var(--pz-weight-semibold);
}

/* ============================================
   Folder Icon Modal
   ============================================ */

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

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

html[data-theme='dark'] .folder-icon-grid.folder-icon-recent-grid {
    background: none;
    border: none;
}

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

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

html[data-theme='dark'] .folder-icon-item.selected {
    background: var(--dm-accent-soft);
    border-color: var(--dm-accent);
}

html[data-theme='dark'] .folder-icon-modal-content .modal-buttons .btn-secondary {
    background: #4b5563;
    color: var(--dm-text);
}

html[data-theme='dark'] .folder-icon-modal-content .modal-buttons .btn-secondary:hover {
    background: var(--dm-neutral-hover);
}

html[data-theme='dark'] .folder-icon-grid::-webkit-scrollbar-track {
    background: var(--dm-surface);
}

html[data-theme='dark'] .folder-icon-grid::-webkit-scrollbar-thumb {
    background: #4b5563;
}

html[data-theme='dark'] .folder-icon-grid::-webkit-scrollbar-thumb:hover {
    background: var(--dm-neutral-hover);
}

/* ============================================
   Folder Color Picker
   ============================================ */

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

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

html[data-theme='dark'] .folder-color-option:hover .folder-color-swatch {
    border-color: var(--dm-accent);
}

html[data-theme='dark'] .folder-color-option.selected .folder-color-swatch {
    border-color: var(--dm-accent);
}

html[data-theme='dark'] .folder-color-default {
    background: linear-gradient(135deg, var(--dm-border) 25%, transparent 25%, transparent 75%, var(--dm-border) 75%, var(--dm-border)),
        linear-gradient(135deg, var(--dm-border) 25%, var(--dm-bg) 25%, var(--dm-bg) 75%, var(--dm-border) 75%, var(--dm-border));
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;
}