/* Light theme overrides — applied when does NOT have .dark class */
html:not(.dark) body { background: #ffffff; color: #18181b; }
/* Backgrounds */
html:not(.dark) .bg-zinc-950 { background-color: #fcfcfc !important; }
html:not(.dark) .bg-zinc-900 { background-color: #f4f4f5 !important; }
html:not(.dark) .bg-zinc-900\/80 { background-color: rgba(250,250,250,0.92) !important; }
html:not(.dark) .bg-zinc-900\/60 { background-color: rgba(244,244,245,0.7) !important; }
html:not(.dark) .bg-zinc-900\/40 { background-color: rgba(244,244,245,0.55) !important; }
html:not(.dark) .bg-zinc-900\/30 { background-color: rgba(244,244,245,0.45) !important; }
html:not(.dark) .bg-zinc-800 { background-color: #e4e4e7 !important; }
html:not(.dark) .bg-zinc-800\/80 { background-color: rgba(228,228,231,0.85) !important; }
html:not(.dark) .bg-zinc-800\/60 { background-color: rgba(228,228,231,0.6) !important; }
html:not(.dark) .bg-zinc-800\/40 { background-color: rgba(228,228,231,0.45) !important; }
html:not(.dark) .bg-zinc-800\/30 { background-color: rgba(228,228,231,0.35) !important; }
html:not(.dark) .bg-zinc-700 { background-color: #d4d4d8 !important; }
html:not(.dark) .bg-zinc-700\/30 { background-color: rgba(212,212,216,0.45) !important; }
html:not(.dark) .bg-zinc-100 { background-color: #18181b !important; }
html:not(.dark) .hover\:bg-white:hover { background-color: #27272a !important; }
/* Text */
html:not(.dark) .text-zinc-50 { color: #09090b !important; }
html:not(.dark) .text-zinc-100 { color: #18181b !important; }
html:not(.dark) .text-zinc-200 { color: #27272a !important; }
html:not(.dark) .text-zinc-300 { color: #3f3f46 !important; }
html:not(.dark) .text-zinc-400 { color: #52525b !important; }
html:not(.dark) .text-zinc-500 { color: #71717a !important; }
html:not(.dark) .text-zinc-600 { color: #a1a1aa !important; }
html:not(.dark) .text-zinc-700 { color: #d4d4d8 !important; }
html:not(.dark) .text-zinc-900 { color: #fafafa !important; }
/* Borders */
html:not(.dark) .border-zinc-800 { border-color: #e4e4e7 !important; }
html:not(.dark) .border-zinc-800\/80 { border-color: rgba(228,228,231,0.9) !important; }
html:not(.dark) .border-zinc-800\/60 { border-color: rgba(228,228,231,0.65) !important; }
html:not(.dark) .border-zinc-800\/50 { border-color: rgba(228,228,231,0.55) !important; }
html:not(.dark) .border-zinc-800\/40 { border-color: rgba(228,228,231,0.45) !important; }
html:not(.dark) .border-zinc-700\/60 { border-color: rgba(212,212,216,0.6) !important; }
html:not(.dark) .border-zinc-700\/70 { border-color: rgba(212,212,216,0.7) !important; }
html:not(.dark) .border-zinc-700 { border-color: #d4d4d8 !important; }
/* Hover variants */
html:not(.dark) .hover\:bg-zinc-800:hover { background-color: #e4e4e7 !important; }
html:not(.dark) .hover\:bg-zinc-800\/60:hover { background-color: rgba(228,228,231,0.6) !important; }
html:not(.dark) .hover\:bg-zinc-800\/80:hover { background-color: rgba(228,228,231,0.85) !important; }
html:not(.dark) .hover\:bg-zinc-900:hover { background-color: #f4f4f5 !important; }
html:not(.dark) .hover\:bg-zinc-700:hover { background-color: #d4d4d8 !important; }
html:not(.dark) .hover\:border-zinc-700:hover { border-color: #d4d4d8 !important; }
html:not(.dark) .hover\:text-zinc-100:hover { color: #18181b !important; }
html:not(.dark) .hover\:text-zinc-200:hover { color: #27272a !important; }
html:not(.dark) .hover\:text-zinc-300:hover { color: #3f3f46 !important; }
html:not(.dark) .hover\:bg-zinc-800\/50:hover { background-color: rgba(228,228,231,0.5) !important; }
/* Hover-вариант акцента (иконка удаления чата и т.п.) — статический
.text-rose-400 инвертируется выше, но hover-вариант нужен отдельно. */
html:not(.dark) .hover\:text-rose-400:hover { color: #e11d48 !important; }
/* Scrollbars + custom utilities */
html:not(.dark) ::-webkit-scrollbar-thumb { background: #d4d4d8; }
html:not(.dark) ::-webkit-scrollbar-thumb:hover { background: #a1a1aa; }
html:not(.dark) .row-hover:hover { background-color: rgba(228, 228, 231, 0.4); }
/* Синхронная подсветка строки в обеих панелях (дерево ↔ Гант) по ховеру. */
.row-sync { background-color: rgba(82, 82, 91, 0.5); }
html:not(.dark) .row-sync { background-color: rgba(228, 228, 231, 0.5); }
html:not(.dark) .sheet-grid {
background-image: linear-gradient(to right, rgba(228,228,231,0.55) 1px, transparent 1px) !important;
}
/* Tinted backgrounds (badges, status strips) become a bit more saturated on light bg */
html:not(.dark) .bg-sky-500\/\[0\.06\] { background-color: rgba(56,189,248,0.10) !important; }
html:not(.dark) .bg-emerald-500\/\[0\.06\] { background-color: rgba(16,185,129,0.10) !important; }
html:not(.dark) .bg-emerald-500\/\[0\.05\] { background-color: rgba(16,185,129,0.10) !important; }
html:not(.dark) .bg-amber-500\/\[0\.06\] { background-color: rgba(245,158,11,0.10) !important; }
html:not(.dark) .bg-rose-500\/\[0\.06\] { background-color: rgba(244,63,94,0.10) !important; }
html:not(.dark) .bg-indigo-500\/\[0\.06\] { background-color: rgba(99,102,241,0.10) !important; }
html:not(.dark) .bg-indigo-500\/\[0\.08\] { background-color: rgba(99,102,241,0.12) !important; }
/* Badge text + bg for tinted variants — strengthen on light */
html:not(.dark) [class*="bg-emerald-500/10"] { color: #047857 !important; }
html:not(.dark) [class*="bg-sky-500/10"] { color: #0369a1 !important; }
html:not(.dark) [class*="bg-amber-500/10"] { color: #b45309 !important; }
html:not(.dark) [class*="bg-rose-500/10"] { color: #be123c !important; }
html:not(.dark) [class*="bg-indigo-500/10"] { color: #4338ca !important; }
html:not(.dark) [class*="bg-slate-500/10"] { color: #475569 !important; }
html:not(.dark) .text-emerald-200, html:not(.dark) .text-emerald-300, html:not(.dark) .text-emerald-400 { color: #059669 !important; }
html:not(.dark) .text-sky-200, html:not(.dark) .text-sky-300, html:not(.dark) .text-sky-400 { color: #0284c7 !important; }
html:not(.dark) .text-amber-200, html:not(.dark) .text-amber-300, html:not(.dark) .text-amber-400 { color: #b45309 !important; }
html:not(.dark) .text-rose-200, html:not(.dark) .text-rose-300, html:not(.dark) .text-rose-400 { color: #e11d48 !important; }
html:not(.dark) .text-indigo-200, html:not(.dark) .text-indigo-300, html:not(.dark) .text-indigo-400 { color: #4f46e5 !important; }
html:not(.dark) .text-slate-200, html:not(.dark) .text-slate-300, html:not(.dark) .text-slate-400 { color: #475569 !important; }
/* 500-уровень акцентов (иконки/мелкие акценты) и opacity-варианты — на
светлом фоне светлый акцент тонет, затемняем до читаемого тона. */
html:not(.dark) .text-emerald-500 { color: #059669 !important; }
html:not(.dark) .text-sky-500 { color: #0284c7 !important; }
html:not(.dark) .text-amber-500 { color: #b45309 !important; }
html:not(.dark) .text-rose-500 { color: #e11d48 !important; }
html:not(.dark) .text-indigo-500 { color: #4f46e5 !important; }
html:not(.dark) .text-rose-300\/80, html:not(.dark) .text-rose-400\/80 { color: #e11d48 !important; }
/* Backdrops (scrim) — slightly lighter in light theme */
html:not(.dark) .bg-black\/40 { background-color: rgba(24,24,27,0.35) !important; }
html:not(.dark) .bg-black\/60 { background-color: rgba(24,24,27,0.4) !important; }
/* Невыполненная часть полосы Ганта: в тёмной теме — тёмная заливка
(bg-zinc-950/35), в светлой — светло-серая, иначе полоса почти чёрная.
Текст % использует text-zinc-50 (инвертируется темой) → читаем в обеих. */
html:not(.dark) .bg-zinc-950\/35 { background-color: rgba(161,161,170,0.45) !important; }
/* Штриховка просрочки — мягче в светлой теме, иначе полоса «грязная». */
html:not(.dark) .stripes-overdue {
background-image: repeating-linear-gradient(
135deg,
rgba(249,115,22,0.18) 0px, rgba(249,115,22,0.18) 4px,
transparent 4px, transparent 8px
) !important;
}
/* Toast solid bg override (inline style #0a0a0b) — handled separately in component */
/* Автозаполнение браузера (-webkit-autofill) перекрашивает фон input'а в
белый, перекрывая bg-transparent — на тёмном экране логина поля «белеют».
Возвращаем фон/цвет под тему через inset box-shadow (стандартный приём:
реальный background сменить нельзя, но inset-тень его перекрывает). */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
-webkit-text-fill-color: #f4f4f5;
-webkit-box-shadow: 0 0 0 1000px #18181b inset;
box-shadow: 0 0 0 1000px #18181b inset;
caret-color: #f4f4f5;
transition: background-color 9999s ease-in-out 0s;
}
html:not(.dark) input:-webkit-autofill,
html:not(.dark) input:-webkit-autofill:hover,
html:not(.dark) input:-webkit-autofill:focus {
-webkit-text-fill-color: #18181b;
-webkit-box-shadow: 0 0 0 1000px #f4f4f5 inset;
box-shadow: 0 0 0 1000px #f4f4f5 inset;
caret-color: #18181b;
}
/* Двухстрочное усечение с многоточием. Своя реализация (не Tailwind utility):
line-clamp может отсутствовать в локальной сборке Tailwind (vendor/tailwind.js). */
.clamp-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
white-space: normal; /* переопределить унаследованный whitespace-nowrap (топбар/Row) */
overflow-wrap: anywhere;
}