:root {
--green-dark: #2e7d32;
--green-light: #81c784;
--green-bg: #e8f5e9;
--white: #ffffff;
--gray-light: #f1f1f1;
--gray-dark: #555;
--border-radius: 12px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background-color: var(--green-bg);
color: var(--gray-dark);
}
header.dashboard-header {
background-color: var(--green-dark);
color: var(--white);
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
}
header .logo {
display: flex;
align-items: center;
gap: 10px;
}
header .logo img {
width: 40px;
height: 40px;
}
.dashboard-nav a {
color: var(--white);
margin: 0 10px;
text-decoration: none;
font-weight: 600;
}
.dashboard-nav a.active,
.dashboard-nav a:hover {
text-decoration: underline;
}
.user-menu {
display: flex;
align-items: center;
gap: 10px;
}
.user-menu .avatar {
width: 40px;
border-radius: 50%;
}
.user-menu .logout-btn {
display: inline-block;
background: var(--green-light);
padding: 5px 10px;
border-radius: 6px;
color: var(--green-dark);
text-decoration: none;
font-weight: bold;
}
.dashboard-container {
display: flex;
}
.sidebar {
background-color: var(--white);
width: 250px;
padding: 2rem 1rem;
min-height: 100vh;
border-right: 1px solid var(--gray-light);
}
.sidebar .user-info {
text-align: center;
margin-bottom: 2rem;
}
.sidebar .large-avatar {
width: 80px;
border-radius: 50%;
margin-bottom: 10px;
}
.sidebar-menu {
list-style: none;
margin-bottom: 2rem;
}
.sidebar-menu li {
margin: 10px 0;
}
.sidebar-menu a {
text-decoration: none;
color: var(--gray-dark);
font-weight: 600;
padding: 8px 12px;
display: block;
border-radius: var(--border-radius);
}
.sidebar-menu li.active a,
.sidebar-menu a:hover {
background-color: var(--green-light);
color: var(--green-dark);
}
.growth-status {
background: var(--green-bg);
padding: 1rem;
border-radius: var(--border-radius);
text-align: center;
}
.growth-status .progress-bar {
background: var(--gray-light);
border-radius: var(--border-radius);
overflow: hidden;
height: 15px;
margin: 10px 0;
}
.growth-status .progress {
background: var(--green-dark);
height: 100%;
}
.content {
flex-grow: 1;
padding: 2rem;
}
.stats-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.stat-card {
background: var(--white);
padding: 1rem;
border-radius: var(--border-radius);
display: flex;
align-items: center;
gap: 15px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.stat-icon {
font-size: 2rem;
}
.stat-text h3 {
margin-bottom: 5px;
color: var(--green-dark);
}
.reminders {
margin-top: 2rem;
}
.reminder-list {
list-style: none;
padding-left: 0;
}
.reminder-list li {
background: var(--white);
margin: 10px 0;
padding: 10px;
border-radius: var(--border-radius);
display: flex;
justify-content: space-between;
align-items: center;
}
.reminder-list li span {
font-weight: bold;
color: var(--green-dark);
}