/* ============================================================ ТЕМА КАБИНЕТА: shadcn/ui (палитра zinc) — боевой дизайн с 07-2026. Значения токенов живут в base.html (:root + html.dark); здесь — компонентные правила поверх утилит: карточки-бордеры, сайдбар, таблицы, бейджи, primary-кнопки, тултипы чартов. Класс skin-shadcn на — якорь специфичности каскада (правила темы обязаны бить tailwind-утилиты, включая dark:-варианты). Бренд-синий #3da9fc (--hue-accent) сознательно не «зинкован»: графики, ссылки, активные состояния — фирменные. ============================================================ */ /* ---- Карточки: бордер вместо тени, спокойный ховер без подъёма ---- */ html.skin-shadcn main .shadow-card { border: 1px solid rgb(var(--line)); } /* сводка MedScore: вернуть фирменную синюю полосу слева (убита shorthand'ом выше) */ html.skin-shadcn main .border-l-4 { border-left-width: 4px; border-left-color: rgb(var(--hue-accent)); } /* ---- Типографика: без uppercase (kpi-* канон живёт в cabinet.css) ---- */ html.skin-shadcn main .uppercase { text-transform: none; letter-spacing: 0; } html.skin-shadcn main h1 { font-weight: 600; letter-spacing: -0.025em; } html.skin-shadcn main h3 { font-weight: 600; } html.skin-shadcn main .font-extrabold { font-weight: 600; } /* ---- Сайдбар: light-скин = светлый с бордером (канон shadcn dashboard) ---- */ html.skin-shadcn:not(.dark) #sidebar { background: #ffffff; border-right: 1px solid rgb(var(--line)); } html.skin-shadcn:not(.dark) #sidebar [class*="text-hue-soft"] { color: #3f3f46; } html.skin-shadcn:not(.dark) #sidebar [class*="text-hue-soft"]:hover { color: #09090b; background-color: #f4f4f5; } html.skin-shadcn:not(.dark) #sidebar .text-white { color: #09090b; } html.skin-shadcn:not(.dark) #sidebar .border-t { border-color: rgb(var(--line)); } /* активный пункт: canonical secondary-заливка + бренд-синий индикатор слева */ html.skin-shadcn #sidebar .sb-item.bg-hue-accent { position: relative; box-shadow: none; } html.skin-shadcn #sidebar .sb-item.bg-hue-accent::before { content: ''; position: absolute; left: 0; top: 22%; height: 56%; width: 3px; border-radius: 2px; background: rgb(var(--hue-accent)); } html.skin-shadcn:not(.dark) #sidebar .sb-item.bg-hue-accent { background: #f4f4f5; color: #09090b; } html.skin-shadcn:not(.dark) #sidebar .sb-item.bg-hue-accent:hover { background: #e4e4e7; } /* dark: пункты zinc-400, ховер мягкий */ html.skin-shadcn.dark #sidebar [class*="text-hue-soft"] { color: #a1a1aa; } html.skin-shadcn.dark #sidebar [class*="text-hue-soft"]:hover { color: #fafafa; background-color: rgb(255 255 255 / 0.06); } html.skin-shadcn.dark #sidebar .sb-item.bg-hue-accent { background: rgb(255 255 255 / 0.08); color: #fafafa; } html.skin-shadcn.dark #sidebar .sb-item.bg-hue-accent:hover { background: rgb(255 255 255 / 0.12); } /* ---- Мобильная шапка под тон сайдбара ---- */ html.skin-shadcn:not(.dark) #mobile-topbar { background: #ffffff; color: #09090b; border-bottom: 1px solid rgb(var(--line)); box-shadow: none; } html.skin-shadcn.dark #mobile-topbar { border-bottom: 1px solid rgb(var(--line)); box-shadow: none; } /* ---- Чипы клиник: активный = primary (тёмный), ховер неактивных нейтральный ---- */ html.skin-shadcn main span.bg-hue-accent { background-color: rgb(var(--primary)); color: rgb(var(--primary-fg)); } html.skin-shadcn main button.bg-hue-soft:hover { background-color: #e4e4e7; color: rgb(var(--hue-ink)); } html.skin-shadcn.dark main button.bg-hue-soft:hover { background-color: #3f3f46; color: rgb(var(--hue-dink)); } /* ---- Инпуты/селекты фильтра: бордер zinc вместо голубого ---- */ html.skin-shadcn main select, html.skin-shadcn main input[type="date"] { border-color: rgb(var(--line)); } /* ============================================================ ДОЖИМ ДО КАНОНА (раунд 2 после «разницы не вижу»): светофор и эмодзи — главные носители старого языка — глушатся, семантика уезжает в детали. ============================================================ */ /* ---- KPI-цифры: нейтральные (canon); семантика остаётся в мелких дельтах ---- */ html.skin-shadcn main .kpi-number { color: rgb(var(--hue-ink)); } html.skin-shadcn.dark main .kpi-number { color: rgb(var(--hue-dink)); } /* ---- Пилюли оценок операторов: цветная заливка → outline + статусная точка ---- */ html.skin-shadcn main .bg-emerald-100, html.skin-shadcn main .bg-amber-100 { background: transparent; border: 1px solid rgb(var(--line)); font-weight: 600; } html.skin-shadcn main .text-emerald-800, html.skin-shadcn main .text-amber-800 { color: rgb(var(--hue-ink)); } html.skin-shadcn.dark main .text-emerald-800, html.skin-shadcn.dark main .text-amber-800 { color: rgb(var(--hue-dink)); } html.skin-shadcn main .bg-emerald-100::before, html.skin-shadcn main .bg-amber-100::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 9999px; margin-right: 6px; vertical-align: middle; } html.skin-shadcn main .bg-emerald-100::before { background: #10b981; } html.skin-shadcn main .bg-amber-100::before { background: #f59e0b; } /* ---- Danger-бейджи (оценки red + причины горячих): заливка → destructive outline. nowrap: бордер добавил 2px ширины, «без записи» начинал переноситься ---- */ html.skin-shadcn main [class*="bg-hue-danger/10"] { background: transparent; border: 1px solid rgb(var(--hue-danger) / 0.35); white-space: nowrap; } /* ---- Медали 🥇🥈🥉 → номера (текст подменяет skin-JS в base.html) ---- */ html.skin-shadcn main .text-lg.w-7 { font-size: 0.8125rem; color: rgb(var(--hue-muted)); font-variant-numeric: tabular-nums; } /* ============================================================ РАСКАТКА НА ВЕСЬ КАБИНЕТ (07-2026): паттерны остальных страниц — таблицы, формы, auth-карточки, primary-кнопки, мобильные t-cards. ============================================================ */ /* ---- Auth-страницы: карточка живёт вне
---- */ html.skin-shadcn .min-h-full > .shadow-card { border: 1px solid rgb(var(--line)); } /* ---- Primary-кнопки: сплошная бренд-синяя заливка → нейтральный primary. Бренд остаётся в ссылках/фокус-рингах/активных состояниях. ---- */ html.skin-shadcn button.bg-hue-accent, html.skin-shadcn a.bg-hue-accent, html.skin-shadcn input[type="submit"].bg-hue-accent { background-color: rgb(var(--primary)); color: rgb(var(--primary-fg)); } /* ---- Таблицы: бордеры рядов/шапки на line-токене ---- */ html.skin-shadcn main thead tr, html.skin-shadcn main tbody tr { border-bottom-color: rgb(var(--line)); } html.skin-shadcn main table + p.border-t, html.skin-shadcn main .border-t { border-top-color: rgb(var(--line)); } /* ---- Ховеры бордеров, убитые border-шортхендом карточек ---- */ html.skin-shadcn main [class*="hover:border-hue-accent"]:hover { border-color: rgb(var(--hue-accent)); } /* ---- font-bold → semibold (канон); сайдбар-лого вне main не трогаем ---- */ html.skin-shadcn main .font-bold { font-weight: 600; } /* ---- Статус-пилюля bg-green-100 («включена» и т.п.) — в один ряд с emerald ---- */ html.skin-shadcn main .bg-green-100 { background: transparent; border: 1px solid rgb(var(--line)); font-weight: 600; } html.skin-shadcn main .bg-green-100::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 9999px; margin-right: 6px; vertical-align: middle; background: #10b981; } /* ---- Дарк-фиксы серых утилит без dark:-вариантов (QR-подложки, код, роли) ---- */ html.skin-shadcn.dark .bg-gray-50 { background-color: #18181b; } html.skin-shadcn.dark .bg-gray-100 { background-color: #27272a; } html.skin-shadcn.dark .bg-white { background-color: #18181b; } html.skin-shadcn.dark .bg-red-50 { background-color: rgb(127 29 29 / 0.2); } html.skin-shadcn.dark .text-red-700 { color: #f87171; } /* ---- ApexCharts: тултипы в духе shadcn (белая/чёрная карточка с бордером) ---- */ html.skin-shadcn .apexcharts-tooltip { border: 1px solid rgb(var(--line)) !important; border-radius: 8px !important; box-shadow: 0 4px 16px rgb(0 0 0 / 0.08) !important; } html.skin-shadcn:not(.dark) .apexcharts-tooltip { background: #ffffff !important; color: #09090b !important; } html.skin-shadcn:not(.dark) .apexcharts-tooltip-title { background: #fafafa !important; border-bottom: 1px solid rgb(var(--line)) !important; } html.skin-shadcn.dark .apexcharts-tooltip { background: #09090b !important; color: #fafafa !important; box-shadow: 0 4px 16px rgb(0 0 0 / 0.4) !important; } html.skin-shadcn.dark .apexcharts-tooltip-title { background: #09090b !important; border-bottom: 1px solid rgb(var(--line)) !important; }