/* Gebruik van CSS Variabelen voor eenvoudige theming */
:root {
    /* Donker Thema (Darcula) - Dit is de basisstijl */
    --theme-base: #3C3F41;
    --theme-base-toolbar: #3C3F41;
    --theme-sidebar: #313335;
    --theme-editor: #2B2B2B;
    --theme-hover: #404345;
    --theme-active: #4B6EAF;
    --theme-border: #555555;
    --theme-text: #BBBBBB;
    --theme-text-muted: #888888;
    --theme-headings: #FFFFFF;
    --theme-accent: #4B6EAF;
    --json-key: #9876AA;
    --json-string: #6A8759;
    --json-boolean: #CC7832;
    --yaml-key: #9876AA;
    --yaml-value: #6A8759;
    --yaml-comment: #808080;
    --log-timestamp: #6A8759;
    --log-info: #6792B2;
    --log-success: #5a9b5a;
    --log-message: #BBBBBB;
    --git-hash: #FFC66D; /* Yellow */
    --git-info: #9876AA; /* Purple */
    --git-author: #6792B2; /* Blue */
    --git-date: #808080; /* Grey */
    --git-message: #BBBBBB;
    --js-keyword: #CC7832; /* Orange */
    --js-function: #FFC66D; /* Yellow */
    --js-property: #9876AA; /* Purple */
    --js-string: #6A8759; /* Green */
    --checkbox-done: #5a9b5a;
}

body.light-theme {
    /* Licht Thema (IntelliJ Light) */
    --theme-base: #FFFFFF;
    --theme-base-toolbar: #F2F2F2;
    --theme-sidebar: #F2F2F2;
    --theme-editor: #FFFFFF;
    --theme-hover: #E6E6E6;
    --theme-active: #4076D4;
    --theme-border: #DCDCDC;
    --theme-text: #000000;
    --theme-text-muted: #808080;
    --theme-headings: #000000;
    --theme-accent: #4076D4;
    --json-key: #000080;
    --json-string: #008000;
    --json-boolean: #0000FF;
    --yaml-key: #000080;
    --yaml-value: #008000;
    --yaml-comment: #808080;
    --log-timestamp: #008000;
    --log-info: #0000FF;
    --log-success: #006400;
    --log-message: #000000;
    --git-hash: #000080; /* Dark Blue */
    --git-info: #000080; /* Dark Blue */
    --git-author: #006400; /* Dark Green */
    --git-date: #808080; /* Grey */
    --git-message: #000000;
    --js-keyword: #0000FF; /* Blue */
    --js-function: #000080; /* Dark Blue */
    --js-property: #000080; /* Dark Blue */
    --js-string: #008000; /* Green */
    --checkbox-done: #006400;
}

/* Toepassen van de variabelen op de elementen */
body {
    background-color: var(--theme-base);
}

.bg-theme-base { background-color: var(--theme-base); }
.bg-theme-base-toolbar { background-color: var(--theme-base-toolbar); }
.bg-theme-sidebar { background-color: var(--theme-sidebar); }
.bg-theme-editor { background-color: var(--theme-editor); }
.hover\:bg-theme-hover:hover { background-color: var(--theme-hover); }
.border-theme-border { border-color: var(--theme-border); }
.text-theme-text { color: var(--theme-text); }
.text-theme-text-muted { color: var(--theme-text-muted); }
.text-theme-headings { color: var(--theme-headings); }
.text-theme-icon { color: var(--theme-text-muted); }
.border-theme-accent { border-color: var(--theme-accent); }

/* Syntax highlighting in partials */
.json-key { color: var(--json-key); }
.json-string { color: var(--json-string); }
.json-boolean { color: var(--json-boolean); }
.yaml-key { color: var(--yaml-key); }
.yaml-value { color: var(--yaml-value); }
.yaml-comment { color: var(--yaml-comment); }
.log-timestamp { color: var(--log-timestamp); }
.log-level-info { color: var(--log-info); }
.log-level-success { color: var(--log-success); }
.log-message { color: var(--log-message); }
.git-hash { color: var(--git-hash); font-weight: 500; }
.git-info { color: var(--git-info); }
.git-author { color: var(--git-author); }
.git-date { color: var(--git-date); }
.git-message { color: var(--git-message); display: block; padding-left: 1em; }
.js-keyword { color: var(--js-keyword); }
.js-function { color: var(--js-function); }
.js-property { color: var(--js-property); }
.js-string { color: var(--js-string); }

/* Algemene stijlen */
.font-jetbrains-mono { font-family: 'JetBrains Mono', monospace; }

.tab.active {
    background-color: var(--theme-editor);
    border-bottom: 2px solid var(--theme-accent);
    color: var(--theme-headings);
}

.file-item.active {
    background-color: var(--theme-active);
    color: white !important;
}
.file-item.active i, .file-item.active svg {
    color: white;
}
.file-item:hover {
    background-color: var(--theme-hover);
}

/* Specifieke stijlen voor de project partial */
.project-view .action-button {
    background-color: var(--theme-sidebar);
    color: var(--theme-text);
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s;
}
.project-view .action-button:hover {
    background-color: var(--theme-hover);
}

/* Stijlen voor de markdown content in de editor */
.markdown-body h1, .markdown-body h2, .markdown-body h3 {
    border-bottom: 1px solid var(--theme-border);
    color: var(--theme-headings);
    padding-bottom: .3em;
    margin-top: 24px;
    margin-bottom: 16px;
}

.markdown-body a {
    color: #4A90E2;
    text-decoration: none;
}
.markdown-body a:hover {
    text-decoration: underline;
}

.markdown-body code {
    background-color: var(--theme-hover);
    padding: .2em .4em;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
}

.markdown-body pre {
    background-color: var(--theme-hover);
    padding: 1em;
    border-radius: 6px;
    overflow-x: auto;
}
.markdown-body pre code {
    padding: 0;
    background-color: transparent;
}

.markdown-body ul {
    list-style-type: none;
    padding-left: 0;
}
.markdown-body ul li {
    margin-bottom: 0.5em;
    display: flex;
    align-items: center;
}
.markdown-body p {
    margin-bottom: 1em;
}

.devicon, [class^="devicon-"], [class*=" devicon-"] {
    color: var(--theme-text-muted);
}

/* Watchlist Checkbox styles */
.checkbox {
    margin-right: 0.75em;
    font-family: 'JetBrains Mono', monospace;
}
.checkbox.done {
    color: var(--checkbox-done);
}
.checkbox.todo {
    color: var(--theme-text-muted);
}

/* Aangepaste Scrollbar Stijlen */
::-webkit-scrollbar {
    width: 8px; /* Iets dunner voor een strakkere look */
    height: 8px;
}
::-webkit-scrollbar-track {
    background-color: var(--theme-editor);
}
::-webkit-scrollbar-thumb {
    background-color: var(--theme-text-muted); /* Duidelijker zichtbaar */
    border-radius: 4px;
    border: 2px solid var(--theme-editor); /* Creëert een 'floating' effect */
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--theme-text); /* Nog duidelijker bij hover */
}