/* 
   Quantum AdVision Design System v6.0
   File: page_cockpit.css
   Module: Cockpit Augmentation
*/

/* --- АНИМАЦИИ --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fade-in-up {
    animation-name: fadeInUp;
    animation-duration: 0.5s;
    animation-fill-mode: both;
}

/* --- HACKS: DASH DATEPICKER (React Dates) --- */
.dark-theme-datepicker {
    border: none !important;
}

/* Input Fields */
.dark-theme-datepicker .DateInput {
    background-color: transparent;
    width: 100px;
}

.dark-theme-datepicker .DateInput_input {
    background-color: var(--surface-1);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    padding: 6px 10px;
    text-align: center;
}

.dark-theme-datepicker .DateInput_input__focused {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb), 0.2);
}

/* Label "Arrow" */
.dark-theme-datepicker .DateRangePickerInput_arrow {
    background-color: transparent;
    border: none;
}

.dark-theme-datepicker .DateRangePickerInput_arrow_svg {
    fill: var(--text-secondary);
}

/* Calendar Popup */
.DateInput_fang {
    display: none !important;
}

.dark-theme-datepicker .DayPicker {
    background: var(--surface-1);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-top: 10px;
}

.dark-theme-datepicker .DayPicker_transitionContainer {
    background: transparent;
}

.dark-theme-datepicker .CalendarMonth {
    background: transparent;
}

.dark-theme-datepicker .CalendarMonth_caption {
    color: var(--text-primary);
    font-family: var(--font-heading);
    padding-bottom: 40px; /* Больше места для заголовка месяца */
}

.dark-theme-datepicker .CalendarMonthGrid {
    background: transparent;
}

/* Дни недели */
.dark-theme-datepicker .DayPicker_weekHeader {
    color: var(--text-secondary);
    font-family: var(--font-heading);
    top: 55px; /* Корректировка позиции */
}

/* Ячейки дней */
.dark-theme-datepicker .CalendarDay__default {
    background-color: transparent;
    color: var(--text-primary);
    border: 1px solid transparent; /* Прозрачная рамка по умолчанию */
}

.dark-theme-datepicker .CalendarDay__default:hover {
    background-color: var(--surface-2);
    border: 1px solid var(--text-secondary);
    border-radius: 4px;
}

/* Выбранный диапазон */
.dark-theme-datepicker .CalendarDay__selected,
.dark-theme-datepicker .CalendarDay__selected:hover {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #000; /* Контраст для активного элемента */
}

.dark-theme-datepicker .CalendarDay__selected_span {
    background-color: rgba(var(--accent-primary-rgb), 0.2); /* Использование RGB переменной */
    color: var(--text-primary);
    border: 1px solid rgba(var(--accent-primary-rgb), 0.4);
}

.dark-theme-datepicker .CalendarDay__selected_span:hover {
    background-color: rgba(var(--accent-primary-rgb), 0.3);
    color: var(--text-primary);
}

/* Блокированные дни */
.dark-theme-datepicker .CalendarDay__blocked_out_of_range {
    opacity: 0.3;
    pointer-events: none;
    color: var(--text-secondary);
}

/* Навигация календаря (Стрелки) */
.dark-theme-datepicker .DayPickerNavigation_button__default {
    border: 1px solid var(--border-color);
    background-color: var(--surface-2);
    border-radius: 4px;
}

.dark-theme-datepicker .DayPickerNavigation_button__default svg {
    fill: var(--text-primary);
}

/* --- TABS OVERRIDE (Bootstrap) --- */
.nav-pills .nav-link {
    border-radius: 6px; 
}

.nav-pills .nav-link.active {
    background-color: var(--accent-primary);
    color: #000 !important;
    font-weight: 700;
}