/* Base variables and common elements */
body {
	
	--window-border: 2px solid #000;
    
    
    --h1-color: #8470A6; 
    --h2-color: #507A9E; 
    --h3-color: #5A8D76; 
    --h4-color: #A67A5B; 
    --h5-color: #A19C6C; 
    --h6-color: #6C8299; 
    
    
    --bold-color: #61a181; 
    --italic-color: #95c2f0; 
    --text-highlight-bg: #746119; 
}


.theme-light {
	--window-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff;
    
	
	--background-primary: #ffffff;          
	--background-secondary: #ececec;        
	--background-secondary-alt: #d4d0c8;    
	--background-tertiary: #c0c0c0;         
	
	
	
	--titlebar-text: #ffffff;               
	
	
	--text-normal: #000000;                 
	--text-muted: #333333;                  
	--text-faint: #666666;                  
	
	
	--text-accent: #008015;                 
	--interactive-normal: #d4d0c8;          
	--interactive-hover: #e6e6e6;           
	--interactive-accent: #000080;          
	--interactive-accent-hover: #0000aa;    
	
	
	--button-background: #d4d0c8;           
	--button-text: #000000;                 
}


.theme-dark {
	--window-shadow: inset -1px -1px #3a3a3a, inset 1px 1px #888888, inset -2px -2px #555, inset 2px 2px #666;
    
	
	--background-primary: #1e1e1e;          
	--background-secondary: #2d2d2d;        
	--background-secondary-alt: #3a3a3a;    
	--background-tertiary: #444444;         
	
	
	
	--titlebar-text: #ffffff;               
	
	
	--text-normal: #e0e0e0;                 
	--text-muted: #b0b0b0;                  
	--text-faint: #888888;                  
	
	
	--text-accent: #8cb4ff;                 
	--interactive-normal: #3a3a3a;          
	--interactive-hover: #505050;           
	--interactive-accent: #4f6fb0;          
	--interactive-accent-hover: #6989d0;    
	
	
	--button-background: #3a3a3a;           
	--button-text: #e0e0e0;                 
    
    
    --bold-color: #7fc9a0; 
    --italic-color: #7fb0e0; 
    --text-highlight-bg: #5a4820; 
}


.workspace-leaf {
	border: var(--window-border);
	box-shadow: var(--window-shadow);
}

.workspace-leaf-header {
	background-color: var(--titlebar-background);
	color: var(--titlebar-text);
	font-weight: bold;
	height: 20px;
	padding: 2px 4px;
}


button,
.clickable-icon {
	background-color: var(--button-background);
	color: var(--button-text);
	border: 1px solid #000;
	padding: 2px 6px;
}


.theme-light button,
.theme-light .clickable-icon {
	box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
}

.theme-light button:active,
.theme-light .clickable-icon:active {
	box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #fff, inset 2px 2px grey, inset -2px -2px #dfdfdf;
}


.theme-dark button,
.theme-dark .clickable-icon {
	box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #666, inset -2px -2px #333, inset 2px 2px #555;
}

.theme-dark button:active,
.theme-dark .clickable-icon:active {
	box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #666, inset 2px 2px #333, inset -2px -2px #555;
}


button svg,
.clickable-icon svg {
	color: var(--button-text);
}





button:hover {
    background-color: var(--interactive-hover);
}
.cm-link:hover {
    text-decoration: underline; 
    color: var(--text-accent-hover); 
}


.theme-light button:hover {
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf;
}


.theme-dark button:hover {
    box-shadow: inset -1px -1px #3a3a3a, inset 1px 1px #888888;
}



.cm-s-obsidian {
	font-family: "Courier New", monospace;
	line-height: 1.5;
	color: var(--text-normal);
	background-color: var(--background-primary);
}


.cm-header, 
h1, h2, h3, h4, h5, h6 { 
    font-weight: bold;
}


h1 {
    color: var(--h1-color);
}
h2 {
    color: var(--h2-color);
}
h3 {
    color: var(--h3-color);
}
h4 {
    color: var(--h4-color);
}
h5 {
    color: var(--h5-color);
}
h6 {
    color: var(--h6-color);
}


.cm-header-1 {
    color: var(--h1-color);
}
.cm-header-2 {
    color: var(--h2-color);
}
.cm-header-3 {
    color: var(--h3-color);
}
.cm-header-4 {
    color: var(--h4-color);
}
.cm-header-5 {
    color: var(--h5-color);
}
.cm-header-6 {
    color: var(--h6-color);
}



.theme-light .cm-link, 
.theme-light .cm-hmd-internal-link {
	color: #0000ff;
	text-decoration: underline;
}

.theme-dark .cm-link, 
.theme-dark .cm-hmd-internal-link {
	color: #8cb4ff;
	text-decoration: underline;
}


.menu {
	background-color: var(--background-tertiary);
	border: var(--window-border);
	box-shadow: var(--window-shadow);
}

.menu-item {
	color: var(--text-normal);
	padding: 4px 8px;
}

.menu-item:hover {
	background-color: var(--titlebar-background);
	color: var(--titlebar-text);
}


.menu-separator {
	border-bottom: 1px solid #808080;
	margin: 4px 0;
}


.is-phone .modal .modal-title {
    display: block;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 70vw;
}

.modal {
	background-color: var(--background-tertiary);
	border: var(--window-border);
	box-shadow: var(--window-shadow);
}

.modal-title {
	color: var(--titlebar-text);
	margin-left: auto;
    margin-right: auto;
	padding: 4px 8px;
	font-weight: bold;
}

.modal-content {
	padding: 8px;
	color: var(--text-normal);
}


.modal-button-container {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 8px;
}


.status-bar {
	background-color: var(--background-tertiary);
	border-top: 1px solid #808080;
	color: var(--text-normal);
	height: 22px;
	padding: 0 4px;
}

.status-bar-item {
	padding: 0 4px;
}


.status-bar-item button {
	height: 18px;
	padding: 0 4px;
}


::-webkit-scrollbar {
	width: 16px;
	height: 16px;
}

::-webkit-scrollbar-track {
	background-color: var(--background-tertiary);
}

::-webkit-scrollbar-thumb {
	background-color: var(--background-tertiary);
	border: 1px solid #000;
}

::-webkit-scrollbar-button {
	background-color: var(--background-tertiary);
	border: 1px solid #000;
	width: 16px;
	height: 16px;
}






.theme-light ::-webkit-scrollbar-thumb,
.theme-light ::-webkit-scrollbar-button {
	box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
}

.theme-light ::-webkit-scrollbar-button:active {
	box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #fff, inset 2px 2px grey, inset -2px -2px #dfdfdf;
}

.theme-dark ::-webkit-scrollbar-thumb,
.theme-dark ::-webkit-scrollbar-button {
	box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #666, inset -2px -2px #333, inset 2px 2px #555;
}

.theme-dark ::-webkit-scrollbar-button:active {
	box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #666, inset 2px 2px #333, inset -2px -2px #555;
}


.theme-light .workspace-tab-header {
    background-color: var(--background-tertiary);
    color: var(--text-normal);
    border: 1px solid #000;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
    border-radius: 5px; 
}

.theme-light .workspace-tab-header.is-active {
    background-color: var(--background-secondary);
    box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #fff, inset 2px 2px grey, inset -2px -2px #dfdfdf;
    border-radius: 5px;
}


.theme-dark .workspace-tab-header {
    background-color: var(--background-tertiary);
    color: var(--text-normal);
    border: 1px solid #000;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #666, inset -2px -2px #333, inset 2px 2px #555;
    border-radius: 5px;
}

.theme-dark .workspace-tab-header.is-active {
    background-color: var(--background-secondary);
    box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #666, inset 2px 2px #333, inset -2px -2px #555;
    border-radius: 5px;
}


.workspace-split.mod-root .workspace-tab-header::before,
.workspace-split.mod-root .workspace-tab-header::after {
display: none;
}





.theme-light pre,
.theme-light code {
    background-color: #f0f0f0;
    color: #0b6e4f;
    border: 1px solid #c0c0c0;
    font-family: "Courier New", monospace;
    border-radius: 5px;
}

.theme-light .cm-inline-code {
    background-color: #f0f0f0;
    color: #0b6e4f;
    border-radius: 3px;
}

.theme-dark pre,
.theme-dark code {
    background-color: #2a2a2a;
    color: #6fcf9f;
    border: 1px solid #555555;
    font-family: "Courier New", monospace;
    border-radius: 5px;
}

.theme-dark .cm-inline-code {
    background-color: #2a2a2a;
    color: #6fcf9f;
    border-radius: 3px;
}



.theme-light .metadata-container {
	border: 1px solid #000000;
	padding: 1em 1em 0.5em 2em;
	border-radius: 5px;
	background: #d4d0c8
}

  
  .theme-dark .metadata-container {
	border: 1px solid #666666;
	padding: 1em 1em 0.5em 2em;
	border-radius: 5px;
	background: #3a3a3a;
  }


.theme-light .table-view-table>tbody>tr>td { 
    white-space: pre-wrap !important;
    background-color: #ccccff1f !important; 
    padding: 10px !important;
}

.theme-dark .table-view-table>tbody>tr>td { 
    white-space: pre-wrap !important;
    background-color: #33335f !important; 
    padding: 10px !important;
}


.theme-light {
    --folder-color-1: #965D5D; 
    --folder-color-2: #8470A6; 
    --folder-color-3: #507A9E; 
    --folder-color-4: #5A8D76; 
    --folder-color-5: #A19C6C; 
    --folder-color-6: #A67A5B; 
    --folder-color-7: #96707E; 
    --folder-color-8: #5B8B9E; 
    --folder-color-9: #6B8C6B; 
    --folder-color-10: #8B7E6D; 
    --folder-color-11: #8D6B83; 
    --folder-color-12: #6C8299; 
}


.theme-dark {
    --folder-color-1: #c78080; 
    --folder-color-2: #a992d0; 
    --folder-color-3: #7aa3c9; 
    --folder-color-4: #7fb59a; 
    --folder-color-5: #c9c48e; 
    --folder-color-6: #d19e7d; 
    --folder-color-7: #c093a6; 
    --folder-color-8: #7db3c9; 
    --folder-color-9: #8eb98e; 
    --folder-color-10: #b3a68f; 
    --folder-color-11: #b38da8; 
    --folder-color-12: #8eabc0; 
}


.nav-files-container > div > .nav-folder:nth-child(6n + 1) { --folder-color: var(--folder-color-1); }
.nav-files-container > div > .nav-folder:nth-child(6n + 2) { --folder-color: var(--folder-color-2); }
.nav-files-container > div > .nav-folder:nth-child(6n + 3) { --folder-color: var(--folder-color-3); }
.nav-files-container > div > .nav-folder:nth-child(6n + 4) { --folder-color: var(--folder-color-4); }
.nav-files-container > div > .nav-folder:nth-child(6n + 5) { --folder-color: var(--folder-color-5); }
.nav-files-container > div > .nav-folder:nth-child(6n + 6) { --folder-color: var(--folder-color-6); }
.nav-files-container > div > .nav-folder:nth-child(12n + 7) { --folder-color: var(--folder-color-7); }
.nav-files-container > div > .nav-folder:nth-child(12n + 8) { --folder-color: var(--folder-color-8); }
.nav-files-container > div > .nav-folder:nth-child(12n + 9) { --folder-color: var(--folder-color-9); }
.nav-files-container > div > .nav-folder:nth-child(12n + 10) { --folder-color: var(--folder-color-10); }
.nav-files-container > div > .nav-folder:nth-child(12n + 11) { --folder-color: var(--folder-color-11); }
.nav-files-container > div > .nav-folder:nth-child(12n + 12) { --folder-color: var(--folder-color-12); }


.theme-light .nav-files-container > div > .nav-folder {
   border: 1px solid #c0c0c0;
   border-left: 4px solid var(--folder-color);
   border-radius: var(--radius-s);
}

.theme-dark .nav-files-container > div > .nav-folder {
   border: 1px solid #555555;
   border-left: 4px solid var(--folder-color);
   border-radius: var(--radius-s);
}

.nav-files-container > div > .nav-folder + .nav-folder {
   margin-top: var(--size-2-2);
}

.nav-folder-title {
   color: var(--folder-color);
   font-weight: var(--font-bold);
}


th {
	border: 1px solid var(--background-tertiary) !important;
  }
  
  td {
	border: 1px solid var(--background-tertiary) !important;
  }
  
  thead {
	border-bottom: 4px solid var(--background-tertiary);
  }


#calendar-container .day:hover {
    background-color: var(--interactive-hover);
}
#calendar-container .today {
    font-weight: 700;
    background-color: var(--interactive-accent);
    color: var(--titlebar-text);
}