/* BP makeover */
body {
    background-color: #00963E;
    color: #F8E926;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

h2 {
    margin-top: 30pt;
}

.form-control, .form-select {
    background-color: #F3F4F6;
    border-color: #D1D5DE;
}

.form-select:disabled {
    background-color: #D1D5DE;
}

.btn {
    background-color: #D1D5DE;
    border-color: transparent !important;
    color: black;
}

.logo {
    width: 25vh;
    max-width: 200px;
    margin: 20px auto;
    display: block;
    align-self: center;
}

footer {
    width: 100%;
    margin: 50px 0;
}

footer p {
    width: 100%;
    text-align: center;
    color: #00b94d;
}

/* Zorg ervoor dat de container goed schaalt */
.container {
    padding: 15px;
}

/* Tabbladen mobielvriendelijk maken */
.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #F8E926;
}

.nav-tabs .nav-link {
    display: block;
    padding: 10px;
    font-size: 14px;
    color: #F8E926;
    margin: 0 1pt;
}

.nav-tabs .nav-link:hover {
    border-color: #F8E926;
}

.nav-tabs .nav-link.active {
    background-color: #F8E926;
    color: #00963E;
    border-color: #F8E926;
}

/* Tabellen mobielvriendelijk maken */
.table {
    width: 100%;
    border-collapse: collapse;
}

.table th, .table td {
    white-space: nowrap;
    text-align: left;
    padding: 8px;
    border: 1px solid #D1D5DE;
    background-color: #F3F4F6;
}

.table th {
    background-color: #D1D5DE;
    font-weight: bold;
}

/* Zorg ervoor dat de tabel meeschuift op kleinere schermen */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Formulieren mobielvriendelijk maken */
.add-bartender-form input,
.add-bartender-form select,
.add-bartender-form button,
.add-lichting-form input,
.add-lichting-form button {
    width: 100%;
    margin-bottom: 15px;
    padding: 10px;
    font-size: 14px;
}

/* Responsieve stijlen voor kleinere schermen */
@media (max-width: 768px) {
    h1 {
        font-size: 24px;
    }

    .nav-tabs .nav-link {
        font-size: 12px;
        padding: 8px;
    }

    .table th, .table td {
        font-size: 12px;
        padding: 6px;
    }

    .table select {
        font-size: 8pt;
        line-height: 1.2;
        min-width: 80pt;
    }
}