/* Единая дизайн-система с invoice-ocr-bot/web (см. Контекст/ВЕБ_ДИЗАЙН.md того проекта) — те же токены, тот же механизм переключения темы (`data-theme` на , не Tailwind-класс `dark`), чтобы оба продукта клиента выглядели одной системой и не зависели от Tailwind-варианта `dark:` (который завязан на системную тему ОС, если явно не переопределить — источник багов, с которыми уже сталкивались в этом проекте). Все цвета в разметке — только через var(--...), никогда не захардкоженные классы вроде bg-purple-600. */ :root { --background: #f6f7f9; --surface: #ffffff; --foreground: #1d2433; --muted: #f0f2f5; --muted-foreground: #687385; --border: #e4e7ec; --accent: #f3e8ff; --accent-foreground: #6d28d9; --navigation-active-foreground: var(--accent-foreground); --success-background: #dcfce7; --success-border: #86efac; --success-foreground: #15803d; --warning-background: #fef3c7; --warning-border: #fcd34d; --warning-foreground: #b45309; --danger-background: #fef2f2; --danger-border: #fecaca; --danger-foreground: #dc2626; --info-background: #e0f2fe; --info-border: #7dd3fc; --info-foreground: #0369a1; color-scheme: light; } :root[data-theme="dark"] { --background: #0b0d10; --surface: #14171b; --foreground: #e6e8eb; --muted: #1b1f25; --muted-foreground: #9ba3af; --border: #2b3038; --accent: #241a3a; --accent-foreground: #7c3aed; --navigation-active-foreground: #c4b5fd; --success-background: rgb(20 83 45 / 0.35); --success-border: #22c55e; --success-foreground: #86efac; --warning-background: rgb(120 53 15 / 0.35); --warning-border: #f59e0b; --warning-foreground: #fcd34d; --danger-background: rgba(69, 10, 10, 0.4); --danger-border: #991b1b; --danger-foreground: #f87171; --info-background: rgb(12 74 110 / 0.35); --info-border: #38bdf8; --info-foreground: #7dd3fc; color-scheme: dark; } /* До того как theme.js отработает и снимет этот атрибут, страница скрыта — иначе при заходе с сохранённой тёмной темой был бы виден мгновенный "флеш" светлой (или наоборот) до применения data-theme. */ html[data-theme-pending] { visibility: hidden; } body { font-family: "Inter", Arial, Helvetica, sans-serif; /* Явно, а не только через Tailwind-класс на : Tailwind CDN генерирует стили уже в браузере, асинхронно — до этого момента background/color не применены, и на долю секунды виден чёрный текст на непрокрашенном фоне (особенно заметно при частых dev-перезагрузках). */ background: var(--background); color: var(--foreground); } /* Иконки солнце/луна в переключателе темы — переключаются чистым CSS по селектору data-theme, без JS-манипуляций с classList на каждый клик. */ :root:not([data-theme="dark"]) .dark-only { display: none; } :root[data-theme="dark"] .light-only { display: none; } /* Ширина сайдбара переключается атрибутом на (см. sidebar.js), применяется синхронно до отрисовки — без "прыжка" ширины после загрузки. */ #sidebar { width: 16rem; min-width: 0; } #sidebar .sidebar-label, #sidebar .sidebar-brand-full { display: inline; } #sidebar .sidebar-brand-short { display: none; } html[data-sidebar-collapsed] #sidebar { width: 76px; } html[data-sidebar-collapsed] #sidebar .sidebar-label { display: none; } html[data-sidebar-collapsed] #sidebar .sidebar-brand-full { display: none; } html[data-sidebar-collapsed] #sidebar .sidebar-brand-short { display: inline; } html[data-sidebar-collapsed] #sidebar .sidebar-nav-item { justify-content: center; padding-left: 0.5rem; padding-right: 0.5rem; } html[data-sidebar-collapsed] #collapse-icon { transform: rotate(180deg); } /* Выпадающие меню на