/* ----------------------------------------------------
   KLEUREN VOOR DASHBOARD-RIJEN
---------------------------------------------------- */

.row-grey td {
    background-color: #e6e6e6 !important;
    border-bottom: 1px solid #d0d0d0;
}

.row-green td {
    background-color: #d8f5d8 !important;
    border-bottom: 1px solid #bde8bd;
}

.row-blue td {
    background-color: #dce9ff !important;
    border-bottom: 1px solid #bcd3ff;
}

.row-orange td {
    background-color: #ffe6c7 !important;
    border-bottom: 1px solid #ffd1a1;
}

.row-purple td {
    background-color: #f0ddff !important;
    border-bottom: 1px solid #e0c2ff;
}

/* ----------------------------------------------------
   SECTIE-BALKEN
---------------------------------------------------- */
.section-divider td {
    background-color: #333 !important;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 10px;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    font-size: 14px;
}

/* ----------------------------------------------------
   TABEL HEADERS
---------------------------------------------------- */

table thead th {
    font-size: 18px;
    font-weight: 700;
    color: #222;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 12px 10px;
    background-color: #f4f4f4;
    border-bottom: 3px solid #333;
}

/* ----------------------------------------------------
   LAADDATUM KOLOM BREEDTE
---------------------------------------------------- */

table thead th:nth-child(1),
table tbody td:nth-child(1) {
    width: 220px;
}

/* ----------------------------------------------------
   TABEL CELLEN (labels NIET vergroten)
---------------------------------------------------- */

table tbody td {
    padding: 12px 10px;
}

/* Alleen cellen zonder labels groter maken */
table tbody td:not(:has(span)) {
    font-size: 25px !important;
    font-weight: 700;
    color: #111;
}

/* ----------------------------------------------------
   BON VOLGT? LABELS
---------------------------------------------------- */

.bon-label {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 14px;
    color: white;
}

.bon-ja {
    background-color: #ff6b6b;
}

.bon-nee {
    background-color: #4caf50;
}

.bon-leeg {
    background-color: #9e9e9e;
}

/* ----------------------------------------------------
   VERZAMELVAK LABELS
---------------------------------------------------- */

.vak-label {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 16px;
    color: white;
}

.vak-v1 {
    background-color: #4a90e2;
}

.vak-v2 {
    background-color: #50c878;
}

.vak-v3 {
    background-color: #f5a623;
}

.vak-v4 {
    background-color: #bd10e0;
}

.vak-v5 {
    background-color: #d0021b;
}

.vak-v6 {
    background-color: #7b8d93;
}

.vak-ups {
    background-color: #005BBB;
    color: white;
    font-weight: 700;
    font-size: 17px;
    padding: 6px 12px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

.vak-onbekend {
    background-color: #9e9e9e;
}

/* ----------------------------------------------------
   STEP LABELS
---------------------------------------------------- */

.step-label {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 14px;
    color: white;
}

.step-ja {
    background-color: #4caf50;
}

.step-nee {
    background-color: #d32f2f;
}

.step-leeg {
    background-color: #9e9e9e;
}

/* ----------------------------------------------------
   STATUS LABELS
---------------------------------------------------- */

.status-label {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 15px;
    color: white;
}

.status-gestart {
    background-color: #4caf50;
}

.status-gereserveerd {
    background-color: #2196f3;
}

.status-aangevraagd {
    background-color: #ff9800;
}

.status-compleet {
    background-color: #616161;
}

.status-nietcompleet {
    background-color: #d32f2f;
}

.status-onbekend {
    background-color: #9e9e9e;
}

/* ----------------------------------------------------
   HOVER EFFECT
---------------------------------------------------- */

tr:hover td {
    filter: brightness(0.97);
}

/* ----------------------------------------------------
   TEKSTKLEUR
---------------------------------------------------- */

.row-grey td,
.row-green td,
.row-blue td,
.row-orange td,
.row-purple td {
    color: #222;
}

/* ----------------------------------------------------
   TRANSPORT ICONEN
---------------------------------------------------- */

.transport-icon {
    font-size: 28px;
    font-weight: 700;
    display: inline-block;
    padding: 4px 6px;
}

.transport-ups {
    background-color: #351c15;
    color: #f7d100;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 20px;
    font-weight: 800;
}

.transport-onbekend {
    color: #777;
}

/* Verzamelvak kolom groter maken */
.col-verzamelvak,
.verzamelvak-cell {
    width: 160px;
    white-space: normal;
    line-height: 1.2em;
}

/* Kleuren voor ordernummer */
.orderkleur {
    font-weight: bold;
}

.order-blue {
    color: #007bff;
}

.order-green {
    color: #2e8b57;
}

.order-orange {
    color: #ff8c00;
}

.order-purple {
    color: #6a0dad;
}

.order-grey {
    color: #555;
}

.order-black {
    color: #000;
}

/* Tabel responsief */
.dashboard-table {
    width: 100%;
    table-layout: auto;
}

.dashboard-table td {
    padding: 6px 10px;
}

/* =============================
   AFKLEUREN CEL — "JA" ROOD MAKEN
   ============================= */
td:nth-child(8) {
    font-weight: 700;
}

/* AFKLEUREN: JA → rode tekst */
td.afk-ja {
    color: #d32f2f !important;
}

.afk-label {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9rem;
}

/* JA = rood */
.afk-ja {
    background: #d32f2f;
    color: white;
}

/* NEE = grijs */
.afk-nee {
    background: #555;
    color: white;
}

/* Leeg = lichtgrijs */
.afk-leeg {
    background: #ccc;
    color: #333;
}