/* =====================================================================
   Bakkerij Van Mechelen - Portaal
   assets/stijl.css

   Kleuren: donkerbruin (kopbalk), crème (achtergrond), warm amber
   (accent). Bewust rustig gehouden; het accent trekt de aandacht naar
   de knoppen, niet naar de opmaak.
   ===================================================================== */

:root {
    --donker:       #2E2723;
    --donker-licht: #4A403A;
    --creme:        #F7F2EA;
    --creme-diep:   #EFE6D8;
    --wit:          #FFFFFF;
    --accent:       #B5793A;
    --accent-diep:  #96612C;
    --tekst:        #2E2723;
    --tekst-zacht:  #7A6E63;
    --rand:         #E2D7C6;
    --groen:        #3F7A4E;
    --groen-zacht:  #E7F1E9;
    --rood:         #A83A32;
    --rood-zacht:   #F8E8E6;
    --oranje:       #8A6212;
    --oranje-zacht: #FBF0D8;
    --schaduw:      0 1px 3px rgba(46, 39, 35, .07), 0 6px 18px rgba(46, 39, 35, .05);
    --radius:       10px;
}

* { box-sizing: border-box; }

/* Altijd ruimte voor de verticale scrollbalk reserveren. Zonder dit
   verschuift de (gecentreerde) kop-/navigatiebalk lichtjes tussen
   pagina's: een korte pagina (bv. Actieve sessies) heeft geen scrollbalk
   nodig, een lange (bv. Tools of Gebruikers) wel, en dat verschil in
   beschikbare breedte duwt de gecentreerde inhoud een paar pixels heen
   en weer. Door de scrollbalk-ruimte altijd te reserveren blijft de
   breedte - en dus de balk/nav bovenaan - op elke pagina identiek. */
html { -webkit-text-size-adjust: 100%; overflow-y: scroll; }

body {
    margin: 0;
    background: var(--creme);
    color: var(--tekst);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--accent-diep); }

/* ------------------------------- kopbalk ------------------------- */

.balk { background: var(--donker); color: #F3EBE0; }

.balk-binnen {
    max-width: 1120px;
    margin: 0 auto;
    padding: .85rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.merk { text-decoration: none; color: inherit; display: flex; align-items: baseline; gap: .6rem; }
.merk-naam { font-weight: 600; letter-spacing: .01em; }
.merk-sub {
    color: #C9AE86;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    border-left: 1px solid #5C5049;
    padding-left: .6rem;
}

.balk-rechts { display: flex; align-items: center; gap: 1rem; }
.wie { font-size: .875rem; color: #D8CCBD; }

.knop-tekst {
    background: none;
    border: 1px solid #5C5049;
    color: #E8DCCC;
    padding: .3rem .8rem;
    border-radius: 6px;
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}
.knop-tekst:hover { background: #3C332D; border-color: #7A6A5D; }

.inline { display: inline; margin: 0; }

/* ---------------------------- beheerbalk ------------------------- */

.beheerbalk { background: var(--donker-licht); }
.beheerbalk-binnen {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    gap: .25rem;
    flex-wrap: wrap;
}
.beheerbalk a {
    color: #D6C9B8;
    text-decoration: none;
    padding: .55rem .85rem;
    font-size: .875rem;
    border-bottom: 2px solid transparent;
}
.beheerbalk a:hover { color: #FFF; }
.beheerbalk a.aan { color: #FFF; border-bottom-color: var(--accent); }

/* "← Terug naar dashboard", enkel op de eigen pagina van een tool die op
   het portaal zelf draait (Broodlijst, Takenlijst - zie $toolNav in
   includes/layout.php). Zelfde "uitgang"-stijl als bij de gekoppelde
   tools op hun eigen subdomein (kop_gedeeld.css). */
.beheerbalk a.beheerbalk-terug { color: #B9AC9C; border-right: 1px solid #5C5049; margin-right: .4rem; }
.beheerbalk a.beheerbalk-terug:hover { color: #FFF; }

/* De vier beheerlinks (Gebruikers/Tools/Logboek/Actieve sessies) zitten
   samen onder één niet-klikbaar "Admin"-item, met een <details>/
   <summary> - net als .taak-details elders: geen JavaScript nodig, en
   toegankelijk (de summary is gewoon focusbaar/met Enter te bedienen). */
.beheerbalk details.beheer-groep { position: relative; }
.beheerbalk summary {
    display: block;
    color: #D6C9B8;
    padding: .55rem .85rem;
    font-size: .875rem;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    list-style: none;
}
.beheerbalk summary::-webkit-details-marker { display: none; }
.beheerbalk summary::after {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    margin-left: .4rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}
.beheerbalk summary:hover { color: #FFF; }
.beheerbalk summary.aan { color: #FFF; border-bottom-color: var(--accent); }
.beheerbalk details[open] > summary::after { transform: rotate(-135deg) translateY(1px); }

.beheer-lijst {
    position: absolute;
    z-index: 5;
    top: 100%;
    left: 0;
    min-width: 12rem;
    background: var(--donker-licht);
    border: 1px solid #5C5049;
    border-radius: 8px;
    box-shadow: var(--schaduw);
    padding: .35rem;
    display: flex;
    flex-direction: column;
}
.beheer-lijst a {
    padding: .5rem .65rem;
    border-radius: 6px;
    border-bottom: none;
}
.beheer-lijst a:hover { background: #3C332D; }
.beheer-lijst a.aan { background: #3C332D; }

/* ------------------------------ inhoud --------------------------- */

.inhoud {
    flex: 1;
    max-width: 1120px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}

h1 { font-size: 1.4rem; margin: 0 0 .35rem; font-weight: 600; }
h2 { font-size: 1.05rem; margin: 2rem 0 .75rem; font-weight: 600; }
h3 { font-size: .92rem; margin: 1.75rem 0 .6rem; font-weight: 600; }
.leeg-uitleg { color: var(--tekst-zacht); margin: 0 0 1.75rem; }

.voet {
    padding: 1.25rem 1.5rem 2rem;
    text-align: center;
    color: var(--tekst-zacht);
    font-size: .8rem;
}

/* ----------------------------- meldingen ------------------------- */

.melding {
    padding: .7rem 1rem;
    border-radius: 8px;
    margin: 0 0 1.25rem;
    border: 1px solid transparent;
    font-size: .9rem;
}
.melding.ok     { background: var(--groen-zacht);  border-color: #C6DCCB; color: #2C5B38; }
.melding.fout   { background: var(--rood-zacht);   border-color: #E8C6C2; color: #872E27; }
.melding.let-op { background: var(--oranje-zacht); border-color: #E6D3A6; color: var(--oranje); }

/* ------------------------------ app-raster ------------------------ */
/* Compact app-raster (icoon + naam onder elkaar, zoals een launcher):
   dit vervangt de vroegere, bredere kaarten en schaalt rustiger mee
   wanneer er tools bijkomen. Omschrijving en rol staan niet meer altijd
   zichtbaar op de tegel, maar als tooltip (title-attribuut) op de hele
   tegel. De handleiding-/technisch-iconen rechtsboven zijn een eigen
   klikbare laag bovenop de tegel (zie .app-tegel-link::after), zodat de
   hele tegel klikbaar is zonder een <a> in een <a> te moeten nesten. */

.icoon { width: 22px; height: 22px; }

/* Kop van het dashboard: begroeting + zoekveld links, en - enkel voor
   wie er toegang toe heeft - de Takenlijst-knop rechts uitgelijnd.
   Bewust GEEN tegel: Takenlijst is maar voor enkele gebruikers bedoeld
   en hoort niet tussen de gewone app-tegels (zie index.php). */
.dashboard-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.dashboard-kop-links { flex: 1 1 320px; min-width: 0; }
.dashboard-kop-takenlijst { flex-shrink: 0; }

.app-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.app-tegel {
    position: relative;
    background: var(--wit);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schaduw);
    transition: box-shadow .15s, border-color .15s;
}
.app-tegel:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 6px rgba(46, 39, 35, .1), 0 10px 24px rgba(46, 39, 35, .08);
}

.app-tegel-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
    padding: 1.5rem 1rem 1.15rem;
    border-radius: inherit;
}
/* "Stretched link": maakt de volledige tegel klikbaar via deze ene <a>. */
.app-tegel-link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}
.app-tegel-link:focus-visible {
    outline: 2px solid rgba(181, 121, 58, .35);
    outline-offset: 2px;
}

.app-tegel-icoon {
    width: 50px; height: 50px;
    border-radius: 11px;
    background: var(--creme-diep);
    color: var(--accent-diep);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: .65rem;
}
.app-tegel-icoon .icoon { width: 25px; height: 25px; }

.app-tegel-naam { font-size: .86rem; font-weight: 600; line-height: 1.3; }

/* v1.24: badge met het aantal mensen dat toegang heeft tot een tool -
   enkel voor beheerders (zie index.php). Staat in de brontekst NA
   .app-tegel-link, waardoor hij vanzelf boven diens "stretched link"
   (.app-tegel-link::after) getekend wordt; het z-index hieronder maakt
   dat expliciet i.p.v. enkel op de bronvolgorde te steunen. */
.toegang-badge {
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    background: var(--creme-diep);
    color: var(--tekst-zacht);
    border: 1px solid var(--rand);
    border-radius: 999px;
    padding: .18rem .45rem;
    font: inherit;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}
.toegang-badge:hover { background: var(--accent); color: #FFF; border-color: var(--accent); }
.toegang-badge .icoon { width: 13px; height: 13px; }

/* Dezelfde badge, maar dan op de Takenlijst-knop: die is geen tegel maar
   een smalle pil, dus de badge hangt als een meldingsbolletje net over
   de rand i.p.v. er binnenin te zitten. */
.dashboard-kop-takenlijst-anker { position: relative; flex-shrink: 0; }
.dashboard-kop-takenlijst-anker .toegang-badge { top: -.55rem; right: -.55rem; }

.knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .5rem 1rem;
    border-radius: 7px;
    border: 1px solid transparent;
    font: inherit;
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.knop-vol    { background: var(--accent); color: #FFF; }
.knop-vol:hover { background: var(--accent-diep); }
.knop-rand   { background: var(--wit); color: var(--tekst); border-color: var(--rand); }
.knop-rand:hover { background: var(--creme); border-color: #CFC0AA; }
.knop-rood   { background: var(--wit); color: var(--rood); border-color: #E3C3BF; }
.knop-rood:hover { background: var(--rood-zacht); }
.knop:disabled, .knop[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.knop-klein  { padding: .3rem .65rem; font-size: .8rem; }

/* ------------------------------ kaders --------------------------- */

.kaart {
    background: var(--wit);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schaduw);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.kaart h2:first-child { margin-top: 0; }

.smal { max-width: 27rem; margin: 3rem auto; }
.midden { max-width: 40rem; margin: 2rem auto; }

/* ---------------------------- formulieren ------------------------ */

label { display: block; font-size: .85rem; font-weight: 500; margin: 0 0 .3rem; }

input[type=text], input[type=password], input[type=url], input[type=number],
input[type=date], input[type=file], input[type=search], select, textarea {
    width: 100%;
    padding: .5rem .7rem;
    border: 1px solid var(--rand);
    border-radius: 7px;
    background: var(--wit);
    color: var(--tekst);
    font: inherit;
    font-size: .9rem;
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid rgba(181, 121, 58, .35);
    outline-offset: 1px;
    border-color: var(--accent);
}

/* input[type=search] krijgt van de browser zelf een afwijkend uiterlijk
   (rondere hoeken, ingebouwd kruisje); dat zetten we uit zodat hij er
   hetzelfde uitziet als de andere velden, met een eigen zoekicoontje. */
input[type=search] {
    -webkit-appearance: none;
    appearance: none;
}
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.veld { margin-bottom: 1rem; }
.veld-hulp { font-size: .8rem; color: var(--tekst-zacht); margin: .3rem 0 0; }

.veld-rij { display: flex; gap: 1rem; flex-wrap: wrap; }
.veld-rij > .veld { flex: 1 1 12rem; }

.vink { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.vink input { width: auto; }
.vink label { margin: 0; font-weight: 400; }

.knoppenrij { display: flex; gap: .6rem; align-items: center; margin-top: 1.25rem; flex-wrap: wrap; }

/* ----------------------------- tabellen -------------------------- */

.tabel-omhulsel { overflow-x: auto; }

table.tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}
table.tabel th, table.tabel td {
    padding: .55rem .7rem;
    text-align: left;
    border-bottom: 1px solid var(--rand);
    vertical-align: top;
}
table.tabel th {
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tekst-zacht);
    white-space: nowrap;
}
table.tabel tbody tr:hover { background: #FBF7F1; }
.nowrap { white-space: nowrap; }

/* handleidingen.php: toolnaam met klein icoontje ervoor, zelfde stijl
   als .app-tegel-icoon maar compacter voor gebruik in een tabelrij. */
.handleiding-tool { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; }
.handleiding-tool-icoon {
    width: 30px; height: 30px;
    flex: 0 0 30px;
    border-radius: 8px;
    background: var(--creme-diep);
    color: var(--accent-diep);
    display: flex; align-items: center; justify-content: center;
}
.handleiding-tool-icoon .icoon { width: 16px; height: 16px; }

.label {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 500;
    background: var(--creme-diep);
    color: var(--tekst-zacht);
    white-space: nowrap;
}
.label.groen  { background: var(--groen-zacht);  color: #2C5B38; }
.label.rood   { background: var(--rood-zacht);   color: #872E27; }
.label.oranje { background: var(--oranje-zacht); color: var(--oranje); }

.zacht { color: var(--tekst-zacht); }
.klein { font-size: .8rem; }
.rechts { text-align: right; }

/* -------------------------- aanmeldpagina ------------------------ */

.aanmeld-kop { text-align: center; margin-bottom: 1.5rem; }
.aanmeld-kop .titel { font-size: 1.15rem; font-weight: 600; }
.aanmeld-kop .sub {
    color: var(--tekst-zacht);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin-top: .15rem;
}

.code-invoer {
    font-size: 1.6rem;
    letter-spacing: .45em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding-left: .45em;
}

.geheim {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: var(--creme-diep);
    padding: .5rem .75rem;
    border-radius: 6px;
    font-size: .9rem;
    letter-spacing: .06em;
    word-break: break-all;
    display: inline-block;
}

.stappen { padding-left: 1.15rem; color: var(--tekst-zacht); font-size: .89rem; }
.stappen li { margin-bottom: .35rem; }

/* ----------------------------- filters --------------------------- */

.filterbalk {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 1.25rem;
}
.filterbalk .veld { margin-bottom: 0; flex: 0 1 11rem; }

.paginering { display: flex; gap: .5rem; align-items: center; margin-top: 1.25rem; }

/* --------------------------- hulpklassen ------------------------- */

/* De Content-Security-Policy verbiedt inline stijlen. Alle opmaak die
   anders als style-attribuut geschreven zou worden, staat hier. */

.mt-klein  { margin-top: .5rem; }
.mt-groot  { margin-top: 1.25rem; }
.mb-nul    { margin-bottom: 0; }
.breed-vol { width: 100%; }
.groei     { flex: 1 1 auto; }

.balk-meter {
    height: 6px;
    background: var(--creme-diep);
    border-radius: 999px;
    overflow: hidden;
}
.balk-meter i { display: block; height: 100%; background: var(--accent); }

/* ------------------------------ actiebalk ------------------------- */

/* Bovenaan overzichtspagina's: zoekveld, filterknoppen en een
   hoofdactie (bv. "Nieuwe gebruiker") rechts uitgelijnd. */

.actiebalk {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.actiebalk-links {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
/* Duwt de hoofdactie (bv. "Nieuwe gebruiker") naar rechts, ongeacht of
   er links een zoekveld/filters staan of niets. */
.actiebalk-hoofdknop { margin-left: auto; }

.zoekveld { position: relative; }
.zoekveld input[type=search] {
    width: 16rem;
    max-width: 100%;
    padding-left: 2.25rem;
}
.zoekveld::before {
    content: "";
    position: absolute;
    left: .75rem;
    top: 50%;
    width: 15px;
    height: 15px;
    transform: translateY(-50%);
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A6E63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E")
                center / contain no-repeat;
}
.filterknoppen { display: flex; gap: .4rem; flex-wrap: wrap; }

/* Takenlijst: eigen, twee-rijige variant van de actiebalk hierboven -
   de zoekbalk (breed, met "+ Nieuwe taak" op het einde) op een eigen
   rij boven de filterknoppen/collega-filter. "Instellingen" (enkel
   beheerders) staat sinds v1.25 niet meer hier, maar als navigatie-item
   naast "Terug naar dashboard" (zie de $toolNav-modal-optie bij kop()
   in includes/layout.php). Bewust los van .actiebalk/.actiebalk-links,
   die elders (Gebruikers, Tools) een eenvoudigere ene-rijige indeling
   gebruiken. */
.taken-actiebalk { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.25rem; }
.taken-actiebalk-rij { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.zoekveld-groot { flex: 1 1 16rem; }
.zoekveld-groot input[type=search] { width: 100%; }

/* ------------------------------- pop-ups -------------------------- */

.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(46, 39, 35, .55);
    z-index: 100;
    align-items: flex-start;
    justify-content: center;
    padding: 3rem 1.25rem;
    overflow-y: auto;
}
.modal.open { display: flex; }

.modal-kaart {
    background: var(--wit);
    border-radius: var(--radius);
    box-shadow: var(--schaduw);
    padding: 1.5rem;
    width: 100%;
    max-width: 30rem;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
}
.modal-kaart.breed { max-width: 42rem; }

.modal-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .25rem;
}
.modal-kop h2 { margin: 0; }

.modal-sluit {
    flex: 0 0 auto;
    width: 2rem; height: 2rem;
    border: 0;
    background: transparent;
    color: var(--tekst-zacht);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
}
.modal-sluit:hover { background: var(--creme-diep); color: var(--tekst); }

body.modal-actief { overflow: hidden; }

/* -------------------------------- tabs ----------------------------- */

/* Generiek: .tabs bevat .tab-knoppen (met .tab-knop erin) gevolgd door
   de .tab-paneel-blokken. Gebruikt in de bewerk-pop-ups van Gebruikers
   en Tools. */

.tab-knoppen {
    display: flex;
    gap: 1.5rem;
    border-bottom: 1px solid var(--rand);
    margin: .25rem 0 1.25rem;
}
.tab-knop {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: .6rem .1rem;
    font: inherit;
    font-size: .9rem;
    font-weight: 500;
    color: var(--tekst-zacht);
    cursor: pointer;
}
.tab-knop:hover { color: var(--tekst); }
.tab-knop.aan { color: var(--tekst); border-bottom-color: var(--accent); }

/* --------------------------- rechten op tools ---------------------- */

.rechten-lijst { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .5rem; }

.rechten-rij {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem .75rem;
    border: 1px solid var(--rand);
    border-radius: 8px;
    background: var(--creme);
}
.rechten-naam { display: flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 500; }
.rechten-naam .icoon { width: 18px; height: 18px; color: var(--accent-diep); flex: 0 0 auto; }
.rechten-rij select { width: auto; min-width: 10rem; }

/* ------------------------------ handleidingen ---------------------- */

.handleiding-kolommen { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.handleiding-kolom { flex: 1 1 16rem; min-width: 0; }
.handleiding-kolom h3 { display: flex; align-items: center; gap: .5rem; }

details.historiek summary {
    cursor: pointer;
    font-size: .78rem;
    color: var(--tekst-zacht);
    margin: .6rem 0;
}
details.historiek summary:hover { color: var(--accent-diep); }
details.historiek table.tabel { font-size: .8rem; }

/* ------------------------------ takenlijst -------------------------- */

.taken-lijst { display: flex; flex-direction: column; gap: 1rem; }

.taak-kaart {
    background: var(--wit);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schaduw);
}

/* Elke taak staat standaard dichtgeklapt (enkel titel/prioriteit/
   deadline/status zichtbaar); pas bij een klik op de kop verschijnt de
   rest (omschrijving, knoppen, chatter...). Gebouwd met het native
   <details>/<summary>-element: geen JS nodig, en toegankelijk (de kop
   krijgt automatisch de rol van een knop die de inhoud in-/uitklapt). */
.taak-details > summary.taak-kop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    cursor: pointer;
    list-style: none;
}
.taak-details > summary.taak-kop::-webkit-details-marker { display: none; }
.taak-details > summary.taak-kop:hover h3 { color: var(--accent-diep); }
.taak-details > summary.taak-kop:focus-visible {
    outline: 2px solid rgba(181, 121, 58, .35);
    outline-offset: -2px;
    border-radius: var(--radius);
}
.taak-details[open] > summary.taak-kop { border-bottom: 1px solid var(--rand); }

.taak-kop h3 { margin: 0; font-size: 1rem; }
.taak-kop-rechts { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }

.taak-chevron {
    width: .5rem;
    height: .5rem;
    flex: 0 0 auto;
    border-right: 2px solid var(--tekst-zacht);
    border-bottom: 2px solid var(--tekst-zacht);
    transform: rotate(45deg);
    transition: transform .15s ease;
    margin: .2rem .1rem 0 0;
}
.taak-details[open] .taak-chevron { transform: rotate(-135deg); }

/* Sinds v1.30: de taakkaart is tweekolomsom - links de inhoud (omschrijving,
   knoppen, collega's, "aangemaakt/opgenomen..."), rechts de chatter, net als
   bij Odoo. Op smalle schermen (telefoon) valt dit terug naar één kolom,
   chatter onderaan zoals voorheen. */
.taak-body {
    padding: 1rem 1.5rem 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 1.75rem;
}
.taak-hoofd { flex: 1 1 60%; min-width: 0; }

/* Chatter: rechterkolom, zichtbaar zodra de kaart opengeklapt is
   (vergelijkbaar met de chatter in Odoo, maar bewust compact gehouden). */
.taak-chatter {
    flex: 1 1 16rem;
    min-width: 16rem;
    max-width: 22rem;
    border-left: 1px solid var(--rand);
    padding-left: 1.5rem;
}

.taak-chatter-compose { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .6rem; }
.taak-chatter-compose textarea { flex: 1 1 auto; min-height: 2.3rem; resize: vertical; }

.taak-berichten {
    display: flex;
    flex-direction: column;
    max-height: 20rem;
    overflow-y: auto;
}
.taak-bericht { padding: .5rem 0; border-top: 1px solid var(--rand); }
.taak-bericht:first-child { border-top: 0; padding-top: 0; }
.taak-bericht-kop { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.taak-bericht p { margin: .2rem 0 0; font-size: .9rem; }

/* Collega's die samen aan een taak werken: pillen, elk zijn eigen klein
   formuliertje voor "verwijderen". Toevoegen gebeurt sinds v1.30 via de
   knop "+ Collega" in de knoppenrij (pop-up), niet meer inline hier. */
.taak-deelnemers { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .6rem 0 0; }
form.label {
    margin: 0;
    padding: .1rem .2rem .1rem .5rem;
    border: 0;
    font: inherit;
    font-size: .75rem;
}
form.label button {
    background: none;
    border: 0;
    padding: 0 0 0 .35rem;
    margin: 0;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    font-size: 1em;
    line-height: 1;
    vertical-align: middle;
}
form.label button:hover { color: var(--rood); }

/* "Aangemaakt.../Opgenomen.../Samen met..." - sinds v1.30 een voetregel
   ONDER de knoppenrij (en eventuele collega-pillen) i.p.v. erboven. */
.taak-meta { margin: .9rem 0 0; padding-top: .75rem; border-top: 1px solid var(--rand); }

@media (max-width: 760px) {
    .taak-body { flex-direction: column; gap: 0; }
    .taak-chatter {
        border-left: 0;
        border-top: 1px solid var(--rand);
        margin-top: .9rem;
        padding-left: 0;
        padding-top: .75rem;
        max-width: none;
        min-width: 0;
        width: 100%;
    }
}

/* --------------------------- toegankelijkheid -------------------- */

.verborgen {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* =====================================================================
   Broodlijst-tool (broodlijst.php) - sinds v1.28 hier i.p.v. als inline
   <style> op de pagina zelf, zodat die onder de gewone CSP valt. Enkel
   wat de rest van dit stylesheet nog niet biedt: de dropzone en de
   wisselende status-/resultaatblokken. Kaart, meldingen, knoppen en
   tabel hergebruiken de gewone portaalklassen.
   ===================================================================== */
.dropzone {
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
  background: var(--wit);
  padding: 36px 20px;
  text-align: center;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.dropzone.drag { background: var(--creme); border-color: var(--accent-diep); }
.dropzone p { margin: 6px 0; }
.dropzone .big { font-weight: 600; font-size: 1.05rem; }
.dropzone .small { font-size: 0.85rem; color: var(--tekst-zacht); }
.dropzone input[type=file] { display: none; }

#status { margin-top: 18px; font-size: 0.9rem; color: var(--tekst-zacht); min-height: 1.2em; }
#status.err { color: var(--rood); }

.card { display: none; }
.card.show { display: block; }
.card h2 { font-size: 1rem; margin: 0 0 1rem; }

table.broodlijst-tabel th, table.broodlijst-tabel td { text-align: right; }
table.broodlijst-tabel th:first-child, table.broodlijst-tabel td:first-child { text-align: left; }
table.broodlijst-tabel tr.totaal td { font-weight: 700; border-top: 2px solid var(--accent-diep); border-bottom: none; }
table.broodlijst-tabel tr.empty td { color: var(--tekst-zacht); }

.flagbox { display: none; }
.flagbox.show { display: block; }
.flagbox h3 { margin: 0 0 .4rem; font-size: 0.9rem; }
.flagbox ul { margin: 4px 0 0; padding-left: 18px; }
.flagbox li { margin-bottom: 3px; }

/* Logboek van de generator (logboek_broodlijst.php) - de opmerkingen per
   generatie staan ingeklapt achter een <details>, zelfde opzet als
   details.historiek hierboven. */
table.tabel details summary {
    cursor: pointer;
    color: var(--tekst-zacht);
}
table.tabel details summary:hover { color: var(--accent-diep); }
table.tabel details ul { margin: 4px 0 8px; padding-left: 18px; }
table.tabel details li { margin-bottom: 2px; }