/* FILE: /calendar/calendar-widget.css (UPGRADED VERSION) */
:root {
    --primary-color: #0d6efd;
    --primary-color-light: #e7f1ff;
    --danger-color: #dc3545;
}
.cw-wrapper {
    font-family: 'Sarabun', sans-serif !important;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.cw-calendar-main-content { display: flex; gap: 20px; }
.cw-calendar-container { flex: 1; }
.cw-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; background-color: var(--primary-color); color: white; padding: 10px 20px; border-radius: 8px; }
.cw-header h3 { 
    margin: 0 !important; 
    font-size: 1.2rem !important;
    background: transparent !important;
    color: #FFF !important;
    padding: 0px !important;
    font-weight: normal !important;
    font-style: normal !important;
    text-align: center !important;
}
.cw-nav-arrow { cursor: pointer; padding: 10px; transition: transform 0.2s; }
.cw-nav-arrow:hover { transform: scale(1.2); }
.cw-table { width: 100%; text-align: center; border-collapse: separate; border-spacing: 0 5px; }
.cw-table thead tr { background-color: #f8f9fa; }
.cw-table th { color: #333; font-weight: 500; padding: 10px 0; font-size: 0.9rem; }
.cw-table th:first-child { color: var(--danger-color); border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.cw-table th:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.cw-table tbody td:first-child .cw-day-cell { color: var(--danger-color); font-weight: 500; }
.cw-day-cell { width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; transition: all 0.2s; }
.cw-day-cell.cw-other-month { color: #ccc; cursor: default; }
.cw-day-cell:not(.cw-other-month):hover { background-color: var(--primary-color-light); }
.cw-day-cell.cw-today { font-weight: bold; background-color: #d6e8ff; }
.cw-day-cell.cw-has-event { background-color: #ffc107; color: #333; font-weight: bold; }
.cw-day-cell.cw-selected, .cw-day-cell.cw-has-event.cw-selected { background-color: var(--primary-color); color: #fff; transform: scale(1.1); }
.cw-day-cell.cw-holiday { color: var(--danger-color); font-weight: 500; }
.cw-day-cell.cw-holiday.cw-selected, .cw-table tbody td:first-child .cw-day-cell.cw-selected { color: #fff; }

.cw-details-container { flex: 1; border-left: 1px solid #eee; padding-left: 20px; }
.cw-details-header { font-weight: bold; font-size: 1.1rem; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #eee; }
.cw-details-content { max-height: 280px; overflow-y: auto; padding-right: 10px; }
.cw-event-item { margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #f0f0f0; }
.cw-event-item:last-child { border-bottom: none; }
.cw-event-title { 
    font-size: 0.9rem;
    font-weight: 600;
    color: #0056b3;
    line-height: 150%;
}
.cw-event-description { 
    font-size: 0.9rem;
    color: #555;
    margin: 5px 0;
    line-height: 150%;
}
#activity-calendar-container .cw-event-links a { 
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 10px;
    font-size: 0.8rem !important;
    color: #38c218;
    text-decoration: none !important;
    font-weight: normal !important;
}

/* --- Admin Button Styles (Visited Fix - Final) --- */

.cw-footer {
    margin-top: 15px;
    text-align: center;
}

/* 
 * ใช้ ID นำหน้าเพื่อเพิ่มความสำคัญ (Specificity) ให้สูงสุด
 * และจัดกลุ่มสถานะ :link และ :visited เข้ากับคลาสหลัก
 */
#activity-calendar-container .cw-admin-button,
#activity-calendar-container .cw-admin-button:link,
#activity-calendar-container .cw-admin-button:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    padding: 10px 20px;
    background-color: #6c757d;
    color: #ffffff !important; /* บังคับสีขาวสำหรับสถานะปกติ, link, และ visited */
    text-decoration: none !important;
    
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: 500;
    transition: background-color 0.2s;
    box-shadow: 0 2px 5px rgba(108, 117, 125, 0.3);
}

/*
 * สร้าง Rule แยกสำหรับ :hover เพื่อเปลี่ยนสีพื้นหลัง
 * และยืนยันว่าสีตัวอักษรยังคงเป็นสีขาว
 */
#activity-calendar-container .cw-admin-button:hover {
    background-color: #5a6268;
    color: #ffffff !important; 
}

/*
 * สไตล์สำหรับไอคอนที่อยู่ข้างในปุ่ม
 */
#activity-calendar-container .cw-admin-button i {
    margin-right: 8px;
}

@media (max-width: 800px) {
    .cw-calendar-main-content { flex-direction: column; }
    .cw-details-container { border-left: none; padding-left: 0; border-top: 1px solid #eee; padding-top: 20px; }
}