/* Global Styles */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh;
}

/* Calendar Grid */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* 7 days a week */
    gap: 1px;
    background-color: #e9ecef;
    /* Border color effect */
}

/* Calendar Header Cells (Mon, Tue, etc.) */
.calendar-header {
    background-color: #f8f9fa;
    font-weight: 600;
    text-align: center;
    padding: 10px;
    color: #495057;
}

/* Day Cells */
.calendar-day {
    background-color: #ffffff;
    min-height: 100px;
    padding: 10px;
    position: relative;
    cursor: default;
    /* Default cursor */
    transition: background-color 0.2s;
}

.calendar-day:hover {
    background-color: #fdfdfd;
}

.calendar-day.empty {
    background-color: #f8f9fa;
    /* Days from prev/next month */
}

/* Date Number */
.day-number {
    font-weight: bold;
    font-size: 1.1rem;
    color: #343a40;
    margin-bottom: 5px;
    display: block;
}

/* Slot Indicator */
.slot-badge {
    cursor: pointer;
    user-select: none;
    font-size: 0.9rem;
    padding: 5px 10px;
    border-radius: 20px;
    display: inline-block;
    transition: transform 0.1s;
}

.slot-badge.admin-interactive:active {
    transform: scale(0.95);
}

/* Status Colors for Slots */
.slots-high {
    background-color: #d1e7dd;
    color: #0f5132;
}

/* 3-4 */
.slots-low {
    background-color: #fff3cd;
    color: #664d03;
}

/* 1-2 */
.slots-zero {
    background-color: #f8d7da;
    color: #842029;
}

/* 0 */

/* Special Days */
.day-red {
    background-color: #ffe5e5 !important;
}

.day-holiday {
    background-color: #e2e3e5 !important;
    color: #6c757d;
}

/* Compact Calendar for selection ONLY */
.calendar-compact .calendar-day {
    min-height: 40px !important;
    /* Much shorter */
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-compact .day-number {
    margin-bottom: 0;
    font-size: 1rem;
}

/* Responsive adjustments */
/* Responsive adjustments */
@media (max-width: 768px) {

    /* Calendar Grid -> List View */
    .calendar-grid {
        display: flex;
        flex-direction: column;
        gap: 15px;
        background-color: transparent;
        /* Remove grid background */
    }

    /* Hide Grid Headers (Mon, Tue...) */
    .calendar-header {
        display: none;
    }

    /* Day Cell adjustments */
    .calendar-day {
        min-height: auto;
        /* Dynamic height */
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        background-color: #fff;
        border: 1px solid #dee2e6;
    }

    /* Empty days (padding from other months) - Hide them to clean up list */
    .calendar-day.empty {
        display: none;
    }

    .day-number {
        font-size: 1.1rem;
        /* Restore readable size */
        margin-bottom: 5px;
        display: flex;
        /* Allow inline weekday label */
        align-items: center;
        justify-content: space-between;
    }

    /* Weekday Label (Injected by JS) */
    .day-weekday-label {
        display: inline-block !important;
        /* Force show on mobile */
        font-size: 0.9rem;
        font-weight: normal;
        color: #6c757d;
        text-transform: uppercase;
    }

    /* Slot Badge - Inline on mobile line 1? or separate? */
    .slot-badge {
        font-size: 0.85rem;
        padding: 4px 10px;
        margin-top: 5px;
        margin-bottom: 10px;
        display: inline-block;
        width: auto;
    }
}

/* Login Page Styles */
.login-bg {
    background: linear-gradient(135deg, #0d6efd 0%, #0099ff 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    padding: 3rem;
    max-width: 500px;
    width: 100%;
    text-align: center;
}

.login-icon {
    font-size: 4rem;
    color: #0d6efd;
    margin-bottom: 1.5rem;
}

.feature-icon {
    background-color: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}