/**
 * 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)
   ============================================ *//* Stable datepicker theme with safe fallbacks for standalone pages (invoice, landing, etc.) */.custom-date-picker{
    /* Фон панели — токен темы; hover ячеек — лёгкий оverlay (не сплошной tertiary). */
    --dp-bg: var(--color-bg-card, #1a1a1a);
    --dp-hover: rgba(238, 238, 238, 0.1);
    --dp-active: rgba(238, 238, 238, 0.16);
    --dp-text-primary: var(--color-text-primary, #f5f7fb);
    --dp-text-secondary: var(--color-text-secondary, rgba(245, 247, 251, 0.88));
    --dp-text-muted: var(--color-text-muted, rgba(245, 247, 251, 0.4));
    --dp-border-active: var(--color-border-primary, rgba(245, 247, 251, 0.4));

    background: var(--dp-bg) !important;
    border: none !important;
    border-radius: var(--radius-lg, 14px) !important;
    /* More breathing room and larger controls */
    padding: 20px 16px 16px !important;
    box-shadow: var(--shadow-lg, 0 18px 36px rgba(0, 0, 0, 0.42)) !important;
    backdrop-filter: none !important;
    min-width: 320px !important;
    font-family: var(--font-primary, 'Sora', system-ui, -apple-system, sans-serif) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 2147483000 !important;
    isolation: isolate !important;
}/* Header */.date-picker-header{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--spacing-sm) !important;
    margin-bottom: 16px !important;
    padding: 0 !important;
}/* Navigation buttons */.date-picker-nav-btn{
    background: transparent !important;
    border: none !important;
    border-radius: 12px !important;
    color: var(--color-text-secondary, var(--dp-text-secondary)) !important;
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: all var(--transition-base, 0.2s ease) !important;
    flex-shrink: 0 !important;
}.date-picker-nav-btn:hover{
    background: var(--color-bg-button-secondary-hover, var(--dp-hover)) !important;
    color: var(--color-text-primary, var(--dp-text-primary)) !important;
}.date-picker-nav-btn svg{
    width: 22px !important;
    height: 22px !important;
}/* Month and Year buttons */.date-picker-month-btn, .date-picker-year-btn{
    background: transparent !important;
    border: none !important;
    border-radius: 12px !important;
    color: var(--color-text-primary, var(--dp-text-primary)) !important;
    font-weight: var(--font-weight-semibold) !important;
    font-size: var(--font-size-lg) !important;
    font-family: var(--font-primary) !important;
    padding: 10px 12px !important;
    cursor: pointer !important;
    transition: all var(--transition-base, 0.2s ease) !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, var(--dp-hover)) !important;
}.date-picker-year-range-btn{
    background: transparent !important;
    border: none !important;
    color: var(--color-text-primary, var(--dp-text-primary)) !important;
    font-weight: var(--font-weight-semibold) !important;
    font-size: var(--font-size-lg) !important;
    font-family: var(--font-primary) !important;
    padding: 10px 12px !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: 6px !important;
    margin-bottom: 10px !important;
}.date-picker-weekday{
    color: var(--color-text-tertiary, rgba(245, 247, 251, 0.78)) !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: 6px 0 !important;
}/* Days grid */.date-picker-days{
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 6px !important;
}.date-picker-day{
    background: transparent !important;
    border: none !important;
    border-radius: 10px !important;
    color: var(--color-text-secondary, var(--dp-text-secondary)) !important;
    font-size: var(--font-size-md) !important;
    font-family: var(--font-primary) !important;
    width: 42px !important;
    height: 42px !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, var(--dp-hover)) !important;
    color: var(--color-text-primary, var(--dp-text-primary)) !important;
}.date-picker-day-other-month{
    color: var(--color-text-muted, var(--dp-text-muted)) !important;
}.date-picker-day-today{
    font-weight: var(--font-weight-semibold) !important;
    border: 1px solid var(--color-border-active, var(--dp-border-active)) !important;
    border-radius: 10px !important;
}.date-picker-day-selected{
    background: var(--color-bg-button-secondary-hover, var(--dp-hover)) !important;
    color: var(--color-text-primary, var(--dp-text-primary)) !important;
    font-weight: var(--font-weight-semibold) !important;
    border-radius: 10px !important;
}.date-picker-day-selected:hover{
    background: var(--color-bg-button-secondary-active, var(--dp-active)) !important;
    border-radius: 10px !important;
}/* Months grid */.date-picker-months{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    margin-top: 4px !important;
}.date-picker-month{
    background: transparent !important;
    border: none !important;
    border-radius: var(--radius-sm, 10px) !important;
    color: var(--color-text-secondary) !important;
    font-size: var(--font-size-md) !important;
    font-family: var(--font-primary) !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
    cursor: pointer !important;
    transition: all var(--transition-base, 0.2s ease) !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: 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: 10px !important;
    margin-top: 4px !important;
}.date-picker-year{
    background: transparent !important;
    border: none !important;
    border-radius: 10px !important;
    color: var(--color-text-secondary, rgba(238, 238, 238, 0.8)) !important;
    font-size: 15px !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}.date-picker-year:hover{
    background: var(--color-bg-button-secondary-hover, rgba(238, 238, 238, 0.08)) !important;
    color: var(--color-text-primary, #eeeeee) !important;
}.date-picker-year-selected{
    background: var(--color-bg-tertiary, rgba(238, 238, 238, 0.12)) !important;
    color: var(--color-text-primary, #eeeeee) !important;
    font-weight: 600 !important;
}.date-picker-year-other-decade{
    color: var(--color-text-muted, rgba(238, 238, 238, 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: #eeeeee;
}input[type="date"]::-webkit-datetime-edit-fields-wrapper{
    background: transparent;
}input[type="date"]::-webkit-datetime-edit-text{
    color: rgba(238, 238, 238, 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: #eeeeee;
}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(238, 238, 238, 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(238, 238, 238, 0.1);
    border-radius: 12px;
    padding: 12px;
    color: #eeeeee;
    font-family: inherit;
}.calendar-picker-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(238, 238, 238, 0.1);
    margin-bottom: 12px;
}.calendar-picker-nav-button{
    background: rgba(238, 238, 238, 0.04);
    border: 1px solid rgba(238, 238, 238, 0.1);
    border-radius: 8px;
    padding: 6px 12px;
    color: rgba(238, 238, 238, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
}.calendar-picker-nav-button:hover{
    background: rgba(238, 238, 238, 0.08);
    border-color: rgba(238, 238, 238, 0.2);
    color: #eeeeee;
}.calendar-picker-nav-button:active{
    background: rgba(238, 238, 238, 0.12);
}.calendar-picker-month-year{
    color: #eeeeee;
    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(238, 238, 238, 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(238, 238, 238, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
}.calendar-picker-day:hover{
    background: rgba(238, 238, 238, 0.08);
    border-color: rgba(238, 238, 238, 0.1);
}.calendar-picker-day.selected{
    background: rgba(238, 238, 238, 0.12);
    border-color: rgba(238, 238, 238, 0.2);
    color: #eeeeee;
    font-weight: 600;
}.calendar-picker-day.other-month{
    color: rgba(238, 238, 238, 0.3);
}.calendar-picker-day.today{
    border-color: rgba(238, 238, 238, 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(238, 238, 238, 0.1);
}.calendar-picker-button{
    background: transparent;
    border: 1px solid rgba(238, 238, 238, 0.1);
    border-radius: 8px;
    padding: 6px 16px;
    color: rgba(238, 238, 238, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 500;
}.calendar-picker-button:hover{
    background: rgba(238, 238, 238, 0.08);
    border-color: rgba(238, 238, 238, 0.2);
    color: #eeeeee;
}.calendar-picker-button:active{
    background: rgba(238, 238, 238, 0.12);
}.calendar-picker-button.primary{
    background: rgba(238, 238, 238, 0.1);
    border-color: rgba(238, 238, 238, 0.2);
}.calendar-picker-button.primary:hover{
    background: rgba(238, 238, 238, 0.15);
    border-color: rgba(238, 238, 238, 0.3);
}/* Flatpickr Dark Theme Styles */.flatpickr-calendar{
    background: #1A1A1A !important;
    border: 1px solid rgba(238, 238, 238, 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(238, 238, 238, 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: #eeeeee !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    position: relative !important;
}.flatpickr-current-month{
    color: #eeeeee !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(238, 238, 238, 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(238, 238, 238, 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: #eeeeee !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(238, 238, 238, 0.04) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px !important;
    text-align: center !important;
    color: rgba(238, 238, 238, 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(238, 238, 238, 0.08) !important;
    color: #eeeeee !important;
}.flatpickr-monthSelect-month.selected, .flatpickr-yearSelect-year.selected{
    background: rgba(238, 238, 238, 0.12) !important;
    color: #eeeeee !important;
    font-weight: 600 !important;
}.flatpickr-prev-month{
    color: rgba(238, 238, 238, 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(238, 238, 238, 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(238, 238, 238, 0.08) !important;
    color: #eeeeee !important;
}.flatpickr-prev-month svg, .flatpickr-next-month svg{
    fill: currentColor !important;
}.flatpickr-weekdays{
    background: transparent !important;
    border-bottom: 1px solid rgba(238, 238, 238, 0.1) !important;
    padding: 8px 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}.flatpickr-weekday{
    color: rgba(238, 238, 238, 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(238, 238, 238, 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(238, 238, 238, 0.08) !important;
    color: #eeeeee !important;
}.flatpickr-day.selected{
    background: rgba(238, 238, 238, 0.12) !important;
    color: #eeeeee !important;
    font-weight: 600 !important;
}.flatpickr-day.today{
    font-weight: 600 !important;
}.flatpickr-day.today.selected{
    background: rgba(238, 238, 238, 0.12) !important;
}.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay{
    color: rgba(238, 238, 238, 0.3) !important;
}.flatpickr-time{
    border-top: 1px solid rgba(238, 238, 238, 0.1) !important;
    padding: 12px !important;
}.flatpickr-time input{
    background: rgba(238, 238, 238, 0.04) !important;
    border: 1px solid rgba(238, 238, 238, 0.1) !important;
    border-radius: 8px !important;
    color: #eeeeee !important;
}.flatpickr-time input:hover{
    background: rgba(238, 238, 238, 0.08) !important;
    border-color: rgba(238, 238, 238, 0.2) !important;
}.flatpickr-time .flatpickr-am-pm{
    color: rgba(238, 238, 238, 0.8) !important;
}.flatpickr-time .flatpickr-am-pm:hover{
    background: rgba(238, 238, 238, 0.08) !important;
    color: #eeeeee !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;
    height: var(--control-height-md, 41px) !important;
    min-height: var(--control-height-md, 41px) !important;
    line-height: var(--control-height-md, 41px) !important;
    padding-right: 34px !important;
    background: var(--color-input-bg, rgba(238, 238, 238, 0.04)) !important;
    border: var(--color-input-border, none) !important;
    border-radius: 24px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 12px !important;
    font-size: 14px !important;
    color: var(--color-input-text, #eeeeee) !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: var(--color-input-bg-hover, rgba(238, 238, 238, 0.06)) !important;
}.invoice-date-wrapper input:focus, .flatpickr-wrapper input:focus, .flatpickr-input-wrapper input:focus{
    outline: none !important;
    border: var(--color-input-border-focus, none) !important;
    background: var(--color-input-bg-focus, rgba(238, 238, 238, 0.08)) !important;
    box-shadow: none !important;
}/* Иконка календаря */.invoice-calendar-icon, .flatpickr-calendar-icon{
    position: absolute !important;
    right: var(--control-date-icon-right, 8px) !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: var(--control-date-icon-size, 18px) !important;
    height: var(--control-date-icon-size, 18px) !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 2 !important; /* Только над своим input, не над глобальными dropdown/nav */
    transition: opacity 0.2s ease, filter 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 0.6 !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) opacity(0.6) !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}/* Единый рендер SVG-иконки календаря (invoice + tool pages). */.invoice-calendar-icon svg, .flatpickr-calendar-icon svg, .invoice-calendar-icon .invoice-calendar-icon-svg, .flatpickr-calendar-icon .invoice-calendar-icon-svg{
    width: var(--control-date-icon-size, 18px) !important;
    height: var(--control-date-icon-size, 18px) !important;
    display: block !important;
    color: currentColor !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !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);
}/* Для SVG-иконок из createIcon используем единый color-контур без CSS filter. */.invoice-calendar-icon[data-calendar-icon="true"], .flatpickr-calendar-icon[data-calendar-icon="true"]{
    filter: none !important;
    color: rgba(238, 238, 238, 0.6) !important;
    opacity: 1 !important;
}.invoice-calendar-icon:hover, .flatpickr-calendar-icon:hover{
    opacity: 1 !important;
    filter: brightness(0) invert(1) opacity(1);
    background: rgba(238, 238, 238, 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);
}.invoice-date-wrapper:hover .invoice-calendar-icon[data-calendar-icon="true"], .invoice-calendar-icon[data-calendar-icon="true"]:hover, .invoice-date-wrapper input:focus ~ .invoice-calendar-icon[data-calendar-icon="true"]{
    color: rgba(238, 238, 238, 1) !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(238, 238, 238, 0.04);
    border: none;
    border-radius: 24px;
    color: #eeeeee;
    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(238, 238, 238, 0.06) !important;
}.invoice-time-wrapper input[type="time"]:focus{
    outline: none;
    border: none;
    background: rgba(238, 238, 238, 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: #eeeeee;
    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: #eeeeee;
}.invoice-time-icon:hover{
    opacity: 1 !important;
    color: #eeeeee;
    background: rgba(238, 238, 238, 0.08);
    border-radius: 4px;
}.invoice-time-wrapper input[type="time"]:focus ~ .invoice-time-icon{
    opacity: 1 !important;
    color: #eeeeee;
}/* 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(238, 238, 238, 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(238, 238, 238, 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(238, 238, 238, 0.08);
    color: #eeeeee;
}.time-picker-item.selected{
    background: rgba(238, 238, 238, 0.12);
    color: #eeeeee;
    font-weight: 500;
}.time-picker-item:active{
    background: rgba(238, 238, 238, 0.16);
}

@media (max-width: 800px){
    .invoice-date-wrapper input,
    .flatpickr-wrapper input,
    .flatpickr-input-wrapper input{
        min-height: var(--mobile-tap-target, 44px) !important;
        height: var(--mobile-tap-target, 44px) !important;
        line-height: var(--mobile-tap-target, 44px) !important;
    }

    .invoice-calendar-icon,
    .flatpickr-calendar-icon{
        width: 20px !important;
        height: 20px !important;
    }

    .custom-date-picker{
        min-width: min(340px, calc(100vw - 24px)) !important;
    }
}