/* Occupants par Étage - Style Variation 2 (Darker Theme) */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap'); /* Example: Using Lato font */

body { /* Apply font to body if needed, or just the container */
    font-family: 'Lato', sans-serif;
}

.ope-container {
    font-family: 'Lato', sans-serif; /* Ensure font is applied */
    max-width: 95%;
    margin: 2em auto;
    padding: 0; /* Remove container padding */
    background-color: #e9ebee; /* Lighter grey background */
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    overflow: hidden; /* Contain children */
}

.ope-container h2 { /* Floor Titles */
    background-color: #4a5568; /* Darker blue-grey */
    color: #ffffff;
    padding: 0.8em 1.5em;
    margin: 0;
    font-size: 1.6em;
    font-weight: 700;
    border-bottom: 1px solid #2d3748; /* Even darker border */
}

.ope-salle { /* Room Sections */
    background-color: #ffffff;
    margin: 1.5em; /* Margin around each room section */
    padding: 1.5em;
    border-radius: 4px;
    border: 1px solid #cbd5e0; /* Softer border */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.ope-salle h3 { /* Room Titles */
    color: #2d3748; /* Dark blue-grey text */
    margin: 0 0 1.2em 0;
    font-size: 1.3em;
    font-weight: 700;
    padding-bottom: 0.6em;
    border-bottom: 2px solid #edf2f7; /* Light border */
}

/* Use Flexbox for the occupant list */
.ope-salle ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

.ope-salle ul li {
    padding: 0.8em 1.2em; /* Slightly adjusted padding */
    border-radius: 3px;
    border: 1px solid transparent; /* Base transparent border */
    transition: all 0.3s ease;
    flex-grow: 1;
    /* Adjust basis and min-width to allow ~4 items per line */
    flex-basis: 22%; /* Aim for roughly 4 items, considering gap */
    min-width: 180px; /* Lower minimum width */
    box-sizing: border-box;
    position: relative; /* For potential pseudo-elements */
    background-color: #f7fafc; /* Very light grey background for items */
    border-color: #e2e8f0; /* Light border */
}

.ope-salle ul li.occupied {
    border-left: 5px solid #4299e1; /* Blue accent */
    background-color: #ebf8ff; /* Lighter blue background */
    color: #2b6cb0; /* Darker blue text */
}

.ope-salle ul li.free {
    border-left: 5px solid #48bb78; /* Green accent */
    background-color: #f0fff4; /* Lighter green background */
    color: #2f855a; /* Darker green text */
    font-style: italic;
}

/* Highlight occupants leaving soon */
.ope-salle ul li.leaving-soon {
    border-left: 5px solid #ed8936; /* Orange accent */
    background-color: #fffaf0; /* Lighter orange background */
    color: #c05621; /* Darker orange text */
    font-weight: 700; /* Bold */
}

/* Style for scheduled occupants */
.ope-salle ul li.scheduled {
    border-left: 5px solid #ff0000; /* A distinct yellow */
    background-color: #fff9b9; /* Very light yellow */
    color: #ff0000; /* Dark grey text for contrast */
}

/* Style for the name of someone leaving soon */
.bientot-disponible {
    color: #dd6b20; /* Orange text */
    font-weight: bold;
}

/* Style for the "soon available" text */
.ope-soon-available {
    display: block;
    margin-top: 0.5em;
    font-size: 0.85em;
    color: #dd6b20; /* Slightly different orange */
    font-weight: normal; /* Reset font weight */
}

/* Ensure jQuery UI Datepicker styles don't conflict badly */
.ui-datepicker {
    font-size: 0.9em; /* Slightly smaller datepicker */
    background: #ffffff;
    border: 1px solid #cbd5e0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.ui-datepicker-header {
    background: #4a5568;
    color: #ffffff;
    border-bottom: 1px solid #2d3748;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ope-salle ul li {
        flex-basis: calc(50% - 0.5em); /* Two columns on medium screens */
        min-width: 200px;
    }
    .ope-container h2 {
        font-size: 1.4em;
        padding: 0.6em 1em;
    }
    .ope-salle h3 {
        font-size: 1.2em;
    }
}

@media (max-width: 480px) {
    .ope-salle ul li {
        flex-basis: 100%; /* Stack items vertically on small screens */
    }
     .ope-container {
        margin: 1em;
    }
    .ope-salle {
        margin: 1em;
        padding: 1em;
    }
}

/* Admin interface styles for occupant status */
.admin-free {
    border-left: 5px solid #48bb78 !important; /* Green accent */
    background-color: #f0fff4 !important; /* Lighter green background */
}

.admin-leaving-soon {
    border-left: 5px solid #ed8936 !important; /* Orange accent */
    background-color: #fffaf0 !important; /* Lighter orange background */
}

.admin-status-text {
    display: inline-block;
    margin-left: 10px;
    font-size: 0.9em;
    font-weight: bold;
}

.admin-free .admin-status-text {
    color: #2f855a; /* Darker green text */
}

.admin-leaving-soon .admin-status-text {
    color: #dd6b20; /* Orange text */
}

/* Style for admin occupant list items */
.ope-occupants li {
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 3px;
    border: 1px solid #e2e8f0;
}

.ope-detail {
    display: block;
    font-size: 0.85em;
    color: #606060;
    margin-top: 0.2em;
}

.ope-detail .ancien-occupant {
    font-style: italic;
    color: #555;
}