/* --- WRAPPER: zorgt dat alles mooi in het scherm past --- */
.s4-main {
    max-width: 1600px;
    margin: 0 auto;
    padding: 10px 20px;
}

/* --- TABEL --- */
.s4-table {
    width: 100%;
    background: white;
    border-collapse: collapse;
    table-layout: fixed; /* BELANGRIJK */
    font-size: 12px;     /* Compact */
}

/* --- CELLEN --- */
.s4-table th,
.s4-table td {
    padding: 4px 6px; /* kleiner = meer ruimte */
    border: 1px solid #ddd;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- KOLOMBREEDTES (geoptimaliseerd voor jouw dashboard) --- */
.col-small  { width: 65px; }
.col-medium { width: 110px; }
.col-large  { width: 140px; }
.col-xl     { width: 180px; }

/* --- WORKFLOW BADGES --- */
.wf-badge {
    background: #004a7c;
    color: white;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 10px;
    display: inline-block;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- HOVER INFO VOOR LANGE TEKSTEN --- */
.hover-info {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
    white-space: nowrap;
}

.hover-info:hover {
    white-space: normal;
    background: #eef5ff;
    padding: 4px;
    border-radius: 4px;
    position: relative;
    z-index: 10;
}

/* --- ACTIEKNOPPEN --- */
.action-buttons {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.action-buttons a {
    padding: 4px 6px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 11px;
    white-space: nowrap;
}

.btn-details { background: #004a7c; color: white; }
.btn-fotos   { background: #008c3a; color: white; }

/* --- RESPONSIVE FIX VOOR KLEINE SCHERMEN --- */
@media (max-width: 1400px) {
    .s4-table {
        font-size: 11px;
    }
    .col-small  { width: 55px; }
    .col-medium { width: 95px; }
    .col-large  { width: 120px; }
    .col-xl     { width: 160px; }
}
/* --- ALGEMENE HOVER VOOR ALLE AFGEKAPTE CELLEN --- */
.cell-hover {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}
.filter-bar {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    background: #f5f7fa;
    padding: 10px;
    border-radius: 6px;
}

.filter-bar label {
    display: flex;
    flex-direction: column;
    font-size: 12px;
}

.filter-bar input,
.filter-bar select {
    padding: 4px;
    font-size: 12px;
}

.filter-bar button {
    padding: 6px 10px;
    background: #004a7c;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.cell-hover:hover {
    white-space: normal;
    background: #eef5ff;
    padding: 4px;
    border-radius: 4px;
    position: relative;
    z-index: 10;
}