/* ============================================
   CALENDAR WHITE OVERRIDE CSS - VERSION 2
   Dành riêng cho: lichvansu.php
   Chiến lược: NỀN TRẮNG + CHO PHÉP màu nhẹ (50-400)
   ============================================ */

/* ============================================
   1. SOFT BACKGROUND
   ============================================ */
body, html, .App, .main-content, .container {
    background: #fefefe !important;
}

.bg-white {
    background: #fefefe !important;
}

/* ============================================
   2. CHO PHÉP MÀU NHẸ - CHỈ OVERRIDE MÀU ĐẬM
   ============================================ */

/* KHÔNG can thiệp vào màu nhẹ (50-400) - để Tailwind xử lý */
/* purple-50, purple-100, purple-200, purple-300, purple-400 → HIỂN THỊ BỘT THƯỜNG */

/* CHỈ override màu đậm (500+) về màu nhẹ hơn */
.bg-purple-500,
.bg-purple-600,
.bg-purple-700,
.bg-purple-800,
.bg-purple-900,
.bg-pink-500,
.bg-pink-600,
.bg-pink-700,
.bg-pink-800,
.bg-pink-900 {
    background: #e9d5ff !important; /* Light purple */
}

/* ============================================
   3. PRESERVE OTHER COLORS (Yellow, Blue, etc)
   ============================================ */
/* KHÔNG CẦN override các màu này nữa - để inline style hoạt động */
/* Inline style với !important sẽ tự động override Tailwind classes */

/* ============================================
   4. ANIMATIONS & TRANSITIONS
   ============================================ */
.calendar-day {
    transition: all 0.3s ease !important;
}

.calendar-day:hover {
    transform: none !important; /* Không có hiệu ứng */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important; /* Giữ shadow ban đầu */
}

.rounded-2xl, .rounded-xl, .rounded-lg {
    transition: all 0.3s ease !important;
}

button, .btn {
    transition: all 0.3s ease !important;
}

/* ============================================
   5. CALENDAR TABLE - KẺ Ô RÕ RÀNG
   ============================================ */
#contentLich {
    padding: 0 !important;
    margin: 0 !important;
}

#calendar-month {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
}

.calendar-table {
    border-collapse: collapse !important;
}

.calendar-table th {
    font-weight: 600 !important; /* Giảm từ bold → semibold */
    border: 2px solid #d1d5db !important; /* Đậm hơn: 2px + gray-300 */
}

.calendar-table td {
    border: 2px solid #d1d5db !important; /* Đậm hơn: 2px + gray-300 */
    font-weight: 400 !important; /* Normal weight, không đậm */
}

/* Override font-bold trong calendar */
.calendar-table .font-bold {
    font-weight: 500 !important; /* Medium thay vì bold */
}

.calendar-table .text-lg {
    font-size: 14px !important;
}

.calendar-table .text-xl {
    font-size: 16px !important;
}

/* ============================================
   6. MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    body, html, .App {
        background: white !important;
    }
    
    .calendar-table th,
    .calendar-table td {
        padding: 8px 4px !important;
        font-size: 12px !important;
    }
    
    .calendar-table .text-lg {
        font-size: 12px !important;
    }
    
    .calendar-table .text-xl {
        font-size: 14px !important;
    }
}