/* Dark Mode Styles for SoundCloud Tree View */

[data-theme="dark"] {
    --background-color: #121212;
    --surface-color: #1e1e1e;
    --text-color: #e8e8e8;
    --text-secondary: #a0a0a0;
    --text-muted: #707070;
    --border-color: #333333;
    --hover-color: #2a2a2a;
    --accent-color: #ff7722;
    --accent-hover: #ff5500;
    --info-bg: #1a3a5a;
    --error-bg: #5a1a1a;
    --input-bg: #2a2a2a;
    --button-secondary: #3a3a3a;
    --button-secondary-hover: #4a4a4a;
    --high-contrast-text: #ffffff;
    --low-contrast-text: #888888;
}

[data-theme="dark"] body {
    background-color: var(--background-color);
    color: var(--text-color);
}

[data-theme="dark"] .container {
    background-color: var(--background-color);
}

[data-theme="dark"] .tree-container,
[data-theme="dark"] .saved-trees {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] input[type="text"] {
    background-color: var(--input-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"] input[type="text"]:focus {
    border-color: var(--accent-color);
    outline-color: var(--accent-color);
}

[data-theme="dark"] .tree-node-content:hover {
    background-color: var(--hover-color);
}

[data-theme="dark"] .tree-item {
    background: var(--surface-color);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .tree-item:hover {
    background: var(--hover-color);
}

[data-theme="dark"] .tree-item.active {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

[data-theme="dark"] .info {
    background-color: var(--info-bg);
    color: var(--text-color);
}

[data-theme="dark"] .error {
    background-color: var(--error-bg);
    color: var(--text-color);
}

[data-theme="dark"] .user-info {
    background: var(--surface-color);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .tree-container-header {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .tree-title {
    color: var(--text-color);
}

[data-theme="dark"] .node-type-user .tree-node-label {
    color: var(--text-secondary);
}

[data-theme="dark"] .node-type-user_likes .tree-node-label,
[data-theme="dark"] .node-type-user_tracks .tree-node-label,
[data-theme="dark"] .node-type-track_likes .tree-node-label {
    color: var(--text-secondary);
}

[data-theme="dark"] .tree-node-expand {
    color: var(--text-secondary);
}

[data-theme="dark"] .update-tree-btn {
    background-color: var(--button-secondary);
    color: var(--text-color);
}

[data-theme="dark"] .update-tree-btn:hover {
    background-color: var(--button-secondary-hover);
}

[data-theme="dark"] .copy-canonical-btn, [data-theme="dark"] a.copy-canonical-btn {
    background-color: var(--button-secondary);
    color: var(--text-color);
}

[data-theme="dark"] .copy-canonical-btn:hover, [data-theme="dark"] a.copy-canonical-btn:hover {
    background-color: var(--button-secondary-hover);
    color: var(--text-color);
}

/* Theme switch dark mode adjustments */
[data-theme="dark"] .theme-icon {
    color: var(--text-secondary);
}

[data-theme="dark"] .theme-icon.sun-icon {
    color: #ffd700;
}

[data-theme="dark"] .theme-icon.moon-icon {
    color: #b19cd9;
}

[data-theme="dark"] .theme-switch-slider {
    background-color: #4a4a4a;
}

[data-theme="dark"] input:checked + .theme-switch-slider {
    background-color: var(--accent-color);
}

/* Dark mode settings panel */
[data-theme="dark"] .settings-modal {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .settings-content {
    background: var(--surface-color);
    color: var(--text-color);
}

[data-theme="dark"] .settings-header {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .settings-header h3 {
    color: var(--text-color);
}

[data-theme="dark"] .settings-close {
    color: var(--text-secondary);
}

[data-theme="dark"] .settings-close:hover {
    background-color: var(--hover-color);
    color: var(--text-color);
}

[data-theme="dark"] .setting-group label {
    color: var(--text-color);
}

[data-theme="dark"] .setting-group select {
    background: var(--input-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .settings-footer {
    background: var(--hover-color);
    border-top-color: var(--border-color);
}

[data-theme="dark"] .user-name {
    color: var(--high-contrast-text);
}

[data-theme="dark"] .user-name-container:hover .user-name {
    color: var(--accent-color);
}

[data-theme="dark"] .settings-icon {
    color: var(--text-secondary);
}

[data-theme="dark"] .user-name-container:hover .settings-icon {
    color: var(--accent-color);
}

/* Improved contrast for tree node elements */
[data-theme="dark"] .tree-node-label {
    color: var(--text-color);
}

[data-theme="dark"] .node-type-track .tree-node-label {
    color: var(--high-contrast-text);
    font-weight: 500;
}

[data-theme="dark"] .node-type-user .tree-node-label {
    color: var(--text-secondary);
}

[data-theme="dark"] .node-type-user_likes .tree-node-label,
[data-theme="dark"] .node-type-user_tracks .tree-node-label,
[data-theme="dark"] .node-type-track_likes .tree-node-label {
    color: var(--text-muted);
}

[data-theme="dark"] .load-more {
    color: var(--accent-color);
}

/* Better contrast for headers and titles */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3 {
    color: var(--high-contrast-text);
}

/* Better contrast for buttons */
[data-theme="dark"] .delete-tree-btn {
    background-color: #dc3545;
    color: var(--high-contrast-text);
}

[data-theme="dark"] .delete-tree-btn:hover {
    background-color: #c82333;
}

/* Better contrast for form elements */
[data-theme="dark"] .setting-group label {
    color: var(--text-color);
    font-weight: 500;
}

[data-theme="dark"] input[type="checkbox"] {
    filter: brightness(1.2) contrast(1.2);
}

/* Better contrast for messages */
[data-theme="dark"] .info {
    background-color: var(--info-bg);
    color: var(--high-contrast-text);
    border: 1px solid #3a5a7a;
}

[data-theme="dark"] .error {
    background-color: var(--error-bg);
    color: var(--high-contrast-text);
    border: 1px solid #7a3a3a;
}

/* Better contrast for preview pane */
[data-theme="dark"] .preview-pane {
    background: #1a1a1a;
    border-top-color: var(--accent-color);
}

[data-theme="dark"] .preview-title {
    color: var(--high-contrast-text);
}

[data-theme="dark"] .preview-artist {
    color: var(--text-secondary);
}

/* Ensure purchase links are visible */
[data-theme="dark"] .purchase-icon {
    opacity: 0.8;
    filter: brightness(1.2);
}

[data-theme="dark"] .purchase-icon:hover {
    opacity: 1;
}

/* Improve tree icon visibility */
[data-theme="dark"] .tree-icon {
    opacity: 0.6;
}

[data-theme="dark"] .tree-icon:hover {
    opacity: 1;
}

/* Better contrast for play button */
[data-theme="dark"] .play-button {
    color: var(--accent-color);
    filter: brightness(1.1);
}

[data-theme="dark"] .play-button:hover {
    color: var(--accent-hover);
}

/* UX Library Component Dark Mode Support */
[data-theme="dark"] mixed-headline {
    --modern-text: #ffffff;
    --modern-orange: #ff7722;
}

/* Ensure shadow DOM elements inherit theme variables */
[data-theme="dark"] mixed-headline::part(bold-text) {
    color: var(--high-contrast-text, #ffffff);
}

[data-theme="dark"] mixed-headline::part(light-text) {
    color: var(--accent-color, #ff7722);
}

/* Smooth transitions for theme switching */
body,
.tree-container,
.saved-trees,
.tree-item,
.tree-node-content,
input[type="text"],
.user-info,
.settings-content,
.settings-header,
.settings-footer,
.setting-group select,
mixed-headline {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Icon Legend Dark Mode */
[data-theme="dark"] .icon-legend {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .legend-header {
    color: var(--text-color);
}

[data-theme="dark"] .legend-header:hover {
    color: var(--accent-color);
}

[data-theme="dark"] .legend-header h3 {
    color: var(--text-color);
}

[data-theme="dark"] .legend-item {
    background: var(--hover-color);
}

[data-theme="dark"] .legend-item span {
    color: var(--text-secondary);
}

[data-theme="dark"] .legend-btn {
    background-color: #28a745;
    color: white;
}

[data-theme="dark"] .legend-btn:hover {
    background-color: #218838;
}

/* Subtitle text dark mode */
[data-theme="dark"] .subtitle-text {
    color: var(--text-secondary);
}

/* Expanded view dark mode */
[data-theme="dark"] .tree-node.expanded-view {
    background: var(--surface-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .album-art-container {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Fun buttons dark mode */
[data-theme="dark"] .fun-button {
    background: var(--surface-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .fun-button i {
    color: var(--text-secondary);
}

[data-theme="dark"] .fun-button:hover {
    border-color: var(--accent-color);
}

[data-theme="dark"] .fun-button:hover i {
    color: var(--accent-color);
}

[data-theme="dark"] .fun-button.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

[data-theme="dark"] .fun-button.active i {
    color: white;
}

/* Custom select dropdown dark mode */
[data-theme="dark"] .custom-select {
    background: var(--surface-color);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .custom-select:hover {
    border-color: var(--accent-color);
    box-shadow: 0 2px 4px rgba(255, 102, 0, 0.2);
}

[data-theme="dark"] .custom-select:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.2);
}

[data-theme="dark"] .select-arrow {
    color: var(--text-secondary);
}

[data-theme="dark"] .custom-select:focus + .select-arrow {
    color: var(--accent-color);
}