/*
 * ══════════════════════════════════════════════════════════════
 *  LASTOP GROUP — Dark Theme (Apple-style)
 *  Файл: web/assets/dark-theme.css
 *
 *  Нейтрально-серая палитра, без зелёного оттенка фонов.
 *  Зелёный акцент сохранён только для активных элементов и текста.
 *
 *  Палитра соответствует iOS / macOS Dark Mode:
 *  - Background:   #000000 (system bg, true black)
 *  - Surface 1:    #1C1C1E (cards, containers)
 *  - Surface 2:    #2C2C2E (elevated, inputs)
 *  - Surface 3:    #3A3A3C (modal, dropdown)
 *  - Separator:    rgba(84,84,88,0.65)
 *  - Label:        #FFFFFF
 *  - Secondary:    rgba(235,235,245,0.6)
 *  - Tertiary:     rgba(235,235,245,0.3)
 *  - Accent green: #30D158 (system green, Apple)
 *
 *  Подключение: автоматически через htmlInject в main.go
 * ══════════════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────────────────────────────
   СЛОЙ 1 — Страницы на CSS-переменных
   ───────────────────────────────────────────────────────────── */

[data-theme="dark"] {
  /* Фоны — нейтрально-серые. --bg близко к --w, чтобы grid-зазоры
     не создавали контрастных «полосок» между блоками. */
  --bg:  #1C1C1E;
  --w:   #1C1C1E;
  --gp:  #2C2C2E;
  --gl:  #1F2A22;

  /* Текст */
  --t:   #FFFFFF;
  --tm:  rgba(235,235,245,0.6);
  --gmt: rgba(235,235,245,0.45);

  /* Зелёный акцент — приглушённый Apple system green
     (на чёрном фоне обычный 30D158 слишком кислотный) */
  --g:   #28B14A;
  --gm:  #2BBC4F;
  --gb:  #1F4D2C;

  /* Границы — Apple separator */
  --bdr: rgba(84,84,88,0.45);

  /* Тени */
  --sh:  0 1px 3px rgba(0,0,0,.4);
  --shm: 0 4px 16px rgba(0,0,0,.6);

  /* Красный — Apple system red */
  --red: #FF453A;
}

[data-theme="dark"] body {
  background: var(--bg);
  color: var(--t);
}

/* Скроллбар */
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(235,235,245,0.18);
  border-radius: 99px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(235,235,245,0.28);
}
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: transparent;
}

/* Инпуты */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  color-scheme: dark;
}

/* Модалки — оверлей */
[data-theme="dark"] .modal-bg {
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(6px);
}

/* Lightbox */
[data-theme="dark"] .lightbox {
  background: rgba(0,0,0,.95);
}

/* Skeleton */
[data-theme="dark"] .skel-card,
[data-theme="dark"] .skel-thumb,
[data-theme="dark"] .skel-line,
[data-theme="dark"] .sl {
  background: #2C2C2E;
}

/* Toast */
[data-theme="dark"] .toast {
  background: #2C2C2E;
  border: 1px solid rgba(84,84,88,0.45);
  color: #FFFFFF;
}
[data-theme="dark"] .toast.ok {
  background: #1F4D2C;
  border-color: #30D158;
}

/* Дропдауны (репост, профиль, календарь, шапка чата) */
[data-theme="dark"] .repost-dd,
[data-theme="dark"] .profile-dd,
[data-theme="dark"] .cal-popup,
[data-theme="dark"] .pdd,
[data-theme="dark"] .chip-dd {
  background: #2C2C2E;
  border-color: rgba(84,84,88,0.45);
  box-shadow: 0 12px 36px rgba(0,0,0,.6);
}

/* Кнопка «выход / удалить» — приглушённый красный фон */
[data-theme="dark"] .pdd-item.logout:hover,
[data-theme="dark"] .pdd-item.danger:hover {
  background: rgba(255,69,58,0.12) !important;
  color: #FF453A !important;
}

/* Обложки-плейсхолдеры */
[data-theme="dark"] .proj-cover-ph,
[data-theme="dark"] .nf-cover-ph,
[data-theme="dark"] .ex-cover-ph {
  filter: brightness(.75);
}

/* Медиа-заглушки */
[data-theme="dark"] .media-add {
  background: #2C2C2E;
  border-color: rgba(84,84,88,0.45);
}

/* Выделение текста */
[data-theme="dark"] ::selection {
  background: rgba(48,209,88,.32);
  color: #FFFFFF;
}


/* ─────────────────────────────────────────────────────────────
   СЛОЙ 2 — Tailwind-страницы
   ───────────────────────────────────────────────────────────── */

body.dark-theme {
  background: #1C1C1E !important;
  color: #FFFFFF !important;
}

/* Поверхности уровень 1 (карточки, секции) */
body.dark-theme .bg-white,
body.dark-theme .bg-white\/90,
body.dark-theme .bg-gray-50,
body.dark-theme .bg-gray-100,
body.dark-theme .bg-\[\#eef2f3\],
body.dark-theme .bg-\[\#f7f8f9\],
body.dark-theme .bg-\[\#fbfcfc\],
body.dark-theme .bg-\[\#fafbfb\],
body.dark-theme .bg-\[linear-gradient\(180deg\,\#fbfcfc_0\%\,\#f7f9f9_100\%\)\],
body.dark-theme .dashboard-shell,
body.dark-theme .global-sidebar,
body.dark-theme .global-right-sidebar,
body.dark-theme .dashboard-main,
body.dark-theme .dashboard-main-header,
body.dark-theme article,
body.dark-theme section,
body.dark-theme aside,
body.dark-theme header {
  background: #1C1C1E !important;
  color: #FFFFFF !important;
}

/* Поверхности уровень 2 (вложенные блоки, инпуты) */
body.dark-theme .bg-\[\#f0f4f2\],
body.dark-theme .bg-\[\#edf2ef\],
body.dark-theme .bg-\[\#ecf2ee\],
body.dark-theme .bg-\[\#f5f8f6\],
body.dark-theme #feedScrollContainer > * {
  background: #2C2C2E !important;
}

/* Инпуты */
body.dark-theme input,
body.dark-theme textarea,
body.dark-theme select {
  background: #2C2C2E !important;
  color: #FFFFFF !important;
  border-color: rgba(84,84,88,0.45) !important;
  color-scheme: dark;
}

body.dark-theme input::placeholder,
body.dark-theme textarea::placeholder {
  color: rgba(235,235,245,0.35) !important;
}

/* Границы */
body.dark-theme .border,
body.dark-theme [class*="border-\[#"],
body.dark-theme [class*="border-gray"],
body.dark-theme .divide-y > * {
  border-color: rgba(84,84,88,0.45) !important;
}

/* Текст основной */
body.dark-theme .text-black,
body.dark-theme .text-\[\#000\],
body.dark-theme .text-\[\#111111\],
body.dark-theme .text-\[\#111827\],
body.dark-theme .text-\[\#1f2937\],
body.dark-theme .text-\[\#273244\],
body.dark-theme .text-\[\#1A2A22\],
body.dark-theme .text-\[\#3a5245\],
body.dark-theme .text-\[\#324154\],
body.dark-theme .text-\[\#334153\],
body.dark-theme .text-\[\#3a4758\],
body.dark-theme .text-\[\#445164\],
body.dark-theme .text-\[\#4c5b6b\],
body.dark-theme .text-\[\#51606f\],
body.dark-theme .text-\[\#213246\] {
  color: #FFFFFF !important;
}

/* Текст приглушённый — Apple secondary label */
body.dark-theme .text-\[\#5d6978\],
body.dark-theme .text-\[\#5f6b79\],
body.dark-theme .text-\[\#7e8a97\],
body.dark-theme .text-\[\#95a1ad\],
body.dark-theme .text-\[\#a0acb8\],
body.dark-theme .text-\[\#5A8A6A\],
body.dark-theme .text-gray-500,
body.dark-theme .text-gray-600,
body.dark-theme .text-slate-500,
body.dark-theme .text-slate-600 {
  color: rgba(235,235,245,0.6) !important;
}

/* Зелёные акценты — Apple system green */
body.dark-theme .text-green-500,
body.dark-theme .text-green-600,
body.dark-theme .text-green-700,
body.dark-theme .text-\[\#16a34a\],
body.dark-theme .text-\[\#15803d\],
body.dark-theme .text-\[\#22c55e\],
body.dark-theme .text-\[\#1E8A4C\],
body.dark-theme .text-\[\#22A05A\] {
  color: #30D158 !important;
}

/* Красные акценты — Apple system red */
body.dark-theme .text-red-500,
body.dark-theme .text-red-600,
body.dark-theme .text-\[\#E04040\],
body.dark-theme .text-\[\#b91c1c\] {
  color: #FF453A !important;
}

/* Бейджи / теги — приглушённые фоны */
body.dark-theme .bg-\[\#E8F5EE\],
body.dark-theme .bg-\[\#F0FAF4\],
body.dark-theme .bg-green-50,
body.dark-theme .bg-green-100 {
  background: rgba(48,209,88,0.15) !important;
  color: #30D158 !important;
}

body.dark-theme .bg-\[\#FEE2E2\],
body.dark-theme .bg-red-50,
body.dark-theme .bg-red-100 {
  background: rgba(255,69,58,0.15) !important;
  color: #FF453A !important;
}

body.dark-theme .bg-\[\#EDE8FA\],
body.dark-theme .bg-purple-50,
body.dark-theme .bg-purple-100 {
  background: rgba(191,90,242,0.15) !important;
  color: #BF5AF2 !important;
}

body.dark-theme .bg-\[\#E6F1FB\],
body.dark-theme .bg-blue-50,
body.dark-theme .bg-blue-100 {
  background: rgba(10,132,255,0.15) !important;
  color: #0A84FF !important;
}

body.dark-theme .bg-\[\#FEF3C7\],
body.dark-theme .bg-yellow-50,
body.dark-theme .bg-amber-100 {
  background: rgba(255,159,10,0.15) !important;
  color: #FF9F0A !important;
}

/* Ховер-состояния */
body.dark-theme .hover\:bg-\[\#f0f4f2\]:hover,
body.dark-theme .hover\:bg-gray-50:hover,
body.dark-theme .hover\:bg-gray-100:hover {
  background: #2C2C2E !important;
}

/* Тени */
body.dark-theme [class*="shadow"] {
  --tw-shadow-color: rgba(0,0,0,.6);
}

/* Скроллбар Tailwind-страниц */
body.dark-theme ::-webkit-scrollbar-track {
  background: transparent;
}
body.dark-theme ::-webkit-scrollbar-thumb {
  background: rgba(235,235,245,0.18);
  border-radius: 99px;
}
body.dark-theme ::-webkit-scrollbar-thumb:hover {
  background: rgba(235,235,245,0.28);
}

/* Выделение текста */
body.dark-theme ::selection {
  background: rgba(48,209,88,.32);
  color: #FFFFFF;
}

/* Sidebar active item */
body.dark-theme .global-sidebar__item--active,
body.dark-theme .nav-item.active {
  background: rgba(48,209,88,0.18) !important;
  color: #30D158 !important;
}

/* Hover на sidebar */
body.dark-theme .global-sidebar__item:hover,
body.dark-theme .nav-item:hover {
  background: #2C2C2E !important;
  color: #30D158 !important;
}

/* Tailwind toggle */
body.dark-theme #themeToggle .theme-toggle-track {
  background: #30D158;
}
body.dark-theme #themeToggle .theme-toggle-thumb {
  transform: translateX(18px);
  background: #000000;
}

/* Sidebar кнопки-переключатели */
body.dark-theme .sidebar-toggle {
  background: #1C1C1E !important;
  color: #FFFFFF !important;
  border-color: rgba(84,84,88,0.45) !important;
}

/* ─────────────────────────────────────────────────────────────
   Поисковый input внутри topbar — должен быть скруглённым
   на всех страницах (общий фикс не только для тёмной темы)
   ───────────────────────────────────────────────────────────── */
.search-wrap input,
.topbar input[type="search"],
.topbar input[type="text"] {
  border-radius: 12px;
}

/* В тёмной теме — input сливается с топбаром (Apple Spotlight-стиль).
   Подсвечивается лёгким фоном и зелёной рамкой только на focus. */
[data-theme="dark"] .search-wrap input,
[data-theme="dark"] .topbar input[type="search"],
[data-theme="dark"] .topbar input[type="text"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] header input {
  background: transparent !important;
  border-color: rgba(84,84,88,0.35) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .search-wrap input::placeholder,
[data-theme="dark"] .topbar input[type="search"]::placeholder,
[data-theme="dark"] header input::placeholder {
  color: rgba(235,235,245,0.45) !important;
}

[data-theme="dark"] .search-wrap input:focus,
[data-theme="dark"] .topbar input[type="search"]:focus,
[data-theme="dark"] header input:focus {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(48,209,88,0.6) !important;
}

/* ─────────────────────────────────────────────────────────────
   Filter-табы и пилюли (фильтры разделов, отрасли, категории)
   В тёмной теме они должны быть тёмно-серые с белым текстом,
   а не унаследовать белый фон со светлой темы.
   ───────────────────────────────────────────────────────────── */

/* Неактивные табы — тёмный фон, светлый текст.
   .cat-chip и .mode-btn добавлены отдельно потому что на /companies.html
   у .cat-chip захардкожен background:#fff прямо в HTML (companies.html:64),
   и нужно его перебить через !important. */
[data-theme="dark"] .ftab:not(.active),
[data-theme="dark"] .industry-pill:not(.active),
[data-theme="dark"] .filter-pill:not(.active),
[data-theme="dark"] .cat-pill:not(.active),
[data-theme="dark"] .tag-pill:not(.active),
[data-theme="dark"] .cat-chip:not(.active),
[data-theme="dark"] .mode-btn:not(.active) {
  background: #2C2C2E !important;
  border-color: rgba(84,84,88,0.45) !important;
  color: rgba(235,235,245,0.85) !important;
}

[data-theme="dark"] .ftab:not(.active):hover,
[data-theme="dark"] .industry-pill:not(.active):hover,
[data-theme="dark"] .filter-pill:not(.active):hover,
[data-theme="dark"] .cat-pill:not(.active):hover,
[data-theme="dark"] .tag-pill:not(.active):hover,
[data-theme="dark"] .cat-chip:not(.active):hover,
[data-theme="dark"] .mode-btn:not(.active):hover {
  background: #3A3A3C !important;
  border-color: rgba(48,209,88,0.5) !important;
  color: #FFFFFF !important;
}

/* Активные табы — приглушённый зелёный (var(--g) = #28B14A). */
[data-theme="dark"] .ftab.active,
[data-theme="dark"] .industry-pill.active,
[data-theme="dark"] .filter-pill.active,
[data-theme="dark"] .cat-pill.active,
[data-theme="dark"] .tag-pill.active,
[data-theme="dark"] .cat-chip.active,
[data-theme="dark"] .mode-btn.active {
  background: var(--g) !important;
  border-color: var(--g) !important;
  color: #FFFFFF !important;
}

/* ─────────────────────────────────────────────────────────────
   Календарь — дни прошлого/следующего месяца должны быть видны,
   но визуально приглушены относительно текущего месяца.
   ───────────────────────────────────────────────────────────── */

[data-theme="dark"] .cal-day.other-month {
  color: rgba(235,235,245,0.28) !important;
}