/* =========================================================
   Sectie-editor — JobSectionEditorRenderer
   ========================================================= */

.section-editor-root {
    display: grid;
    grid-template-columns: 360px 1fr 260px;
    gap: 0;
    height: 70vh;
    min-height: 500px;
    border: 1px solid var(--fc-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--fc-surface);
    position: relative;
}

/* Slide-in paneel met geavanceerde container-stijl (rand, marge, padding) — schuift vanaf rechts
   over de preview-kolom heen, lijst + inhoud-paneel blijven altijd zichtbaar en klikbaar. Opent
   alleen via de expliciete "Geavanceerd"-knop bovenin het inhoud-paneel. */
.section-editor-settings-drawer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, calc(100% - 360px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--fc-surface);
    border-left: 1px solid var(--fc-border);
    box-shadow: -6px 0 18px rgba(0, 0, 0, 0.12);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 20;
}

.section-editor-settings-drawer.open { transform: translateX(0); }

/* Onzichtbare klik-vanger onder het slide-in paneel — ligt over lijst/inhoud/preview heen zodat
   een klik ernaast (buiten het paneel zelf) het paneel sluit; het paneel zelf ligt er met een
   hogere z-index overheen, dus klikken in het paneel bereiken deze laag niet. */
.section-editor-drawer-backdrop {
    position: absolute;
    inset: 0;
    z-index: 19;
    background: transparent;
}

.section-drawer-close-btn { margin-left: auto; }
.section-advanced-btn { margin-left: auto; }

/* --- Linker paneel: lijst --- */
.section-editor-list-panel {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--fc-border);
    overflow: hidden;
}

.section-editor-list-header {
    padding: 12px 12px 8px;
    border-bottom: 1px solid var(--fc-border);
    background: var(--fc-surface-subtle);
}

.section-editor-list-title {
    display: block;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 8px;
    color: var(--fc-text);
}

.section-editor-add-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.section-editor-type-combo { flex: 1; min-width: 0; }
.section-editor-add-btn { flex-shrink: 0; }

.section-editor-sortable {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}

.section-editor-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    cursor: pointer;
    user-select: none;
    border-left: 3px solid transparent;
    transition: background 0.15s;
}

.section-editor-item:hover { background: var(--fc-brand-tint); }

.section-editor-item.selected {
    background: var(--fc-brand-tint-strong);
    border-left-color: var(--fc-brand);
}

.section-editor-item.hidden-section { opacity: 0.55; }

.section-editor-item.drag-over {
    background: var(--fc-brand-tint);
    border-left-color: var(--fc-brand);
}

.section-drag-handle { cursor: grab; color: color-mix(in srgb, var(--fc-text-muted) 70%, transparent); font-size: 16px; }
.section-editor-item-drag { flex-shrink: 0; }
.section-editor-item-icon { flex-shrink: 0; font-size: 16px; color: var(--fc-brand); }

.section-editor-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.section-item-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--fc-text-muted);
    letter-spacing: 0.03em;
}

.section-item-title {
    font-size: 13px;
    color: var(--fc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section-editor-item-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

/* Zichtbaar-toggle, deelnemer-toggle (of de lege placeholder als een sectietype die niet heeft)
   krijgen allemaal dezelfde vaste breedte, zodat de prullenbak-knop bij elke rij op dezelfde
   horizontale positie staat, ongeacht welk type sectie het is. */
.section-visibility-toggle,
.section-participant-toggle,
.section-participant-toggle-placeholder {
    width: 20px;
    flex: 0 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.section-editor-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--fc-text-muted);
    font-size: 13px;
}

.section-empty-icon { font-size: 32px; display: block; margin-bottom: 8px; opacity: 0.4; }

.section-editor-info-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid var(--fc-border);
    background: var(--fc-surface-subtle);
    font-size: 12px;
    color: var(--fc-text-muted);
}

.section-editor-info-icon { font-size: 16px; flex-shrink: 0; }

/* --- Midden paneel: instellingen --- */
.section-editor-settings-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--fc-border);
}

.section-editor-settings-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--fc-text-muted);
    padding: 32px;
    text-align: center;
}

.section-settings-placeholder-icon { font-size: 40px; opacity: 0.3; margin-bottom: 12px; display: block; }

.section-editor-settings-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 1px solid var(--fc-border);
    background: var(--fc-surface-subtle);
}

.section-editor-settings-body { flex: 1; overflow-y: auto; padding: 16px; }

.section-editor-settings-header--sub {
    margin: 20px -16px 14px;
    padding: 8px 16px;
    font-size: 13px;
}

.section-settings-grid { display: flex; flex-direction: column; gap: 14px; }

.section-settings-field { display: flex; flex-direction: column; gap: 1px; }

.section-settings-field label { font-size: 12px; font-weight: 600; color: var(--fc-text-muted); }

.section-settings-checkbox { flex-direction: row; align-items: center; gap: 8px; }

.section-settings-reset-btn { padding: 0 4px; font-size: 12px; white-space: nowrap; }

/* Gegroepeerde, omkaderde instellingenblokken (bv. Rand, Padding, Marge) met velden naast elkaar
   i.p.v. onder elkaar — schermruimte in het midden-paneel is breed genoeg daarvoor. */
.section-settings-groups-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.section-settings-groups-row > .section-settings-group {
    flex: 1 1 260px;
    min-width: 260px;
}

.section-settings-group {
    border: 1px solid var(--fc-border);
    border-radius: 8px;
    padding: 12px 14px 14px;
}

.section-settings-group-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--fc-text-muted);
    margin-bottom: 10px;
}

.section-settings-group + .section-settings-group { margin-top: 14px; }

.section-settings-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.section-settings-row > .section-settings-field {
    flex: 1 1 130px;
    min-width: 130px;
}

/* Hoogte van alle DxHtmlEditor-instanties in de sectie-editor settings panels — hier centraal aanpasbaar. */
.section-html-editor,
.section-html-editor .dxbl-html-editor-content-container {
    height: 600px;
}

/* Alleen het echte tekst-canvas (Quill's .ql-editor) krijgt de achtergrondkleur — niet .section-html-editor
   zelf, want dat is de hele editor inclusief de werkbalk (font/size/bold-knoppen etc.). */
.section-html-editor .ql-editor.dx-htmleditor-content {
    background-color: var(--section-editor-bg, transparent);
}

.section-settings-info {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    color: var(--fc-text-muted);
    background: var(--fc-surface-subtle);
    border: 1px solid var(--fc-border);
    border-radius: 6px;
    padding: 8px 10px;
}

/* --- Rechter paneel: preview --- */
.section-editor-preview-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--fc-surface-subtle);
}

.section-editor-preview-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px;
    font-weight: 600;
    font-size: 13px;
    border-bottom: 1px solid var(--fc-border);
    background: var(--fc-surface-subtle);
    color: var(--fc-text-muted);
}

.section-editor-preview-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.section-preview-card {
    position: relative;
    display: flex;
    background: var(--fc-surface);
    border-radius: 6px;
    border: 2px solid transparent;
    box-shadow: 0 1px 3px rgba(0,0,0,0.07);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.section-preview-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }

.section-preview-card.section-preview-active {
    border-color: var(--fc-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc-brand) 18%, transparent);
}

.section-preview-card.section-preview-hidden { opacity: 0.5; }

.section-preview-stripe { width: 4px; flex-shrink: 0; }
.section-preview-stripe--hero    { background: #7c3aed; }
.section-preview-stripe--highlight { background: #dc2626; }
.section-preview-stripe--navigation { background: #0d9488; }
.section-preview-stripe--gallery { background: #059669; }
.section-preview-stripe--chapter { background: #2563eb; }
.section-preview-stripe--text    { background: #d97706; }
.section-preview-stripe--divider { background: #6b7280; }

.section-preview-card-inner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    flex: 1;
    min-width: 0;
}

.section-preview-card-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; color: var(--fc-text-muted); }

.section-preview-card-content { flex: 1; min-width: 0; }

.section-preview-type {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--fc-text-muted) 75%, transparent);
}

.section-preview-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--fc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section-preview-desc {
    font-size: 11px;
    color: var(--fc-text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section-preview-hidden-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 10px;
    background: var(--fc-surface-subtle);
    color: var(--fc-text-muted);
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 600;
}

.section-preview-empty { padding: 24px; text-align: center; color: color-mix(in srgb, var(--fc-text-muted) 75%, transparent); font-size: 12px; }

/* =========================================================
   Gallery Image Picker
   ========================================================= */

.gallery-picker-root {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid var(--fc-border);
    border-radius: 6px;
    overflow: hidden;
    max-height: 520px;
}

.gallery-picker-body {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(220px, 0.9fr);
    gap: 12px;
    padding: 0 10px 10px;
    min-height: 0;
    flex: 1;
}

.gallery-picker-grid-wrap {
    min-width: 0;
    min-height: 0;
}

.gallery-picker-loading,
.gallery-picker-empty {
    padding: 16px;
    text-align: center;
    color: color-mix(in srgb, var(--fc-text-muted) 75%, transparent);
    font-size: 13px;
}

.gallery-picker-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: var(--fc-surface-subtle);
    border-bottom: 1px solid var(--fc-border);
    flex-shrink: 0;
}

.gallery-picker-count {
    font-size: 12px;
    color: var(--fc-text-muted);
}

.gallery-picker-toolbar-actions {
    display: flex;
    gap: 6px;
}

.gallery-picker-btn {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid var(--fc-brand);
    background: var(--fc-brand);
    color: #fff;
    cursor: pointer;
    transition: opacity 0.15s;
}

.gallery-picker-btn:hover { opacity: 0.85; }

.gallery-picker-btn--ghost {
    background: transparent;
    color: var(--fc-text-muted);
    border-color: var(--fc-border-strong);
}

.gallery-picker-btn--ghost:hover { background: var(--fc-hover); opacity: 1; }

.gallery-picker-preview {
    min-height: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(180deg, var(--fc-surface-subtle) 0%, color-mix(in srgb, var(--fc-text) 5%, var(--fc-surface)) 100%);
    border: 1px solid var(--fc-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-picker-preview-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.gallery-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    overflow-y: auto;
    align-content: start;
    padding-right: 4px;
    max-height: 100%;
}

.gallery-picker-thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    background: var(--fc-surface);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.08);
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.gallery-picker-thumb:hover {
    transform: none;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 4px 10px rgba(0,0,0,0.14);
}

.gallery-picker-thumb.selected {
    border-color: var(--fc-brand);
    box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--fc-brand) 40%, transparent), 0 1px 3px rgba(0,0,0,0.08);
}

.gallery-picker-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: var(--fc-surface-subtle);
}

.gallery-picker-thumb:hover .gallery-picker-img {
    transform: none;
}

.gallery-picker-check {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--fc-brand) 45%, transparent);
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 3px;
}

.gallery-picker-check .dx-icon-check {
    color: #fff;
    font-size: 14px;
    background: var(--fc-brand);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navigation-targets-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    max-height: 280px;
    overflow-y: auto;
}

.navigation-targets-item {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    column-gap: 10px;
    row-gap: 2px;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--fc-border);
    cursor: pointer;
    background: var(--fc-surface);
}

.navigation-targets-item.selected {
    border-color: var(--fc-brand);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--fc-brand) 18%, transparent);
}

.navigation-targets-item input {
    margin-top: 2px;
}

.navigation-targets-item__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--fc-text);
}

.navigation-targets-item__meta {
    grid-column: 2;
    font-size: 11px;
    color: var(--fc-text-muted);
}

@media (max-width: 900px) {
    .gallery-picker-body {
        grid-template-columns: 1fr;
    }

    .gallery-picker-preview {
        min-height: 180px;
        max-height: 220px;
    }

    .gallery-picker-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .gallery-picker-thumb:hover {
        transform: none;
    }

    .gallery-picker-thumb:hover .gallery-picker-img {
        transform: none;
    }
}

/* Issue #260: uitleg bij de twee vinkjes per sectie. */
.section-editor-legend {
    font-size: 0.8rem;
    color: var(--fc-text-muted, #6c757d);
    padding: 4px 12px 8px;
}

/* Issue #298: in het venster "Secties bewerken" vult de editor de hoogte van het venster (niet 70vh met ruimte eronder), en
   scrolt het venster als geheel in plaats van elke kolom apart. Zonder venster blijft de editor zoals hierboven. */
.dxbl-modal-body .section-editor-root {
    height: auto;
    min-height: calc(100vh - 260px);
    overflow: visible;
}

.dxbl-modal-body .section-editor-list-panel,
.dxbl-modal-body .section-editor-settings-panel,
.dxbl-modal-body .section-editor-preview-panel,
.dxbl-modal-body .section-editor-sortable,
.dxbl-modal-body .section-editor-settings-body,
.dxbl-modal-body .section-editor-preview-body {
    overflow: visible;
}