/* style.css — минимальные кастомные стили поверх Tailwind CDN.
   Общие для всех страниц (подключать после Tailwind). */

#toast-container .toast-item {
  animation: toast-in 0.15s ease-out;
}

#toast-container .toast-item.toast-item-out {
  animation: toast-out 0.2s ease-in forwards;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes toast-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Модалки: сама видимость управляется классом .hidden (Tailwind), тут только
   гарантия, что модалка всегда поверх остального контента. */
.modal-root {
  backdrop-filter: blur(1px);
}

/* Окно "Новый проект / Полная информация о проекте" (js/project-modal.js): на мобиле
   3 блока (Инфо/Контакты/Съёмки) физически лежат в разных местах разметки (на desktop
   это 3 колонки по 05_PROJECTS.md), но должны переключаться одной группой вкладок —
   поэтому видимость управляется атрибутом data-mobile-tab на корне модалки, а не
   Tailwind-классами hidden/md:block (иначе пришлось бы дублировать разметку). */
@media (max-width: 767px) {
  #modal-project [data-mobile-tab-group] { display: none; }
  #modal-project[data-mobile-tab="info"] [data-mobile-tab-group="info"],
  #modal-project[data-mobile-tab="contacts"] [data-mobile-tab-group="contacts"],
  #modal-project[data-mobile-tab="shoots"] [data-mobile-tab-group="shoots"] {
    display: block;
  }
}

/* FullCalendar toolbar: заголовок месяца/года + кнопки prev/next/today.
   Размеры кнопок чуть разные у admin-календаря (#cal-fc) и my_calendar (#mycal-fc). */
.fc .fc-toolbar-title {
  font-size: 1.2em;
  margin: 0;
}

#mycal-fc .fc .fc-button {
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25em;
  display: inline-block;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5;
  padding: 0.2em 0.35em;
  text-align: center;
  user-select: none;
  vertical-align: middle;
}

#cal-fc .fc .fc-button {
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25em;
  display: inline-block;
  font-size: 0.9em;
  font-weight: 400;
  line-height: 1.5;
  padding: 0.3em 0.3em;
  text-align: center;
  user-select: none;
  vertical-align: middle;
}

/* Week/day: компактные подписи при пересечениях в соседних колонках */
#cal-fc .fc-timegrid-event .fc-event-main,
#mycal-fc .fc-timegrid-event .fc-event-main {
  padding: 1px 3px;
}
#cal-fc .cal-fc-event-title,
#mycal-fc .cal-fc-event-title {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#cal-fc .cal-fc-event-exec {
  font-size: 10px;
  line-height: 1.15;
  opacity: 0.9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Выполнено / отказ — перечёркнутый заголовок в week/day */
#cal-fc .cal-fc-done .cal-fc-event-title,
#cal-fc .cal-fc-done .fc-event-title,
#mycal-fc .mycal-fc-done .fc-event-title {
  text-decoration: line-through;
  opacity: 0.75;
}

/* Выбранный день в сетке (calendar.html / my_calendar.html): рамка, без заливки.
   Работает на desktop и mobile; цвета подобраны под light / dark / vivid. */
#cal-fc .fc-daygrid-day.cal-day-selected .fc-daygrid-day-frame,
#mycal-fc .fc-daygrid-day.cal-day-selected .fc-daygrid-day-frame {
  box-shadow: inset 0 0 0 2px #4f46e5;
  border-radius: 6px;
}
#cal-fc .fc-timegrid-col.cal-day-selected,
#mycal-fc .fc-timegrid-col.cal-day-selected {
  box-shadow: inset 0 0 0 2px #4f46e5;
}

html.dark #cal-fc .fc-daygrid-day.cal-day-selected .fc-daygrid-day-frame,
html.dark #mycal-fc .fc-daygrid-day.cal-day-selected .fc-daygrid-day-frame,
html.dark #cal-fc .fc-timegrid-col.cal-day-selected,
html.dark #mycal-fc .fc-timegrid-col.cal-day-selected {
  box-shadow: inset 0 0 0 2px #a5b4fc;
}

html.vivid #cal-fc .fc-daygrid-day.cal-day-selected .fc-daygrid-day-frame,
html.vivid #mycal-fc .fc-daygrid-day.cal-day-selected .fc-daygrid-day-frame,
html.vivid #cal-fc .fc-timegrid-col.cal-day-selected,
html.vivid #mycal-fc .fc-timegrid-col.cal-day-selected {
  box-shadow: inset 0 0 0 2.5px #6366f1;
}

/* ===== Тёмная тема (desktop + mobile) =====
   Переключатель — кнопка в Header (js/header.js), состояние хранится в
   localStorage ("fotokot_theme"), класс "dark" на <html> выставляется как можно
   раньше в js/config.js (до отрисовки body), чтобы не было "мигания" светлой темой.
   Tailwind подключён через CDN без сборки — вместо dark:-вариантов в разметке
   (пришлось бы переписывать все страницы) тёмная тема сделана переопределением
   уже используемых в вёрстке классов bg-, text-, border- (Tailwind) через каскад
   (наш селектор с префиксом "html.dark" всегда специфичнее исходного класса
   Tailwind, поэтому !important не требуется, кроме сторонних стилей FullCalendar). */
html.dark { color-scheme: dark; }
html.dark body { background-color: #0f172a; color: #e2e8f0; }

html.dark .bg-white { background-color: #1e293b; }
html.dark .bg-gray-50 { background-color: #0f172a; }
html.dark .bg-gray-100 { background-color: #27374a; }
html.dark .bg-gray-200 { background-color: #334155; }
html.dark .bg-gray-900 { background-color: #020617; }

html.dark .text-gray-900 { color: #f1f5f9; }
html.dark .text-gray-800 { color: #e2e8f0; }
html.dark .text-gray-700 { color: #cbd5e1; }
html.dark .text-gray-600 { color: #a7b6c9; }
html.dark .text-gray-500 { color: #94a3b8; }
html.dark .text-gray-400 { color: #74839a; }

html.dark .border-gray-100 { border-color: #223046; }
html.dark .border-gray-200 { border-color: #334155; }
html.dark .border-gray-300 { border-color: #475569; }

html.dark .hover\:bg-gray-50:hover { background-color: #263449; }
html.dark .hover\:bg-gray-100:hover { background-color: #334155; }
html.dark .hover\:bg-gray-200:hover { background-color: #3f4f68; }
html.dark .hover\:text-gray-600:hover { color: #cbd5e1; }
html.dark .hover\:text-gray-700:hover { color: #e2e8f0; }

html.dark .bg-indigo-50 { background-color: rgba(99, 102, 241, .16); }
html.dark .bg-indigo-100 { background-color: rgba(99, 102, 241, .28); }
html.dark .border-indigo-200 { border-color: rgba(99, 102, 241, .4); }
html.dark .text-indigo-700, html.dark .text-indigo-800 { color: #a5b4fc; }
html.dark .text-indigo-500 { color: #818cf8; }

/* Приоритеты событий (calendar / my_calendar / event-modal): в светлой теме
   bg-*-50 + text-gray-900; без переопределения фона текст становится светлым
   поверх пастели и почти не читается. */
html.dark .bg-red-50 { background-color: rgba(239, 68, 68, .18); }
html.dark .bg-red-100 { background-color: rgba(239, 68, 68, .28); }
html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, .18); }
html.dark .bg-amber-100 { background-color: rgba(245, 158, 11, .28); }
html.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, .18); }
html.dark .bg-emerald-100 { background-color: rgba(16, 185, 129, .28); }
html.dark .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, .28); }
html.dark .hover\:bg-red-100:hover { background-color: rgba(239, 68, 68, .36); }
html.dark .text-red-600, html.dark .text-red-700 { color: #fca5a5; }
html.dark .text-amber-700, html.dark .text-amber-800 { color: #fcd34d; }
html.dark .text-emerald-600, html.dark .text-emerald-700 { color: #6ee7b7; }
html.dark .border-red-200 { border-color: rgba(239, 68, 68, .4); }
html.dark .border-amber-200 { border-color: rgba(245, 158, 11, .4); }
html.dark .border-emerald-200 { border-color: rgba(16, 185, 129, .4); }

html.dark input:not([type="checkbox"]):not([type="radio"]),
html.dark select,
html.dark textarea {
  background-color: #1e293b;
  color: #e2e8f0;
  border-color: #475569;
}
html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b; }
html.dark input[type="checkbox"] { accent-color: #6366f1; }

html.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark ::-webkit-scrollbar-track { background: #0f172a; }
html.dark ::-webkit-scrollbar-thumb { background: #334155; border-radius: 6px; }

/* FullCalendar (calendar.html, my_calendar.html) — своя палитра через CSS-переменные
   библиотеки + точечные переопределения того, что переменными не покрывается. */
html.dark .fc {
  --fc-border-color: #334155;
  --fc-page-bg-color: #0f172a;
  --fc-neutral-bg-color: #1e293b;
  --fc-list-event-hover-bg-color: #263449;
  --fc-today-bg-color: rgba(99, 102, 241, .14);
}
html.dark .fc-col-header-cell,
html.dark .fc-daygrid-day,
html.dark .fc-timegrid-slot,
html.dark .fc-scrollgrid { background-color: #0f172a; }
html.dark .fc-toolbar-title,
html.dark .fc-col-header-cell-cushion,
html.dark .fc-daygrid-day-number,
html.dark .fc-timegrid-axis-cushion,
html.dark .fc-timegrid-slot-label-cushion { color: #e2e8f0; }
html.dark .fc-button { background-color: #1e293b !important; border-color: #475569 !important; color: #e2e8f0 !important; }
html.dark .fc-button-primary:not(:disabled).fc-button-active { background-color: #4f46e5 !important; border-color: #4f46e5 !important; }

/* ===== Контрастная тема (vivid) — светлая, но чётче и «живее» =====
   Между light и dark. Фон — мягкий indigo-wash (не серый), карточки белые
   с тенью и более тёмным текстом. Акценты — градиенты indigo→violet.
   Класс "vivid" на <html>, цикл в UI.Theme. Desktop + mobile. */
html.vivid { color-scheme: light; }
html.vivid body {
  background-color: #e8ecfb;
  background-image:
    radial-gradient(ellipse 80% 50% at 10% -10%, rgba(129, 140, 248, .35), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(192, 132, 252, .22), transparent 50%),
    linear-gradient(180deg, #eceffe 0%, #e4e8f8 100%);
  color: #0f172a;
}

html.vivid .bg-white {
  background-color: #ffffff;
  box-shadow: 0 4px 18px rgba(67, 56, 202, .08), 0 1px 3px rgba(15, 23, 42, .06);
  border-color: rgba(99, 102, 241, .18) !important;
}
html.vivid header.bg-white {
  background-color: rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(99, 102, 241, .14), 0 4px 16px rgba(67, 56, 202, .06);
  border-color: rgba(99, 102, 241, .2) !important;
}
html.vivid .bg-gray-50 { background-color: #e8ecfb; }
html.vivid .bg-gray-100 { background-color: #dde3f7; }
html.vivid .bg-gray-200 { background-color: #c9d2ef; }

html.vivid .text-gray-900 { color: #0b1220; }
html.vivid .text-gray-800 { color: #1e293b; }
html.vivid .text-gray-700 { color: #334155; }
html.vivid .text-gray-600 { color: #475569; }
html.vivid .text-gray-500 { color: #64748b; }
html.vivid .text-gray-400 { color: #7886a3; }

html.vivid .border-gray-100 { border-color: rgba(99, 102, 241, .12); }
html.vivid .border-gray-200 { border-color: rgba(99, 102, 241, .2); }
html.vivid .border-gray-300 { border-color: rgba(99, 102, 241, .32); }

html.vivid .hover\:bg-gray-50:hover { background-color: #f3f5ff; }
html.vivid .hover\:bg-gray-100:hover { background-color: #e6eafc; }
html.vivid .hover\:bg-gray-200:hover { background-color: #d5dcf5; }

html.vivid .bg-indigo-50 { background-color: rgba(99, 102, 241, .14); }
html.vivid .bg-indigo-100 { background-color: rgba(99, 102, 241, .22); }
html.vivid .text-indigo-700, html.vivid .text-indigo-800 { color: #4338ca; }
html.vivid .text-indigo-500, html.vivid .text-indigo-600 { color: #4f46e5; }

html.vivid .bg-indigo-600 {
  background-image: linear-gradient(135deg, #6366f1 0%, #7c3aed 55%, #db2777 120%);
  background-color: #6366f1;
  box-shadow: 0 6px 16px rgba(99, 102, 241, .35);
  border: none;
}
html.vivid .hover\:bg-indigo-700:hover {
  background-image: linear-gradient(135deg, #4f46e5 0%, #6d28d9 55%, #be185d 120%);
  background-color: #4f46e5;
}
html.vivid .bg-indigo-600.text-white,
html.vivid a.bg-indigo-600,
html.vivid button.bg-indigo-600 {
  border-radius: 0.65rem;
}

/* Карточки/кнопки навигации дашборда — чуть «мягче» */
html.vivid .rounded-lg { border-radius: 0.85rem; }
html.vivid .rounded-md { border-radius: 0.55rem; }

html.vivid input:not([type="checkbox"]):not([type="radio"]),
html.vivid select,
html.vivid textarea {
  background-color: #ffffff;
  color: #0f172a;
  border-color: rgba(99, 102, 241, .28);
  box-shadow: 0 1px 2px rgba(67, 56, 202, .05);
}
html.vivid input::placeholder, html.vivid textarea::placeholder { color: #94a3b8; }

html.vivid .fc {
  --fc-border-color: rgba(99, 102, 241, .22);
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: #f5f7ff;
  --fc-list-event-hover-bg-color: #eef1ff;
  --fc-today-bg-color: rgba(99, 102, 241, .12);
}
html.vivid .fc-col-header-cell,
html.vivid .fc-daygrid-day,
html.vivid .fc-timegrid-slot,
html.vivid .fc-scrollgrid { background-color: #ffffff; }
html.vivid .fc-toolbar-title,
html.vivid .fc-col-header-cell-cushion,
html.vivid .fc-daygrid-day-number { color: #0f172a; }
html.vivid .fc-button {
  background-image: linear-gradient(135deg, #6366f1, #7c3aed) !important;
  border-color: transparent !important;
  color: #fff !important;
}