/* CASEL Competenties Icons en Kleuren */

:root {
    /* CASEL Competentie Kleuren - aangepast aan jouw exacte kleuren */
    --casel-self-awareness: #1976d2;        /* Blauw (ZB - Zelfbewustzijn) */
    --casel-self-management: #af3686;       /* Paars/Roze (ZM - Zelfmanagement) */
    --casel-social-awareness: #fbff40;      /* Geel (SB - Sociaal Bewustzijn) */
    --casel-relationship-skills: #00bf63;   /* Groen (RV - Relatievaardigheden) */
    --casel-responsible-decision: #ff9d00;  /* Oranje (VB - Verantwoordelijke Besluitvorming) */
    
    /* Lichtere varianten voor achtergronden */
    --casel-self-awareness-light: #1976d220;
    --casel-self-management-light: #af368620;
    --casel-social-awareness-light: #fbff4020;
    --casel-relationship-skills-light: #00bf6320;
    --casel-responsible-decision-light: #ff9d0020;
    
    /* Donkere varianten voor tekst */
    --casel-self-awareness-dark: #1565c0;
    --casel-self-management-dark: #8f2d6e;
    --casel-social-awareness-dark: #d4db36;
    --casel-relationship-skills-dark: #00a054;
    --casel-responsible-decision-dark: #e68900;
}

/* Competentie Cards Styling */
.competency-card {
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.competency-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.competency-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--competency-color);
}

/* Zelfbewustzijn */
.competency-card.self-awareness {
    --competency-color: var(--casel-self-awareness);
    background: var(--casel-self-awareness-light);
    border-left: 4px solid var(--casel-self-awareness);
}

.competency-card.self-awareness .competency-icon {
    color: var(--casel-self-awareness);
    background: var(--casel-self-awareness);
}

.competency-card.self-awareness h3 {
    color: var(--casel-self-awareness-dark);
}

/* Zelfmanagement */
.competency-card.self-management {
    --competency-color: var(--casel-self-management);
    background: var(--casel-self-management-light);
    border-left: 4px solid var(--casel-self-management);
}

.competency-card.self-management .competency-icon {
    color: var(--casel-self-management);
    background: var(--casel-self-management);
}

.competency-card.self-management h3 {
    color: var(--casel-self-management-dark);
}

/* Sociaal bewustzijn */
.competency-card.social-awareness {
    --competency-color: var(--casel-social-awareness);
    background: var(--casel-social-awareness-light);
    border-left: 4px solid var(--casel-social-awareness);
}

.competency-card.social-awareness .competency-icon {
    color: var(--casel-social-awareness);
    background: var(--casel-social-awareness);
}

.competency-card.social-awareness h3 {
    color: var(--casel-social-awareness-dark);
}

/* Relatievaardigheden */
.competency-card.relationship-skills {
    --competency-color: var(--casel-relationship-skills);
    background: var(--casel-relationship-skills-light);
    border-left: 4px solid var(--casel-relationship-skills);
}

.competency-card.relationship-skills .competency-icon {
    color: var(--casel-relationship-skills);
    background: var(--casel-relationship-skills);
}

.competency-card.relationship-skills h3 {
    color: var(--casel-relationship-skills-dark);
}

/* Verantwoordelijk beslissen */
.competency-card.responsible-decision {
    --competency-color: var(--casel-responsible-decision);
    background: var(--casel-responsible-decision-light);
    border-left: 4px solid var(--casel-responsible-decision);
}

.competency-card.responsible-decision .competency-icon {
    color: var(--casel-responsible-decision);
    background: var(--casel-responsible-decision);
}

.competency-card.responsible-decision h3 {
    color: var(--casel-responsible-decision-dark);
}

/* Icon styling */
.competency-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    margin-bottom: 15px;
    position: relative;
}

/* SVG/PNG Icons (gebruik je eigen bestanden) */
.competency-icon.has-icon {
    background-size: 32px 32px;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 0; /* Verberg emoji als icon gebruikt wordt */
}

.competency-card.self-awareness .competency-icon.has-icon,
.competency-card.zelfbewustzijn .competency-icon.has-icon {
    background-image: url('../icons/ZB.png'); /* Zelfbewustzijn */
}

.competency-card.self-management .competency-icon.has-icon,
.competency-card.zelfmanagement .competency-icon.has-icon {
    background-image: url('../icons/ZM.png'); /* Zelfmanagement */
}

.competency-card.social-awareness .competency-icon.has-icon,
.competency-card.sociaal-bewustzijn .competency-icon.has-icon {
    background-image: url('../icons/SB.png'); /* Sociaal Bewustzijn */
}

.competency-card.relationship-skills .competency-icon.has-icon,
.competency-card.relatievaardigheden .competency-icon.has-icon {
    background-image: url('../icons/RV.png'); /* Relatievaardigheden */
}

.competency-card.responsible-decision .competency-icon.has-icon,
.competency-card.verantwoordelijke-besluitvorming .competency-icon.has-icon {
    background-image: url('../icons/VB.png'); /* Verantwoordelijk Beslissen */
}

/* Iconen voor gebruik buiten competency-cards */
.competency-icon.has-icon.zelfbewustzijn {
    background-image: url('../icons/ZB.png');
    background-color: var(--casel-self-awareness);
}

.competency-icon.has-icon.zelfmanagement {
    background-image: url('../icons/ZM.png');
    background-color: var(--casel-self-management);
}

.competency-icon.has-icon.sociaal-bewustzijn {
    background-image: url('../icons/SB.png');
    background-color: var(--casel-social-awareness);
}

.competency-icon.has-icon.relatievaardigheden {
    background-image: url('../icons/RV.png');
    background-color: var(--casel-relationship-skills);
}

.competency-icon.has-icon.verantwoordelijke-besluitvorming {
    background-image: url('../icons/VB.png');
    background-color: var(--casel-responsible-decision);
}

/* Portfolio items met competentie kleuren */
.portfolio-item.self-awareness {
    border-left: 3px solid var(--casel-self-awareness);
}

.portfolio-item.self-management {
    border-left: 3px solid var(--casel-self-management);
}

.portfolio-item.social-awareness {
    border-left: 3px solid var(--casel-social-awareness);
}

.portfolio-item.relationship-skills {
    border-left: 3px solid var(--casel-relationship-skills);
}

.portfolio-item.responsible-decision {
    border-left: 3px solid var(--casel-responsible-decision);
}

/* Competentie badges */
.competency-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.competency-badge.self-awareness {
    background: var(--casel-self-awareness-light);
    color: var(--casel-self-awareness-dark);
}

.competency-badge.self-management {
    background: var(--casel-self-management-light);
    color: var(--casel-self-management-dark);
}

.competency-badge.social-awareness {
    background: var(--casel-social-awareness-light);
    color: var(--casel-social-awareness-dark);
}

.competency-badge.relationship-skills {
    background: var(--casel-relationship-skills-light);
    color: var(--casel-relationship-skills-dark);
}

.competency-badge.responsible-decision {
    background: var(--casel-responsible-decision-light);
    color: var(--casel-responsible-decision-dark);
}

.competency-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

.competency-badge.self-awareness::before {
    background: var(--casel-self-awareness);
}

.competency-badge.self-management::before {
    background: var(--casel-self-management);
}

.competency-badge.social-awareness::before {
    background: var(--casel-social-awareness);
}

.competency-badge.relationship-skills::before {
    background: var(--casel-relationship-skills);
}

.competency-badge.responsible-decision::before {
    background: var(--casel-responsible-decision);
}

/* Responsieve aanpassingen */
@media (max-width: 768px) {
    .competency-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
    
    .competency-icon.has-icon {
        background-size: 28px 28px;
    }
}

/* Motivatie iconen voor Alfie Kohn principes */
.motivation-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 8px;
    vertical-align: middle;
    border-radius: 4px;
}

:root {
    /* Motivatie kleuren */
    --motivation-autonomy-color: #17a2b8;    /* Turquoise voor autonomie */
    --motivation-mastery-color: #fd7e14;     /* Oranje voor mastery */
    --motivation-purpose-color: #6f42c1;     /* Paars voor purpose */
}

.motivation-icon.autonomy {
    background-color: var(--motivation-autonomy-color);
    /* Voor nu een kleur, later vervangen door icon */
}

.motivation-icon.mastery {
    background-color: var(--motivation-mastery-color);
    /* Voor nu een kleur, later vervangen door icon */
}

.motivation-icon.purpose {
    background-color: var(--motivation-purpose-color);
    /* Voor nu een kleur, later vervangen door icon */
}

/* Kleine motivatie iconen voor lists */
@media (max-width: 768px) {
    .motivation-icon {
        width: 20px;
        height: 20px;
    }
}