/**
 * Calendar Component Styles
 * Переиспользуемые стили для календаря (input[type="date"])
 * Custom Date Picker в стиле Ant Design
 */

/* Глобальная темная тема для всех date inputs */
input[type="date"] {
    color-scheme: dark;
}

/* ============================================
   Custom Date Picker (Ant Design Style)
   ============================================ */

.custom-date-picker {
    background: var(--color-bg-secondary) !important; /* Такой же фон как у dropdown */
    border: none !important; /* Убираем обводку */
    border-radius: var(--radius-lg) !important;
    padding: var(--spacing-lg) !important;
    box-shadow: var(--shadow-xl) !important;
    min-width: 280px !important;
    font-family: var(--font-primary) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Header */
.date-picker-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--spacing-sm) !important;
    margin-bottom: var(--spacing-lg) !important;
    padding: 0 !important;
}

/* Navigation buttons */
.date-picker-nav-btn {
    background: transparent !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    color: var(--color-text-secondary) !important;
    width: var(--spacing-4xl) !important;
    height: var(--spacing-4xl) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: all var(--transition-base) !important;
    flex-shrink: 0 !important;
}

.date-picker-nav-btn:hover {
    background: var(--color-bg-button-secondary-hover) !important;
    color: var(--color-text-primary) !important;
}

.date-picker-nav-btn svg {
    width: var(--spacing-lg) !important;
    height: var(--spacing-lg) !important;
}

/* Month and Year buttons */
.date-picker-month-btn,
.date-picker-year-btn {
    background: transparent !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    color: var(--color-text-primary) !important;
    font-weight: var(--font-weight-semibold) !important;
    font-size: var(--font-size-lg) !important;
    font-family: var(--font-primary) !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    cursor: pointer !important;
    transition: all var(--transition-base) !important;
    flex: 1 !important;
    text-align: center !important;
}

.date-picker-month-btn:hover,
.date-picker-year-btn:hover {
    background: var(--color-bg-button-secondary-hover) !important;
}

.date-picker-year-range-btn {
    background: transparent !important;
    border: none !important;
    color: var(--color-text-primary) !important;
    font-weight: var(--font-weight-semibold) !important;
    font-size: var(--font-size-lg) !important;
    font-family: var(--font-primary) !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    cursor: default !important;
    flex: 1 !important;
    text-align: center !important;
    pointer-events: none !important;
}

/* Weekdays */
.date-picker-weekdays {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: var(--spacing-xs) !important;
    margin-bottom: var(--spacing-sm) !important;
}

.date-picker-weekday {
    color: var(--color-text-tertiary) !important;
    font-weight: var(--font-weight-medium) !important;
    font-size: var(--font-size-sm) !important;
    font-family: var(--font-primary) !important;
    text-align: center !important;
    padding: var(--spacing-sm) 0 !important;
}

/* Days grid */
.date-picker-days {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: var(--spacing-xs) !important;
}

.date-picker-day {
    background: transparent !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    color: var(--color-text-secondary) !important;
    font-size: var(--font-size-md) !important;
    font-family: var(--font-primary) !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all var(--transition-base) !important;
    padding: 0 !important;
}

.date-picker-day:hover {
    background: var(--color-bg-button-secondary-hover) !important;
    color: var(--color-text-primary) !important;
}

.date-picker-day-other-month {
    color: var(--color-text-muted) !important;
}

.date-picker-day-today {
    font-weight: var(--font-weight-semibold) !important;
    border: 1px solid var(--color-border-active) !important;
}

.date-picker-day-selected {
    background: var(--color-bg-button-secondary-hover) !important;
    color: var(--color-text-primary) !important;
    font-weight: var(--font-weight-semibold) !important;
}

.date-picker-day-selected:hover {
    background: var(--color-bg-button-secondary-active) !important;
}

/* Months grid */
.date-picker-months {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--spacing-sm) !important;
}

.date-picker-month {
    background: transparent !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    color: var(--color-text-secondary) !important;
    font-size: var(--font-size-md) !important;
    font-family: var(--font-primary) !important;
    padding: var(--spacing-md) !important;
    cursor: pointer !important;
    transition: all var(--transition-base) !important;
    text-align: center !important;
}

.date-picker-month:hover {
    background: var(--color-bg-button-secondary-hover) !important;
    color: var(--color-text-primary) !important;
}

.date-picker-month-selected {
    background: var(--color-bg-button-secondary-hover) !important;
    color: var(--color-text-primary) !important;
    font-weight: var(--font-weight-semibold) !important;
}

/* Years grid */
.date-picker-years {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
}

.date-picker-year {
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 14px !important;
    padding: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
}

.date-picker-year:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.date-picker-year-selected {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.date-picker-year-other-decade {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* ============================================
   Flatpickr Styles (Legacy - для обратной совместимости)
   ============================================ */

/* Стилизация иконок календаря для input[type="date"] */
.invoice-form-group input[type="date"],
.calculator-input-group input[type="date"],
input[type="date"] {
    color-scheme: dark;
}

.invoice-form-group input[type="date"]::-webkit-calendar-picker-indicator,
.calculator-input-group input[type="date"]::-webkit-calendar-picker-indicator {
    filter: brightness(0) invert(1);
    cursor: pointer;
    opacity: 0.5;
}

.invoice-form-group input[type="date"]::-webkit-calendar-picker-indicator:hover,
.calculator-input-group input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 0.7;
}

/* Стилизация выпадающего календаря */
/* Основной контейнер календаря */
input[type="date"]::-webkit-datetime-edit {
    color: #ffffff;
}

/* Light theme: Calendar inputs - same as chat input */
body.light-theme .calculator-input-group input[type="date"],
body.light-theme .invoice-form-group input[type="date"] {
    color-scheme: light;
}

body.light-theme .invoice-form-group input[type="date"]::-webkit-calendar-picker-indicator,
body.light-theme .calculator-input-group input[type="date"]::-webkit-calendar-picker-indicator {
    filter: brightness(0) opacity(0.5);
}

body.light-theme .invoice-form-group input[type="date"]::-webkit-calendar-picker-indicator:hover,
body.light-theme .calculator-input-group input[type="date"]::-webkit-calendar-picker-indicator:hover {
    filter: brightness(0) opacity(0.7);
}

body.light-theme input[type="date"]::-webkit-datetime-edit {
    color: #000000;
}

body.light-theme input[type="date"]::-webkit-datetime-edit-text {
    color: rgba(0, 0, 0, 0.6);
}

body.light-theme input[type="date"]::-webkit-datetime-edit-month-field,
body.light-theme input[type="date"]::-webkit-datetime-edit-day-field,
body.light-theme input[type="date"]::-webkit-datetime-edit-year-field {
    color: #000000;
}

body.light-theme input[type="date"]::-webkit-datetime-edit-month-field:focus,
body.light-theme input[type="date"]::-webkit-datetime-edit-day-field:focus,
body.light-theme input[type="date"]::-webkit-datetime-edit-year-field:focus {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    background: transparent;
}

input[type="date"]::-webkit-datetime-edit-text {
    color: rgba(255, 255, 255, 0.6);
}

input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
    color: #ffffff;
}

input[type="date"]::-webkit-datetime-edit-month-field:focus,
input[type="date"]::-webkit-datetime-edit-day-field:focus,
input[type="date"]::-webkit-datetime-edit-year-field:focus {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

/* Стилизация нативного календаря браузера */
/* Примечание: Полная стилизация нативного календаря ограничена из-за shadow DOM.
   color-scheme: dark применяет темную тему автоматически, но детальная кастомизация
   (скругления, точные цвета, hover эффекты) требует JavaScript библиотеки */

/* Дополнительные стили для улучшения внешнего вида нативного календаря */
/* color-scheme: dark установлен на html и body элементах для применения темной темы */

/* ВАЖНО: Для полной кастомизации календаря (как в селектах) рекомендуется:
   1. Использовать JavaScript библиотеку (flatpickr, datepicker.js и т.д.)
   2. Или создать кастомный календарь с классами .calendar-picker, определенными ниже */

/* Стили для кастомного календаря (если будет использоваться библиотека) */
.calendar-picker {
    background: #1A1A1A;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px;
    color: #ffffff;
    font-family: inherit;
}

.calendar-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 12px;
}

.calendar-picker-nav-button {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px 12px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
}

.calendar-picker-nav-button:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.calendar-picker-nav-button:active {
    background: rgba(255, 255, 255, 0.12);
}

.calendar-picker-month-year {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
}

.calendar-picker-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

.calendar-picker-weekday {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: 500;
    padding: 8px 0;
}

.calendar-picker-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.calendar-picker-day {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
}

.calendar-picker-day:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}

.calendar-picker-day.selected {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-weight: 600;
}

.calendar-picker-day.other-month {
    color: rgba(255, 255, 255, 0.3);
}

.calendar-picker-day.today {
    border-color: rgba(255, 255, 255, 0.3);
    font-weight: 600;
}

.calendar-picker-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.calendar-picker-button {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px 16px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 500;
}

.calendar-picker-button:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.calendar-picker-button:active {
    background: rgba(255, 255, 255, 0.12);
}

.calendar-picker-button.primary {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.calendar-picker-button.primary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Flatpickr Dark Theme Styles */
.flatpickr-calendar {
    background: #1A1A1A !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: 100% !important;
}

/* Удаляем стрелку-уголок вверху */
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar::before,
.flatpickr-calendar::after {
    display: none !important;
    content: none !important;
}

.flatpickr-months {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    gap: 8px !important;
}

.flatpickr-month {
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    position: relative !important;
}

.flatpickr-current-month {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    cursor: default !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    white-space: nowrap !important;
}

/* Hover эффект только у отдельных кнопок, не у контейнера */

/* Обеспечиваем видимость текста месяца и года */
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month .numInputWrapper {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
}

/* Убеждаемся, что год виден */
.flatpickr-current-month .numInputWrapper {
    display: inline-flex !important;
    align-items: center !important;
}

/* Месяц - отдельная кнопка */
.flatpickr-current-month .flatpickr-monthDropdown-months {
    cursor: pointer !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    flex-shrink: 0 !important;
    z-index: 1 !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Год - отдельная кнопка */
.flatpickr-current-month .numInputWrapper {
    cursor: pointer !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    flex-shrink: 0 !important;
    z-index: 1 !important;
}

.flatpickr-current-month .numInputWrapper:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

.flatpickr-current-month .numInputWrapper .numInput,
.flatpickr-current-month .numInputWrapper input[type="number"],
.flatpickr-current-month .numInputWrapper input.cur-year {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    padding: 0 !important;
    cursor: pointer !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    min-width: 60px !important;
    max-width: none !important;
    text-align: center !important;
    line-height: 1.5 !important;
    height: auto !important;
    margin: 0 !important;
}

/* Год - такая же кнопка как месяц, убираем только стрелки */
.flatpickr-current-month .numInputWrapper .arrowUp,
.flatpickr-current-month .numInputWrapper .arrowDown {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* Скрываем все стрелки у dropdown месяца - проверяем все возможные варианты */
.flatpickr-current-month .flatpickr-monthDropdown-months::after,
.flatpickr-current-month .flatpickr-monthDropdown-months::before,
.flatpickr-current-month .flatpickr-monthDropdown-months .arrowDown,
.flatpickr-current-month .flatpickr-monthDropdown-months .arrowUp,
.flatpickr-current-month .flatpickr-monthDropdown-months svg,
.flatpickr-current-month .flatpickr-monthDropdown-months .arrow,
.flatpickr-current-month select::after,
.flatpickr-current-month select::before,
.flatpickr-current-month .flatpickr-monthDropdown-months + *,
.flatpickr-current-month .flatpickr-monthDropdown-months ~ * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    content: none !important;
}

/* Если стрелка создается через select элемент */
.flatpickr-current-month select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: none !important;
}

/* Убираем все возможные стрелки через псевдоэлементы у месяца */
.flatpickr-current-month .flatpickr-monthDropdown-months::after {
    content: "" !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
    background: none !important;
    background-image: none !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months::before {
    content: "" !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
    background: none !important;
    background-image: none !important;
}

/* Стили для выбора месяцев (когда открыт выбор месяцев) */
.flatpickr-monthSelect,
.flatpickr-yearSelect {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding: 16px !important;
}

.flatpickr-monthSelect-month,
.flatpickr-yearSelect-year {
    background: rgba(255, 255, 255, 0.04) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.8) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-size: 14px !important;
}

.flatpickr-monthSelect-month:hover,
.flatpickr-yearSelect-year:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.flatpickr-monthSelect-month.selected,
.flatpickr-yearSelect-year.selected {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.flatpickr-prev-month {
    color: rgba(255, 255, 255, 0.8) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    transition: all 0.2s ease !important;
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    cursor: pointer !important;
}

/* Стрелка назад в header при выборе месяцев/лет */
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month {
    z-index: 10 !important;
}

.flatpickr-next-month {
    color: rgba(255, 255, 255, 0.8) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    transition: all 0.2s ease !important;
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
    fill: currentColor !important;
}

.flatpickr-weekdays {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 8px 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.flatpickr-weekday {
    color: rgba(255, 255, 255, 0.6) !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
}

.flatpickr-days {
    padding: 8px 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* Контейнер для дней недели и дней месяца - одинаковые паддинги */
.flatpickr-weekdays,
.flatpickr-days {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
}

.flatpickr-day {
    color: rgba(255, 255, 255, 0.8) !important;
    border: none !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.flatpickr-day:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.flatpickr-day.selected {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.flatpickr-day.today {
    font-weight: 600 !important;
}

.flatpickr-day.today.selected {
    background: rgba(255, 255, 255, 0.12) !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: rgba(255, 255, 255, 0.3) !important;
}

.flatpickr-time {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 12px !important;
}

.flatpickr-time input {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
}

.flatpickr-time input:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.flatpickr-time .flatpickr-am-pm {
    color: rgba(255, 255, 255, 0.8) !important;
}

.flatpickr-time .flatpickr-am-pm:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

/* Wrapper для date input с иконкой календаря */
.invoice-date-wrapper {
    position: relative;
    width: 100%;
    display: block;
}

/* Иконка календаря для flatpickr input */
.flatpickr-wrapper,
.flatpickr-input-wrapper,
.invoice-date-wrapper {
    position: relative !important;
    width: 100% !important;
    display: block !important;
}

/* Сохраняем все базовые стили для input внутри wrapper */
.invoice-date-wrapper input,
.flatpickr-wrapper input,
.flatpickr-input-wrapper input {
    width: 100% !important;
    padding-right: 34px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: none !important;
    border-radius: 24px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 12px !important;
    font-size: 14px !important;
    color: #ffffff !important;
    font-family: inherit !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1 !important;
    pointer-events: auto !important;
}

/* Input не должен перехватывать клики в области иконки */
.invoice-date-wrapper input {
    pointer-events: auto !important;
}

/* Убеждаемся, что wrapper не обрезает иконку */
.invoice-date-wrapper {
    overflow: visible !important;
}

.invoice-date-wrapper:hover input,
.invoice-date-wrapper input:hover,
.flatpickr-wrapper:hover input,
.flatpickr-wrapper input:hover,
.flatpickr-input-wrapper:hover input,
.flatpickr-input-wrapper input:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

.invoice-date-wrapper input:focus,
.flatpickr-wrapper input:focus,
.flatpickr-input-wrapper input:focus {
    outline: none !important;
    border: none !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

/* Light theme: Date input wrapper in calculators - override base styles */
body.light-theme .calculator-input-group .invoice-date-wrapper input,
body.light-theme .calculator-input-group .flatpickr-wrapper input,
body.light-theme .calculator-input-group .flatpickr-input-wrapper input {
    background: rgb(240, 240, 240) !important;
    color: #000000 !important;
    border: 1px solid transparent !important;
}

body.light-theme .calculator-input-group .invoice-date-wrapper:hover input,
body.light-theme .calculator-input-group .invoice-date-wrapper input:hover,
body.light-theme .calculator-input-group .flatpickr-wrapper:hover input,
body.light-theme .calculator-input-group .flatpickr-wrapper input:hover,
body.light-theme .calculator-input-group .flatpickr-input-wrapper:hover input,
body.light-theme .calculator-input-group .flatpickr-input-wrapper input:hover {
    background: rgb(232, 232, 232) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

body.light-theme .calculator-input-group .invoice-date-wrapper input:focus,
body.light-theme .calculator-input-group .flatpickr-wrapper input:focus,
body.light-theme .calculator-input-group .flatpickr-input-wrapper input:focus {
    background: rgb(232, 232, 232) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: none !important;
}

/* Иконка календаря */
.invoice-calendar-icon,
.flatpickr-calendar-icon {
    position: absolute !important;
    right: 0px !important;
    left: auto !important;
    top: calc(50% + 2px) !important;
    transform: translateY(-50%) translateX(-4px) !important;
    width: 22px !important;
    height: 22px !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 100 !important; /* Увеличено для гарантии поверх input */
    transition: opacity 0.2s ease, filter 0.2s ease !important;
    display: block !important;
    visibility: visible !important;
    opacity: 0.6 !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) opacity(0.6) !important;
    padding: 4px !important;
    margin: -4px -4px -4px 0 !important;
    margin-right: 4px !important;
    background: transparent !important;
}

.invoice-date-wrapper:hover .invoice-calendar-icon,
.flatpickr-wrapper:hover .flatpickr-calendar-icon,
.flatpickr-input-wrapper:hover .flatpickr-calendar-icon {
    opacity: 1 !important;
    filter: brightness(0) invert(1) opacity(1);
}

.invoice-calendar-icon:hover,
.flatpickr-calendar-icon:hover {
    opacity: 1 !important;
    filter: brightness(0) invert(1) opacity(1);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
}

.invoice-date-wrapper input:focus ~ .invoice-calendar-icon,
.flatpickr-wrapper input:focus ~ .flatpickr-calendar-icon,
.flatpickr-input-wrapper input:focus ~ .flatpickr-calendar-icon {
    opacity: 1 !important;
    filter: brightness(0) invert(1) opacity(1);
}

/* Light theme: Calendar icon in calculators */
body.light-theme .calculator-input-group .invoice-date-wrapper .invoice-calendar-icon,
body.light-theme .calculator-input-group .flatpickr-wrapper .flatpickr-calendar-icon,
body.light-theme .calculator-input-group .flatpickr-input-wrapper .flatpickr-calendar-icon {
    filter: brightness(0) opacity(0.5) !important;
}

body.light-theme .calculator-input-group .invoice-date-wrapper:hover .invoice-calendar-icon,
body.light-theme .calculator-input-group .invoice-date-wrapper input:focus ~ .invoice-calendar-icon,
body.light-theme .calculator-input-group .flatpickr-wrapper:hover .flatpickr-calendar-icon,
body.light-theme .calculator-input-group .flatpickr-wrapper input:focus ~ .flatpickr-calendar-icon,
body.light-theme .calculator-input-group .flatpickr-input-wrapper:hover .flatpickr-calendar-icon,
body.light-theme .calculator-input-group .flatpickr-input-wrapper input:focus ~ .flatpickr-calendar-icon {
    filter: brightness(0) opacity(0.7) !important;
}

/* Time input wrapper and icon (same style as calendar) */
.invoice-time-wrapper {
    position: relative;
    display: block;
    width: 100%;
    overflow: visible !important;
}

.invoice-time-wrapper input[type="time"] {
    width: 100%;
    padding: 10px 40px 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: none;
    border-radius: 24px;
    color: #ffffff;
    font-size: 14px;
    position: relative;
    z-index: 1;
    pointer-events: auto;
    /* Скрываем нативную иконку браузера */
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: none;
}

/* Скрываем нативную иконку часов в разных браузерах */
.invoice-time-wrapper input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
    appearance: none;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.invoice-time-wrapper input[type="time"]::-webkit-inner-spin-button,
.invoice-time-wrapper input[type="time"]::-webkit-outer-spin-button {
    display: none;
    -webkit-appearance: none;
    appearance: none;
}

.invoice-time-wrapper input[type="time"]:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

.invoice-time-wrapper input[type="time"]:focus {
    outline: none;
    border: none;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none;
}

.invoice-time-icon {
    position: absolute !important;
    right: 0px !important;
    left: auto !important;
    top: calc(50% + 2px) !important;
    transform: translateY(-50%) translateX(-4px) !important;
    width: 22px !important;
    height: 22px !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 100 !important;
    transition: opacity 0.2s ease, filter 0.2s ease !important;
    display: block !important;
    visibility: visible !important;
    opacity: 0.6 !important;
    color: #ffffff;
    padding: 4px !important;
    margin: -4px -4px -4px 0 !important;
    margin-right: 4px !important;
    background: transparent !important;
}

.invoice-time-wrapper:hover .invoice-time-icon {
    opacity: 1 !important;
    color: #ffffff;
}

.invoice-time-icon:hover {
    opacity: 1 !important;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
}

.invoice-time-wrapper input[type="time"]:focus ~ .invoice-time-icon {
    opacity: 1 !important;
    color: #ffffff;
}

/* Custom Time Picker */
.custom-time-picker {
    background: #1A1A1A !important;
    border: none !important;
    border-radius: 18px !important;
    padding: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    min-width: 280px !important;
    width: auto !important;
    font-family: inherit !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    margin: 0 !important;
    transform: none !important;
    transition: opacity 0.1s ease, visibility 0.1s ease !important;
}

.time-picker-container {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.time-picker-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.time-picker-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    margin-bottom: 4px;
    font-weight: 500;
}

.time-picker-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
    padding: 4px;
    /* Скрываем скроллбары */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE и Edge */
}

.time-picker-list::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
    width: 0;
    height: 0;
}

.time-picker-item {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    text-align: center;
    font-family: inherit;
}

.time-picker-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.time-picker-item.selected {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-weight: 500;
}

.time-picker-item:active {
    background: rgba(255, 255, 255, 0.16);
}