/* Theme Variables */
:root {
	--bg-dark: #1e1e24; /* Body background */
	--bg-sidebar: #15161a; /* Sidebar background */
	--bg-card: #2b2e35; /* Dark cards background */
	--bg-header: #23252a;
	--border-color: #363940;
	--text-main: #e0e0e0;
	--text-muted: #8b929e;
	
	--header-teal: #007bff; /* Changed to Blue as requested */
	--header-yellow: #f2a900;
	--header-grey: #4b545f;
	
	--sidebar-width: 260px;
	--sidebar-width-collapsed: 60px;
}

body.light-mode {
	--bg-dark: #f4f6f9; /* Body background */
	--bg-sidebar: #ffffff; /* Sidebar background */
	--bg-card: #ffffff; /* Dark cards background */
	--bg-header: #f8f9fa;
	--border-color: #dee2e6;
	--text-main: #212529;
	--text-muted: #6c757d;
}

/* Global Overrides */
body {
	background-color: var(--bg-dark);
	color: var(--text-main);
	font-family: 'Poppins', sans-serif;
	margin: 0;
	overflow-x: hidden;
}

/* Layout Wrapper */
.app-wrapper {
	display: flex;
	height: 100vh;
	width: 100vw;
	overflow: hidden;
}

/* Sidebar Styling */
.sidebar {
	width: var(--sidebar-width);
	background-color: var(--bg-sidebar);
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	flex-shrink: 0;
	border-right: 1px solid var(--border-color);
	box-shadow: 4px 0 15px rgba(0, 0, 0, 0.03);
	overflow-y: auto;
	z-index: 1000;
}

.sidebar.collapsed {
	width: var(--sidebar-width-collapsed);
}

.sidebar-header {
	padding: 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: var(--bg-sidebar);
	border-bottom: 1px solid var(--border-color);
	height: 60px;
}

.sidebar-brand {
	display: flex;
	align-items: center;
	text-decoration: none;
}

.sidebar-brand img {
	max-height: 35px;
	transition: opacity 0.3s;
}

.sidebar.collapsed .sidebar-brand {
	opacity: 0;
	pointer-events: none;
	width: 0;
}

.sidebar-toggle {
	color: var(--text-muted);
	cursor: pointer;
	font-size: 1.2rem;
	background: none;
	border: none;
	outline: none;
	margin-left: auto;
	transition: color 0.2s;
}
.sidebar-toggle:hover { color: var(--text-main); }

/* Sidebar Menu */
.sidebar-menu {
	list-style: none;
	padding: 10px 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}

.sidebar-menu .nav-item {
	margin: 2px 10px;
	border-bottom: none;
}

.sidebar-menu .nav-link {
	color: var(--text-main);
	padding: 12px 15px;
	display: flex;
	align-items: center;
	text-decoration: none;
	transition: all 0.2s ease-in-out;
	font-size: 14px;
	position: relative;
	border-radius: 8px;
}

.sidebar-menu .nav-link:hover {
	background-color: rgba(120, 120, 120, 0.1);
	color: var(--text-main);
	transform: translateX(3px);
}

.sidebar-menu .nav-link i {
	width: 25px;
	text-align: center;
	font-size: 16px;
	margin-right: 10px;
	color: var(--text-muted);
	transition: color 0.2s;
}

.sidebar-menu .nav-link:hover i {
	color: var(--header-teal);
}

.sidebar-menu .nav-link span {
	flex-grow: 1;
	white-space: nowrap;
	opacity: 1;
	transition: opacity 0.3s;
}

.sidebar.collapsed .sidebar-menu .nav-link span,
.sidebar.collapsed .sidebar-menu .nav-link .menu-arrow {
	display: none;
}

.sidebar-menu .nav-link .menu-arrow {
	font-size: 12px;
	transition: transform 0.3s;
	position: absolute;
	right: 15px;
}

.sidebar-menu .nav-item.active > .nav-link {
	background-color: rgba(0, 123, 255, 0.1);
	color: var(--header-teal);
	font-weight: 600;
}
.sidebar-menu .nav-item.active > .nav-link i {
	color: var(--header-teal);
}

.sidebar-menu .nav-item.open > .nav-link .menu-arrow {
	transform: rotate(90deg);
}

/* Submenu */
.sidebar-submenu {
	list-style: none;
	padding: 5px 0;
	margin: 0;
	background-color: transparent;
	display: none;
}

.sidebar-menu .nav-item.open > .sidebar-submenu {
	display: block;
}

.sidebar-submenu .nav-link {
	padding: 8px 15px 8px 50px;
	font-size: 13px;
	color: var(--text-muted);
	border-radius: 6px;
	margin-top: 2px;
}

.sidebar-submenu .nav-link:hover {
	color: var(--text-main);
	background-color: rgba(120, 120, 120, 0.05);
	transform: translateX(3px);
}

/* Main Content Area */
.main-content {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	background-color: var(--bg-dark);
	height: 100vh;
	overflow-y: auto;
}

.topbar {
	height: 60px;
	background-color: var(--bg-sidebar);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 20px;
	border-bottom: 1px solid var(--border-color);
}

.content-wrapper {
	padding: 20px;
}

/* Colored Headers (Projetos e Carteira, etc) */
.section-header {
	padding: 10px 15px;
	border-radius: 4px;
	font-weight: 600;
	color: #fff;
	margin-top: 20px;
	margin-bottom: 10px;
	font-size: 14px;
}
.section-header.header-teal { background-color: var(--header-teal); }
.section-header.header-yellow { background-color: var(--header-yellow); }
.section-header.header-grey { background-color: var(--header-grey); }

/* Dark Cards (Dashboard style) */
.mio-card {
	background-color: var(--bg-card);
	border-radius: 6px;
	padding: 15px;
	color: var(--text-main);
	border: 1px solid var(--border-color);
	margin-bottom: 15px;
	box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Bootstrap Overrides for Modern Mode */
.card { background-color: var(--bg-card); color: var(--text-main); border: none; box-shadow: 0 4px 6px rgba(0,0,0,0.05); border-radius: 8px;}
.card-header { background-color: transparent; border-bottom: 1px solid var(--border-color); font-weight: 600;}
.card-footer { background-color: transparent; border-top: 1px solid var(--border-color); }
.table { color: var(--text-main); margin-bottom: 0;}
.table-bordered { border: none; }
.table-bordered td, .table-bordered th { border-color: var(--border-color); border-left: none; border-right: none;}
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(120, 120, 120, 0.03); }
.form-control { background-color: var(--bg-dark); border: 1px solid var(--border-color); color: var(--text-main); border-radius: 6px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);}
.form-control:focus { background-color: var(--bg-card); color: var(--text-main); border-color: var(--header-teal); box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
.modal-content { background-color: var(--bg-card); color: var(--text-main); border: none; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);}
.modal-header { border-bottom-color: var(--border-color); }
.modal-footer { border-top-color: var(--border-color); }
.btn { border-radius: 6px; font-weight: 500; transition: all 0.2s;}
.btn-outline-secondary { color: var(--text-muted); border-color: var(--border-color); }
.btn-outline-secondary:hover { background-color: var(--border-color); color: var(--text-main); }
.text-muted { color: var(--text-muted) !important; }
.bg-light { background-color: var(--bg-header) !important; }
.border-top { border-top-color: var(--border-color) !important; }
.border-bottom { border-bottom-color: var(--border-color) !important; }
.nav-fixed-bottom { display: none; } /* Hide bottom footer for sidebar layout */

/* 📱 MOBILE RESPONSIVENESS */
@media (max-width: 768px) {
	.sidebar {
		position: fixed;
		left: calc(-1 * var(--sidebar-width));
		top: 0;
		bottom: 0;
		z-index: 1050;
		box-shadow: 10px 0 30px rgba(0,0,0,0.5);
	}
	.sidebar.mobile-open {
		left: 0;
	}
	/* Ensure toggle button inside sidebar closes it on mobile */
	.sidebar .sidebar-toggle {
		display: block;
	}
	/* Adjust Topbar for Mobile */
	.topbar {
		justify-content: space-between;
		padding: 0 15px;
	}
	.content-wrapper {
		padding: 10px;
	}
	/* Hide desktop toggle */
	#sidebarToggle { display: none; }
	.sidebar.mobile-open #sidebarToggle { display: block; }
}