/* ================================================================
   Vendor Overrides
   Кастомизация сторонних библиотек под дизайн-систему проекта.
   ================================================================ */

/* ── Flatpickr ── */

/* Selected date accent */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: var(--accent);
    border-color: var(--accent);
}

.flatpickr-day.today {
    border-color: var(--accent);
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Compact sizing */
.flatpickr-calendar {
    font-size: var(--text-xs);
    width: 256px;
}

.flatpickr-days,
.dayContainer {
    width: 256px;
    min-width: 256px;
    max-width: 256px;
}

.flatpickr-day {
    max-width: 34px;
    height: 34px;
    line-height: 34px;
}

.flatpickr-months .flatpickr-month {
    height: 32px;
}

span.flatpickr-weekday {
    font-size: var(--text-xs);
}

.flatpickr-current-month {
    font-size: var(--text-base);
}

/* Input field styling */
.flatpickr-input[readonly] {
    cursor: pointer;
    background: var(--background);
}

.flatpickr-input:disabled,
.flatpickr-input[readonly]:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.flatpickr-input::placeholder,
.flatpickr-input[readonly]::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

/* ── CKEditor 5 ── */

/* Рамку вокруг панели инструментов рисует .ck-sticky-panel__content, у самого
   .ck-toolbar внутри редактора border: 0. Поэтому цвета и радиус задаём переменными
   на контейнере: объявленные на потомках, они до панели не доходят, и она остаётся
   с вендорным #ccced1 — на тёмной теме это читается как белая обводка.
   --ck-border-radius вендор применяет только к внешним углам (верхним у панели,
   нижним у текстовой области), поэтому стык между ними остаётся прямым. */
.ck.ck-editor {
    --ck-border-radius: var(--radius-sm);
    --ck-color-base-border: var(--border);
    --ck-color-toolbar-border: var(--border);
    --ck-color-toolbar-background: var(--background-secondary);
}

.django_ckeditor_5 {
    min-height: 300px !important;
}

.ck-editor__editable {
    min-height: 300px !important;
    max-height: 500px;
}

.ck.ck-editor__main>.ck-editor__editable.ck-focused {
    border-color: var(--primary-color) !important;
    box-shadow: var(--shadow-focus) !important;
}

/* ── Тёмная тема: Flatpickr ── */
:root[data-theme="dark"] .flatpickr-calendar {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--shadow-lg);
}
:root[data-theme="dark"] .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--surface); }
:root[data-theme="dark"] .flatpickr-calendar.arrowBottom::after { border-top-color: var(--surface); }
:root[data-theme="dark"] .flatpickr-months .flatpickr-month,
:root[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
:root[data-theme="dark"] .flatpickr-current-month input.cur-year,
:root[data-theme="dark"] .flatpickr-months .flatpickr-prev-month,
:root[data-theme="dark"] .flatpickr-months .flatpickr-next-month {
    color: var(--text-primary);
    fill: var(--text-primary);
}
:root[data-theme="dark"] span.flatpickr-weekday { color: var(--text-secondary); }
:root[data-theme="dark"] .flatpickr-day { color: var(--text-primary); }
:root[data-theme="dark"] .flatpickr-day.prevMonthDay,
:root[data-theme="dark"] .flatpickr-day.nextMonthDay,
:root[data-theme="dark"] .flatpickr-day.flatpickr-disabled {
    color: var(--text-light);
}
:root[data-theme="dark"] .flatpickr-day:hover,
:root[data-theme="dark"] .flatpickr-day.inRange {
    background: var(--primary-alpha-10);
    border-color: transparent;
    box-shadow: none;
}
:root[data-theme="dark"] .flatpickr-day.today { border-color: var(--accent); }
/* стрелки степпера года захардкожены чёрными бордерами */
:root[data-theme="dark"] .flatpickr-current-month .numInputWrapper span.arrowUp::after { border-bottom-color: var(--text-secondary); }
:root[data-theme="dark"] .flatpickr-current-month .numInputWrapper span.arrowDown::after { border-top-color: var(--text-secondary); }
:root[data-theme="dark"] .flatpickr-current-month .numInputWrapper span:hover { background: var(--white-10); }
:root[data-theme="dark"] .dayContainer + .dayContainer { box-shadow: -1px 0 0 var(--border); }
:root[data-theme="dark"] .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) { box-shadow: none; }
/* .selected/.startRange/.endRange уже акцентные (см. блок Flatpickr выше) — на тёмном работают без изменений */

/* ── Тёмная тема: CKEditor 5 ── */
/* Цвета рамок и фон панели — в общем блоке выше: их токены темы переключают сами */
:root[data-theme="dark"] .ck.ck-editor {
    --ck-color-base-background: var(--surface);
    --ck-color-text: var(--text-primary);
    --ck-color-button-default-background: transparent;
    --ck-color-button-default-hover-background: var(--primary-alpha-10);
    --ck-color-button-on-background: var(--primary-alpha-20);
    --ck-color-button-on-hover-background: var(--primary-alpha-25);
    --ck-color-dropdown-panel-background: var(--surface);
    --ck-color-dropdown-panel-border: var(--border);
    --ck-color-list-background: var(--surface);
    --ck-color-list-button-hover-background: var(--primary-alpha-10);
    --ck-color-panel-background: var(--surface);
    --ck-color-panel-border: var(--border);
    --ck-color-input-background: var(--background-secondary);
    --ck-color-input-border: var(--border);
    --ck-color-input-text: var(--text-primary);
}

/* Цвет набираемого текста — прямым правилом на самой области ввода: вендорный
   ck-reset задаёт ей color явно, а прямое правило наследование перебивает */
:root[data-theme="dark"] .ck.ck-editor__main > .ck-editor__editable {
    background: var(--surface);
    color: var(--text-primary);
}

/* ── Тёмная тема: Leaflet (segment-map в ЛК, route maps; cmap имеет свой
   идентичный фильтр в изолированном namespace). Тайлы: инверсия яркости +
   разворот оттенка = тёмная карта из светлых тайлов. ── */
:root[data-theme="dark"] .leaflet-container { background: #0b1120; }
:root[data-theme="dark"] .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(.95) contrast(.9) saturate(.85);
}
:root[data-theme="dark"] .leaflet-popup-content-wrapper,
:root[data-theme="dark"] .leaflet-popup-tip {
    background: var(--surface);
    color: var(--text-primary);
}
:root[data-theme="dark"] .leaflet-bar a {
    background-color: var(--surface);
    color: var(--text-primary);
    border-bottom-color: var(--border);
}
:root[data-theme="dark"] .leaflet-bar a:hover { background-color: var(--hover-highlight); }
:root[data-theme="dark"] .leaflet-control-attribution {
    background: rgba(var(--surface-rgb), 0.7);
    color: var(--text-secondary);
}