/* Werkplaats only. The look itself — colours, fonts, the crest bar, the footer, light and dark — comes
   from vortex-tools-style (lib/vortex-tools/), shared with the other Vortex tools. */

.aanmeld-icoon {
    width: 1.1em;
    height: 1.1em;
    vertical-align: -.15em;
}

/* Bijlagen: the thumbnail grid and its lightbox on the klus-detailpagina. */

.bijlagen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .75rem;
    margin: 0;
    padding: 0;
}

.bijlage-thumb {
    display: block;
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-top-left-radius: .375rem;
    border-top-right-radius: .375rem;
}

.bijlage-bestand {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-tertiary-bg);
    text-decoration: none;
}

.bijlage-icoon {
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--bs-secondary-color);
}

/* The lightbox stays dark in both themes: a photo is looked at on a dark background. */
.bijlage-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 2rem;
    background-color: rgba(0, 0, 0, .85);
}

.bijlage-lightbox[hidden] {
    display: none;
}

.bijlage-lightbox img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
}

.bijlage-lightbox-link {
    color: #fff;
}

.bijlage-lightbox-sluiten {
    position: absolute;
    top: 1rem;
    right: 1rem;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
}

.bijlage-lightbox-open {
    overflow: hidden;
}

/* Klus-detail: the gegevens-en-acties card follows the reader on a wide screen, so the actions stay
   in reach while the voortgang log scrolls. */

@media (min-width: 992px) {
    .klus-zijkaart {
        position: sticky;
        top: 1rem;
    }
}

/* EC-view: the condensed board, its drag handles and the 48px thumbnail column. */

.ec-greep-kop,
.ec-greep-cel {
    width: 1.5rem;
    padding-right: 0;
}

.ec-greep {
    cursor: grab;
    color: var(--bs-tertiary-color);
    letter-spacing: -.15em;
    user-select: none;
}

.ec-rij-sleept {
    opacity: .4;
}

.ec-thumb-cel {
    width: 3.5rem;
}

.ec-thumb {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: .25rem;
}

.ec-thumb-leeg {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-tertiary-color);
}

.ec-voortgang {
    max-width: 28rem;
}

.ec-acties {
    min-width: 19rem;
}

.ec-budget-invoer {
    width: 8rem;
}

.ec-jaar-invoer {
    max-width: 5.5rem;
}

/* De jaarregel in de budgetrol-up moet oplichten tegen de afdelingsregels eronder: one step up
   from the table head's surface colour, so it reads in both themes. */
.ec-jaar-rij {
    --bs-table-bg: var(--bs-secondary-bg);
}