/* Dark theme (default) */
body { background: #1a1a1a !important; color: #ffffff !important; }
.chrome-titlebar { background: transparent !important; border-bottom: none !important; }
.tab-bar { background: transparent !important; border-bottom: none !important; }
.tab { background: var(--ui-bg) !important; border: 1px solid var(--ui-border) !important; backdrop-filter: blur(12px) !important; }
.tab:hover { background: rgba(255, 255, 255, 0.14) !important; background-image: none !important; border-color: rgba(255,255,255,0.22) !important; transform: none !important; }
.tab.active { background: rgba(73, 0, 194, 0.85) !important; border-color: rgba(73, 0, 194, 0.65) !important; }
.tab.grouped,
.tab.grouped:hover,
.tab.grouped.active {
    border: 1px solid var(--tab-group-color, #4285f4) !important;
    background: color-mix(in srgb, var(--tab-group-color, #4285f4) 28%, #1c1c1c) !important;
    background-color: color-mix(in srgb, var(--tab-group-color, #4285f4) 28%, #1c1c1c) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: none !important;
    box-shadow: none !important;
}
.top-bar { border-bottom: none !important; }
.address-bar-container { background: var(--ui-bg) !important; border: 1px solid var(--ui-border) !important; backdrop-filter: blur(12px) !important; }
.status-bar { background: transparent !important; border-top: none !important; }
.web-content { background: #1a1a1a !important; }

.bookmarks-bar,
[data-theme="dark"] .bookmarks-bar,
html[data-theme="dark"] .bookmarks-bar,
html.theme-dark .bookmarks-bar,
html[data-theme="dark"] body > #bookmarks-bar,
html.theme-dark body > #bookmarks-bar,
body[data-theme="dark"] > #bookmarks-bar {
    background: var(--chrome-surface, #111111) !important;
    background-color: var(--chrome-surface, #111111) !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.bookmark-bar-chip,
.bookmarks-bar-pin,
[data-theme="dark"] .bookmark-bar-chip,
[data-theme="dark"] .bookmarks-bar-pin {
    background: var(--ui-bg) !important;
    border: 1px solid var(--ui-border) !important;
    color: var(--ui-text) !important;
    backdrop-filter: blur(12px) !important;
}
.bookmark-bar-chip:hover,
.bookmarks-bar-pin:hover,
[data-theme="dark"] .bookmark-bar-chip:hover,
[data-theme="dark"] .bookmarks-bar-pin:hover {
    background: var(--ui-bg-hover) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Volume control theme variables */
:root {
    --volume-circle-fill: #404040;
    --volume-circle-stroke: #555;
}

/* Settings page defaults are already dark in settings.css */

/* Add comprehensive overrides mirroring light theme structure */

/* Main UI elements */
[data-theme="dark"] body { 
    background: linear-gradient(135deg, #1a1a1a 0%, #111111 25%, #0a0a0a 50%, #000000 100%) !important; 
    color: #ffffff !important; 
}

.chrome-titlebar { 
    background: linear-gradient(90deg, #1a1a1a 0%, #111111 25%, #0a0a0a 50%, #000000 100%) !important; 
    border-bottom: 1px solid #404040 !important; 
}
.title-text { color: #ffffff; font-weight: 600; }

.tab-bar { 
    background: linear-gradient(90deg, #111111 0%, #0a0a0a 25%, #000000 50%, #000000 100%) !important; 
    border-bottom: 1px solid #404040 !important; 
}

.tab { 
    background: linear-gradient(135deg, #1a1a1a 0%, #111111 100%) !important; 
    border: 1px solid #404040 !important; 
    color: #ffffff !important;
}
.tab:hover { 
    background: rgba(255, 255, 255, 0.14) !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    transform: none !important;
}
.tab.active { 
    background: rgba(73, 0, 194, 0.85) !important;
    border-color: rgba(73, 0, 194, 0.65) !important; 
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(73, 0, 194, 0.25);
}
.tab.grouped,
.tab.grouped:hover,
.tab.grouped.active {
    border: 1px solid var(--tab-group-color, #4285f4) !important;
    background: color-mix(in srgb, var(--tab-group-color, #4285f4) 28%, #1c1c1c) !important;
    background-color: color-mix(in srgb, var(--tab-group-color, #4285f4) 28%, #1c1c1c) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: none !important;
    box-shadow: none !important;
}
.tab-title { color: #ffffff; font-weight: 500; }

.top-bar { 
    background: linear-gradient(90deg, #111111 0%, #0a0a0a 25%, #000000 50%, #000000 100%); 
    border-bottom: 1px solid #404040; 
}

.nav-btn {
    background: linear-gradient(135deg, #1a1a1a 0%, #111111 100%);
    border: 1px solid #404040;
    color: #ffffff;
}
.nav-btn:hover {
    background: linear-gradient(135deg, #222222 0%, #1a1a1a 100%);
    border-color: #7c3aed;
    color: #ffffff;
    transform: none;
}

.address-bar-container { 
    background: linear-gradient(135deg, #1a1a1a 0%, #111111 50%, #0a0a0a 100%); 
    border: 1px solid #404040; 
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.address-bar-container:focus-within { 
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 0 0 2px rgba(124,58,237,0.2); 
}
#address-bar { color: #ffffff; }

.menu-dropdown { 
    background: rgba(26, 26, 26, 0.55); 
    border: 1px solid #404040; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
}
.menu-dropdown button { 
    color: #ffffff; 
    background: transparent;
}
.menu-dropdown button:hover { 
    background: linear-gradient(135deg, #222222 0%, #1a1a1a 100%); 
    color: #ffffff;
}

.menu-separator { background: #404040; }

.status-bar { 
    background: linear-gradient(135deg, #111111 0%, #0a0a0a 25%, #000000 50%, #000000 100%); 
    border-top: 1px solid #404040;
}

/* Status bar buttons */
.status-item .nav-btn {
    background: linear-gradient(135deg, #1a1a1a 0%, #111111 100%);
    border: 1px solid #404040;
    color: #ffffff;
}
.status-item .nav-btn:hover {
    background: linear-gradient(135deg, #222222 0%, #1a1a1a 100%);
    border-color: #505050;
    transform: none;
}

/* 3-dot menu button */
#menu-btn {
    background: linear-gradient(135deg, #1a1a1a 0%, #111111 100%);
    border: 1px solid #404040;
    color: #ffffff;
    border-radius: 4px;
    padding: 6px 8px;
}
#menu-btn:hover {
    background: linear-gradient(135deg, #222222 0%, #1a1a1a 100%);
    border-color: #7c3aed;
    color: #ffffff;
    transform: none;
}

/* New tab button */
.new-tab-btn, #new-tab-btn-dynamic {
    background: linear-gradient(135deg, #1a1a1a 0%, #111111 100%);
    border: 1px solid #404040;
    color: #ffffff;
    font-weight: 500;
    flex-shrink: 0;
}
.new-tab-btn:hover, #new-tab-btn-dynamic:hover {
    background: linear-gradient(135deg, #222222 0%, #1a1a1a 100%);
    border-color: #7c3aed;
    color: #ffffff;
    transform: none;
}

/* Window controls */
.control-btn {
    background: linear-gradient(135deg, #1a1a1a 0%, #111111 100%);
    border: 1px solid #404040;
    color: #ffffff;
}
.control-btn:hover {
    background: linear-gradient(135deg, #222222 0%, #1a1a1a 100%);
    border-color: #505050;
    color: #ffffff;
}
.control-btn.close {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-color: #b91c1c;
    color: #ffffff;
}
.control-btn.close:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    border-color: #991b1b;
    color: #ffffff;
}

.web-content { 
    background: linear-gradient(135deg, #1a1a1a 0%, #111111 25%, #0a0a0a 75%, #000000 100%); 
}

/* Settings page overrides */
.settings-container { 
    background: linear-gradient(135deg, #1a1a1a 0%, #111111 25%, #0a0a0a 50%, #000000 100%) !important;
    color: #ffffff !important; 
}
.settings-nav { 
    background: #161616 !important; 
    border-right-color: rgba(255,255,255,0.1) !important; 
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.settings-content { 
    background: #0a0a0a !important;
    color: #ffffff !important; 
}
.page-header h2 {
    color: #e4e4e7 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #e4e4e7 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-variant: normal;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.page-header p {
    color: #a1a1aa !important;
    font-size: 11px !important;
}
/* Fix all text elements in settings */
.settings-page h2,
.settings-page h3,
.settings-page label,
.settings-page span,
.settings-page p {
    color: #ffffff !important;
}
.setting-description {
    color: #a1a1aa !important;
}
.nav-header h1 {
    font-size: 12px;
    font-weight: 600;
    font-variant: normal;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #c4b5fd;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: #c4b5fd;
}
.nav-item { color: #a1a1aa; }
.nav-item:hover {
    background: rgba(73, 0, 194, 0.18);
    color: #ffffff;
}
.nav-item.active {
    background: rgba(73, 0, 194, 0.85);
    border-color: rgba(73, 0, 194, 0.65);
    box-shadow: 0 2px 8px rgba(73, 0, 194, 0.25);
}
.nav-divider { background: rgba(255,255,255,0.1); }
.settings-section {
    background: #141414 !important;
    border-color: rgba(255,255,255,0.1);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 12px 14px;
    margin-bottom: 12px;
    border-radius: 5px;
}
.settings-section h3 {
    font-size: 11px !important;
    font-weight: 600 !important;
    font-variant: normal;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px !important;
    color: #4900c2 !important;
}
.setting-info label {
    color: #ffffff !important;
    font-weight: 500;
    font-size: 12px !important;
}
.setting-description {
    color: #a1a1aa !important;
    font-size: 11px !important;
}
.setting-input { 
    color: #ffffff; 
    background: linear-gradient(135deg, #1a1a1a 0%, #111111 100%); 
    border-color: rgba(255,255,255,0.1); 
}
.setting-input:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 2px rgba(124,58,237,0.2);
}
.toggle { 
    background: #2a2a35;
    border: 1px solid rgba(255,255,255,0.12);
}
.toggle::before {
    background: #1a1a22;
}
.toggle-input:checked + .toggle::before {
    background: #14141c;
}
.toggle-text { color: #ffffff; }
.btn-secondary { 
    color: #ffffff; 
    background: linear-gradient(135deg, #1a1a1a 0%, #111111 100%);
    border-color: rgba(255,255,255,0.15); 
}
.btn-secondary:hover {
    background: linear-gradient(135deg, #222222 0%, #1a1a1a 100%);
    border-color: #7c3aed;
    color: #ffffff;
    transform: translateY(-1px);
}
.warning-banner { 
    color: #000000; 
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
.setting-note { 
    color: #a1a1aa; 
    background: linear-gradient(135deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 100%); 
    border-left-color: #7c3aed; 
}
.theme-option { 
    color: #a1a1aa; 
    background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.2) 100%); 
    border-color: rgba(255,255,255,0.1); 
}
.theme-option:hover {
    background: linear-gradient(135deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.3) 100%);
    border-color: #7c3aed;
    color: #ffffff;
    transform: translateY(-2px);
}
.theme-option.active {
    border-color: #7c3aed;
    background: linear-gradient(135deg, #222222 0%, #1a1a1a 100%);
    color: #ffffff;
}

/* Dropdown/Select styling for dark theme */
select.setting-input {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    /* background-image inherited from settings.css unified rule */
}
select.setting-input:hover {
    border-color: rgba(124, 58, 237, 0.5) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}
select.setting-input:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2) !important;
}
select.setting-input option {
    background: #2a2a3a !important;
    color: #ffffff !important;
}
select.setting-input option:hover {
    background: #3a3a4a !important;
}
select.setting-input option:checked {
    background: linear-gradient(135deg, #5a0dd6, #4900c2) !important;
    color: #ffffff !important;
}

.font-picker .font-picker-option[aria-selected="true"] {
    background: linear-gradient(135deg, #5a0dd6, #4900c2) !important;
    color: #ffffff !important;
}