/* ===== ТЕМНА ТЕМА ===== */
/*
   Зроблена інверсією всього документа, а не переписуванням кольорів.
   Причина проста: у фронтенді 8371 колір заданий числом просто в розмітці —
   переписати їх на змінні означає місяць роботи і ризик зачепити кожну
   сторінку. Інверсія дає темну тему всюди й одразу, зокрема там, куди руки
   ще не дійшли.

   Як це працює. На корінь вішається invert(1) hue-rotate(180deg): яскравість
   перевертається, а відтінок повертається на місце, тож синє лишається синім,
   а не стає помаранчевим. Усе, що має зберегти власні кольори — фото, відео,
   графіки, вбудовані документи — отримує ту саму пару фільтрів удруге, а два
   перевертання дають вихідне зображення.

   contrast стягує картинку до середини діапазону, а brightness піднімає її
   вище: разом вони піднімають чорний, але помірно — далі за фон беруться явні кольори нижче. Самою лише
   яскравістю цього не досягти — після інверсії білий стає нулем, а множення
   нуля лишається нулем. Самим лише контрастом теж погано: щоб так підняти
   фон, довелось би приглушити й текст.

   Медіа компенсує обидва кроки зворотною парою. Перетворення афінне, тож
   пара точно скасовує одна одну і фото лишаються такими, як були.
*/

html[data-theme="dark"] {
  filter: invert(1) hue-rotate(180deg) contrast(0.8) brightness(1.09);
  background: #fff;
}

/* Повертаємо власні кольори всьому, що має виглядати як є.
   Графіки сюди свідомо не входять: вони мальовані під світле тло, тож підписи
   осей у них темні. Якби ми повернули їм рідні кольори, ці підписи лишились
   би темними на темному і зникли. Лишаємо графіки інвертованими — лінії
   зберігають відтінок завдяки hue-rotate, а текст стає світлим. */
html[data-theme="dark"] img,
html[data-theme="dark"] video,
html[data-theme="dark"] iframe,
html[data-theme="dark"] embed,
html[data-theme="dark"] object,
html[data-theme="dark"] svg image,
html[data-theme="dark"] [data-keep-colors],
html[data-theme="dark"] .inbox-avatar-photo,
html[data-theme="dark"] .inbox-platform-dot,
html[data-theme="dark"] .emoji-picker,
html[data-theme="dark"] [style*="background-image"] {
  filter: brightness(0.9174) contrast(1.25) hue-rotate(180deg) invert(1);
}

/* Подвійна інверсія всередині вже поверненого блока — знову перевертаємо. */
html[data-theme="dark"] [data-keep-colors] img,
html[data-theme="dark"] [style*="background-image"] img {
  filter: none;
}

/* Тіні на темному тлі після інверсії перетворюються на світлий ореол навколо
   карток. Приглушуємо їх, лишаючи саме стільки, щоб межа читалась. */
html[data-theme="dark"] {
  --shadow-xs: 0 0.5px 1px rgba(0,0,0,0.02);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.03);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.04);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.05);
  --shadow-xl: 0 8px 32px rgba(0,0,0,0.07);
}

/* Смуга прокрутки і виділення тексту інвертуються разом з усім, тож окремо
   їх чіпати не треба. А от системні елементи форм краще попередити, який
   зараз режим, — інакше випадаючі списки лишаються світлими всередині. */
html[data-theme="dark"] body {
  color-scheme: light;
}

/* Плавний перехід при перемиканні, щоб не різало очі. */
html {
  transition: filter 0.18s ease;
}


/* ===== ВЕЛИКІ ПЛОЩИНИ ЯВНИМ КОЛЬОРОМ =====

   Далі світлішати самим фільтром не можна: щоб підняти фон, доводиться
   опускати контраст, і разом з фоном тьмяніє все інше — статуси, суми,
   кольорові позначки зливаються в сіре.

   Тому фільтр лишається помірним, а великі площини — тло сторінки, картки,
   таблиці, бічна панель, шапка — отримують колір окремо.

   Числа тут виглядають світлими, і це навмисно: усе, що написано в стилях,
   ще пройде через інверсію на корені. Світло-сірий #cacaca після неї стає
   темно-сірим приблизно #474747 — саме тим кольором, який видно на екрані.
   Рахується як 1.09 * (0.8 * (1 - колір) + 0.1). */

html[data-theme="dark"],
html[data-theme="dark"] body {
  background-color: #d6d6d6;   /* на екрані ≈ #3d3d3d */
}

/* Токени оформлення — їх використовує більшість компонентів. */
html[data-theme="dark"] {
  --bg-primary: #d6d6d6;       /* ≈ #3d3d3d — тло сторінки */
  --bg-secondary: #d0d0d0;     /* ≈ #414141 — вкладені блоки */
  --bg-card: #cacaca;          /* ≈ #474747 — картки */
  --bg-card-solid: #cacaca;
  --bg-input: #c4c4c4;         /* ≈ #4d4d4d — поля вводу */
  --bg-sidebar: #d9d9d9;       /* ≈ #3a3a3a — бічна панель */
  --bg-header: #d9d9d9;
  --bg-hover: rgba(0, 0, 0, 0.05);
  --bg-active: rgba(0, 0, 0, 0.09);
}

/* Каркас застосунку. */
html[data-theme="dark"] .icon-sidebar,
html[data-theme="dark"] .app-header {
  background-color: #d9d9d9;
}

html[data-theme="dark"] .orders-table,
html[data-theme="dark"] table,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .inbox-sidebar,
html[data-theme="dark"] .inbox-main,
html[data-theme="dark"] .fin-card,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .modal-content {
  background-color: #cacaca;
}

/* Білий, прописаний просто в розмітці — таких місць у коді майже шістсот,
   і без цього правила вони лишались би найтемнішими плямами на сторінці. */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color:white"] {
  background-color: #cacaca !important;
}

/* Світло-сірі підкладки, якими в коді позначають вкладені блоки. */
html[data-theme="dark"] [style*="background:#f8fafc"],
html[data-theme="dark"] [style*="background: #f8fafc"],
html[data-theme="dark"] [style*="background:#f1f5f9"],
html[data-theme="dark"] [style*="background: #f1f5f9"],
html[data-theme="dark"] [style*="background:#f5f5f7"],
html[data-theme="dark"] [style*="background-color:#f8fafc"] {
  background-color: #d0d0d0 !important;
}

/* Бічна панель і шапка описані у своїх файлах напівпрозорим білим із вищою
   вагою, тому тут потрібне !important — інакше вони лишаються найтемнішими
   плямами по краях екрана. */
html[data-theme="dark"] .icon-sidebar,
html[data-theme="dark"] .app-header,
html[data-theme="dark"] .sidebar {
  background-color: #d9d9d9 !important;
}

/* Поля вводу білі за правилом у main.css, а не в розмітці. */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: #c4c4c4;   /* ≈ #4d4d4d */
}


/* ===== ТЕКСТ =====

   Основний текст у світлій темі майже чорний, але не чорний: #1d1d1f. Після
   інверсії з нього виходить сірий, а не білий. Щоб текст був білим, тут його
   опускають до справжнього нуля — інверсія піднімає нуль на самий верх.

   Абсолютно чистий #ffffff отримати не вийде: після контрасту й яскравості
   стеля виходить трохи нижчою. Різниця непомітна, це приблизно #fafafa.

   Другорядний текст лишається сірим свідомо — інакше зникає різниця між
   головним і допоміжним, і сторінка читається як суцільна стіна. */

html[data-theme="dark"] {
  --text-primary: #000000;     /* на екрані ≈ #fafafa */
  --text-secondary: #2b2b2b;   /* ≈ #d5d5d5 */
  --text-muted: #3d3d3d;       /* ≈ #c6c6c6 */
  --text-placeholder: #555555; /* ≈ #b0b0b0 */
  --text: #000000;
}

html[data-theme="dark"] body,
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  color: #000000;
}

/* Кольори тексту, прописані просто в розмітці. Темні відтінки — це основний
   текст, тож вирівнюємо їх до нуля; сірі лишаємо сірими, лише світлішими. */
html[data-theme="dark"] [style*="color:#1e293b"],
html[data-theme="dark"] [style*="color: #1e293b"],
html[data-theme="dark"] [style*="color:#1d1d1f"],
html[data-theme="dark"] [style*="color:#374151"],
html[data-theme="dark"] [style*="color: #374151"],
html[data-theme="dark"] [style*="color:#111827"],
html[data-theme="dark"] [style*="color:#0f172a"],
html[data-theme="dark"] [style*="color:#333"],
html[data-theme="dark"] [style*="color: #333"],
html[data-theme="dark"] [style*="color:#1f2937"] {
  color: #000000 !important;
}

html[data-theme="dark"] [style*="color:#64748b"],
html[data-theme="dark"] [style*="color: #64748b"],
html[data-theme="dark"] [style*="color:#6b7280"],
html[data-theme="dark"] [style*="color: #6b7280"],
html[data-theme="dark"] [style*="color:#475569"],
html[data-theme="dark"] [style*="color:#666"],
html[data-theme="dark"] [style*="color: #666"],
html[data-theme="dark"] [style*="color:#6e6e73"] {
  color: #2b2b2b !important;   /* ≈ #d5d5d5 */
}

html[data-theme="dark"] [style*="color:#94a3b8"],
html[data-theme="dark"] [style*="color: #94a3b8"],
html[data-theme="dark"] [style*="color:#9ca3af"],
html[data-theme="dark"] [style*="color: #9ca3af"],
html[data-theme="dark"] [style*="color:#999"],
html[data-theme="dark"] [style*="color: #999"],
html[data-theme="dark"] [style*="color:#86868b"],
html[data-theme="dark"] [style*="color:#aeaeb2"] {
  color: #454545 !important;   /* ≈ #bfbfbf */
}