:root {
    --classroom-green: #5c8f3c;
    --classroom-green-dark: #4a7330;
    --classroom-accent: #8b6914;
}

body {
    background-color: #f7f9f4;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.classroom-nav {
    background: linear-gradient(135deg, var(--classroom-green) 0%, var(--classroom-green-dark) 100%);
}

.card {
    border: none;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
}

.role-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
    min-height: 220px;
}

.role-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.12);
}

.role-icon {
    font-size: 3rem;
    color: var(--classroom-green);
}

.session-section {
    border-left: 4px solid var(--classroom-green);
    background: #fff;
}

.badge-not-started { background-color: #6c757d; }
.badge-started { background-color: #0d6efd; }
.badge-complete { background-color: var(--classroom-green); }

.btn-classroom {
    background-color: var(--classroom-green);
    border-color: var(--classroom-green);
    color: #fff;
}

.btn-classroom:hover {
    background-color: var(--classroom-green-dark);
    border-color: var(--classroom-green-dark);
    color: #fff;
}

.progress-bar {
    background-color: var(--classroom-green);
}

footer.footer {
    margin-top: auto;
}