/* Dark mode overrides */
body.dark-mode {
    background-color: #1a1a1a !important;
    color: #d4d4d4 !important;
}

body.dark-mode .mdl-layout__header {
    background-color: #1f1f1f !important;
    border-bottom-color: #333 !important;
}

body.dark-mode .mdl-color--primary {
    background-color: #1f1f1f !important;
}

body.dark-mode .mdl-color--grey-100 {
    background-color: #1a1a1a !important;
}

body.dark-mode .mdl-color-text--grey-700,
body.dark-mode .mdl-color-text--grey-800 {
    color: #d4d4d4 !important;
}

body.dark-mode .fluentui-content {
    background-color: #252525 !important;
    color: #d4d4d4 !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 1px 4px rgba(0,0,0,0.15) !important;
}

body.dark-mode .fluentui-ribbon {
    background: linear-gradient(135deg, #003d6b 0%, #1a6b8a 50%, #003d6b 100%) !important;
    background-size: 200% 200% !important;
}

body.dark-mode a {
    color: #4fc3f7 !important;
}

body.dark-mode a:hover {
    color: #81d4fa !important;
}

body.dark-mode a:visited {
    color: #7c4dff !important;
}

body.dark-mode code {
    color: #f48fb1 !important;
    background: #2d2d2d !important;
}

body.dark-mode pre {
    background: #1e1e1e !important;
    color: #d4d4d4 !important;
    border-left-color: #4fc3f7 !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2) !important;
}

body.dark-mode pre code {
    background: none !important;
}

body.dark-mode table {
    box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
}

body.dark-mode table,
body.dark-mode table td,
body.dark-mode table th {
    border-color: #333 !important;
}

body.dark-mode table td,
body.dark-mode table th {
    background-color: #252525 !important;
    color: #d4d4d4 !important;
}

body.dark-mode table th {
    background-color: #1f1f1f !important;
    color: #aaa !important;
    border-bottom-color: #444 !important;
}

body.dark-mode .qmlname,
body.dark-mode .qmlname td p {
    color: #d4d4d4 !important;
}

body.dark-mode .qmlproto table {
    border-bottom-color: #333 !important;
}

body.dark-mode ul.navigationbar li {
    color: #aaa !important;
}

body.dark-mode ul.navigationbar li:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

body.dark-mode ul.navigationbar li:last-child {
    color: #4fc3f7 !important;
    background: rgba(79, 195, 247, 0.08) !important;
}

body.dark-mode ul.navigationbar li + li::before {
    color: #555 !important;
}

body.dark-mode .mdl-layout-title {
    color: #d4d4d4 !important;
}

body.dark-mode .context h3.fn .name,
body.dark-mode .context h3 span.type,
body.dark-mode .qmlname span.name {
    color: #e0e0e0 !important;
}

body.dark-mode .primary-text {
    color: #d4d4d4 !important;
}

body.dark-mode .secondary-text {
    color: #a0a0a0 !important;
}

body.dark-mode ul.toc {
    border-left-color: #4fc3f7 !important;
}

body.dark-mode ul.toc li a {
    color: #4fc3f7 !important;
}

body.dark-mode .mdl-shadow--4dp {
    box-shadow: 0 2px 4px rgba(0,0,0,0.4), 0 4px 8px rgba(0,0,0,0.3) !important;
}

body.dark-mode hr {
    border-color: #333 !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: #e8e8e8 !important;
}

body.dark-mode h2 {
    border-bottom-color: #333 !important;
}

/* Dark mode toggle button */
.dark-mode-toggle {
    background: none;
    border: 1px solid #bbb;
    border-radius: 8px;
    color: #666;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    margin-left: 16px;
    transition: all 0.2s ease;
}

.dark-mode-toggle:hover {
    border-color: #0078d4;
    color: #0078d4;
    background: rgba(0, 120, 212, 0.06);
}

body.dark-mode .dark-mode-toggle {
    border-color: #666;
    color: #aaa;
}

body.dark-mode .dark-mode-toggle:hover {
    border-color: #4fc3f7;
    color: #4fc3f7;
    background: rgba(79, 195, 247, 0.1);
}