/* ============================================================
 * VANILLAJS-DATEPICKER - MODERN STYLING
 * ============================================================ */

.datepicker,
.datepicker-picker,
.datepicker-controls,
.datepicker-controls .button,
.datepicker-cell {
    font-family: inherit !important;
    font-size: inherit !important;
}

/* Picker container - softer shadow, rounded corners */
.datepicker-dropdown {
    z-index: 10000 !important;
    padding: 0 !important;
    width: auto !important;
    min-width: 0 !important;
}

.datepicker-picker {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: .5rem !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
                0 8px 10px -6px rgba(0, 0, 0, 0.04) !important;
    padding: .5rem !important;
}

/* Header (title + nav arrows) */
.datepicker-header {
    background: transparent !important;
}

.datepicker-controls .button {
    background: transparent !important;
    border: 0 !important;
    color: #374151 !important;
    font-weight: 500 !important;
    border-radius: .375rem !important;
    transition: background .15s ease !important;
}

.datepicker-controls .button:hover:not(:disabled) {
    background: #f3f4f6 !important;
}

.datepicker-controls .button:disabled {
    color: #9ca3af !important;
    background: transparent !important;
}

.datepicker-controls .view-switch {
    font-weight: 600 !important;
    color: #111827 !important;
}

/* Footer hidden when no buttons enabled */
.datepicker-footer {
    background: transparent !important;
}

.datepicker-footer .datepicker-controls:empty {
    display: none !important;
}

/* Month/year cells */
.datepicker-cell {
    border-radius: .375rem !important;
    color: #374151 !important;
    font-size: .875rem !important;
    transition: background .15s ease, color .15s ease !important;
}

.datepicker-cell:not(.disabled):hover {
    background: #f2f6fd !important;
    color: #3454d1 !important;
}

/* Disable the "range" highlight between start and end */
.datepicker-cell.range,
.datepicker-cell.range:hover {
    background: transparent !important;
    color: #374151 !important;
    border-radius: .375rem !important;
}

/* Range start and end - keep them highlighted */
.datepicker-cell.range-start,
.datepicker-cell.range-end,
.datepicker-cell.selected,
.datepicker-cell.selected:hover {
    background: #3454d1 !important;
    color: #fff !important;
    font-weight: 600 !important;
}

/* Focused cell (keyboard nav) - subtle outline */
.datepicker-cell.focused:not(.selected):not(.range-start):not(.range-end) {
    background: #f2f6fd !important;
    color: #3454d1 !important;
}

/* Days of week header */
.datepicker-cell.dow {
    color: #9ca3af !important;
    font-weight: 500 !important;
    font-size: .75rem !important;
    text-transform: uppercase !important;
}

/* Prev/next year/decade cells (out of current view) */
.datepicker-cell.prev,
.datepicker-cell.next {
    color: #d1d5db !important;
}

/* Disabled cells (out of min/max range) */
.datepicker-cell.disabled {
    color: #d1d5db !important;
    cursor: not-allowed !important;
}

/* When input field cursor is the hand */  
.datepicker-input,
.like-tomselect.datepicker-input {
    cursor: pointer !important;
}

/* ============================================================
 * DATEPICKER - DARK MODE
 * ============================================================ */

.app-skin-dark .datepicker-picker {
    background: #1C2438 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4),
                0 8px 10px -6px rgba(0, 0, 0, 0.3) !important;
}

.app-skin-dark .datepicker-controls .button {
    color: #E5E7EB !important;
}

.app-skin-dark .datepicker-controls .button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.06) !important;
}

.app-skin-dark .datepicker-controls .button:disabled {
    color: #6B7280 !important;
}

.app-skin-dark .datepicker-controls .view-switch {
    color: #FFFFFF !important;
}

.app-skin-dark .datepicker-cell {
    color: #E5E7EB !important;
}

.app-skin-dark .datepicker-cell:not(.disabled):hover {
    background: rgba(52, 84, 209, 0.25) !important;
    color: #FFFFFF !important;
}

.app-skin-dark .datepicker-cell.range,
.app-skin-dark .datepicker-cell.range:hover {
    background: transparent !important;
    color: #E5E7EB !important;
}

.app-skin-dark .datepicker-cell.range-start,
.app-skin-dark .datepicker-cell.range-end,
.app-skin-dark .datepicker-cell.selected {
    background: #3454d1 !important;
    color: #FFFFFF !important;
}

.app-skin-dark .datepicker-cell.focused:not(.selected):not(.range-start):not(.range-end) {
    background: rgba(52, 84, 209, 0.25) !important;
    color: #FFFFFF !important;
}

.app-skin-dark .datepicker-cell.dow {
    color: #9CA3AF !important;
}

.app-skin-dark .datepicker-cell.prev,
.app-skin-dark .datepicker-cell.next {
    color: #4B5563 !important;
}

.app-skin-dark .datepicker-cell.disabled {
    color: #4B5563 !important;
}


/* ============================================================
 * PERIOD RANGE - SHORTCUTS SIDEBAR
 * ============================================================ */

.period-shortcuts {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .5rem 0;
}

.period-shortcuts .shortcut-btn {
    background: transparent;
    border: 1px solid transparent;
    color: #374151;
    text-align: left;
    padding: .375rem .75rem;
    border-radius: .375rem;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    white-space: nowrap;
}

.period-shortcuts .shortcut-btn:hover {
    background: #f2f6fd;
    color: #3454d1;
}

.period-shortcuts .shortcut-btn.active {
    background: #3454d1;
    color: #fff;
}

.app-skin-dark .period-shortcuts .shortcut-btn {
    color: #E5E7EB;
}

.app-skin-dark .period-shortcuts .shortcut-btn:hover {
    background: rgba(52, 84, 209, 0.25);
    color: #FFFFFF;
}

.app-skin-dark .period-shortcuts .shortcut-btn.active {
    background: #3454d1;
    color: #FFFFFF;
}



/* ============================================================
 * LOWERING SPACE FOR DATE CELLS (MONTH/YEAR VIEWS)
 * ============================================================ */

.datepicker-view.datepicker-grid .datepicker-cell {
    height: 3.5rem;
    line-height: 3.5rem;
}

.datepicker-picker .today-btn {
    display: none !important;
}