.container {
        max-width: 100%;
        margin: auto;
        padding: 10px 20px;
    }

    #flash-messages {
        margin-bottom: 15px;
    }

    .checklist-form {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 15px;
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .checklist-form input {
        flex: 1;
        height: 40px;
        font-size: 16px;
        text-align: center;
        border: 2px solid #007bff;
        border-radius: 8px;
        outline: none;
        cursor: pointer; /* Ensures user sees a pointer on date inputs */
    }

    .checklist-form button {
        height: 40px;
        font-size: 16px;
        background: #007bff;
        color: #ffffff;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: 0.2s ease;
        padding: 0 20px;
    }

    .checklist-form button:hover {
        background: #0056b3;
    }

    .table-container {
        margin-top: 20px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        padding: 15px;
    }

    .table {
        width: 100%;
        text-align: center;
        font-size: 14px;
    }

    .table th,
    .table td {
        text-align: center;
        font-size: 14px;
        padding: 8px;
    }

    .cleaned-checkbox {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }

    .delete-btn {
        background-color: transparent;
        color: #dc3545;
        border: 2px solid #dc3545;
        border-radius: 8px;
        padding: 5px 10px;
        cursor: pointer;
        font-size: 14px;
        transition: 0.2s ease;
    }
    .delete-btn:hover {
        background-color: #dc3545;
        color: #ffffff;
    }

    #stats-container {
        margin-top: 30px;
        padding: 15px;
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    /* Search by Room — match checklist inputs */
    .search-filter input#room-filter{
    flex: 0 0 160px;            /* or 200px if you prefer a wider field */
    height: 40px;
    font-size: 16px;
    text-align: center;
    border: 2px solid #007bff;
    border-radius: 8px;
    outline: none;
    padding: 0 10px;
    box-sizing: border-box;
    cursor: text;
    }

    /* make the label clickable like the dates */
    .search-filter label[for="room-filter"]{ cursor: pointer; }


    /* Sort button in table header */
    .sort-btn {
        width: 100%;
        border: none;
        background: none;
        cursor: pointer;
        font-weight: bold;
        color: #3142f9;
    }

    #room_number {
    flex: 0 0 110px;          /* fixed track in flex row */
    max-width: 170px;
    }

    #vouchers {
    flex: 0 0 110px;
    max-width: 170px;
    text-align: center;       /* keep numbers centered */
    }

    /* Make date inputs a touch wider so the calendar icon isn't cramped */
#date_from,
#date_until {
  flex: 0 0 170px;
  max-width: 170px;
}

/* Ensure the Add button never shrinks in the flex row */
.checklist-form button {
  flex: 0 0 auto;
}

/* Bigger, easier checkbox target + pointer on the whole cell */
.cleaned-checkbox {
  width: 30px;
  height: 30px;
}
.table td:has(.cleaned-checkbox) {
  cursor: pointer;
}