body { font-family: 'Segoe UI', sans-serif; margin: 0; display: flex; background: #f8f9fa; }
.sidebar { width: 250px; height: 100vh; background: #2c3e50; color: white; padding: 20px; }
.sidebar a { display: block; color: white; padding: 15px; text-decoration: none; border-bottom: 1px solid #34495e; }
.sidebar a:hover { background: #34495e; }

.main-content { flex: 1; padding: 40px; }
.stats-container { display: flex; gap: 20px; }
.card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); width: 200px; text-align: center; }
.card h3 { margin: 0; color: #7f8c8d; font-size: 14px; }
.card p { font-size: 32px; font-weight: bold; margin: 10px 0; color: #2c3e50; }

/* Styles for forms we will build next */
input, select, textarea { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px; }
button { background: #27ae60; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 4px; }
.clickable-card {
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}
.clickable-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border: 1px solid #27ae60;
}