:root {
    --dark-bg: #121212;
    --dark-surface: #1e1e1e;
    --dark-border: #333;
    --dark-text: #e0e0e0;
    --dark-muted-text: #aaa;
    --dark-primary: #0d6efd;
    --dark-secondary: #6c757d;
}

/* Page background and base text */
body, .main-content, .container, .blazor-page {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

/* Cards / Panels / Modals */
.card, .modal-content, .dropdown-menu {
    background-color: var(--dark-surface);
    color: var(--dark-text);
    border-color: var(--dark-border);
}

/* Modal backdrop (optional, more contrast) */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Modal header/footer */
.modal-header, .modal-footer {
    border-color: var(--dark-border);
}

/* Buttons */
.btn {
    border: 1px solid var(--dark-border);
}

.btn-primary {
    background-color: var(--dark-primary);
    border-color: var(--dark-primary);
}

.btn-secondary {
    background-color: var(--dark-secondary);
    border-color: var(--dark-secondary);
}

.btn-outline-secondary {
    color: var(--dark-text);
    border-color: var(--dark-border);
}

.btn-close {
    filter: invert(1);
}

/* Forms */
input, select, textarea {
    background-color: var(--dark-surface);
    color: var(--dark-text);
    border-color: var(--dark-border);
}

input::placeholder, textarea::placeholder {
    color: var(--dark-muted-text);
}

/* Tables */
table {
    background-color: var(--dark-surface);
    color: var(--dark-text);
}

thead {
    background-color: #222;
}

td, th {
    border-color: var(--dark-border);
}

/* Dropdowns */
.dropdown-menu {
    background-color: var(--dark-surface);
}

/* Scrollbar for dark mode (optional) */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: #444;
    border-radius: 4px;
}

::-webkit-scrollbar-track {
    background-color: #222;
}

/* Links */
a, .nav-link {
    color: var(--dark-primary);
}

a:hover {
    color: #66aaff;
}

/* EasyMDE dark theme override */
.CodeMirror,
.editor-toolbar {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
}

.editor-toolbar a, .editor-toolbar button {
    color: #ccc !important;
}

.modal-content.bg-dark {
    background-color: #1e1e1e;
}
/* EasyMDE Preview Pane */
.editor-preview,
.editor-preview-side {
    background-color: #1e1e1e !important;
    color: #f1f1f1;
}