/* Basisstijlen voor het koppel-beheer project */

:root {
    --primary-color: #4a90e2;
    --secondary-color: #f5a623;
    --danger-color: #dc3545;
    --background-color: #f8f9fa;
    --text-color: #333;
    --card-bg: #ffffff;
    --shadow: 0 2px 4px rgba(0,0,0,0.1);
    --border-radius: 8px;
    /* Globale tabel fontgrootte (aanpasbaar via header) */
    --kb-table-font-size: 13px;
}

/* Dark Mode Variabelen */
[data-theme="dark"] {
    --background-color: #121212;
    --text-color: #e0e0e0;
    --card-bg: #1e1e1e;
    --primary-color: #7bb0ff;
    --secondary-color: #f5a623;
    --danger-color: #ff6b6b;
    --border-color: #333;
    --table-stripe-bg: #2a2a2a;
    --table-hover-bg: #333;
    --input-bg: #2a2a2a;
    --input-border: #444;
    --input-text: #e0e0e0;
    --header-bg: #1e1e1e;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
    overflow-y: scroll;
    transition: background-color 0.3s, color 0.3s;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Login Pagina Specifieke Stijlen */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.login-box {
    background: var(--card-bg);
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.login-box h2 {
    margin-bottom: 20px;
    color: var(--primary-color);
}

.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
}

.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--input-border, #ccc);
    border-radius: 4px;
    box-sizing: border-box;
    background-color: var(--input-bg, #fff);
    color: var(--input-text, #333);
}

/* --- START WIJZIGING --- */

/* Algemene knopstijl, nu met gestandaardiseerde padding en font-size */
.btn {
    display: inline-block;
    font-weight: 400;
    color: #000;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 8px 16px;
    font-size: 15px;
    line-height: 1.5;
    border-radius: 4px;
    text-decoration: none;
    box-sizing: border-box;
    height: 38px; /* Expliciete hoogte voor consistentie */
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

/* Primaire knop (blauw) */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff; /* Wit voor betere leesbaarheid op donkerder blauw */
}
[data-theme="dark"] .btn-primary {
    color: #fff;
}

.btn-primary:hover {
    filter: brightness(90%);
}

/* Secundaire knop (grijs) */
.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

.btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

/* Success knop (groen) */
.btn-success {
    background-color: #28a745;
    border-color: #28a745;
    color: #fff;
}
.btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

/* Info knop (turquoise) */
.btn-info {
    background-color: #17a2b8;
    border-color: #17a2b8;
    color: #fff;
}

.btn-info:hover {
    background-color: #138496;
    border-color: #117a8b;
}

/* Danger knop (rood) */
.btn-danger {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
    color: #fff;
}
.btn-danger:hover {
    filter: brightness(90%);
}

/* Zorg voor wat ruimte tussen icoon en tekst in knoppen met iconen */
.btn i { margin-right: 6px; }

/* --- EINDE WIJZIGING --- */

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

/* Dark theme alert variants for better contrast in modals */
[data-theme="dark"] .alert {
    border-color: #3a3a3a;
}
[data-theme="dark"] .alert-success {
    color: #c7f0cf;                 /* soft green text */
    background-color: rgba(40, 167, 69, 0.18); /* translucent green bg */
    border-color: rgba(40, 167, 69, 0.35);
}
[data-theme="dark"] .alert-danger {
    color: #f5b5b5;                 /* soft red text */
    background-color: rgba(220, 53, 69, 0.18); /* translucent red bg */
    border-color: rgba(220, 53, 69, 0.35);
}

/* Header Stijlen */
.main-header {
    background-color: var(--header-bg, #fff);
    box-shadow: var(--shadow);
    padding: 0 14px;
    overflow: visible; /* allow dropdowns to extend beyond header */
    display: flex;
    justify-content: flex-end; /* logo verwijderd, items rechts */
    align-items: center;
    height: 52px; /* compacter */
    position: sticky;
    top: 0;
    z-index: 1080; /* Above page content (incl. sticky bits), below modals (1100) */
    transition: background-color 0.3s;
}

.main-header .logo {
    font-size: 24px;
    font-weight: bold;
    color: var(--primary-color);
}

.main-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
}

.main-nav ul li {
    margin-left: 20px;
}

.main-nav ul li a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    transition: color 0.3s ease;
    font-size: 13px;
    padding: 4px 8px;
    line-height: 1.2;
    border-radius: 4px;
}

.main-nav ul li a:hover,
.main-nav ul li a.active {
    color: var(--primary-color);
}

/* Top nav dropdowns */
.main-nav ul li.dropdown { position: relative; }
.action-icon { cursor: pointer; }
.action-icon.spinning { animation: kbspin 0.9s linear infinite; }
@keyframes kbspin {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
}
.main-nav ul li .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--header-bg, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    padding: 8px 0;
    display: none;
    z-index: 1090; /* above header shadow/content, below modal (1100) */
}
.main-nav ul li .dropdown-menu li { margin: 0; }
.main-nav ul li .dropdown-menu a {
    display: block;
    padding: 6px 12px;
    color: var(--text-color);
    text-decoration: none;
    white-space: nowrap;
    font-size: 13px;
}
.main-nav ul li .dropdown-menu a:hover {
    background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .main-nav ul li .dropdown-menu {
    background: var(--card-bg);
    border-color: var(--input-border);
}
[data-theme="dark"] .main-nav ul li .dropdown-menu a:hover {
    background: rgba(255,255,255,0.06);
}

/* Settings (gear) icon link */
.settings-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    color: var(--text-color);
    font-size: 15px;
}
.settings-link:hover {
    background-color: rgba(0,0,0,0.06);
}
[data-theme="dark"] .settings-link:hover {
    background-color: rgba(255,255,255,0.08);
}

.main-nav .btn-logout { display:none; }
.logout-link {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:6px;
    color: var(--text-color);
    background: var(--card-bg);
    border: 1px solid var(--border-color, #e0e0e0);
    font-size:16px;
}
.logout-link:hover { background: rgba(0,0,0,0.06); }
[data-theme="dark"] .logout-link { background: var(--input-bg); border-color: var(--input-border); }
[data-theme="dark"] .logout-link:hover { background: #333; }

/* Main content */
.main-content {
    padding: 20px;
}

/* Algemene Typografie en Links */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-color);
    font-weight: 600;
    margin-top: 0;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

h1 { font-size: 2rem; font-weight: bold; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

a:hover {
    filter: brightness(90%);
    text-decoration: underline;
}

/* Stijlen voor inline bewerken en opslag-indicator */
.container-full-width {
    width: 100%;
    padding: 0px 20px 0px 20px;
    box-sizing: border-box;
}

td[contenteditable="true"] {
    cursor: text;
    background-color: transparent; /* behoud standaard celkleur */
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Stijlen voor cel selectie */
td[contenteditable="true"].cell-selected {
    background-color: transparent !important; /* geen invulkleur bij selectie */
    border: 1px solid var(--primary-color);
}



td[contenteditable="true"]:hover,
td[contenteditable="true"]:focus {
    background-color: transparent; /* geen blauwe/gekleurde achtergrond bij focus */
    outline: none;
}

.table-hover tbody tr:hover {
    background-color: var(--table-hover-bg, #f1f1f1);
}

/* Temporary row highlight (e.g., after creation) */
.row-highlight {
    animation: rowFlash 2s ease-in-out;
}
@keyframes rowFlash {
    0% { background-color: #fff3cd; }
    100% { background-color: inherit; }
}

.saving-indicator {
    display: none;
    width: 10px;
    height: 10px;
    background-color: var(--secondary-color);
    border-radius: 50%;
    margin-right: 10px;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(245, 166, 35, 0);
    }
    100% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(245, 166, 35, 0);
    }
}

/* ---------- Link / Popover Styles (Products & Variants parity) ---------- */
.variant-product-count, .link-count {
    cursor: pointer;
    font-weight: 500;
    color: var(--primary-color);
    display: inline-block;
    padding: 0 4px;
}
.variant-product-count:hover, .link-count:hover {
    text-decoration: underline;
}

.popover { /* shared hover detail panel */
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #2a2a2a);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    border-radius: 8px;
    max-width: 380px;
    min-width: 260px;
    padding: 10px 12px;
    font-size: 12px;
    color: var(--text-color, #e0e0e0);
    z-index: 9999; /* boven hover overlays en kleur-dots */
}
.popover .popover-title { font-weight: 600; margin-bottom: 8px; color: var(--text-color, #e0e0e0); }
.popover ul { list-style: none; padding: 0; margin: 0; max-height: 320px; overflow: auto; overscroll-behavior: contain; }
.popover li { padding: 6px 0; border-bottom: 1px dashed rgba(255,255,255,0.06); }
.popover li:last-child { border-bottom: none; }
.popover.pos-right::before,
.popover.pos-left::before {
    content: '';
    position: absolute;
    width: 0; height: 0;
    border: 8px solid transparent;
}
.popover.pos-right::before { left: -8px; top: 10px; border-right-color: var(--card-bg, #1c1c1c); filter: drop-shadow(-1px 0 0 var(--border-color, #2a2a2a)); }
.popover.pos-left::before { right: -8px; top: 10px; border-left-color: var(--card-bg, #1c1c1c); filter: drop-shadow(1px 0 0 var(--border-color, #2a2a2a)); }

.popover-menu {
    font-size: 13px;
    line-height: 1.3;
}
.popover-menu .linked-item {
    padding: 4px 4px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.popover-menu .linked-item:last-child { border-bottom: none; }
[data-theme="dark"] .popover-menu {
    background: var(--card-bg);
    color: var(--text-color);
    border-color: var(--input-border);
}
[data-theme="dark"] .popover-menu .linked-item { border-color: var(--input-border); }

.small-text { font-size: 12px; opacity: .75; }
.text-danger { color: var(--danger-color); }

/* Save Indicator Stijlen */
.save-indicator {
    position: relative;
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.save-indicator i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease, transform 0.3s ease;
    font-size: 16px;
}

.save-indicator .icon-default {
    opacity: 1;
    color: #cccccc; /* Grijs voor inactieve staat */
}

.save-indicator .icon-saving {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
    color: #28a745; /* Groen voor succes */
}

.save-indicator.saving .icon-default {
    opacity: 0;
}

.save-indicator.saving .icon-saving {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    animation: pop-in 0.5s forwards;
}

@keyframes pop-in {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Tabel Stijlen */
.table {
    width: 100%;
    margin-bottom: 1rem;
    color: var(--text-color);
    border-collapse: collapse;
    background-color: var(--card-bg);
    /* Laat hele tabel meeschalen; kinderen erven tenzij expliciet overschreven */
    font-size: var(--kb-table-font-size, 13px);
}

.table th,
.table td {
    padding: 0.3rem;
    vertical-align: middle; /* Verticaal centreren voor een rustiger beeld */
    border-top: 1px solid var(--border-color, #e9ecef); /* Lichtere lijnkleur */
    font-size: var(--kb-table-font-size, 13px); /* aanpasbaar via header */
}

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid var(--border-color, #dee2e6);
    text-align: left;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--table-stripe-bg, #f8f9fa);
}

.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Force horizontal scroll on smaller screens for brede tabellen */
.table-responsive .table.producten-table {
    min-width: 1400px; /* zorgt dat de tabel breder mag zijn dan het viewport en dus horizontaal kan scrollen */
}

/* Sticky horizontale scrollbar onderaan cards/tables */
.sticky-x-scroll {
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    background: var(--card-bg, #fff);
    border-top: 1px solid var(--border-color, #e2e2e2);
    z-index: 106; /* below sticky pagination (108), above table */
}
.sticky-x-scroll::-webkit-scrollbar { height: 12px; }
.sticky-x-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.25); border-radius: 6px; }
[data-theme="dark"] .sticky-x-scroll { background: var(--card-bg, #1c1c1c); }
.sticky-x-scroll-inner { height: 1px; }
/* Improve scrollbar clarity and cross-browser support */
.sticky-x-scroll { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.35) transparent; }
.sticky-x-scroll::-webkit-scrollbar-track { background: transparent; }
[data-theme="dark"] .sticky-x-scroll {
    /* clearer separation in dark mode */
    border-top-color: var(--input-border, #444);
    box-shadow: 0 -1px 0 rgba(255,255,255,0.06) inset;
    /* brighter thumb color for contrast (Firefox) */
    scrollbar-color: rgba(255,255,255,0.45) transparent;
}
[data-theme="dark"] .sticky-x-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.35); border-radius: 6px; }
.sticky-x-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.45); }
[data-theme="dark"] .sticky-x-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.5); }

/* When a sticky pagination bar exists, lift the sticky x-scroll above it */
.has-sticky-pagination .sticky-x-scroll {
    bottom: var(--kb-sticky-bottom-offset, 48px);
}

/* --- Child rows (bundel-items) - visual distinction and slight indent --- */
.table tbody tr.child-item td:first-child {
    padding-left: 12px;
    position: relative;
}
.table tbody tr.child-item td:first-child::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: var(--primary-color);
    border-radius: 2px;
    opacity: 0.9;
}
.table tbody tr.child-item .id-column {
    opacity: 0.9;
}
[data-theme="dark"] .table tbody tr.child-item td:first-child::before {
    opacity: 0.8;
}

/* --- Producten tabel: kolombreedtes consistent voor hoofd- en child-tabel --- */
.table.producten-table .id-column { width: 80px; }
.table.producten-table .bundle-cell { width: 110px; white-space: nowrap; }
.table.producten-table .table-actions { width: 160px; white-space: nowrap; }
.table.producten-table thead th:last-child { width: 90px; }
.table.producten-table td.completion-cell { width: 90px; white-space: nowrap; overflow: visible; text-align: right; }

/* Force identical layout and widths for both main and child producten tables */
.table.producten-table { table-layout: fixed; }
.table.producten-table thead th,
.table.producten-table tbody td { overflow: hidden; text-overflow: ellipsis; }
.table.producten-table th.checkbox-column,
.table.producten-table td.checkbox-column { width: 36px; }

/* Column widths by position to guarantee alignment across instances */
.table.producten-table thead th:nth-child(1),
.table.producten-table tbody td:nth-child(1) { width: 36px; }
.table.producten-table thead th:nth-child(2),
.table.producten-table tbody td:nth-child(2) { width: 80px; }
.table.producten-table thead th:nth-child(3),
.table.producten-table tbody td:nth-child(3) { width: 160px; }
.table.producten-table thead th:nth-child(4),
.table.producten-table tbody td:nth-child(4) { width: 160px; }
.table.producten-table thead th:nth-child(5),
.table.producten-table tbody td:nth-child(5) { width: 120px; }
.table.producten-table thead th:nth-child(6),
.table.producten-table tbody td:nth-child(6) { width: 160px; }
.table.producten-table thead th:nth-child(7),
.table.producten-table tbody td:nth-child(7) { width: 180px; }
.table.producten-table thead th:nth-child(8),
.table.producten-table tbody td:nth-child(8) { width: 160px; }
.table.producten-table thead th:nth-child(9),
.table.producten-table tbody td:nth-child(9) { width: 90px; }
.table.producten-table thead th:nth-child(10),
.table.producten-table tbody td:nth-child(10) { width: 90px; }
.table.producten-table thead th:nth-child(11),
.table.producten-table tbody td:nth-child(11) { width: 110px; }
.table.producten-table thead th:nth-child(12),
.table.producten-table tbody td:nth-child(12) { width: 170px; }

/* Cards */
.card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color, #e9ecef);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}
.card-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color, #e9ecef);
}
.card-body {
    padding: 16px;
}

/* Utilities */
.mt-4 { margin-top: 1.5rem; }
.text-muted { color: #6c757d; }
[data-theme="dark"] .text-muted { color: #9aa0a6; }

/* Page Header */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}
.page-header h1 { margin: 0; }

.page-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: var(--card-bg);
    border: 1px solid var(--border-color, #e9ecef);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

/* Filter Stijlen */
.filter-form {
    display: flex;
    gap: 10px;
    align-items: center; /* Zorgt voor verticale uitlijning in het midden */
}

/* Standaard formulier elementen */
select,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
.filter-form input[type="text"] {
    padding: 8px;
    border: 1px solid var(--input-border, #ccc);
    border-radius: 4px;
    background-color: var(--input-bg, #fff);
    color: var(--input-text, #333);
    font-size: 15px;
    line-height: 1.5;
    box-sizing: border-box;
    height: 38px; /* Expliciete hoogte voor consistentie */
}

/* Specifieke breedte voor dropdowns */
select {
    min-width: 250px!important; /* Zorgt voor een minimum breedte */    
    width: auto!important; /* Zorgt ervoor dat het kan groeien indien nodig */
}

.filter-form .btn,
.page-controls .btn {
    width: auto; /* Zorg ervoor dat knoppen niet de volledige breedte innemen */
}

.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

/* Filter chips (search terms) */
.active-filters .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eef2f7;
    border: 1px solid #d0d7e2;
    color: #1f2937;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 13px;
    line-height: 1.2;
}
.active-filters .chip .label { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.active-filters .chip .remove { cursor: pointer; margin-left: 2px; color: #6b7280; font-weight: 600; }
.active-filters .chip .remove:hover { color: #111827; }
[data-theme="dark"] .active-filters .chip { background:#2f2f2f; border-color:#444; color:#e5e7eb; }
[data-theme="dark"] .active-filters .chip .remove { color:#bdbdbd; }
[data-theme="dark"] .active-filters .chip .remove:hover { color:#ffffff; }

.filter-pill {
    background-color: #e9ecef;
    border-radius: 15px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #333;
}
[data-theme="dark"] .filter-pill {
    background-color: #333;
    color: #e0e0e0;
}

.remove-filter {
    margin-left: 8px;
    color: #6c757d;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
}

.remove-filter:hover {
    color: #343a40;
}

/* Modal Stijlen */
.modal {
    display: none; 
    position: fixed; 
    z-index: 1100; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: var(--card-bg);
    margin: 15% auto; 
    padding: 20px;
    border: 1px solid var(--border-color, #888);
    width: 80%;
    max-width: 500px;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}

/* Compact run modal styles */
.kb-run-modal.kb-compact { font-size: 13px; }
.kb-progress-list { list-style:none; margin: 8px 0; padding: 0; }
.kb-progress-list .kb-step { display:flex; align-items:flex-start; gap:8px; padding:6px 0; position:relative; }
.kb-progress-list .kb-step .kb-spinner { display:none; color: var(--primary-color); margin-top:2px; }
.kb-progress-list .kb-step.kb-active .kb-spinner { display:inline-block; }
.kb-progress-list .kb-step .kb-dot { width:10px; height:10px; border-radius:50%; background:#4caf50; display:inline-block; margin-top:4px; }
.kb-progress-list .kb-step .kb-label { flex:1; }
.kb-progress-list .kb-step .kb-details { margin-left:18px; font-size:12px; opacity:0.85; }
.kb-progress-list .kb-step.kb-done .kb-dot { background:#4caf50; }
.kb-progress-list .kb-step.kb-active .kb-dot { background:#4caf50; box-shadow:0 0 0 3px rgba(76, 175, 80, 0.25); }
[data-theme="dark"] .kb-progress-list .kb-step .kb-details { color: var(--text-color); opacity:0.9; }
.kb-results-list { list-style:none; padding-left:0; margin-left:0; }
.kb-results-list li { padding:4px 0; }
.kb-results-list i.fa-circle-check { color:#2ecc71; margin-right:6px; }

/* Modal tekstopmaak: duidelijke, contrasterende tekstkleuren */
.modal-content,
.modal-content h1,
.modal-content h2,
.modal-content h3,
.modal-content h4,
.modal-content h5,
.modal-content h6,
.modal-content p,
.modal-content ul,
.modal-content li,
.modal-content label,
.modal-content div,
.modal-content span {
    color: #000; /* Zwarte tekst in light theme voor maximale leesbaarheid */
}
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-content h1,
[data-theme="dark"] .modal-content h2,
[data-theme="dark"] .modal-content h3,
[data-theme="dark"] .modal-content h4,
[data-theme="dark"] .modal-content h5,
[data-theme="dark"] .modal-content h6,
[data-theme="dark"] .modal-content p,
[data-theme="dark"] .modal-content ul,
[data-theme="dark"] .modal-content li,
[data-theme="dark"] .modal-content label,
[data-theme="dark"] .modal-content div,
[data-theme="dark"] .modal-content span {
    color: var(--text-color); /* Gebruik thema-tekst in dark mode */
}

/* Donkere achtergrond voor modals in dark theme */
[data-theme="dark"] .modal-content {
    background-color: #1e1e1e;
    border-color: #333;
}

/* Custom overlay modals zonder .modal-content (zoals #refreshModal) */
#refreshModal,
#refreshModal * {
    color: #000;
}
[data-theme="dark"] #refreshModal,
[data-theme="dark"] #refreshModal * {
    color: var(--text-color);
}

/* Fullscreen modal variant */
.modal.fullscreen {
    padding: 0; /* Let the content control spacing */
}
.modal.fullscreen .modal-content {
    /* Fit within viewport with small gutters for better aesthetics */
    margin: 12px auto;                         /* small outer gutter */
    width: min(1200px, calc(100vw - 24px));    /* cap width, keep gutter */
    max-width: none;
    height: calc(100vh - 24px);                /* keep footer/header in view */
    border-radius: 10px;                        /* subtle rounding */
    display: flex;         /* Use flex to structure header/body/footer */
    flex-direction: column;
    box-sizing: border-box;
}
.modal.fullscreen .modal-header {
    position: sticky;
    top: 0;
    background: var(--card-bg);
    z-index: 1;
}
.modal.fullscreen .modal-body {
    /* Create a single internal scroll area below sticky header and above footer */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0; /* allow children to shrink for proper flex scrolling */
}

/* Specific layout improvements for the "Varianten koppelen" modal */
#linkVariantsModal .modal-body > .row {
    display: flex;
    gap: 16px;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0; /* enable children to scroll */
    overflow: hidden;
}
#linkVariantsModal .modal-header h2 { font-size: 18px; }
#linkVariantsModal .col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0; /* allow internal scroll areas */
}
#linkVariantsModal .chips {
    flex: 1 1 auto;
    min-height: 40px;
    padding: 8px;
    border: 1px solid var(--border-color, #e9ecef);
    border-radius: 6px;
    background: var(--background-color);
    overflow: auto;
    display: flex;
    flex-direction: column;        /* stack chips vertically */
    align-items: stretch;          /* make each chip full width */
    gap: 6px;                      /* space between chips */
}

#linkVariantsModal .chips .chip {
    display: flex;                 /* allow content and remove aligned on one row */
    align-items: flex-start;       /* top align content inside chip */
    justify-content: space-between;
    width: 100%;                   /* full width */
    background: #f2f2f2;
    border-radius: 5px;
    padding: 6px 10px;             /* compact padding */
    font-size: 13px;               /* smaller font */
    line-height: 1.3;              /* readable multi-line */
    box-sizing: border-box;
}
[data-theme="dark"] #linkVariantsModal .chips .chip { background:#2f2f2f; }

#linkVariantsModal .chips .chip .label {
    flex: 1 1 auto;
    min-width: 0;                  /* enable text wrapping */
    white-space: normal;           /* allow multiple lines */
    word-break: break-word;        /* break long tokens */
}

#linkVariantsModal .chips .chip .remove {
    cursor: pointer;
    color: #b00;
    margin-left: 10px;
    flex: 0 0 auto;
}
#linkVariantsModal .table-responsive {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none; /* let it grow and scroll within the column */
    overflow: auto;
}
#linkVariantsModal #lvPagination, 
#linkVariantsModal .actions {
    padding-top: 8px;
}

/* Compact pagination in link-varianten modal */
#linkVariantsModal #lvPagination {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}
#linkVariantsModal #lvPagination .btn {
    height: 28px;
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1.2;
}

/* Count chip in actions cell */
.table .table-actions .link-count { opacity: 0.9; }
.table .table-actions .link-count:hover { opacity: 1; }

/* Stack columns on narrower screens */
@media (max-width: 900px) {
    .modal.fullscreen .modal-content {
        width: calc(100vw - 16px);
        height: calc(100vh - 16px);
        margin: 8px auto;
        border-radius: 6px;
    }
    #linkVariantsModal .modal-body > .row {
        flex-direction: column;
    }
}

/* Close button aligned to top-right inside modal header/content */
.close-button {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 28px;
    font-weight: bold;
    line-height: 1;
}

.close-button:hover,
.close-button:focus {
    color: var(--text-color);
    text-decoration: none;
    cursor: pointer;
}

/* Ensure modal containers provide positioning context */
.modal-content, .modal-header { position: relative; }

/* Knoppen in modals compacter maken */
.modal-content .btn {
    width: auto;
    display: inline-block;
    /* padding is nu gestandaardiseerd in .btn */
    margin-top: 10px;
    margin-right: 10px;
}

/* Sorteerbare tabelkoppen */
.sortable-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.sort-arrows {
    display: flex;
    flex-direction: column;
}

.sort-arrow {
    color: #ccc; /* Inactieve kleur */
    text-decoration: none;
    line-height: 0.8;
    font-size: 10px;
}

.sort-arrow:hover {
    color: var(--text-color);
}

.sort-arrow.active {
    color: var(--primary-color);
}

/* Suggestion Box Stijlen */
.suggestion-box {
    position: absolute;
    border: 1px solid #ccc;
    background-color: var(--card-bg);
    max-height: 150px;
    overflow-y: auto;
    z-index: 1050; /* Boven de tabel, onder de header */
    box-shadow: var(--shadow);
    border-radius: 4px;
}

.suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
    color: var(--text-color);
}

.suggestion-item:hover,
.suggestion-item.active {
    background-color: var(--primary-color);
    color: #fff;
}
[data-theme="dark"] .suggestion-item:hover,
[data-theme="dark"] .suggestion-item.active {
    color: #000;
}


/* Theme Switch Stijlen */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
}

.theme-switch {
    display: inline-block;
    height: 24px;
    position: relative;
    width: 50px;
}

.theme-switch input {
    display: none;
}

.slider {
    background-color: #ccc;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
}

.slider:before {
    background-color: #fff;
    bottom: 4px;
    content: "";
    height: 16px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 16px;
}

input:checked + .slider {
    background-color: var(--primary-color);
}

input:checked + .slider:before {
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.pagination {
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: 4px;
}

.page-item:first-child .page-link {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.page-item:last-child .page-link {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.page-link {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: var(--primary-color);
    background-color: var(--card-bg);
    border: 1px solid #dee2e6;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

[data-theme="dark"] .page-link {
    background-color: var(--input-bg);
    border-color: var(--input-border);
}

.page-link:hover {
    z-index: 2;
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    background-color: var(--card-bg);
    border-color: #dee2e6;
}

/* Read-only cell styles */

/* Read-only cells should not obscure row background colors (striped/semantic). */
.read-only-cell {
    background-color: transparent !important;
    color: inherit;
    cursor: not-allowed;
}

[data-theme="dark"] .read-only-cell {
    background-color: transparent !important;
    color: inherit;
}

/* Row lock: visuele hint en blokkeren van inline edit */
/* Maak tekst donkerder (leesbaarder) i.p.v. vervagen met opacity */
.row-locked { opacity: 1; color: #212529; }
[data-theme="dark"] .row-locked { color: #757575; }
.row-locked [contenteditable] { background: transparent !important; cursor: not-allowed; }
.table-actions .row-lock-toggle { margin-right: 6px; }

.checkbox-column {
    width: 20px;
    text-align: left; /* links uitlijnen volgens verzoek */
}

/* --- Filter Bar Styles --- */
.filter-bar .card-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}
.filter-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}
.filter-controls select {
    width: 150px;
}
.filter-controls input {
    width: 250px;
}
.action-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
}
.btn-dark-gray {
    background-color: #5a6268;
    border-color: #5a6268;
    color: #fff;
}

/* Compact icon buttons for quick motor navigation */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 1px solid var(--border-color, #e0e0e0);
    color: var(--text-color);
    box-shadow: var(--shadow);
}
.btn-icon:hover { filter: brightness(95%); }
[data-theme="dark"] .btn-icon { background: var(--input-bg); border-color: var(--input-border); }
[data-theme="dark"] .btn-icon:hover { filter: none; background: #3a3a3a; }
.btn-icon + .btn-icon { margin-left: 8px; }

/* --- Generic chip styles (reusable) --- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eef2f7;
    border: 1px solid #d0d7e2;
    color: #1f2937;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 13px;
    line-height: 1.2;
}
.chip .label { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; text-decoration: none; }
.chip .label:hover { text-decoration: underline; }
[data-theme="dark"] .chip { background:#2f2f2f; border-color:#444; color:#e5e7eb; }

/* Ensure chips scale with table font size controls */
.table .chip { font-size: inherit; line-height: inherit; }
.table .chip .label { font-size: inherit; }

/* Chip variants for categories */
.chip-main { background: rgba(74, 144, 226, 0.18); border-color: var(--primary-color); color: var(--primary-color); }
[data-theme="dark"] .chip-main { background: rgba(123, 176, 255, 0.22); color: var(--primary-color); }
.chip-extra { background: #f3f6fb; }
[data-theme="dark"] .chip-extra { background: #2a2a2a; }

/* Compact chips inside tables, scale with table font size */
.table .pcat-extras .chip { 
    font-size: calc(var(--kb-table-font-size, 13px) - 1px);
    padding: 2px 8px; 
    gap: 4px;
}
.table .pcat-extras .extras-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.table .pcat-extras .extras-chips .chip { margin: 0; }

/* Header: Tabel fontgrootte bediening */
.table-font-control { display:flex; align-items:center; gap:4px; }
.table-font-control #kbTableFontLabel { display:inline-block; min-width: 12px; text-align:center; font-weight: 600; }
.table-font-control .btn-icon { width:22px; height:22px; font-size:12px; }

/* --- Checkbox Grid for Modals --- */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #dee2e6;
    max-height: 60vh;      /* Taller list in fullscreen modal */
    overflow-y: auto;      /* Scroll if too long */
}
html[data-theme='dark'] .checkbox-grid {
    background-color: #343a40;
    border-color: #495057;
}
.checkbox-grid label {
    display: block;
}

/* Ensure checkbox is left of the value and aligned nicely */
.checkbox-grid .form-check {
    display: flex;
    align-items: center;
    gap: 8px;
}
.checkbox-grid .form-check-input {
    margin: 0; /* Remove default spacing for crisp alignment */
}
.checkbox-grid .form-check-label {
    margin: 0;
    cursor: pointer;
}

/* Import Modal - Column Mapping Styles */
#columnMappings {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Ruimte tussen de rijen */
    margin: 20px 0;
}

.mapping-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    gap: 15px;
    padding: 10px;
    border: 1px solid var(--input-border, #e0e0e0);
    border-radius: 6px;
    background-color: var(--background-color);
}

.mapping-row label {
    flex: 1 1 200px; /* Flexibele breedte, basis 200px */
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 0; /* Reset margin */
}

.mapping-row .form-control {
    flex: 1 1 300px; /* Flexibele breedte, basis 300px */
    width: auto; /* Overschrijf eventuele vaste breedte */
}

[data-theme="dark"] .mapping-row {
    border-color: #444;
}

/* Zorg ervoor dat de tekst in de dropdowns horizontaal blijft */
.mapping-row select,
.mapping-row option,
.mapping-row optgroup {
    writing-mode: horizontal-tb !important;
}

/* --- Nieuwe Import Modal Stijlen --- */

/* Verbeterde basis voor de modal-content */
.modal-content {
    padding: 20px; /* Reset padding, we regelen het in header/body/footer */
    display: flex;
    flex-direction: column;
}

.modal-content.large {
    max-width: 750px; /* Iets breder voor de import modal */
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    border-bottom: 1px solid var(--border-color, #e9ecef);
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
    text-transform: none; /* Geen uppercase voor een rustiger beeld */
}

.modal-body {
    padding: 25px;
    flex-grow: 1;
}

/* --- Beschrijvingen: AI Modal verbeteringen --- */
#beschAIModal .ai-prompt-wrap { margin-bottom: 12px; }
#beschAIModal #aiPrompt { width: 100%; resize: vertical; }
#beschAIModal .chip-list { display:flex; flex-wrap:wrap; gap:6px; }
#beschAIModal .chip-tag { padding: 2px 8px; font-size: 12px; line-height: 1.2; cursor: pointer; }
#beschAIModal .chip-tag .label { text-decoration: none; }
#beschAIModal .ai-preview-box {
    min-height: 120px;
    border: 1px solid rgba(0,0,0,0.15);
    padding: 8px;
    border-radius: 6px;
    background: var(--kb-surface, #fff);
    color: #000;               /* Zwarte tekst in voorbeeld (container) */
    font-size: 13px;
    line-height: 1.45;
}
/* Forceer zwart voor alle inhoud in het voorbeeld, ook in dark mode en ongeacht generieke modal-regels */
#beschAIModal .ai-preview-box *,
#beschAIModal .ai-preview-box { color: #000 !important; }

/* --- SEO: AI Modal verbeteringen (gelijk aan Beschrijvingen) --- */
#seoAIModal .ai-prompt-wrap { margin-bottom: 12px; }
#seoAIModal #aiPrompt { width: 100%; resize: vertical; }
#seoAIModal .chip-list { display:flex; flex-wrap:wrap; gap:6px; }
#seoAIModal .chip-tag { padding: 2px 8px; font-size: 12px; line-height: 1.2; cursor: pointer; }
#seoAIModal .chip-tag .label { text-decoration: none; }
#seoAIModal .ai-preview-box {
    min-height: 120px;
    border: 1px solid rgba(0,0,0,0.15);
    padding: 8px;
    border-radius: 6px;
    background: var(--kb-surface, #fff);
    color: #000;
    font-size: 13px;
    line-height: 1.45;
}
#seoAIModal .ai-preview-box *,
#seoAIModal .ai-preview-box { color: #000 !important; }

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 15px 25px;
    border-top: 1px solid var(--border-color, #e9ecef);
    background-color: var(--background-color);
}

/* Make search input match button look in modals */
#linkVariantsModal .filter-inline .form-control {
    height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--input-border, #ced4da);
    border-radius: 4px;
    background: var(--input-bg, #fff);
    color: var(--input-text, #212529);
    box-sizing: border-box;
}
[data-theme="dark"] #linkVariantsModal .filter-inline .form-control {
    background: var(--input-bg, #2a2a2a);
    border-color: var(--input-border, #444);
    color: var(--input-text, #eee);
}

/* Stappen binnen de modal */
.import-step h4 {
    font-size: 1.2rem;
    color: var(--primary-color);
    margin-bottom: 10px;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 5px;
    display: inline-block;
}

.import-step p {
    font-size: 1rem;
    color: var(--text-color);
    opacity: 0.9;
}

/* Acties in stap 1 */
.import-actions {
    display: flex;
    justify-content: space-between; /* Pushes children to the edges */
    align-items: center;
    margin-top: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

#uploadForm {
    display: flex;
    align-items: center;
    gap: 15px; /* Ruimte tussen de upload-elementen en de analyseer-knop */
}

/* Stijl voor de file input */
#import_file {
    border: 1px solid var(--input-border, #ccc);
    border-radius: 4px;
    padding: 5px;
    font-size: 14px;
}
/* Webkit-specifieke stijlen voor de file-upload knop */
#import_file::file-selector-button {
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid transparent;
    background-color: var(--primary-color);
    color: white;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-right: 10px;
}

#import_file::file-selector-button:hover {
    filter: brightness(90%);
}

.import-status {
    margin-top: 15px;
    font-size: 0.9rem;
}

.radio-group {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

/* --- Nieuwe Custom File Upload Stijlen --- */
.custom-file-upload {
    display: flex;
    align-items: center;
    gap: 10px;
}

#file-chosen {
    font-style: italic;
    color: var(--text-color);
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px; /* Voorkomt dat lange bestandsnamen de layout breken */
}

/* --- Import Stap 2 Aanpassingen --- */
.import-settings {
    display: flex;
    flex-direction: column; /* Stapel de groepen verticaal */
    gap: 15px; /* Ruimte tussen de verticale groepen */
    background-color: var(--background-color);
    padding: 15px;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
}

.setting-group {
    display: flex;
    flex-direction: column;
}

.setting-group label {
    font-weight: 500;
    font-size: 13px; /* Aangepaste font-size */
    margin-bottom: 8px;
}

.setting-group .radio-group label {
    font-size: 12px; /* Aangepaste font-size voor radio buttons */
}

.setting-group .form-control {
    height: 38px; /* Zelfde hoogte als andere inputs */
}

.setting-group .radio-group {
    margin-top: 0; /* Reset margin */
    display: flex;
    align-items: center;
    gap: 15px;
    height: 38px; /* Zelfde hoogte als de select box */
}

.import-step h5 {
    font-size: 1.1rem;
    color: var(--primary-color);
    margin-bottom: 8px;
    text-transform: none;
}

.import-step .small-text {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 15px;
}

/* --- Sticky Pagination for bottom controls --- */
.sticky-pagination {
    position: sticky;
    bottom: 0;
    z-index: 108; /* below header(1080) and modals(1100), above content */
    background: var(--card-bg, #fff);
    border-top: 1px solid var(--border-color, #e5e5e5);
    padding-top: 6px;
    padding-bottom: 8px;
}

.sticky-pagination .pagination-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Compactere paginering: kleinere tekst en knoppen */
.pagination-bar {
    font-size: 12.5px;
}
.pagination-bar .btn {
    font-size: 12.5px;
    padding: 4px 10px;
    height: 30px;
    line-height: 1.3;
}
.pagination-bar select,
.pagination-bar .form-control {
    font-size: 12.5px;
    height: 30px;
    padding: 2px 8px;
}

/* Reserve space at bottom so sticky bar doesn't cover last rows */
.has-sticky-pagination .card-body {
    /* Reserve space for the sticky pagination + extra for sticky x-scroll */
    padding-bottom: calc(var(--kb-sticky-bottom-offset, 48px) + 40px);
}

@media (max-width: 768px) {
    .has-sticky-pagination .card-body { padding-bottom: calc(var(--kb-sticky-bottom-offset, 60px) + 48px); }
}

/* --- Shared bundle visuals: badges, expanders, child rows --- */
.status-dot {
    display:inline-block;
    width:10px; height:10px;
    border-radius:50%;
    background:#ff9800; /* oranje */
    margin-left:6px;
    vertical-align:middle;
}

/* Duplicate indicator next to status dot */
.duplicate-flag {
    color: var(--danger-color, #dc3545);
    margin-left: 6px;
    vertical-align: middle;
}

.badge-bundle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f5a623;
    color: #000000;
    font-size: 10px;
    cursor: pointer;
}
.badge-bundle .tiny-tag {
    margin-left: 4px;
    background: #2457c5;
    color: #fff;
    padding: 0 6px;
    border-radius: 8px;
    font-size: 10px;
}
.bundle-cell { white-space: nowrap; }

.row-expander {
    margin-left: 6px;
    width: 18px; height: 18px;
    line-height: 16px;
    padding: 0;
    border: none;
    background: transparent;
    color: #f5a623;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}
.row-expander:hover { color: #d9d9d9; }

.child-row td { padding: 0 !important; background: transparent; border-top: none; }
.child-wrap { display: block; width: 100%; padding: 10px 12px; background: transparent; box-shadow: none; border: 0; text-align: center; opacity: 0.8; }

/* Subtle visual hint for expanded child rows (entire row) */
.table tbody tr.child-item,
.table tbody tr.child-item > td { background-color: rgba(255,255,255,0.04); }
[data-theme="dark"] .table tbody tr.child-item,
[data-theme="dark"] .table tbody tr.child-item > td { background-color: rgba(255,255,255,0.06); }

/* Optional nested table styling inside child-wrap (if used) */
.child-wrap .table { margin: 0; background: transparent; }
.child-wrap .table-sm thead { display: none; } /* align with producten.php child rows (no header) */
.child-wrap .table-sm tbody td { border-top: 1px solid var(--panel-border, #e3e8ef); }
[data-theme="dark"] .child-wrap { background: transparent; border-color: transparent; box-shadow: none; }
[data-theme="dark"] .child-wrap .table-sm tbody td { border-top-color: rgba(255,255,255,0.06); }

/* --- Afbeelding URL-chips en preview --- */
.urls-chiplist { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip.url-chip { cursor: zoom-in; }
.popover .img-preview { max-width: 300px; max-height: 300px; display: block; }

/* Utilities for compact buttons and monospace IDs in modals/tables */
.btn-compact { height: 28px; padding: 4px 8px; font-size: 12px; line-height: 1.2; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* --- Bundle Modal shared styles (#bundleModal) --- */
#bundleModal .bm-header { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
#bundleModal .bm-header .actions { margin-top: 2px; }
#bundleModal .bm-list { max-height: 50vh; overflow: auto; border: 1px solid var(--panel-border, #e3e8ef); border-radius: 6px; }
#bundleModal .bm-item { display: grid; grid-template-columns: 80px 1fr 1.5fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--panel-border, #e9ecef); }
#bundleModal .bm-item:last-child { border-bottom: none; }
[data-theme="dark"] #bundleModal .bm-item { border-color: var(--input-border, #3a3a3a); }
#bundleModal .bm-col.bm-id { font-weight: 600; }
#bundleModal .bm-col.bm-actions .btn { margin-left: 6px; }

/* --- Basis Informatie: productnaam hover expand --- */
.table .col-ps-name { width: 200px; min-width: 200px; }
.table td.productnaam-col { position: relative; max-width: 200px; }
.table td.productnaam-col .kb-hover-expand {
    display: inline-block;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.table td.productnaam-col:hover .kb-hover-expand {
    position: absolute;
    z-index: 3;
    left: 0; top: 50%; transform: translateY(-50%);
    background: var(--kb-surface, #fff);
    color: inherit;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 4px 18px rgba(0,0,0,0.15);
    padding: 4px 8px;
    border-radius: 4px;
    max-width: none;
    white-space: nowrap;
    overflow: visible;
}
[data-theme="dark"] .table td.productnaam-col:hover .kb-hover-expand {
    background: var(--kb-surface, #1e1e1e);
    border-color: rgba(255,255,255,0.18);
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}

/* --- Completion column & badge (rightmost, fit to content) --- */
.table td.completion-cell,
.table th.completion-cell {
    width: 1%;                 /* shrink to fit content in fixed-layout tables */
    white-space: nowrap;       /* keep badge on one line */
    text-align: right;         /* align to the far right */
}
.completion-badge {
    display: inline-block;
    min-width: 34px;
    padding: 2px 6px;
    font-size: 12px;
    line-height: 1;
    border-radius: 10px;
    text-align: center;
    margin-left: 6px;
    color: #fff;
}
.completion-badge.bad { background: #dc3545; }
.completion-badge.warn { background: #ffc107; color: #222; }
.completion-badge.ok { background: #28a745; }

/* --- SEO tabel: vaste kolombreedtes zodat header niet inklapt tijdens laden --- */
.table.seo-table { table-layout: fixed; }
.table.seo-table thead th:nth-child(1),
.table.seo-table tbody td:nth-child(1) { width: 36px; }
.table.seo-table thead th:nth-child(2),
.table.seo-table tbody td:nth-child(2) { width: 80px; }
.table.seo-table thead th:nth-child(3),
.table.seo-table tbody td:nth-child(3) { width: 160px; }
.table.seo-table thead th:nth-child(4),
.table.seo-table tbody td:nth-child(4) { width: 260px; }
.table.seo-table thead th:nth-child(5),
.table.seo-table tbody td:nth-child(5) { width: 420px; }
.table.seo-table thead th:nth-child(6),
.table.seo-table tbody td:nth-child(6) { width: 260px; }
.table.seo-table thead th:nth-child(7),
.table.seo-table tbody td:nth-child(7) { width: 180px; }
.table.seo-table thead th:nth-child(8),
.table.seo-table tbody td:nth-child(8) { width: 110px; white-space: nowrap; }
.table.seo-table thead th:nth-child(9),
.table.seo-table tbody td:nth-child(9) { width: 64px; text-align: center; }
.table.seo-table thead th:nth-child(10),
.table.seo-table tbody td:nth-child(10) { width: 90px; }

/* --- Afbeeldingen tabel: eerste 3 kolommen op inhoud, URLs vullen rest --- */
.table.afbeeldingen-table { table-layout: auto; }
.table.afbeeldingen-table th:nth-child(1),
.table.afbeeldingen-table td:nth-child(1) { width: 36px; }
/* ID, Merk, Referentie, Product en Bundel compact */
.table.afbeeldingen-table th:nth-child(2),
.table.afbeeldingen-table td:nth-child(2),
.table.afbeeldingen-table th:nth-child(3),
.table.afbeeldingen-table td:nth-child(3),
.table.afbeeldingen-table th:nth-child(4),
.table.afbeeldingen-table td:nth-child(4),
.table.afbeeldingen-table th:nth-child(5),
.table.afbeeldingen-table td:nth-child(5),
.table.afbeeldingen-table th:nth-child(6),
.table.afbeeldingen-table td:nth-child(6) {
    width: 1%;
    white-space: nowrap;
}
/* URLs neemt de rest van de ruimte */
.table.afbeeldingen-table th:nth-child(7),
.table.afbeeldingen-table td:nth-child(7) { width: 100%; }
.table.afbeeldingen-table td.urls-cell {
    white-space: normal;          /* URL mag over meerdere regels */
    overflow-wrap: anywhere;      /* breek lange tokens/URLs */
    word-break: break-word;
}


/* ---- Planner chips (tijden) ---- */
.kb-chips {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}
.kb-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.2;
    background: var(--chip-bg, #eef2ff);
    color: var(--chip-fg, #1f2937);
    border: 1px solid var(--chip-border, #e5e7eb);
}
.kb-chip .kb-chip-remove {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
}
.kb-chip .kb-chip-remove:hover { background: rgba(0,0,0,0.06); }
[data-theme="dark"] .kb-chip {
    background: var(--chip-bg-dark, #1f2937);
    color: var(--chip-fg-dark, #e5e7eb);
    border-color: var(--chip-border-dark, #374151);
}
[data-theme="dark"] .kb-chip .kb-chip-remove:hover { background: rgba(255,255,255,0.08); }

/* ---- Badge: Schema ingeschakeld ---- */
.badge-schedule {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: #e6f6ee;
    color: #166534;
    border: 1px solid #a7f3d0;
}
[data-theme="dark"] .badge-schedule {
    background: #0b2f22;
    color: #86efac;
    border-color: #14532d;
}