.o_appointment_calendar table td {
    padding: 0;
}

.o_appointment_calendar table td > div {
    transition: all 0.2s;
    font-size: 0.9rem;
}

.o_appointment_calendar table td[onclick]:hover > div {
    background-color: #f0f0f0;
    border-radius: 4px;
}

.slot-btn {
    transition: all 0.2s;
}

.slot-btn:hover {
    transform: translateX(5px);
}

/* Available dates - default styling */
.cursor-pointer:hover {
    background-color: #e3f2fd !important;
}

/* Date unavailable styling - RED */
.date-unavailable {
    background-color: #ffebee !important;
    cursor: not-allowed !important;
}

.date-unavailable > div {
    text-decoration: line-through;
    color: #c62828 !important;
}

/* Slot availability indicators */
.slot-available {
    border-left: 4px solid #4caf50 !important; /* Green for available */
}

.slot-limited {
    border-left: 4px solid #ff9800 !important; /* Orange for limited */
}

.slot-unavailable {
    border-left: 4px solid #f44336 !important; /* Red for unavailable */
    opacity: 0.6;
    cursor: not-allowed !important;
}

.slot-unavailable:hover {
    transform: none !important;
}

/* Legend for calendar */
.availability-legend {
    display: flex;
    gap: 15px;
    font-size: 0.85rem;
    margin-top: 10px;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.legend-box {
    width: 16px;
    height: 16px;
    border-radius: 3px;
}

.legend-available {
    background-color: #e8f5e9;
    border: 1px solid #4caf50;
}

.legend-unavailable {
    background-color: #ffebee;
    border: 1px solid #f44336;
    text-decoration: line-through;
}

.legend-past {
    background-color: #e0e0e0;
    border: 1px solid #9e9e9e;
    opacity: 0.35;
}

.p-2{
   font-size: 0.9rem !important;
    padding: 0px !important;
}

/* Mobile responsive fixes */
@media (max-width: 768px) {



    .o_appointment_calendar table {
        font-size:5px !important;
        table-layout: fixed !important;
        width: 100% !important;
    }

    .p-2{
   font-size: 5px !important;
    padding: 0px !important;
}


    .o_appointment_calendar table th {
          min-width: unset !important;
        width: 14.28% !important;
        padding: 0 !important;
        font-size: 5px !important;
    }
    .o_appointment_calendar table td {
        min-width: unset !important;
        width: 14.28% !important;
        padding: 0 !important;
        font-size: 5px !important;
    }

    .o_appointment_calendar table td > div {
        font-size:5px !important;
        padding: 2px 0 !important;
        white-space: nowrap !important;
        line-height: 1 !important;
    }

    .o_appointment_calendar .p-2 {
       font-size: 5px !important;
       padding: 2px 0 !important;
       white-space: nowrap !important;
    }


    .p-2 {
       font-size: 5px !important;
       padding: 2px 0 !important;
       white-space: nowrap !important;
    }
}