/* Dark Theme */
:root.dark {
    --bg-color: #1c1c1e;
    --text-color: #f5f5f7;
    --text-secondary: #a1a1a6;
    --border-color: #38383c;
    --icon-bg: #2c2c2e;
    --dock-bg: rgba(40, 40, 45, 0.7);
    --window-bg: #28282c;
    --window-header: #38383c;
    --sidebar-bg: #28282c;
    --menu-bar-bg: #38383c;
    --context-menu-bg: rgba(50, 50, 55, 0.95);
    --hover-bg: rgba(255, 255, 255, 0.1);
    --highlight-bg: #0071e3;
}

body.dark-mode {
    background-image: url('../images/ux-dark.jpg');
    background-color: var(--bg-color);
    color: var(--text-color);
}

.dark .menu-bar {
    background-color: var(--menu-bar-bg);
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
}

.dark .dock {
    background-color: var(--dock-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark .dock-item .icon-wrapper {
    background-color: rgba(255, 255, 255, 0.05);
}

.dark .dock-item:hover .icon-wrapper {
    background-color: rgba(255, 255, 255, 0.1);
}

.dark .window {
    background-color: var(--window-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.dark .window-header {
    background-color: var(--window-header);
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
}

.dark .folder-window .sidebar {
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
}

.dark .folder-window .sidebar .hover\:bg-gray-200:hover {
    background-color: var(--hover-bg) !important;
}

.dark .folder-window .bg-blue-100 {
    background-color: var(--highlight-bg) !important;
    color: white !important;
}

.dark #custom-context-menu {
    background-color: var(--context-menu-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.dark .context-menu-divider {
    border-bottom: 1px solid var(--border-color);
}

.dark .context-menu-item:hover {
    background-color: var(--highlight-bg);
}

/* Safari specific dark mode styles - with increased specificity */
html.dark .safari-toolbar,
.dark-mode .safari-toolbar,
.dark .safari-toolbar {
    background-color: #333333 !important;
    border-color: #444444 !important;
}

html.dark .safari-address-bar,
.dark-mode .safari-address-bar,
.dark .safari-address-bar {
    background-color: #444444 !important;
    color: #e0e0e0 !important;
    border-color: #555555 !important;
}

html.dark .safari-bookmark-bar,
.dark-mode .safari-bookmark-bar,
.dark .safari-bookmark-bar {
    background-color: #333333 !important;
    border-color: #444444 !important;
}

html.dark .safari-bookmark,
.dark-mode .safari-bookmark,
.dark .safari-bookmark {
    color: #e0e0e0 !important;
}

html.dark .safari-bookmark:hover,
.dark-mode .safari-bookmark:hover,
.dark .safari-bookmark:hover {
    background-color: #444444 !important;
}

html.dark .safari-favorite-item,
.dark-mode .safari-favorite-item,
.dark .safari-favorite-item {
    color: #e0e0e0 !important;
}

.dark .safari-favorite-item {
    color: #e0e0e0;
}

.dark .iframe-overlay.dark-overlay {
    background-color: rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

/* Notification styling for dark mode - with increased specificity */
html.dark .notification,
.dark-mode .notification,
.dark .notification {
    background-color: #28282c !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
}

html.dark .notification .font-medium,
.dark-mode .notification .font-medium,
.dark .notification .font-medium {
    color: white !important;
}

html.dark .notification .text-gray-600,
.dark-mode .notification .text-gray-600,
.dark .notification .text-gray-600 {
    color: #a1a1a6 !important;
}

/* Finder dark mode - with increased specificity */
html.dark .folder-window,
.dark-mode .folder-window,
.dark .folder-window {
    background-color: #28282c !important;
}

html.dark .folder-window .sidebar,
.dark-mode .folder-window .sidebar,
.dark .folder-window .sidebar {
    background-color: #333333 !important;
    border-right: 1px solid #444444 !important;
}

html.dark .folder-window .flex-1,
.dark-mode .folder-window .flex-1,
.dark .folder-window .flex-1 {
    background-color: #28282c !important;
}

html.dark .folder-window .text-gray-600,
.dark-mode .folder-window .text-gray-600,
.dark .folder-window .text-gray-600 {
    color: #a1a1a6 !important;
}

html.dark .folder-window .text-center,
.dark-mode .folder-window .text-center,
.dark .folder-window .text-center {
    color: #e0e0e0 !important;
}

html.dark .folder-window .file-icon,
.dark-mode .folder-window .file-icon,
.dark .folder-window .file-icon {
    background-color: transparent !important;
}

html.dark .folder-window .file-icon:hover,
.dark-mode .folder-window .file-icon:hover,
.dark .folder-window .file-icon:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Photos app in dark mode */
.dark .mac-window {
    background-color: #28282c;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.dark .mac-title-bar {
    background: linear-gradient(to bottom, #333333, #2a2a2a);
    color: #e0e0e0;
    border-bottom: 1px solid #444444;
}

.dark .mac-window .bg-gray-100 {
    background-color: #333333;
}

.dark .mac-window .border-gray-300 {
    border-color: #444444;
}

.dark .mac-window .text-gray-700,
.dark .mac-window .text-gray-800 {
    color: #e0e0e0;
}

.dark .mac-window .text-gray-500,
.dark .mac-window .text-gray-600 {
    color: #a1a1a6;
}

.dark .mac-window .bg-white {
    background-color: #28282c;
}

.dark .mac-window .hover\:bg-gray-200:hover {
    background-color: #444444 !important;
}

.dark .mac-window .bg-white.bg-opacity-20 {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

.dark .mac-window .hover\:bg-opacity-30:hover {
    background-color: rgba(255, 255, 255, 0.3) !important;
}

.dark .context-menu {
    background-color: #333333;
    border: 1px solid #444444;
}

.dark .context-menu .context-menu-item {
    color: #e0e0e0;
}

.dark .context-menu .context-menu-item:hover {
    background-color: #444444;
}

.dark .context-menu .border-gray-200 {
    border-color: #444444;
}

/* Finder app dark mode */
.dark .file-icon .text-gray-600 {
    color: #a1a1a6 !important;
}

/* Legacy dark mode support */
body.dark-mode {
    background-color: #1c1c1e;
    color: #f5f5f7;
}

.dark-mode .menu-bar {
    background-color: #38383c;
    color: #f5f5f7;
}

.dark-mode .window {
    background-color: #28282c;
    border: 1px solid #38383c;
}

.dark-mode .window-header {
    background-color: #38383c;
    color: #f5f5f7;
}

.dark-mode .notification {
    background-color: #28282c;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Fix desktop icon text color in dark mode - with increased specificity */
html.dark .desktop-icon .icon-label,
.dark-mode .desktop-icon .icon-label,
.dark .desktop-icon .icon-label {
    background-color: rgba(0, 0, 0, 0.5) !important;
    color: white !important;
}