/* Shared Date Picker Component */
.shared-date-picker {
    width: 100%;
}

.shared-date-picker .input-wrapper {
    position: relative;
}

.shared-date-picker .date-picker-input {
    padding-right: var(--input-padding-icon, 48px);
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 12C2 8.22876 2 6.34315 3.17157 5.17157C4.34315 4 6.22876 4 10 4H14C17.7712 4 19.6569 4 20.8284 5.17157C22 6.34315 22 8.22876 22 12V14C22 17.7712 22 19.6569 20.8284 20.8284C19.6569 22 17.7712 22 14 22H10C6.22876 22 4.34315 22 3.17157 20.8284C2 19.6569 2 17.7712 2 14V12Z' stroke='%2394A3B8' stroke-width='1.5'/%3E%3Cpath d='M7 4V2.5' stroke='%2394A3B8' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M17 4V2.5' stroke='%2394A3B8' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M2.5 9H21.5' stroke='%2394A3B8' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M18 17C18 17.5523 17.5523 18 17 18C16.4477 18 16 17.5523 16 17C16 16.4477 16.4477 16 17 16C17.5523 16 18 16.4477 18 17Z' fill='%2394A3B8'/%3E%3Cpath d='M18 13C18 13.5523 17.5523 14 17 14C16.4477 14 16 13.5523 16 13C16 12.4477 16.4477 12 17 12C17.5523 12 18 12.4477 18 13Z' fill='%2394A3B8'/%3E%3Cpath d='M13 17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17C11 16.4477 11.4477 16 12 16C12.5523 16 13 16.4477 13 17Z' fill='%2394A3B8'/%3E%3Cpath d='M13 13C13 13.5523 12.5523 14 12 14C11.4477 14 11 13.5523 11 13C11 12.4477 11.4477 12 12 12C12.5523 12 13 12.4477 13 13Z' fill='%2394A3B8'/%3E%3Cpath d='M8 17C8 17.5523 7.55228 18 7 18C6.44772 18 6 17.5523 6 17C6 16.4477 6.44772 16 7 16C7.55228 16 8 16.4477 8 17Z' fill='%2394A3B8'/%3E%3Cpath d='M8 13C8 13.5523 7.55228 14 7 14C6.44772 14 6 13.5523 6 13C6 12.4477 6.44772 12 7 12C7.55228 12 8 12.4477 8 13Z' fill='%2394A3B8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 20px 20px;
    cursor: pointer;
}

body.rtl .shared-date-picker .date-picker-input {
    background-position: left 16px center;
}

/* Flatpickr theme overrides to match SportEX styling */
.flatpickr-calendar {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xl) !important;
}

.flatpickr-months {
    background: var(--bg-input) !important;
    border-bottom: 1px solid var(--border-primary) !important;
}

.flatpickr-month {
    color: var(--text-primary) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-primary) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background: var(--bg-input-focus) !important;
}

.flatpickr-current-month .numInputWrapper input {
    color: var(--text-primary) !important;
    background: var(--bg-input) !important;
    border: 1px solid var(--border-primary) !important;
}

.flatpickr-current-month .numInputWrapper:hover input {
    background: var(--bg-input-focus) !important;
}

.flatpickr-weekdays {
    background: var(--bg-input) !important;
}

.flatpickr-weekday {
    color: var(--text-secondary) !important;
    font-weight: var(--font-weight-semibold) !important;
}

.flatpickr-days {
    background: var(--bg-surface) !important;
}

.flatpickr-day {
    color: var(--text-primary) !important;
    border: none !important;
}

.flatpickr-day:hover {
    background: var(--bg-input) !important;
    border-color: var(--border-primary) !important;
}

.flatpickr-day.today {
    border-color: var(--primary) !important;
    background: var(--primary-hover) !important;
}

.flatpickr-day.today:hover {
    background: var(--primary-hover) !important;
    border-color: var(--primary) !important;
}

.flatpickr-day.selected {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
}

.flatpickr-day.selected:hover {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}

.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
    color: var(--text-muted) !important;
    background: transparent !important;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--text-muted) !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    fill: var(--text-secondary) !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    fill: var(--text-primary) !important;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--text-primary) !important;
}