/* width */
::-webkit-scrollbar { width: 8px; height: 8px; }

/* Track */
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0); }
::-webkit-scrollbar { background: rgba(50, 50, 50, 255); }

/* Handle */
::-webkit-scrollbar-thumb { background: #444; }
::-webkit-scrollbar-corner { background: #444; }

/* Handle on hover */
::-webkit-scrollbar-thumb:hover { background: #555; }


.Thing { background: #2c3033; border-bottom: 1px solid#444; color: #939395; }
.column { border-color: #444; background: #2c3033; }
.File { background: #212427; color: #939395; border-color: #444; }
.Selected { background-color: #3a404c; color: #ddd; }
.lastClicked { border-bottom-color: #2bac8f !important; border-bottom: 2px solid !important; }
.showTags .publicThing { border-left: 2px solid #2121a3 !important; }
.showTags .privateThing { border-left: 2px solid #602121 !important; }
#menu { 
	color: aliceblue;
    background-color: #252a2e;
    border: #57585a 1px solid;
}
.title { background-color: tomato; }
a:visited { color: #2bac8f; }
a { color: #2bac8f; }
#layout { background-color: #2c3033; }

/* Dark theme active menu option styling */
.menu-option-active { 
	background: rgba(100, 150, 255, 0.3) !important; 
	color: #e0e0e0 !important;
	border-left: 3px solid #6496ff !important;
}
.menu-option-active:hover { 
	background: rgba(100, 150, 255, 0.4) !important; 
}
#fileView { background-color: #2c3033; }
.addThing { background: #dce5f5; }
#noteEditor { background-color: #2c3033; color: #f9f9f9; }
.editor-toolbar { background-color: #1f2021 !important; }
.editor-preview-active { background-color: #2c3033; }
.CodeMirror { height: inherit !important; background-color: #2c3033 !important; color: #f9f9f9;   /* border: 1px solid #444 !important;*/ border: none !important; }
.CodeMirror-fullscreen { background-color: #2c3033; }

/* Mobile content styling for dark theme */
@media screen and (max-width: 800px), screen and (max-device-width: 800px) {
	#mobileContent {
		background: #2c3033 !important;
		color: #f9f9f9 !important;
	}
	
	#mobileContentBody {
		background: #2c3033 !important;
		color: #f9f9f9 !important;
		padding: 10px !important;
		padding-top: 60px !important; /* Add extra padding to account for sticky button */
		overflow-x: auto !important;
		word-wrap: break-word !important;
		box-sizing: border-box !important;
	}
	
	/* Dark theme table styling */
	#mobileContentBody table {
		background: #2c3033 !important;
		color: #f9f9f9 !important;
		border: 1px solid #444 !important;
	}
	
	#mobileContentBody table td,
	#mobileContentBody table th {
		border: 1px solid #444 !important;
		background: #2c3033 !important;
		color: #f9f9f9 !important;
	}
	
	/* Dark theme header colors */
	#mobileContentBody h1,
	#mobileContentBody h2,
	#mobileContentBody h3,
	#mobileContentBody h4 {
		color: #2bac8f !important;
	}
	
	/* Dark theme mobile nested styling - removed teal colors to match desktop */
	
	/* Dark theme mobile scroll-up button */
	#mobileScrollUpBtn {
		background-color: #2c3033 !important;
		color: #f9f9f9 !important;
		border-bottom: 2px solid #444 !important;
	}
	
	#mobileScrollUpBtn:active {
		background-color: #3a404c !important;
	}
}

/* Settings Modal Styles for Dark Theme */
.modal-content {
	background-color: #2c3033 !important;
	border: 1px solid #444 !important;
}

.modal-header h2 {
	color: #f9f9f9 !important;
}

.modal-body {
	color: #f9f9f9 !important;
}

.settings-section h3 {
	color: #f9f9f9 !important;
	border-bottom: 1px solid #444 !important;
}

.auth-section p {
	color: #bbb !important;
}

#searchInput {
	background-color: #3a404c !important;
	border: 1px solid #555 !important;
	color: #f9f9f9 !important;
}

#searchInput:focus {
	border-color: #2bac8f !important;
	box-shadow: 0 0 0 2px rgba(43, 172, 143, 0.2) !important;
}

.search-results {
	background-color: #3a404c !important;
	border: 1px solid #555 !important;
}

.search-result-item {
	color: #f9f9f9 !important;
	border-bottom: 1px solid #555 !important;
}

.search-result-item:hover {
	background-color: #4a5058 !important;
}

.search-result-item.selected {
	background-color: #2bac8f !important;
	color: white !important;
}

/* Favorites Section */
.favorites-container {
	margin-top: 10px;
}

.favorites-list {
	max-height: 300px;
	overflow-y: auto;
	border: 1px solid #444;
	border-radius: 4px;
	padding: 10px;
	background-color: #2c3033;
}

.favorites-loading {
	text-align: center;
	color: #666;
	font-style: italic;
	margin: 20px 0;
}

.favorite-item {
	display: flex;
	align-items: center;
	padding: 8px 12px;
	margin: 4px 0;
	background-color: #212427;
	border: 1px solid #444;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.favorite-item:hover {
	background-color: #3a404c;
}

.favorite-item.selected {
	background-color: #3a404c;
	border-color: #2bac8f;
}

.favorite-item .fa-star {
	color: #f39c12;
	margin-right: 8px;
	font-size: 14px;
}

.favorite-item .favorite-title {
	flex: 1;
	font-weight: 500;
	color: #939395;
}

.favorite-item .favorite-description {
	font-size: 12px;
	color: #666;
	margin-left: 8px;
}

.favorites-empty {
	text-align: center;
	color: #666;
	font-style: italic;
	margin: 20px 0;
}

.favorites-empty i {
	display: block;
	font-size: 48px;
	margin-bottom: 10px;
	opacity: 0.5;
}

/* Drag and Drop Visual Feedback */
.drag-over {
	background-color: #3a404c !important;
	border-top: 3px solid #2bac8f !important;
}

.drag-above {
	border-top: 3px solid #2bac8f !important;
}

.drag-below {
	border-bottom: 3px solid #2bac8f !important;
}

.being-dragged {
	opacity: 0.5;
	transform: scale(0.95);
}