/**
 * DatePicker Components Styling
 * Custom styles for DatePicker, DateRangePicker, MonthPicker, and YearPicker
 */

/* ========================================
   Input Wrapper Styling
   ======================================== */
.date-picker-wrapper {
    position: relative;
}

.date-picker-wrapper .form-control {
    padding-right: 2.5rem;
}

/* Calendar Icon */
.date-picker-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #6c757d;
    font-size: 1.1rem;
}

/* Clear Button */
.date-picker-clear {
    position: absolute;
    right: 2.25rem; /* Position to the left of calendar icon */
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 0.25rem;
    display: none;
    font-size: 1rem;
    transition: color 0.2s;
    z-index: 1;
}

.date-picker-clear:hover {
    color: #dc3545;
}

.date-picker-wrapper.has-value .date-picker-clear {
    display: block;
}

/* Adjust input padding when clear button is visible */
.date-picker-wrapper.has-value .form-control {
    padding-right: 4.5rem; /* Space for both clear button and icon */
}

/* Off-screen inputs for date range */
.date-range-start,
.date-range-end {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* ========================================
   Preset Range Buttons
   ======================================== */
.date-range-presets {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.date-range-preset-btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
    border: 1px solid #dee2e6;
    background: #fff;
    color: #495057;
    cursor: pointer;
    transition: all 0.2s;
}

.date-range-preset-btn:hover {
    background: #f8f9fa;
    border-color: #adb5bd;
}

.date-range-preset-btn:active {
    background: #e9ecef;
}

/* ========================================
   Bootstrap Datepicker Dark Theme
   ======================================== */

/* Ensure datepicker appears above everything */
.datepicker {
    z-index: 9999 !important;
}

[data-pc-theme="dark"] .datepicker {
    background-color: #1e1e2d;
    border-color: #2e2e3e;
}

[data-pc-theme="dark"] .datepicker table tr td,
[data-pc-theme="dark"] .datepicker table tr th {
    color: #a1a5b7;
}

[data-pc-theme="dark"] .datepicker table tr td.day:hover,
[data-pc-theme="dark"] .datepicker table tr td.focused {
    background: #2e2e3e;
    cursor: pointer;
}

/* ========================================
   Light Theme (Default) Gradients
   ======================================== */

/* Active/selected dates - primary color gradient for light theme */
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
    background: linear-gradient(135deg, #35b5a9 0%, #1f7369 100%) !important;
    background-image: linear-gradient(
        135deg,
        #35b5a9 0%,
        #1f7369 100%
    ) !important;
    box-shadow: 0 2px 4px rgba(42, 156, 148, 0.3) !important;
    color: #fff !important;
    font-weight: 600;
    border-color: transparent !important;
}

.datepicker table tr td.selected,
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected.disabled:hover {
    background: linear-gradient(135deg, #35b5a9 0%, #1f7369 100%) !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(42, 156, 148, 0.3) !important;
}

/* Today highlight - brighter yellow gradient for light theme */
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.day.today,
.datepicker table tr td.day.today:hover {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%) !important;
    background-color: #ffc107 !important;
    background-image: linear-gradient(
        135deg,
        #ffc107 0%,
        #ff9800 100%
    ) !important;
    color: #fff !important;
    border-color: #ffc107 !important;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(255, 193, 7, 0.4) !important;
}

/* Today + Active (selected today) - primary gradient takes precedence */
.datepicker table tr td.today.active,
.datepicker table tr td.today.active:hover {
    background: linear-gradient(135deg, #35b5a9 0%, #1f7369 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(42, 156, 148, 0.3) !important;
}

/* Month view - light theme */
.datepicker .datepicker-months .month.focused,
.datepicker-months .month.focused {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(255, 193, 7, 0.4) !important;
}

.datepicker .datepicker-months .month.active,
.datepicker-months .month.active {
    background: linear-gradient(135deg, #35b5a9 0%, #1f7369 100%) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(42, 156, 148, 0.3) !important;
}

/* Year view - light theme */
.datepicker .datepicker-years .year.focused,
.datepicker-years .year.focused,
.datepicker .datepicker-decades .decade.focused,
.datepicker-decades .decade.focused {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(255, 193, 7, 0.4) !important;
}

.datepicker .datepicker-years .year.active,
.datepicker-years .year.active,
.datepicker .datepicker-decades .decade.active,
.datepicker-decades .decade.active {
    background: linear-gradient(135deg, #35b5a9 0%, #1f7369 100%) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(42, 156, 148, 0.3) !important;
}

/* ========================================
   Dark Theme Overrides
   ======================================== */

/* Active/selected dates - dark color gradient */
[data-pc-theme="dark"] .datepicker table tr td.active,
[data-pc-theme="dark"] .datepicker table tr td.active:hover,
[data-pc-theme="dark"] .datepicker table tr td.active.disabled,
[data-pc-theme="dark"] .datepicker table tr td.active.disabled:hover {
    background: linear-gradient(135deg, #3e3e4e 0%, #2e2e3e 100%) !important;
    background-image: linear-gradient(
        135deg,
        #3e3e4e 0%,
        #2e2e3e 100%
    ) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    color: #fff !important;
    font-weight: 600;
    border-color: #4a5568 !important;
}

[data-pc-theme="dark"] .datepicker table tr td.range,
[data-pc-theme="dark"] .datepicker table tr td.range:hover,
[data-pc-theme="dark"] .datepicker table tr td.range.disabled,
[data-pc-theme="dark"] .datepicker table tr td.range.disabled:hover {
    background: #2e2e3e;
    color: #a1a5b7;
}

[data-pc-theme="dark"] .datepicker table tr td.selected,
[data-pc-theme="dark"] .datepicker table tr td.selected:hover,
[data-pc-theme="dark"] .datepicker table tr td.selected.disabled,
[data-pc-theme="dark"] .datepicker table tr td.selected.disabled:hover {
    background: linear-gradient(135deg, #3e3e4e 0%, #2e2e3e 100%) !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Today highlight - yellow gradient */
[data-pc-theme="dark"] .datepicker table tr td.today,
[data-pc-theme="dark"] .datepicker table tr td.today:hover,
[data-pc-theme="dark"] .datepicker table tr td.today.disabled,
[data-pc-theme="dark"] .datepicker table tr td.today.disabled:hover {
    background: linear-gradient(135deg, #f59f00 0%, #f76707 100%) !important;
    color: #fff !important;
    border-color: #f59f00 !important;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(245, 159, 0, 0.3) !important;
}

/* Today + Active (selected today) - dark gradient takes precedence */
[data-pc-theme="dark"] .datepicker table tr td.today.active,
[data-pc-theme="dark"] .datepicker table tr td.today.active:hover {
    background: linear-gradient(135deg, #3e3e4e 0%, #2e2e3e 100%) !important;
    color: #fff !important;
    border-color: #4a5568 !important;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

[data-pc-theme="dark"] .datepicker table tr td.old,
[data-pc-theme="dark"] .datepicker table tr td.new {
    color: #565674;
}

[data-pc-theme="dark"] .datepicker .datepicker-switch,
[data-pc-theme="dark"] .datepicker .prev,
[data-pc-theme="dark"] .datepicker .next,
[data-pc-theme="dark"] .datepicker tfoot tr th {
    color: #a1a5b7;
}

[data-pc-theme="dark"] .datepicker .datepicker-switch:hover,
[data-pc-theme="dark"] .datepicker .prev:hover,
[data-pc-theme="dark"] .datepicker .next:hover,
[data-pc-theme="dark"] .datepicker tfoot tr th:hover {
    background: #2e2e3e;
}

[data-pc-theme="dark"] .datepicker thead tr:first-child th:hover {
    background: #2e2e3e;
}

/* Month view - specific styling */
[data-pc-theme="dark"] .datepicker .datepicker-months .month,
[data-pc-theme="dark"] .datepicker-months .month {
    color: #a1a5b7 !important;
    background-color: transparent !important;
}

[data-pc-theme="dark"] .datepicker .datepicker-months .month:hover,
[data-pc-theme="dark"] .datepicker-months .month:hover {
    background-color: #2e2e3e !important;
    color: #fff !important;
}

/* Current month - yellow gradient */
[data-pc-theme="dark"] .datepicker .datepicker-months .month.focused,
[data-pc-theme="dark"] .datepicker-months .month.focused {
    background: linear-gradient(135deg, #f59f00 0%, #f76707 100%) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(245, 159, 0, 0.3) !important;
}

/* Selected month - dark gradient */
[data-pc-theme="dark"] .datepicker .datepicker-months .month.active,
[data-pc-theme="dark"] .datepicker-months .month.active {
    background: linear-gradient(135deg, #3e3e4e 0%, #2e2e3e 100%) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Year view - specific styling */
[data-pc-theme="dark"] .datepicker .datepicker-years .year,
[data-pc-theme="dark"] .datepicker-years .year,
[data-pc-theme="dark"] .datepicker .datepicker-decades .decade,
[data-pc-theme="dark"] .datepicker-decades .decade {
    color: #a1a5b7 !important;
    background-color: transparent !important;
}

[data-pc-theme="dark"] .datepicker .datepicker-years .year:hover,
[data-pc-theme="dark"] .datepicker-years .year:hover,
[data-pc-theme="dark"] .datepicker .datepicker-decades .decade:hover,
[data-pc-theme="dark"] .datepicker-decades .decade:hover {
    background-color: #2e2e3e !important;
    color: #fff !important;
}

/* Current year - yellow gradient */
[data-pc-theme="dark"] .datepicker .datepicker-years .year.focused,
[data-pc-theme="dark"] .datepicker-years .year.focused,
[data-pc-theme="dark"] .datepicker .datepicker-decades .decade.focused,
[data-pc-theme="dark"] .datepicker-decades .decade.focused {
    background: linear-gradient(135deg, #f59f00 0%, #f76707 100%) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(245, 159, 0, 0.3) !important;
}

/* Selected year - dark gradient */
[data-pc-theme="dark"] .datepicker .datepicker-years .year.active,
[data-pc-theme="dark"] .datepicker-years .year.active,
[data-pc-theme="dark"] .datepicker .datepicker-decades .decade.active,
[data-pc-theme="dark"] .datepicker-decades .decade.active {
    background: linear-gradient(135deg, #3e3e4e 0%, #2e2e3e 100%) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Dark theme preset buttons */
[data-pc-theme="dark"] .date-range-preset-btn {
    background: #1e1e2d;
    border-color: #2e2e3e;
    color: #a1a5b7;
}

[data-pc-theme="dark"] .date-range-preset-btn:hover {
    background: #2e2e3e;
    border-color: #4a5568;
}

[data-pc-theme="dark"] .date-range-preset-btn:active {
    background: #3e3e4e;
}

/* Dark theme icons */
[data-pc-theme="dark"] .date-picker-icon,
[data-pc-theme="dark"] .date-picker-clear {
    color: #a1a5b7;
}

[data-pc-theme="dark"] .date-picker-clear:hover {
    color: #dc3545;
}

/* ========================================
   Daterangepicker.js Dark Theme
   ======================================== */

/* Global font for all daterangepicker elements */
.daterangepicker {
    font-family: "Outfit", sans-serif !important;
}

.daterangepicker * {
    font-family: "Outfit", sans-serif !important;
}

/* Main container - use Outfit font */
[data-pc-theme="dark"] .daterangepicker {
    background-color: #1e1e2d;
    border-color: #2e2e3e;
}

/* Dropdowns and inputs */
[data-pc-theme="dark"] .daterangepicker select.monthselect,
[data-pc-theme="dark"] .daterangepicker select.yearselect,
[data-pc-theme="dark"] .daterangepicker select.hourselect,
[data-pc-theme="dark"] .daterangepicker select.minuteselect,
[data-pc-theme="dark"] .daterangepicker select.secondselect,
[data-pc-theme="dark"] .daterangepicker select.ampmselect {
    background-color: #2e2e3e;
    border-color: #3e3e4e;
    color: #a1a5b7;
    font-family: "Outfit", sans-serif;
}

/* Calendar table */
[data-pc-theme="dark"] .daterangepicker .calendar-table {
    background-color: #1e1e2d;
    border-color: #2e2e3e;
}

/* Table headers */
[data-pc-theme="dark"] .daterangepicker th {
    color: #a1a5b7;
    font-family: "Outfit", sans-serif;
}

/* Calendar cells */
[data-pc-theme="dark"] .daterangepicker td {
    color: #a1a5b7;
    font-family: "Outfit", sans-serif;
}

/* Available dates */
[data-pc-theme="dark"] .daterangepicker td.available:hover,
[data-pc-theme="dark"] .daterangepicker th.available:hover {
    background-color: #2e2e3e;
    color: #fff;
}

/* Off/disabled dates */
[data-pc-theme="dark"] .daterangepicker td.off,
[data-pc-theme="dark"] .daterangepicker td.off.in-range,
[data-pc-theme="dark"] .daterangepicker td.off.start-date,
[data-pc-theme="dark"] .daterangepicker td.off.end-date {
    background-color: transparent;
    color: #565674;
}

/* ========================================
   Daterangepicker Light Theme (Default)
   ======================================== */

/* In range dates - dark color with subtle gradient */
.daterangepicker td.in-range {
    background: linear-gradient(
        135deg,
        rgba(46, 46, 62, 0.15) 0%,
        rgba(46, 46, 62, 0.1) 100%
    );
    color: #495057;
}

/* Active/selected dates - primary gradient */
.daterangepicker td.active,
.daterangepicker td.active:hover {
    background: linear-gradient(135deg, #35b5a9 0%, #1f7369 100%) !important;
    border-color: transparent;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(42, 156, 148, 0.3);
}

/* Start and end dates - darker primary gradient for emphasis */
.daterangepicker td.start-date,
.daterangepicker td.end-date {
    background: linear-gradient(135deg, #2a9c94 0%, #1f7369 100%) !important;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(42, 156, 148, 0.4);
}

.daterangepicker td.start-date.end-date {
    background: linear-gradient(135deg, #2a9c94 0%, #1f7369 100%) !important;
}

/* Today - brighter yellow gradient */
.daterangepicker td.today {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%) !important;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(255, 193, 7, 0.4);
}

.daterangepicker td.today:before {
    border-bottom-color: #ffc107;
}

/* ========================================
   Daterangepicker Dark Theme Overrides
   ======================================== */

/* In range dates - dark color with subtle gradient */
[data-pc-theme="dark"] .daterangepicker td.in-range {
    background: linear-gradient(
        135deg,
        rgba(46, 46, 62, 0.6) 0%,
        rgba(46, 46, 62, 0.4) 100%
    );
    color: #a1a5b7;
}

/* Active/selected dates - dark gradient */
[data-pc-theme="dark"] .daterangepicker td.active,
[data-pc-theme="dark"] .daterangepicker td.active:hover {
    background: linear-gradient(135deg, #3e3e4e 0%, #2e2e3e 100%) !important;
    border-color: #4a5568;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Start and end dates - darker gradient for emphasis */
[data-pc-theme="dark"] .daterangepicker td.start-date,
[data-pc-theme="dark"] .daterangepicker td.end-date {
    background: linear-gradient(135deg, #4a5568 0%, #3e3e4e 100%) !important;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

[data-pc-theme="dark"] .daterangepicker td.start-date.end-date {
    background: linear-gradient(135deg, #4a5568 0%, #3e3e4e 100%) !important;
}

/* Today - yellow gradient */
[data-pc-theme="dark"] .daterangepicker td.today {
    background: linear-gradient(135deg, #f59f00 0%, #f76707 100%) !important;
    color: #fff;
    font-weight: 600;
}

[data-pc-theme="dark"] .daterangepicker td.today:before {
    border-bottom-color: #f59f00;
}

/* Ranges (preset buttons) - dark color */
.daterangepicker .ranges {
    background-color: #f8f9fa;
    border-right-color: #dee2e6;
}

.daterangepicker .ranges li {
    color: #495057;
    background-color: transparent;
    padding: 0.5rem 1rem;
    transition: all 0.2s;
}

.daterangepicker .ranges li:hover {
    background: linear-gradient(135deg, #2a9c94 0%, #1f7369 100%);
    color: #fff;
}

.daterangepicker .ranges li.active {
    background: linear-gradient(135deg, #35b5a9 0%, #1f7369 100%);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(42, 156, 148, 0.3);
}

/* Dark theme ranges */
[data-pc-theme="dark"] .daterangepicker .ranges {
    background-color: #1e1e2d;
    border-right-color: #2e2e3e;
    font-family: "Outfit", sans-serif;
}

[data-pc-theme="dark"] .daterangepicker .ranges li {
    color: #a1a5b7;
    background-color: transparent;
    font-family: "Outfit", sans-serif;
}

[data-pc-theme="dark"] .daterangepicker .ranges li:hover {
    background-color: #2e2e3e;
    color: #fff;
}

[data-pc-theme="dark"] .daterangepicker .ranges li.active {
    background-color: #3e3e4e;
    color: #fff;
    font-weight: 600;
}

/* Buttons */
[data-pc-theme="dark"] .daterangepicker .drp-buttons {
    border-top-color: #2e2e3e;
}

[data-pc-theme="dark"] .daterangepicker .drp-buttons .btn {
    color: #a1a5b7;
    background-color: #2e2e3e;
    border-color: #3e3e4e;
    font-family: "Outfit", sans-serif;
}

[data-pc-theme="dark"] .daterangepicker .drp-buttons .btn:hover {
    background-color: #3e3e4e;
    color: #fff;
}

[data-pc-theme="dark"] .daterangepicker .drp-buttons .btn-primary {
    background-color: #3e3e4e;
    border-color: #4a5568;
    color: #fff;
}

[data-pc-theme="dark"] .daterangepicker .drp-buttons .btn-primary:hover {
    background-color: #4a5568;
    border-color: #4a5568;
}

/* Calendar navigation */
[data-pc-theme="dark"] .daterangepicker .drp-calendar.left,
[data-pc-theme="dark"] .daterangepicker .drp-calendar.right {
    border-color: #2e2e3e;
}

[data-pc-theme="dark"] .daterangepicker th.prev,
[data-pc-theme="dark"] .daterangepicker th.next {
    color: #a1a5b7;
}

[data-pc-theme="dark"] .daterangepicker th.prev:hover,
[data-pc-theme="dark"] .daterangepicker th.next:hover {
    background-color: #2e2e3e;
    color: #fff;
}

/* Month/Year dropdowns */
[data-pc-theme="dark"] .daterangepicker th.month {
    color: #a1a5b7;
    font-family: "Outfit", sans-serif;
}

/* Week numbers */
[data-pc-theme="dark"] .daterangepicker .calendar-table .week {
    color: #565674;
}

/* ========================================
   Responsive Adjustments
   ======================================== */
@media (max-width: 576px) {
    .date-range-presets {
        gap: 0.25rem;
    }

    .date-range-preset-btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
    }

    /* Make daterangepicker responsive */
    [data-pc-theme="dark"] .daterangepicker {
        max-width: 100%;
    }

    [data-pc-theme="dark"] .daterangepicker .ranges {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #2e2e3e;
    }
}

.datepicker.dropdown-menu {
    padding: 0;
}