/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jan 22 2026 | 07:21:14 */
/* ================================================
   JQUERY UI DATEPICKER - FIXED & CLEAN
   ================================================ */

/* Main Container */
.ui-datepicker {
    background: #ffffff !important;
    border: 2px solid var(--dash-primary) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    padding: 15px !important;
    font-family: 'Merriweather', serif !important;
    min-width: 300px !important;
    z-index: 99999 !important;
}

/* Header */
.ui-datepicker-header {
    background: var(--dash-primary) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 10px !important;
    margin-bottom: 15px !important;
    position: relative !important;
}

/* Month/Year Title */
.ui-datepicker-title {
    color: var(--dash-accent) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-align: center !important;
    line-height: 1.4 !important;
}

/* Month/Year Dropdowns */
.ui-datepicker-title select {
    background: var(--dash-accent) !important;
    color: var(--dash-primary) !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 5px 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    margin: 0 2px !important;
}

.ui-datepicker-title select option {
    background: #ffffff !important;
    color: var(--dash-primary) !important;
}

/* Navigation Arrows */
.ui-datepicker-prev,
.ui-datepicker-next {
    background: var(--dash-accent) !important;
    border: none !important;
    border-radius: 6px !important;
    width: 30px !important;
    height: 30px !important;
    cursor: pointer !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transition: all 0.2s ease !important;
}

.ui-datepicker-prev {
    left: 10px !important;
}

.ui-datepicker-next {
    right: 10px !important;
}

.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
    background: #ffffff !important;
}

/* Hide default arrow icons */
.ui-datepicker-prev span,
.ui-datepicker-next span {
    display: none !important;
}

/* Custom arrows */
.ui-datepicker-prev::after {
    content: '‹' !important;
    color: var(--dash-primary) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

.ui-datepicker-next::after {
    content: '›' !important;
    color: var(--dash-primary) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

/* Calendar Table */
.ui-datepicker-calendar {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 5px !important;
    margin: 0 !important;
}

/* Day Headers (Sun, Mon, etc.) */
.ui-datepicker-calendar thead th {
    background: transparent !important;
    color: var(--dash-primary) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 10px 0 !important;
    text-align: center !important;
    border: none !important;
}

/* All Day Cells */
.ui-datepicker-calendar tbody td {
    background: #f5f5f5 !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0 !important;
    text-align: center !important;
    width: 38px !important;
    height: 38px !important;
    transition: all 0.2s ease !important;
    position: relative !important;
}

/* DISABLED Days - Span */
.ui-datepicker-calendar td span.ui-state-default {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 38px !important;
    color: #999999 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    background: transparent !important;
    border: none !important;
    cursor: not-allowed !important;
}

/* SELECTABLE Days - Links */
.ui-datepicker-calendar td a.ui-state-default {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 38px !important;
    color: var(--dash-primary) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    z-index: 1 !important;
    pointer-events: auto !important;
}

/* Hover State - Selectable Days */
.ui-datepicker-calendar td:not(.ui-state-disabled):hover {
    background: var(--dash-primary) !important;
}

.ui-datepicker-calendar td:not(.ui-state-disabled):hover a.ui-state-default {
    color: #ffffff !important;
}

/* Today Highlight */
.ui-datepicker-calendar td.ui-datepicker-today {
    background: var(--dash-accent) !important;
}

.ui-datepicker-calendar td.ui-datepicker-today a.ui-state-default,
.ui-datepicker-calendar td.ui-datepicker-today span.ui-state-default {
    color: var(--dash-primary) !important;
    font-weight: 700 !important;
}

/* Selected/Active Day */
.ui-datepicker-calendar td.ui-datepicker-current-day {
    background: var(--dash-primary) !important;
}

.ui-datepicker-calendar td.ui-datepicker-current-day a.ui-state-default,
.ui-datepicker-calendar td a.ui-state-active {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Other Month Days (Previous/Next Month) */
.ui-datepicker-calendar td.ui-datepicker-other-month {
    background: transparent !important;
}

.ui-datepicker-calendar td.ui-datepicker-other-month span.ui-state-default {
    color: #cccccc !important;
}

/* Disabled Days */
.ui-datepicker-calendar td.ui-state-disabled {
    background: #f0f0f0 !important;
    cursor: not-allowed !important;
}

/* Weekend Days */
.ui-datepicker-calendar td.ui-datepicker-week-end:not(.ui-state-disabled) {
    background: #e8f4f8 !important;
}

/* ================================================
   FIX POINTER EVENTS / CLICKABILITY
   ================================================ */

.ui-datepicker-calendar td[data-handler="selectDay"] {
    cursor: pointer !important;
}

.ui-datepicker-calendar td[data-handler="selectDay"] a {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Remove any overlays blocking clicks */
.ui-datepicker * {
    box-sizing: border-box !important;
}

.ui-datepicker-calendar td::before,
.ui-datepicker-calendar td::after {
    pointer-events: none !important;
}

/* ================================================
   BUTTON PANEL (Today / Done buttons)
   ================================================ */

.ui-datepicker-buttonpane {
    background: transparent !important;
    border-top: 1px solid #e0e0e0 !important;
    padding: 12px 0 0 0 !important;
    margin-top: 10px !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.ui-datepicker-buttonpane button {
    background: var(--dash-primary) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    flex: 1 !important;
}

.ui-datepicker-buttonpane button:hover {
    background: var(--dash-primary-light) !important;
}

.ui-datepicker-buttonpane button.ui-datepicker-close {
    background: var(--dash-accent) !important;
    color: var(--dash-primary) !important;
}

/* ================================================
   ENSURE Z-INDEX & VISIBILITY
   ================================================ */

#ui-datepicker-div {
    z-index: 99999 !important;
}

.ui-datepicker {
    display: block !important;
}

/* ================================================
   RESPONSIVE
   ================================================ */

@media (max-width: 600px) {
    .ui-datepicker {
        min-width: 280px !important;
        padding: 12px !important;
    }
    
    .ui-datepicker-calendar tbody td {
        width: 34px !important;
        height: 34px !important;
    }
    
    .ui-datepicker-calendar td a.ui-state-default,
    .ui-datepicker-calendar td span.ui-state-default {
        height: 34px !important;
        font-size: 13px !important;
    }
}