/* === CSS/POLITIEK_STYLES.CSS (of voeg toe aan style.css) === */

/* Styling voor bestuurslagen */
.bestuurslaag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 15px;
    margin-bottom: 20px;
}
.bestuurslaag {
    flex: 1 1 280px; /* Responsive, basis breedte 280px */
    padding: 15px;
    border: 3px solid; /* Kleur per laag */
    border-radius: 5px;
    background-color: #455a64; /* Donkergrijsblauw basis */
}
.bestuurslaag h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #eceff1; /* Lichte titel */
    border-bottom: 1px solid #78909c;
    padding-bottom: 5px;
}
.bestuurslaag p {
    font-size: 0.95em;
    margin-bottom: 5px;
}
.bestuurslaag.gemeente { border-color: #66bb6a; background-color: #81c784; } /* Groen */
.bestuurslaag.provincie { border-color: #ffa726; background-color: #ffb74d; } /* Oranje */
.bestuurslaag.landelijk { border-color: #ef5350; background-color: #e57373; } /* Rood */


/* Styling voor Trias Politica blokken (kleine aanpassing tov eerdere versie) */
.macht-blok {
    /* Bestaande stijlen worden overgenomen uit style.css */
    /* Hier eventuele aanpassingen specifiek voor deze pagina */
    display: flex; /* Maakt flexbox layout mogelijk */
    flex-direction: column; /* Elementen onder elkaar */
    align-items: center; /* Centreer icoon en titel */
}
.macht-blok img {
     margin-bottom: 10px; /* Ruimte onder icoon */
}
/* Kleuren voor de blokken voor het spel (kunnen dezelfde zijn) */
.macht-blok.wetgevend { background-color: #3f51b5; border-color: #5c6bc0; }
.macht-blok.uitvoerend { background-color: #4caf50; border-color: #66bb6a; }
.macht-blok.rechterlijk { background-color: #ff9800; border-color: #ffa726; }


/* Stappenplan voor beleid maken */
ol.stappenplan {
    list-style-type: none; /* Geen nummers standaard */
    counter-reset: step-counter; /* Start teller */
    padding-left: 0;
    margin-top: 15px;
}
ol.stappenplan li {
    counter-increment: step-counter; /* Tel op */
    margin-bottom: 10px;
    position: relative;
    padding-left: 45px; /* Ruimte voor nummer */
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #e8eaf6; /* Lichte achtergrond */
    border: 1px dashed #c5cae9;
    color: #1a237e;
    border-radius: 3px;
}
ol.stappenplan li::before {
    content: counter(step-counter); /* Toon nummer */
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #5c6bc0; /* Gekleurd rondje */
    color: white;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    text-align: center;
    line-height: 25px; /* Verticaal centreren tekst */
    font-weight: bold;
}

/* Styling voor Trias Politica Spel */
#politiek-interactie-container {
    border: 3px solid #3f51b5; /* Blauwe rand */
    padding: 20px;
    background-color: #e8eaf6; /* Lichtblauw/paars */
    color: #1a237e;
    margin-top: 20px;
    border-radius: 5px;
}
#politiek-interactie-container h4 {
    color: #303f9f; /* Donkerder blauw */
    margin-top: 0;
    margin-bottom: 15px;
}

#taken-lijst {
    margin-bottom: 20px;
    padding: 10px;
    background-color: #c5cae9; /* Iets donkerder achtergrond */
    border: 2px dashed #7986cb;
    min-height: 50px; /* Ruimte voor taken */
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* Ruimte tussen taak-kaartjes */
}

.taak-kaart {
    background-color: #ffffff;
    border: 2px solid #7986cb;
    padding: 8px 12px;
    cursor: grab; /* Sleep-cursor */
    border-radius: 3px;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    transition: background-color 0.2s, border-color 0.2s;
}
.taak-kaart:active { /* Stijl tijdens slepen */
    cursor: grabbing;
    opacity: 0.7;
}

#machten-dropzones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.dropzone {
    border: 3px dashed #9fa8da; /* Gestippelde rand voor dropzone */
    padding: 15px;
    min-height: 150px; /* Minimale hoogte */
    border-radius: 5px;
    text-align: center;
    transition: background-color 0.2s, border-color 0.2s;
}
.dropzone h5 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #ffffff; /* Witte titel */
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.5);
}

/* Achtergrondkleuren matchen met .macht-blok */
.dropzone.wetgevend { background-color: #5c6bc0; border-color: #3f51b5;}
.dropzone.uitvoerend { background-color: #66bb6a; border-color: #4caf50;}
.dropzone.rechterlijk { background-color: #ffa726; border-color: #ff9800;}

/* Styling voor als er overheen gesleept wordt */
.dropzone.drag-over {
    border-style: solid;
    filter: brightness(1.1); /* Iets lichter maken */
}

/* Styling voor geplaatste taken in dropzone */
.dropzone .taak-kaart {
    cursor: default; /* Geen sleep cursor meer */
    margin-bottom: 5px;
    background-color: #e8eaf6; /* Lichte achtergrond */
    border-color: #5c6bc0;
    color: #1a237e;
}
.dropzone .taak-kaart.correct {
    border-left: 5px solid green; /* Groene rand voor correct */
}
.dropzone .taak-kaart.incorrect {
     border-left: 5px solid red; /* Rode rand voor incorrect */
}


#politiek-spel-feedback {
    margin-top: 15px;
    padding: 10px;
    font-weight: bold;
    text-align: center;
    display: none; /* Standaard verborgen */
}
#politiek-spel-feedback.correct { background-color: #e8f5e9; border: 1px solid green; color: green;}
#politiek-spel-feedback.incorrect { background-color: #ffebee; border: 1px solid red; color: red;}

#politiek-spel-score {
    text-align: center;
    margin-top: 10px;
    font-weight: bold;
}