/* Mobiele sorteerwaarschuwing alleen tonen op kleine schermen */
@media (max-width: 600px) {
    .mobile-sort-warning {
        display: block !important;
    }
}

/* =========================================
     Concertplanning: Mobiel layout fix
========================================= */
@media (max-width: 600px) {
    .planning-card {
        padding: 8px 4px;
        margin-bottom: 10px;
    }

    .planning-card .idea-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 2px;
    }

    .planning-left {
        gap: 4px;
        flex-wrap: wrap;
    }

    .planning-right {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-start;
        margin-top: 4px;
    }

    .planning-duur,
    .planning-presentatie {
        min-width: 60px;
        font-size: 13px;
    }

    .button.icon-only.danger {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        padding: 0;
    }

    .badge-mini {
        font-size: 10px;
        padding: 2px 6px;
    }
}

/* ============================================================
   CARDS
   ============================================================ */

.card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: 16px;
    border: 1px solid var(--gray-200);
}


/* ============================================================
   BUTTONS
   ============================================================ */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;


    height: 32px;
    /*vaste hoogte*/
    padding: 0px 14px;
    /*alleen horizontaal*/
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-300);
    box-sizing: border-box;

    font-size: 14px;
    font-weight: 500;
    line-height: 1;

    background: var(--color-surface);
    color: var(--gray-700);

    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.button.icon-only {
    width: 38px;
    height: 38px;
    padding: 0;
    min-width: 38px;
}

/* Desktop default: mobile-action-label spans binnen icon-only knoppen
   altijd verbergen. In de mobile bottom-sheet (.overflow-actions) wordt
   dit weer aangezet in css/06-mobile-nav.css. */
.button.icon-only .mobile-action-label,
.mobile-action-label {
    display: none;
}

.button svg,
.button i {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.button:hover {
    background: var(--gray-100);
}

/* Primary subtiel */
.button.primary {
    background: var(--color-platform-accent);
    border-color: var(--color-platform-accent);
    color: white;
    text-decoration: none;
}

.button.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(249, 115, 22, 0.25);
    filter: brightness(1.05);
}

/* Secondary */
.button.secondary {
    background: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--gray-700);
}

/* Warning */
.button.warning {
    background: #f7b84b;
    border-color: #f7b84b;
    color: white;
}

/* Danger */
.button.danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: white;
}

/* ============================================================
   COLUMN SELECTOR DROPDOWN
   ============================================================ */

.dt-column-selector-wrapper {
    position: relative;
}

.column-selector-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;

    background: var(--color-surface);
    border: 1px solid var(--gray-200);
    padding: 10px;
    border-radius: var(--radius-md);

    max-height: 300px;
    overflow-y: auto;

    z-index: var(--z-dropdown);
}

.column-selector-dropdown.open {
    display: block;
}

.column-selector-item {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

/* ============================================================
   FORMS
   ============================================================ */

input,
select,
textarea {
    padding: 6px 8px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: var(--control-font-size);
}

/* ============================================================
   PAGE HEADER
============================================================ */

.page-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);

    /* originele spacing behouden */
    margin: -24px -32px 24px;
    padding: 24px 32px 16px;

    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);

    display: flex;
    flex-direction: column;
}

/* Breadcrumbs */

.page-breadcrumbs {
    font-size: 13px;
    color: var(--gray-500);
    margin-bottom: 12px;
    /* ← ruimte tussen breadcrumbs en titel */
}

/* Titel + acties */

.page-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Titelblok */

.page-title {
    display: flex;
    align-items: center;
    gap: 10px;
    /* min-width: 0 zodat lange titels mogen wrappen/krimpen i.p.v. de
       row in z'n geheel te verbreden — voorkomt dat 3-puntjes onder de
       titel zakken op mobile. */
    min-width: 0;
    flex: 1 1 auto;
}

.page-title-text {
    min-width: 0;
}

.page-header h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 650;
    line-height: 1.2;
    /* Lange titels (zoals concert-titels) mogen wrappen i.p.v. row breken */
    overflow-wrap: anywhere;
}

.page-subtitle {
    margin-top: 2px;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-500);
    line-height: 1.3;
}

/* Actieknoppen */

.page-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.page-header-actions--compact {
    gap: 6px;
}

.page-header-actions--compact .button {
    height: 30px;
    padding: 0 10px;
    font-size: 13px;
    gap: 5px;
}

.page-header-actions--compact .button i,
.page-header-actions--compact .button svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

.page-header-actions--icon-only .button.has-icon .btn-label {
    display: none;
}

.page-header-actions--icon-only .button.icon-only,
.page-header-actions--icon-only .button.has-icon {
    width: 30px;
    min-width: 30px;
    height: 30px;
    padding: 0;
}

.page-header-actions--icon-only .button i,
.page-header-actions--icon-only .button svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

.page-header--stack-actions .page-title-row {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 10px;
}

.page-header--stack-actions .page-title {
    flex: 1 1 360px;
    min-width: 260px;
}

.page-header--stack-actions .page-header-actions {
    flex: 1 1 520px;
    justify-content: flex-end;
}

@media (max-width: 1200px) {
    .page-header--stack-actions .page-header-actions {
        flex-basis: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 900px) {
    .page-header-actions .button {
        padding: 6px 10px;
        font-size: 13px;
    }
}

@media (max-width: 640px) {
    .page-header-actions .button.has-icon .btn-label {
        display: none;
    }

    .page-header-actions .button.has-icon {
        padding: 8px;
    }
}

/* Icon */

.page-icon {
    width: 22px;
    height: 22px;
}

/* ============================================================
   FORM LAYOUT - nieuw_evenement.php
   ============================================================ */

.form-layout {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin-bottom: 10px;
}

.form-row label {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 0px;
}

.form-row input,
.form-row textarea,
.form-row select {
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #dcdcdc;
    font-size: 14px;
    width: 100%;
}

.form-actions {
    margin-top: 10px;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: flex-start;
}

.form-actions .button {
    height: 38px;
    display: inline-flex;
    align-items: center;
}

/* Compact datumveld */
input[type="date"] {
    width: 180px;
}

/* ============================================================
   UITLIJNING Bewerken knop op Evenement/index.php
   ============================================================ */
.list-clean {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
}

.list-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.list-meta {
    color: #6b7280;
    font-size: 14px;
}

/* ============================================================
   UITLIJNING Secties
   ============================================================ */
.section-title {
    margin-bottom: 20px;
    /* was waarschijnlijk kleiner */
}

/* ============================================================
   Badges op ideeen/index.php
   ============================================================ */
.idee-events {
    margin-top: 6px;
}

.chip-event {
    display: inline-block;
    background: #eef3ff;
    color: #2f4bb8;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    margin-right: 6px;
    border: 1px solid #d8e2ff;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chip-event:hover {
    background: #dfe8ff;
    border-color: #c7d6ff;
    color: #21388f;
}

.chip-event:focus-visible {
    outline: 2px solid #9cb3ff;
    outline-offset: 2px;
}

.chip-more {
    background: #e6f4ea;
    color: #1e6b3a;
}

/* ============================================================
   Permissie opmaak op admin/rollen.php
   ============================================================ */

.perm-section {
    margin: 2px 0 20px;
}

.perm-section-title {
    font-weight: 600;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line, #e5e7eb);
}

.perm-table {
    width: 100%;
    border-collapse: collapse;
}

.perm-table tr+tr td {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.perm-table td {
    padding: 8px 10px;
    vertical-align: top;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
}

.perm-check {
    width: 34px;
}

.perm-key {
    width: 260px;
    color: #111827;
}

.perm-key-text {
    font: inherit;
}

.perm-desc {
    color: #6b7280;
}

.role-body {
    display: none;
    margin-top: 15px;
}

.role-card.open .role-body {
    display: block;
}

.role-toggle {
    all: unset;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ============================================================
   Evenement – Idea Cards
   ============================================================ */

.idea-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--line, #e5e7eb);
    border-left: 4px solid var(--line, #e5e7eb);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.idea-card:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.idea-card.stem-voor {
    border-left-color: #16a34a;
}

.idea-card.stem-tegen {
    border-left-color: #dc2626;
}

.idea-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.idea-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.idea-toggle {
    font-size: 0.85rem;
    transition: transform 0.2s ease;
}

.idea-card[data-open="true"] .idea-toggle {
    transform: rotate(90deg);
}

.idea-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.idea-votes {
    display: flex;
    gap: 8px;
    font-size: 0.9rem;
    opacity: 0.85;
}

.idea-body {
    display: none;
    margin-top: 14px;
    padding: 18px 20px 16px 20px;
    border-top: 1px solid var(--line, #e5e7eb);
}

.idea-card[data-open="true"] .idea-body {
    display: block;
}

.idea-card .idea-title,
.idea-card .planning-number {
    color: #6b7280;
    font-weight: 500;
    /* zelfde grijzige tint */
}

.idea-card svg {
    stroke: #6b7280;
}

.idea-card .button.danger svg {
    stroke: #ffffff !important;
}

.idea-card .button.danger i {
    color: #ffffff !important;
}

.idea-card .idea-header {
    min-height: 44px;
    padding: 6px;
}

/* Idea body layout */

.idea-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.idea-info p {
    margin: 6px 0;
    font-size: 0.95rem;
}

.idea-stemmen {
    border-left: 1px solid var(--line, #e5e7eb);
    padding-left: 18px;
}

.stem-placeholder {
    font-size: 0.9rem;
    opacity: 0.8;
}

.stem-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 10px;
    margin-bottom: 12px;
}

.stem-naam {
    font-weight: 600;
    font-size: 0.9rem;
}

.stem-buttons {
    display: flex;
    gap: 6px;
}

.stem-btn {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid var(--line, #e5e7eb);
    background: #fff;
    /* Expliciete kleur: iOS Safari geeft <button> anders een lichte
       systeemkleur, waardoor de Lucide-SVG (stroke=currentColor) onzichtbaar
       wordt op de witte knop. */
    color: var(--gray-900, #1f2933);
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
}

.stem-btn.active {
    background: #e5f3ff;
    border-color: #3b82f6;
    color: #1e40af;
}

.stem-note {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #d0d5dd;
    font-size: 0.9rem;
}

.stem-readonly {
    grid-column: 1 / -1;
    font-size: 0.85rem;
    opacity: 0.6;
}

.stem-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* ruimte tussen buttons en note */
}

.idee-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 12px 16px;
    background: #fff;
}

.idee-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.idee-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    transition: max-height 0.25s ease-out, opacity 0.2s ease-out, margin-top 0.25s ease-out;
}

.idee-card[data-open="true"] .idee-body {
    max-height: 2000px;
    opacity: 1;
    margin-top: 14px;
}

.idee-toggle {
    margin-right: 6px;
    transition: transform 0.2s ease-out;
}

.idee-card[data-open="true"] .idee-toggle {
    transform: rotate(90deg);
}

.koppel-form {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}


/* ============================================================
   DATA TABLE – BASE SPACING
   ============================================================ */

.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.data-table th,
.data-table td {
    padding: 14px 20px;
    /* horizontale ruimte */
    vertical-align: middle;
}

.data-table th {
    text-align: left;
    font-weight: 600;
}

.data-table tbody tr:hover {
    background: var(--gray-50);
}


.bieb-preview-card {
    background: #f8f9fb;
    border: 1px solid #dcdfe6;
    border-radius: 8px;
    padding: 16px;
    margin-top: 10px;
}

.bieb-preview-header {
    font-weight: 600;
    margin-bottom: 8px;
}

.bieb-preview-body p {
    margin: 4px 0;
}

.bieb-preview-actions {
    margin-top: 12px;
    display: flex;
    gap: 10px;
}

.flash {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 18px;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 9999;
}

.flash.visible {
    opacity: 1;
    transform: translateY(0);
}

.flash-success {
    background: #1e9e6f;
}

.flash-info {
    background: #4a6fa5;
}

.stem-datum {
    font-size: 0.85em;
    color: #777;
    margin-left: 6px;
}

/* =========================
   Planning – identiek aan idea-card
========================= */

#planning-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.planning-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--line, #e5e7eb);
    border-left: 4px solid #f4a261;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    display: block;
}

.planning-card .idea-title {
    font-weight: 500;
}

/* Header exact gelijk */
.planning-card .idea-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
}

/* Icon sizing */
.planning-duur i,
.planning-presentatie i,
.button i {
    width: 14px;
    height: 14px;
}

/* Presentatie input */
.presentatie-input {
    width: 55px;
    text-align: center;
    padding: 2px 6px;
}

/* Header */
.planning-card .idea-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px;
}

/* Links */
.planning-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Rechts */
.planning-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Muziekduur */
.planning-duur {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 80px;
    /* zorgt voor nette uitlijning */
    justify-content: flex-end;
    color: #6b7280;
}

/* Presentatie */
.planning-presentatie {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 90px;
    justify-content: flex-end;
}

/* Input */
.presentatie-input {
    width: 55px;
    text-align: center;
    padding: 2px 6px;
}

.chip-mini {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #ccc;
    background: transparent;
    font-size: 12px;
    cursor: pointer;
}

.chip-mini.active {
    background: #232f59;
    color: white;
    border-color: #232f59;
}

.idea-votes span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.idea-votes svg[data-lucide="thumbs-up"] {
    color: #2e7d32;
}

.idea-votes svg[data-lucide="thumbs-down"] {
    color: #c62828;
}

.idea-votes svg[data-lucide="help-circle"] {
    color: #666;
}

.stem-overzicht {
    margin-top: 12px;
}

.stem-row.readonly {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.stem-row.readonly:last-child {
    border-bottom: none;
}

.stem-naam {
    font-weight: 500;
}

.stem-waarde {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    justify-self: end;
}

.stem-note-readonly {
    grid-column: 1 / -1;
    font-size: 0.9rem;
    color: #555;
    margin-top: 4px;
}

.stem-waarde svg[data-lucide="thumbs-up"] {
    stroke: #2e7d32;
}

.stem-waarde svg[data-lucide="thumbs-down"] {
    stroke: #c62828;
}

.stem-waarde {
    color: #444;
}

.stem-waarde svg[data-lucide="hourglass"] {
    stroke: #aaa;
}

/* =====================================
   BADGES – ONDERDELEN
===================================== */

.badge-mini {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: #fff !important;
}



/* ============================================================
   ADMIN DASHBOARD GRID
============================================================ */

/* Grid spacing consistent */

.admin-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.admin-tile {
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.admin-tile h3 {
    margin-top: 0;
    margin-bottom: 8px;
}

.admin-tile .button {
    margin-top: auto;
    align-self: flex-start;
}

.dashboard-section:nth-of-type(2) .admin-tiles {
    grid-template-columns: repeat(4, 1fr);
}

.dashboard-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px 0;
}

/* ============================================================
   DASHBOARD SECTIONS
============================================================ */

.dashboard-section {
    background: #fdfdfd;
    border: 1px solid var(--gray-200);
    border-radius: 16px;

    padding: 20px;
    /* gelijke binnenruimte */
    margin-bottom: 18px;
}

/* Titel dichter tegen bovenkant */

.dashboard-title {
    margin: 0 0 16px 0;
    /* geen top-margin */
}

.admin-meta {
    margin-bottom: 20px;
    /* meer ruimte naar eerste container */
}

.tile-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px 0;
}

.tile-badge {
    background: #e8eefc;
    color: #2d4ed8;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 999px;
}

.content-card {
    padding: 0px 0px;
}


/* ============================================================
   ADMIN/ONDERDELEN FORM
============================================================ */
.onderdelen-form {
    display: flex;
    align-items: flex-end;
    gap: 40px;
    /* afstand tussen Naam / Afkorting / knop */
}

/* label + input naast elkaar */
.onderdelen-form .form-field {
    display: flex;
    align-items: center;
    gap: 10px;
    /* ruimte tussen label en input */
}

/* vaste inputbreedtes */
.onderdelen-form input[name="naam"] {
    width: 220px;
}

.onderdelen-form input[name="afkorting"] {
    width: 80px;
}

.onderdelen-form input {
    height: 38px;
    /* of wat je globale input hoogte is */
}


/* knop */
.onderdelen-form .form-actions {
    display: flex;
}

.onderdelen-form .button {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    min-height: unset;
}

.onderdelen-form .button i {
    line-height: 1;
}

.form-grid-3 {
    display: grid;
    grid-template-columns: 240px 160px auto;
    gap: var(--space-md);
    align-items: end;
}

.onderdelen-form .button svg {
    display: block;
    /* haalt baseline-offset weg */
}

.onderdelen-overzicht {
    padding-left: 90px;
}

/* Alleen overzicht-card: geen extra inspringing */
.content-card.onderdelen-overzicht {
    padding-left: 0;
    padding-right: 0;
    /* optioneel, als je ook rechts strak wilt */
}

/* Onder-delen tabel: geen extra 'inspring' door cell spacing/padding */
.onderdelen-table {
    border-collapse: collapse;
    border-spacing: 0;
}


.onderdelen-table th,
.onderdelen-table td {
    padding-left: 0;
    table-layout: fixed;
    width: 400px;
}

.content-card.onderdelen-overzicht {
    margin-top: 40px;
    /* 32–48 afhankelijk van je smaak */
}

/* Verwijderknoppen zelfde formaat als + knop */
.onderdelen-overzicht .button.icon-only {
    height: 38px;
    width: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* SVG netjes centreren */
.onderdelen-overzicht .button.danger svg {
    display: block;
}

.onderdelen-form .button.primary {
    height: 38px;
    width: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* SVG netjes centreren */
.onderdelen-form .button.primary svg {
    display: block;
}

.section-title {
    margin: 0 0 20px 0;
    font-size: 16px;
    font-weight: 600;

}

.data-table.onderdelen-table {
    width: 100%;
}

.data-table.onderdelen-table td.actions-col {
    display: table-cell;
    text-align: right;
    white-space: nowrap;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 220px 1fr;
    row-gap: 18px;
    column-gap: 20px;
}

.form-grid-2 .form-actions {
    grid-column: 2;
}

.input-wide {
    width: 100%;
    max-width: 480px;
}

.inline-form {
    display: inline-block;
    margin: 0;
}

.actions-col {
    display: flex;
    gap: 8px;
    align-items: center;
}

.actions-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.actions-group--end {
    margin-left: auto;
}

.actions-col .button {
    flex: 0 0 auto;
    /* NIET laten stretchen */
}

.form-layout-vertical {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 520px;
}

.form-layout-vertical .form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-layout-vertical .form-actions {
    margin-top: 10px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.input-small {
    width: 90px;
}

.drag-handle {
    display: flex;
    align-items: center;
    cursor: grab;
    margin-right: 6px;
    color: #9ca3af;
    height: 100%;
}

.drag-handle svg {
    width: 18px;
    height: 18px;
}



.actions-inline {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Forceer danger icon-only exact wit icoon */
.button.icon-only.danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: white;
}

.button.icon-only.danger svg {
    stroke: white !important;
}

.planning-summary {
    padding: 16px 18px;
}

.planning-summary-grid {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

.planning-summary-grid>div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.summary-label {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.planning-summary-grid strong {
    font-size: 0.95rem;
}

.planning-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 20px 0;
}

.planning-actions-left {
    display: flex;
    gap: 10px;
}

.planning-actions-right {
    display: flex;
    align-items: center;
}

.start-time {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--gray-700);
}

.start-time input {
    height: var(--control-height);
    padding: 0 8px;
}

.planning-pauze {
    background: #fff7ed;
    border-left: 4px solid #fb923c;
}

.planning-pauze .idea-title,
.planning-regel .idea-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.concert-times {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* beide blokken identiek */
.concert-times .start-time,
.concert-times .end-time-display {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    /* <- maakt Start ook bold */
    font-size: 16px;
}

/* tijden exact gelijk behandelen */
.concert-times .concert-time-value {
    font: inherit;
    /* neemt font-size + weight over */
}

/* icons consistent */
.concert-times svg {
    width: 28px;
    height: 28px;
}

.planning-presentatie {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.presentatie-readonly {
    font-display: inline-block;
}

.planning-regel {
    background: #f5f9ff;
    border-left: 4px solid #3b82f6;
}

/* ============================================================
   Repetitieplanning – Verticale layout (met ademruimte)
============================================================ */

.repetitie-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
    /* iets meer ruimte tussen velden */
    max-width: 480px;
    /* iets breder */
}

.repetitie-field {
    display: flex;
    align-items: center;
    gap: 20px;
    /* iets meer ruimte label → input */
}

.repetitie-field label {
    width: 210px;
    /* iets breder labelblok */
}

.repetitie-field input[type="date"],
.repetitie-field input[type="time"] {
    width: 200px;
    /* iets grotere inputs */
}

.repetitie-weekdays {
    margin-top: 28px;
    /* extra ruimte boven dagen */
}

.repetitie-weekday-list {
    margin-top: 10px;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.repetitie-actions {
    margin-top: 28px;
    /* ruimte boven knop */
}

/* ============================================================
   Repetitieplanning – Sectierepetities dropdown setup
============================================================ */

.section-dropdown-wrapper {
    position: relative;
}

.section-toggle {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--gray-300);
    background: white;
    cursor: pointer;
}

.section-dropdown {
    display: none;
    position: absolute;
    top: 38px;
    left: 0;
    width: 220px;
    max-height: 220px;
    overflow-y: auto;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    padding: 10px;
    z-index: 100;
}

.section-dropdown.open {
    display: block;
}

.section-dropdown label {
    display: flex;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.9rem;
}

.repetitie-preview-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.repetitie-mode-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sections-dropdown {
    position: relative;
}

.sections-menu {
    position: absolute;
    top: 36px;
    left: 0;
    background: white;
    border: 1px solid #ddd;
    padding: 8px;
    border-radius: 6px;
    display: none;
    flex-direction: column;
    gap: 6px;
    z-index: 1000;
    min-width: 180px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sections-menu.open {
    display: flex;
}

.sections-menu label {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Wekelijks herhalen van een extra repetitie */
.repetitie-extra-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.repetitie-repeat-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.repetitie-repeat-panel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 12px;
    margin-left: 28px;
    background: #f5f6f8;
    border: 1px solid #e0e2e7;
    border-radius: 6px;
}

.repetitie-repeat-panel .repeat-label {
    font-weight: 600;
}

.repetitie-repeat-panel label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.repetitie-repeat-panel .repeat-count {
    width: 60px;
}

/* =========================================
   REPETITIE SUMMARY
========================================= */

.repetitie-summary {
    margin-bottom: 16px;
}

.repetitie-summary-main {
    display: flex;
    align-items: center;
    gap: 14px;
}

.repetitie-time {
    color: #666;
}

.repetitie-badge {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 500;
}

.badge-tutti {
    background: #eef2ff;
    color: #3730a3;
}

.badge-section {
    background: #ecfdf5;
    color: #065f46;
}

.repetitie-sections {
    margin-top: 4px;
    font-size: 14px;
    color: #444;
}

.repetitie-meta {
    margin-top: 4px;
    display: flex;
    gap: 18px;
    font-size: 14px;
    color: #555;
}

.repetitie-meta i {
    width: 14px;
    height: 14px;
    margin-right: 4px;
}

.repetitie-summary .repetitie-meta svg {
    width: 14px !important;
    height: 14px !important;
    stroke-width: 1.5;
    opacity: 0.8;
}


/* =========================================
   REPETITIE MATRIX – NIET FULL WIDTH
========================================= */

/* Scroll-wrapper voor mobiele viewports: tabel scrollt horizontaal
   binnen de content-card, kolommen behouden hun bedoelde breedte. */
.repetitie-matrix-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Cruciaal: wrapper moet een definite max-width hebben anders groeit hij
       gewoon mee met de 940px-brede tabel en duwt body horizontaal uit
       viewport. Met max-width:100% klampt hij aan parent en scrollt de tabel
       binnenin. */
    max-width: 100%;
}

.repetitie-matrix-table {
    border-collapse: collapse;
    /* table-layout: auto i.c.m. width:max-content laat de Werk-kolom
       meegroeien met de langste titel, terwijl de overige kolommen op hun
       opgegeven breedte blijven (die geldt als minimum). BEWUST géén
       min-width:100% — dat zou de tabel uitrekken tot de volle
       containerbreedte en de overtollige ruimte over de kolommen smeren
       (grote gaten tussen de datums). */
    table-layout: auto;
    width: max-content;
}

/* Headers */
.repetitie-matrix-table th {
    font-weight: 600;
    font-size: 13px;
    padding: 10px 8px;
    text-align: center;
    color: #334155;
}

/* Cells */
.repetitie-matrix-table td {
    padding: 8px 8px;
    text-align: center;
    vertical-align: middle;
}

/* Graad — links uitgelijnd zodat de kolom tegen de paginarand begint */
.repetitie-matrix-table th:first-child,
.repetitie-matrix-table td:first-child {
    width: 90px;
    padding-left: 0;
    padding-right: 8px;
    text-align: left;
}

/* Werk — variabel: groeit mee met de titel, huidige breedte is het minimum */
.repetitie-matrix-table th.werk-col,
.repetitie-matrix-table td.werk-col {
    min-width: 260px;
    text-align: left;
    /* Titel op één regel houden zodat de kolom met de lengte meeschaalt */
    white-space: nowrap;
}

/* Onderdelen — compact rond de badges, met extra lucht vóór de eerste datum */
.repetitie-matrix-table th.onderdelen-col,
.repetitie-matrix-table td.onderdelen-cell {
    min-width: 90px;
    padding-right: 40px;
    text-align: left;
    white-space: nowrap;
}

/* Datum kolommen */
.repetitie-matrix-table th.rep-header,
.repetitie-matrix-table td.matrix-cell {
    width: 70px;
}

/* =========================================
   REPETITIE MATRIX — MOBIEL COMPACT
   Graad-kolom verbergen, Onderdelen-kolom smaller voor chips,
   Werk-kolom iets smaller, datum-kolommen smaller.
   Doel: vroeger zichtbare datums bij landing, minder horiz. scroll.
========================================= */
@media (max-width: 768px) {

    .repetitie-matrix-table th:first-child,
    .repetitie-matrix-table td:first-child {
        display: none;
    }

    .repetitie-matrix-table th.werk-col,
    .repetitie-matrix-table td.werk-col {
        /* Op mobiel niet meeschalen: vaste smalle kolom met wrappende titel,
           anders duwt een lange titel de hele tabel uit beeld. */
        min-width: 0;
        width: 160px;
        white-space: normal;
        overflow-wrap: break-word;
    }

    .repetitie-matrix-table th.onderdelen-col,
    .repetitie-matrix-table td.onderdelen-cell {
        display: none;
    }

    .repetitie-matrix-table th.rep-header,
    .repetitie-matrix-table td.matrix-cell {
        width: 56px;
    }

    .repetitie-matrix-table th,
    .repetitie-matrix-table td {
        padding: 6px 4px;
    }

    /* Ledenplanning-tabel: verberg minst kritieke kolommen op mobile.
       Behoud DAG (1), DATUM (2), TIJD (3), SOORT (5).
       Verberg LOCATIE (4) en BIJZONDERHEDEN (6). */
    .ledenplanning-table th:nth-child(4),
    .ledenplanning-table td:nth-child(4),
    .ledenplanning-table th:nth-child(6),
    .ledenplanning-table td:nth-child(6) {
        display: none;
    }

    /* Safety net: alle table-wrappers krijgen horizontale scroll op
       mobile, zodat een te brede tabel nooit body uit viewport duwt. */
    .table-wrapper {
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }
}

/* =========================================
   ONDERDELEN BADGES
========================================= */

.onderdelen-cell {
    text-align: left;
}

.onderdeel-badge {
    display: inline-block;
    font-size: 12px;
    padding: 4px 8px;
    margin: 2px 6px 2px 0;

    background: #eef2f7;
    border-radius: 999px;
    color: #334155;
    line-height: 1;
}

/* =========================
   Difficulty heat dots
   ========================= */

.repetitie-matrix-table .diff-group {
    display: flex;
    gap: 4px;
    justify-content: flex-start;
}

.repetitie-matrix-table .diff-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid #cbd5e1;
    background: #e5e7eb;
    cursor: pointer;
    transition: all .15s ease;
    padding: 0;
}

.repetitie-matrix-table .diff-dot.active {
    border: none;
}

/* Heat levels */

.diff-dot.level-1 {
    background: #22c55e;
}

/* groen */
.diff-dot.level-2 {
    background: #84cc16;
}

/* lime */
.diff-dot.level-3 {
    background: #f59e0b;
}

/* oranje */
.diff-dot.level-4 {
    background: #ef4444;
}

/* rood */

.repetitie-matrix-table .diff-dot:hover {
    transform: scale(1.15);
}

.graad-header {
    text-align: left;
}

.repetitie-matrix-table td.diff-cell {
    text-align: left;
}

/* =========================================
   FOCUS ICONS
========================================= */

.repetitie-matrix-table .focus-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

.repetitie-matrix-table .focus-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    opacity: .35;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
}

.repetitie-matrix-table .focus-icon svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.7;
}

.repetitie-matrix-table .focus-icon.active {
    opacity: 1;
    color: var(--color-primary, #2563eb);
}

.repetitie-matrix-table .focus-icon:hover {
    opacity: .8;
}

/* =========================================
   MATRIX CHECKBOXEN – zachte custom stijl
========================================= */

.repetitie-matrix-table input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;

    width: 16px;
    height: 16px;

    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #ffffff;

    cursor: pointer;
    position: relative;
    transition: all .15s ease;
}

.repetitie-matrix-table input[type="checkbox"]:hover {
    border-color: #94a3b8;
}

.repetitie-matrix-table input[type="checkbox"]:checked {
    background: #e2e8f0;
    /* licht slate */
    border-color: #94a3b8;
}

.repetitie-matrix-table input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 5px;
    width: 4px;
    height: 8px;
    border: solid #475569;
    /* slate vinkje */
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* =========================================
   LOCKED KOLOM (voor later)
========================================= */

.repetitie-matrix-table .locked-col {
    opacity: .5;
}

.repetitie-matrix-table .locked-col input {
    pointer-events: none;
}

.rep-header-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.rep-date {
    font-size: 13px;
    font-weight: 500;
}

.rep-toggle input {
    cursor: pointer;
}

/* =========================================
   DETAILS TOGGLE – rustige SaaS stijl
========================================= */

.rep-header input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;

    width: 22px;
    height: 22px;

    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;

    cursor: pointer;
    transition: all .15s ease;
    position: relative;
}

/* hover */
.rep-header input[type="checkbox"]:hover {
    border-color: #cbd5e1;
    background: #f1f5f9;
}

/* actief */
.rep-header input[type="checkbox"]:checked {
    background: #eef2ff;
    /* zachte indigo tint */
    border-color: #c7d2fe;
}

/* icoontje binnenin */
.rep-header input[type="checkbox"]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16l4-4h8a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E") center no-repeat;
    background-size: 14px;
    opacity: .4;
}

.rep-header input[type="checkbox"]:checked::after {
    opacity: 1;
}

.matrix-hint {
    font-size: 13px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.matrix-hint svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.8;
}

/* Details toggle (boven datum) */
.details-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 999px;

    background: transparent;
    border: 1px solid transparent;

    color: var(--color-muted, #94a3b8);
    /* neutraal, niet Windows-blauw */
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

/* lucide vervangt <i> door <svg> */
.details-toggle svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

/* hover: subtiel */
.details-toggle:hover {
    background: rgba(0, 0, 0, .04);
    border-color: rgba(0, 0, 0, .08);
    color: var(--color-text, #334155);
}

/* active: primary kleur + zachte badge */
.details-toggle.is-active {
    background: rgba(0, 0, 0, .06);
    border-color: rgba(0, 0, 0, .12);
    color: var(--color-primary, #334155);
}

/* optional: geen lelijke focus-ring */
.details-toggle:focus {
    outline: none;
}

.details-toggle:focus-visible {
    box-shadow: 0 0 0 3px rgba(51, 65, 85, .18);
}


/* ============================= */
/* REP DETAILS / BLOKKEN */
/* ============================= */

/* Block altijd zichtbaar */
.rep-block {
    margin-top: 28px;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

/* Body standaard dicht */
.rep-block-body {
    display: none;
    padding: 20px;
}

/* Body open als NIET collapsed */
.rep-block:not(.is-collapsed) .rep-block-body {
    display: block;
}

/* Header */
.rep-block-header {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 14px 18px;
    font-weight: 600;
    background: #f8fafc;
    border-bottom: 1px solid rgba(0, 0, 0, .06);

    cursor: pointer;
}

/* Chevron */
.rep-block-header svg {
    width: 16px;
    height: 16px;
    transition: transform .15s ease;
}

/* Chevron draaien bij open */
.rep-block:not(.is-collapsed) .rep-block-header svg {
    transform: rotate(90deg);
}

/* Table styling */
.rep-detail-table {
    width: 100%;
    border-collapse: collapse;
}

.rep-detail-table th {
    text-align: left;
    font-size: 13px;
    letter-spacing: .04em;
    color: #64748b;
    padding-bottom: 12px;
}

.rep-detail-table td {
    padding: 12px 0;
    vertical-align: top;
}

.rep-detail-table textarea {
    width: 100%;
    min-height: 70px;
    resize: vertical;
}

.rep-block:last-of-type {
    margin-bottom: 28px;
    /* of 28px als je iets meer wilt */
}

/* =========================================
   VOORBIJE REPETITIES — inklapbare sectie
========================================= */
.rep-past-section {
    margin-top: 28px;
}

.rep-past-header {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 14px 18px;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 12px;

    cursor: pointer;
}

.rep-past-header svg {
    width: 16px;
    height: 16px;
    transition: transform .15s ease;
}

.rep-past-section:not(.is-collapsed) .rep-past-header svg {
    transform: rotate(90deg);
}

/* Body standaard dicht */
.rep-past-body {
    display: none;
}

.rep-past-section:not(.is-collapsed) .rep-past-body {
    display: block;
}

/* Eerste card in de voorbije-sectie sluit netjes onder de header aan */
.rep-past-body .rep-block:first-of-type {
    margin-top: 14px;
}

.rep-item {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: 14px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.rep-time {
    min-width: 105px;
    color: #475569;
}

.rep-location {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #334155;
}

.rep-mode {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    opacity: 0.7;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 2px;
}

.rep-mode.is-tutti {
    background: #eef2ff;
    color: #3730a3;
}

.rep-mode.is-section {
    background: #ecfdf5;
    color: #065f46;
}

.rep-sections {
    color: #475569;
}

.repetitie-summary-main {
    margin-bottom: 6px;
}

/* Ledenplanning per repetitieplan */
.repetitie-members-planning .ledenplanning-table th {
    font-size: 12px;
    letter-spacing: 0.03em;
    color: #334155;
    white-space: nowrap;
}

.repetitie-members-planning .ledenplanning-table td {
    padding-top: 10px;
    padding-bottom: 10px;
    white-space: nowrap;
}

.repetitie-members-planning .ledenplanning-table td:last-child,
.repetitie-members-planning .ledenplanning-table th:last-child {
    white-space: normal;
}

.repetitie-members-planning .ledenplanning-table tr.ledenplanning-maand-header td {
    background: #f1f5f9;
    color: #475569;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-top: 12px;
    padding-bottom: 6px;
    border-top: 2px solid #cbd5e1;
}

/* ============================= */
/* REP DETAIL – FOCUS */
/* ============================= */

.rep-focus-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.rep-min-input {
    width: 70px;
}

.focus-group-card {
    display: flex;
    gap: 6px;
}

.focus-icon-card {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .08);
    background: #f8fafc;

    cursor: pointer;
    transition: all .15s ease;
    padding: 0;
}

.focus-icon-card svg {
    width: 16px;
    height: 16px;
    color: #64748b;
}

.focus-icon-card:hover {
    background: #eef2f7;
}

.focus-icon-card.active {
    background: #e0f2fe;
    border-color: #38bdf8;
}

.focus-icon-card.active svg {
    color: #0284c7;
}

/* =========================
   FIX: chips klikbaar maken
========================= */

/* chips + container moeten altijd clicks krijgen */
.idee-onderdelen-select,
.idee-onderdelen-select .chip-mini {
    position: relative;
    z-index: 9999;
    pointer-events: auto !important;
}

/* als de header-clickzone als overlay over de card ligt */
.idea-clickzone {
    pointer-events: none !important;
}

.idea-clickzone * {
    pointer-events: auto !important;
}

.repetitie-number-input {
    width: 90px;
}

.repetitie-break-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
}

.break-label {
    font-size: 12px;
    opacity: 0.7;
}

.repetitie-number-input {
    width: 60px;
}

/*==========================
 PLANNING – INPUTS EN LAYOUT
===========================*/

.input-inline {
    display: flex;
    gap: 10px;
}

.input-inline input {
    width: 90px;
}

.col-span-2 {
    grid-column: span 2;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-actions-right {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.form-container {
    max-width: 900px;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 32px;
}

.form-grid-2 input,
.form-grid-2 select,
.form-grid-2 textarea {
    width: 100%;
}

.input-inline {
    display: flex;
    gap: 12px;
}

.input-inline input {
    width: 100px;
}

.col-span-2 {
    grid-column: span 2;
}

.checkbox-row {
    display: flex;
    align-items: center;
}


.col-span-2 {
    grid-column: span 2;
}

.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.no-wrap {
    white-space: nowrap;
}

/* ============================================================
Werk detail pagina – definitieve layout (opgeschoond) Volledig scoped onder .werk-detail-page Raakt admin dashboard NIET============================================================*/
/* =========================
   SECTION STYLING
========================= */

.werk-detail-page .dashboard-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 32px;
    box-shadow: var(--shadow-sm);
}

.werk-detail-page .dashboard-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px 0;
}


/* 3 cards naast elkaar */
.werk-detail-page .detail-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* individuele card */
.werk-detail-page .detail-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.werk-detail-page .detail-card h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
}

/* veld spacing */
.werk-detail-page .field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.werk-detail-page .detail-card input:not([type="checkbox"]),
.werk-detail-page .detail-card textarea {
    width: 100%;
}

/* checkbox spacing */
.werk-detail-page .checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* responsive */
@media (max-width: 900px) {
    .werk-detail-page .detail-cards {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   Uitleen & Historie – 33 / 66 layout
========================================= */

.werk-detail-page .uitleen-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 32px;
}

.werk-detail-page .uitleen-col-left,
.werk-detail-page .uitleen-col-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 900px) {
    .werk-detail-page .uitleen-grid {
        grid-template-columns: 1fr;
    }
}

/* Cards rond Uitleen & Historie kolommen */

.werk-detail-page .uitleen-col-left,
.werk-detail-page .uitleen-col-right {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
}

/* Uitvoeringshistorie */
.werk-detail-page .history-title {
    margin-bottom: 4px;
}

.werk-detail-page .history-total {
    margin: 0 0 6px;
}

.werk-detail-page .history-grid-header,
.werk-detail-page .history-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.6fr) 120px minmax(180px, 1.2fr) 170px;
    gap: 10px;
    align-items: center;
}

.werk-detail-page .history-grid-header {
    margin: 0 0 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #6b7280;
}

.werk-detail-page .history-type-header {
    text-align: right;
}

.werk-detail-page .history-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.werk-detail-page .history-row {
    margin-bottom: 6px;
}

.werk-detail-page .history-event {
    min-width: 0;
}

.werk-detail-page .history-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    width: 170px;
    justify-self: end;
    align-items: center;
    column-gap: 8px;
}

.werk-detail-page .history-chip {
    justify-self: start;
    width: fit-content;
    padding: 1px 6px;
    font-size: 10px;
    line-height: 1.2;
    cursor: default;
}

.werk-detail-page .history-chip-auto {
    border-color: #b7d7ff;
    color: #1e3a8a;
    background: #eff6ff;
}

.werk-detail-page .history-chip-manual {
    border-color: #d1d5db;
    color: #374151;
    background: #f3f4f6;
}

.werk-detail-page .history-add-wrap {
    margin-top: 14px;
}

.werk-detail-page .history-add-summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.werk-detail-page .history-add-field {
    margin-top: 10px;
}

.werk-detail-page .history-add-grid {
    grid-template-columns: 1.6fr 160px 1.2fr;
    gap: 10px;
    margin-bottom: 8px;
    align-items: end;
}

.werk-detail-page .history-add-label {
    font-size: 0.85rem;
}

.werk-detail-page .history-add-actions {
    margin-top: 8px;
}

@media (max-width: 900px) {

    .werk-detail-page .history-grid-header,
    .werk-detail-page .history-row {
        grid-template-columns: minmax(140px, 1.4fr) 100px minmax(120px, 1fr) 140px;
        gap: 8px;
    }

    .werk-detail-page .history-actions {
        width: 140px;
    }

    .werk-detail-page .history-add-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   UITLEEN & HISTORIE (2 kolommen)
========================= */

.werk-detail-page .work-detail-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.werk-detail-page .work-detail-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.werk-detail-page .work-detail-card input:not([type="checkbox"]) {
    width: 100%;
}


/* =========================
   Responsive
========================= */

@media (max-width: 900px) {
    .werk-detail-page .work-detail-grid {
        grid-template-columns: 1fr;
    }

    .werk-detail-page .work-detail-2col {
        grid-template-columns: 1fr;
    }
}

.werk-detail-page .work-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.werk-detail-page .detail-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.werk-detail-page .detail-col input:not([type="checkbox"]),
.werk-detail-page .detail-col textarea {
    width: 100%;
}

.werk-detail-page .checkbox-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Klankkamer modal */
.kk-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    /* <- belangrijk: niet in document flow */
    align-items: center;
    justify-content: center;
    padding: 24px;
}












.kk-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
}

.kk-modal.is-open {
    display: flex;
}

.kk-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.kk-modal__panel {
    position: relative;
    background: #ffffff;
    padding: 32px;
    border-radius: 16px;
    width: 480px;
    max-width: 92%;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35);
}

.kk-modal__actions {
    margin-top: 24px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.export-dropdown {
    position: relative;
    display: inline-block;
}

.export-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    min-width: 160px;
    display: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    z-index: 999;
    padding: 6px 0;
}

.export-menu.open {
    display: block;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    text-decoration: none;
    color: #334155;
    font-size: 14px;
}

.dropdown-item:hover {
    background: #f1f5f9;
}

/* =========================
   Statistieken evenementen/index.php
========================= */

.event-left {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.event-right {
    display: grid;
    grid-template-columns: 140px 50px 50px;
    align-items: center;
    justify-items: end;
    column-gap: 20px;
    margin-left: auto;
}

.event-right .stat {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.stat i {
    width: 14px;
    height: 14px;
}

.list-stats {
    margin-top: 6px;
    display: flex;
    gap: 14px;
    font-size: 12px;
}

.stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #64748b;
}

.stat.locked {
    color: #b91c1c;
    font-weight: 500;
}

.stat.open {
    color: #15803d;
}

.list-main>.event-left>a {
    font-size: 20px;
    font-weight: 600;
}

/* ===== Evenementen layout fix ===== */
.events-list .list-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 24px;
}

.events-list .list-main {
    display: contents;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
}

.events-list .event-right {
    display: grid;
    grid-template-columns: 140px 60px 60px;
    column-gap: 24px;
}

/* =========================================
   App Home centering
========================================= */

.app-home .app-content>h1,
.app-home .app-content>h2 {
    text-align: center;
}

.app-home .dashboard-title {
    text-align: center;
}

.app-home .dashboard-subtitle {
    text-align: center;
}

.app-home .dashboard-grid {
    width: 100%;
    max-width: 1200px;
    margin: 25px auto 0 auto;
}

.app-home .app-home-title {
    text-align: center;
}

/* Verenigingslogo als blikvanger bovenaan (waar voorheen het Klankkamer-logo stond). */
.app-home .app-home-vereniging-logo {
    display: block;
    height: 60px;
    max-width: min(280px, 80vw);
    width: auto;
    margin: 0 auto 8px;
    object-fit: contain;
}

.app-home .app-home-vereniging {
    display: block;
    font-weight: 400;
    color: #64748b;
    font-size: 0.95em;
}

/* Klankkamer-merk onderaan de dashboard-card (subtiel, maar zichtbaar). */
.app-home .app-home-brand-footer {
    text-align: center;
    margin-top: 16px;
}

.app-home .app-home-brand-footer-logo {
    display: inline-block;
    height: 64px;
    max-width: min(300px, 80vw);
    width: auto;
    object-fit: contain;
    opacity: 0.9;
}

/* =========================================
   App Home only
========================================= */

.app-home {
    text-align: center;
}

/* groet groter */
.app-home .dashboard-intro h2 {
    font-size: 26px;
    margin-bottom: 4px;
}

/* subtitle */
.app-home .dashboard-intro p {
    color: #64748b;
}

.app-home .dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    justify-content: center;
    align-items: stretch;
    margin-top: 30px;
}

@media (max-width: 1200px) {
    .app-home .dashboard-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .app-home .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* header centreren alleen op homepage */
.app-home .page-header {
    text-align: center;
}

/* icon iets groter */
.tile-icon svg {
    width: 26px;
    height: 26px;
}

/* =========================================
   Dashboard home intro
========================================= */

.dashboard-intro {
    text-align: center;
    margin-bottom: 20px;
}

.dashboard-intro h2 {
    margin-bottom: 4px;
}

.dashboard-intro p {
    color: #64748b;
}

.dashboard-grid {
    max-width: 720px;
    margin: 0 auto;
}

.dashboard-tile {
    padding: 28px;
}

/* geen underline bij hover */
.dashboard-tile {
    text-decoration: none;
}

.dashboard-tile:hover {
    text-decoration: none;
}

/* =========================================
   Home header
========================================= */

.page-header-home {
    text-align: center;
}

/* Home pagina */
.app-home .page-header {
    text-align: center;
}

.app-home .page-header {
    display: flex;
    justify-content: center;
    position: relative;
}

.app-home .page-header .header-actions {
    position: absolute;
    right: 0;
}

/* =========================================
   Home header centreren
========================================= */

.app-home .page-header {
    display: flex;
    justify-content: center;
    position: relative;
}

.app-home .page-header .page-title {
    margin: 0 auto;
}

.app-home .page-header .header-actions {
    position: absolute;
    right: 0;
}

/* =========================================
   Home header
========================================= */

.home-header {
    text-align: center;
    margin-bottom: 30px;
}

.home-title {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 12px;
}

.home-divider {
    border: none;
    border-top: 1px solid #e2e8f0;
}


.app-home .page-title {
    text-align: center;
}

.app-home .dashboard-section {
    padding-top: 20px;
    padding-bottom: 28px;
}

.app-home .dashboard-grid {
    margin-top: 30px;
}

.home-actions {
    position: fixed;
    top: 20px;
    right: 24px;
    z-index: 999;
}

.logout-button {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    text-decoration: none;
    color: #334155;
}

.logout-button:hover {
    text-decoration: underline;
}

.app-content {
    position: relative;
}

.page-header-home {
    display: flex;
    justify-content: center;
    position: relative;
}

.page-header-home .header-actions {
    position: absolute;
    right: 0;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

.checkbox-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ==============================
   ADMIN – Settings form (scoped)
============================== */

.settings-form.form-grid-2 {
    --label-col: 220px;

    display: grid;
    grid-template-columns: var(--label-col) minmax(260px, 1fr);
    gap: 14px 18px;
    /* Bovenaan uitlijnen: het label hoort op gelijke hoogte te starten met het
       eerste veld/regel ernaast, niet verticaal gecentreerd tegen een hoge
       rechterkolom (veld + beschrijving eronder). */
    align-items: start;
}

/* label kolom: bovenaan starten + kleine offset zodat de labeltekst meeloopt
   met de tekst ín een invoerveld (input heeft 6px padding + 1px rand). */
.settings-form>div:nth-child(odd) {
    align-self: start;
    padding-top: 7px;
}

/* standaard inputs */
.settings-form input {
    width: auto;
}

/* verenigingsnaam veld */
.settings-form input[name="vereniging_naam"] {
    width: 100%;
    max-width: 400px;
}

/* tijdvelden */
.settings-form input.settings-input-time {
    width: 95px;
}

/* pauze */
.settings-form input.settings-input-number {
    width: 70px;
}

/* file upload */
.settings-form input.settings-input-file {
    width: 100%;
    max-width: 300px;
}

/* repetitie dagen */
.settings-weekdays {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
}

.settings-weekday {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* actions */
.settings-form .form-actions {
    justify-content: flex-start;
}

.platform-table {
    width: 100%;
    border-collapse: collapse;
}

.platform-table th,
.platform-table td {
    padding: 10px 18px;
    text-align: left;
    white-space: nowrap;
}

.platform-table th {
    font-weight: 600;
}

.platform-table td.actions {
    white-space: nowrap;
}

.login-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.login-card {
    width: 100%;
    max-width: 420px;
}

.login-card .intro {
    color: #64748b;
    margin-bottom: 20px;
}

.role-matrix td,
.role-matrix th {
    text-align: center;
}

.role-matrix .perm-label {
    text-align: left;
}

.matrix-group td {
    font-weight: 600;
    background: #f3f4f6;
}

.matrix-check {
    font-size: 16px;
    color: #16a34a;
}

/* Rollenmatrix groep headers */

.role-matrix .matrix-group td {
    font-weight: 600;
    border-top: 2px solid #e5e7eb;
    padding-top: 14px;
    background: #f8fafc;
}

.role-matrix .matrix-group td:first-child {
    text-align: left;
}

.role-matrix th {
    font-weight: 600;
}

.role-matrix .matrix-group td {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.04em;
}

.idee-meta-sep {
    margin: 0 4px;
    opacity: 0.6;
}

.platform-logo {
    max-width: 420px;
    width: 100%;
    height: auto;
    margin-bottom: 32px;
}

.screenshot-img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    display: block;
}

.screenshot-image {
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
    .screenshot-image:hover {
        transform: scale(1.04);
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.12);
        z-index: 10;
    }
}