/* Base Styles & Dark Theme */
body {
    font-family: 'Inter', sans-serif;
    background-color: #000000;
    color: #e0e0e0;
    margin: 0;
    padding: 0;
}

.page-container {
    display: flex;
    justify-content: center;
    min-height: 100vh;
    background-color: #000000;
}

.side-panel {
    flex: 1;
    background-color: #0a0a0a;
    max-width: 250px;
}

@media (max-width: 1200px) {
    .side-panel { display: none; }
}

.main-content {
    flex: 3;
    padding: 40px 20px;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Goud Kleuren */
h1 { font-size: 2.5rem; margin-bottom: 5px; color: #ffd700; }
h2 { font-size: 1.2rem; font-weight: 400; color: #b8860b; margin-bottom: 30px; }

/* Filter & Search Layout */
.filter-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 25px;
    background: #0a0a0a;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #222;
}

.search-bar {
    width: 100%;
    padding: 12px 16px;
    background-color: #111;
    border: 1px solid #333;
    border-radius: 6px;
    color: #fff;
    font-size: 0.95rem;
    box-sizing: border-box;
}

.filter-select {
    width: 100%;
    padding: 12px;
    background-color: #111;
    border: 1px solid #ffd700;
    border-radius: 6px;
    color: #ffd700;
}

/* Tables Custom Styling */
.rentals-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.rentals-table th, .rentals-table td { padding: 15px; border-bottom: 1px solid #222; text-align: left; vertical-align: top; }
.hide-column { display: none; }

/* Transport & Buttons */
.mail-button.disabled { color: #555; pointer-events: none; text-decoration: none; }
.mail-button { color: #ffd700; font-weight: bold; }

.transport-options { display: flex; gap: 20px; margin-top: 10px; }
.radio-label { 
    display: flex; align-items: center; gap: 8px; cursor: pointer; 
    padding: 10px; border: 1px solid #333; border-radius: 6px; background: #111; 
}
.radio-label:hover { border-color: #ffd700; }

/* Zorg dat de tekst in de tabel goudkleurig wordt */
.rentals-table {
    color: #ffd700;
}

/* Specifiek voor de productnaam en omschrijving */
.rentals-table td {
    color: #ffd700;
}

/* Als je de omschrijving iets minder fel goud wilt dan de titel, kun je dit gebruiken: */
.rentals-table small {
    color: #b8860b; /* Een iets donkerdere tint goud voor de omschrijving */
}

/* Zorg dat de prijs en voorraad netjes uitgelijnd zijn */
.rentals-table td {
    white-space: nowrap; /* Voorkomt dat tekst/prijs op een nieuwe regel springt */
}

/* Specifiek voor de productnaam, die mag wel afbreken */
.rentals-table td:nth-child(2) {
    white-space: normal;
    min-width: 200px;
}

.main-action-button {
    background-color: #ffd700;
    color: #000;
    border: none;
    padding: 12px 24px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 6px;
}
.main-action-button.disabled { background-color: #555; cursor: not-allowed; }
/* Stijl voor de Out of Stock tekst */
.out-of-stock {
    color: #ff4d4d;
    font-weight: bold;
}

/* Container voor de checkbox om deze beter te stylen */
.checkbox-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Custom Checkbox styling */
.custom-checkbox {
    appearance: none;
    width: 25px;
    height: 25px;
    background-color: #333; /* Grijze achtergrond */
    border: 1px solid #555;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: background 0.3s;
}

.custom-checkbox:checked {
    background-color: #111;
}

.custom-checkbox:checked::after {
    content: '✓';
    position: absolute;
    color: #ffd700; /* Gouden checkmark */
    font-size: 20px;
    left: 4px;
    top: -2px;
}

/* Zorg dat de quantity input hetzelfde oogt als de checkbox */
.quantity-input {
    width: 50px;
    background: #111;
    border: 1px solid #333;
    color: #fff;
    padding: 5px;
    text-align: center;
    border-radius: 4px;
}

/* --- Mobiele Optimalisatie (Toegevoegd) --- */

/* Zorg dat de tabelcontainer horizontaal scrollbaar is op mobiel */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
}

/* Aanpassingen voor schermen kleiner dan 768px */
@media (max-width: 768px) {
    .main-content {
        padding: 20px 15px;
    }

    h1 { font-size: 1.8rem; }

    /* Verberg het Item ID op mobiel om meer breedte te creëren voor productnaam */
    .rentals-table th:nth-child(1), 
    .rentals-table td:nth-child(1) {
        display: none; 
    }

    /* Input velden groter maken voor betere aanraking (voorkomt inzoomen op iOS) */
    .search-bar, .filter-select, .quantity-input {
        font-size: 16px;
        padding: 12px;
    }

    /* Transport opties onder elkaar plaatsen */
    .transport-options {
        flex-direction: column;
        gap: 10px;
    }

    /* Adres velden onder elkaar */
    .address-fields {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}