/* ============================================================================ brabrabra admin — дизайн-система v2 (минимал / SaaS). Направление: чистый минимал (Linear/Vercel/Stripe) — воздух, тонкие серые линии, плоско, минимум теней. Акцент: графит + синий. Тема: светлая + переключатель тёмной (data-theme на ). Семантические токены (--bg/--surface/--border/--text/--accent…) — для новых компонентов. Legacy-алиасы (--brand/--line/--ink/--accent…) указывают на ту же палитру, чтобы ещё не мигрированные страницы сразу взяли новый стиль. ========================================================================== */ :root { /* — Семантические токены (СВЕТЛАЯ тема) — */ --bg: #ffffff; --bg-subtle: #fafbfc; --surface: #ffffff; --surface-2: #f6f8fa; --surface-3: #eef1f5; --border: #e7eaee; --border-strong: #d6dbe2; --text: #0f172a; /* графит */ --text-muted: #475569; /* контрастнее для читаемости */ --text-faint: #7c8696; --accent: #2563eb; /* синий */ --accent-hover: #1d4ed8; --accent-soft: #eff5ff; --accent-border: #c7dbff; --on-accent: #ffffff; --ok: #16a34a; --ok-soft: #ecfdf3; --warn: #d97706; --warn-soft: #fffaeb; --danger: #dc2626; --danger-soft: #fef2f2; --info: #2563eb; --info-soft: #eff5ff; /* — Типографика — */ --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; --fs-xs: 11.5px; --fs-sm: 12.5px; --fs-md: 13.5px; --fs-lg: 15px; --fs-xl: 19px; --fs-2xl: 26px; /* — Отступы (4px-шкала), радиусы, тени (плоско — тень только для оверлеев) — */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --shadow-pop: 0 8px 24px rgba(15, 23, 42, .12); /* — Каркас — */ --sidebar-w: 256px; --sidebar-rail: 64px; --topbar-h: 56px; --content-max: 1200px; --content-max-report: 1480px; --z-sidebar: 40; --z-topbar: 45; --z-overlay: 60; /* — Сайдбар: всегда тёмный (как референс), не зависит от темы контента — */ --side-bg: #0e1422; --side-text: #c4cedb; --side-title: #647288; --side-hover: rgba(255, 255, 255, .06); --side-active-bg: rgba(255, 255, 255, .10); --side-active-text: #ffffff; --side-border: rgba(255, 255, 255, .07); /* — Legacy-алиасы (для немигрированных страниц) — */ --brand: var(--accent); --brand-dark: var(--accent-hover); --brand-soft: var(--accent-soft); --ink: var(--text); --muted: var(--text-muted); --faint: var(--text-faint); --line: var(--border); --line-soft: var(--surface-3); --panel: var(--surface); --page: var(--bg-subtle); color-scheme: light; } /* — ТЁМНАЯ тема — */ :root[data-theme="dark"] { --bg: #0c1118; --bg-subtle: #0c1118; --surface: #131a24; --surface-2: #18212d; --surface-3: #1f2a38; --border: #25303f; --border-strong: #33414f; --text: #e7eef6; --text-muted: #9aa7b6; --text-faint: #6b7888; --accent: #3b82f6; --accent-hover: #60a5fa; --accent-soft: #15233c; --accent-border: #1e3a64; --on-accent: #ffffff; --ok: #34d399; --ok-soft: #0e2a20; --warn: #fbbf24; --warn-soft: #2a2110; --danger: #f87171; --danger-soft: #2c1517; --info: #60a5fa; --info-soft: #15233c; --shadow-pop: 0 8px 24px rgba(0, 0, 0, .5); color-scheme: dark; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg-subtle); color: var(--text); font-family: var(--font); font-size: var(--fs-md); line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: inherit; } .brand { color: var(--accent); } /* ============================================================================ КАРКАС: сайдбар + контент. Единая модель скролла (документ скроллит сам, сайдбар sticky со своим overflow). Никаких height:100vh на контенте. ========================================================================== */ .admin-app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns .18s ease; } /* свёрнуто (десктоп) → узкий рельс с иконками, НЕ скрытие */ body.nav-collapsed .admin-app { grid-template-columns: var(--sidebar-rail) minmax(0, 1fr); } .admin-sidebar { grid-column: 1; background: var(--side-bg); color: var(--side-text); overflow: hidden; } /* сайдбар скроллится сам (height:100vh), контент — отдельно: блоки разделены */ .admin-sidebar-inner { position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-4) var(--sp-3); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; } .admin-sidebar-inner::-webkit-scrollbar { width: 8px; } .admin-sidebar-inner::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 8px; } /* рельс: только иконки по центру, подписи/заголовки групп скрыты */ body.nav-collapsed .admin-sidebar-inner { padding-left: 0; padding-right: 0; align-items: center; } body.nav-collapsed .nav-label, body.nav-collapsed .admin-nav-group-title, body.nav-collapsed .admin-brand-text { display: none; } body.nav-collapsed .admin-nav a { justify-content: center; width: 44px; padding: 9px 0; margin: 0 auto; } body.nav-collapsed .admin-brand { justify-content: center; } .admin-content { grid-column: 2; min-width: 0; display: flex; flex-direction: column; } .admin-topbar { position: sticky; top: 0; z-index: var(--z-topbar); min-height: var(--topbar-h); display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-5); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); } .admin-topbar .spacer { flex: 1 1 auto; } .icon-btn { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text-muted); cursor: pointer; font-size: 15px; line-height: 1; } .icon-btn:hover { color: var(--text); border-color: var(--border-strong); } .admin-main { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--sp-6) var(--sp-6) var(--sp-8); flex: 1; } body.is-report .admin-main { max-width: var(--content-max-report); } .admin-footer { max-width: var(--content-max); width: 100%; margin: 0 auto; padding: var(--sp-5) var(--sp-6) var(--sp-8); color: var(--text-faint); font-size: var(--fs-sm); } body.is-report .admin-footer { max-width: var(--content-max-report); } /* ============================================================================ БРЕНД / ПОЛЬЗОВАТЕЛЬ ========================================================================== */ .admin-brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; padding: 4px 8px; } .admin-mark { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--r-md); background: var(--text); color: var(--bg); font-weight: 800; font-size: 15px; } .admin-mark.sm { width: 28px; height: 28px; font-size: 13px; } .admin-brand-title { font-size: var(--fs-lg); font-weight: 750; line-height: 1.15; letter-spacing: -.01em; } .admin-brand-subtitle { margin-top: 1px; color: var(--text-faint); font-size: var(--fs-sm); font-weight: 500; } /* бренд в тёмном сайдбаре */ .admin-sidebar .admin-mark { background: var(--accent); color: #fff; } .admin-sidebar .admin-brand-title { color: #fff; } .admin-sidebar .admin-brand-subtitle { color: var(--side-title); } .admin-user { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-muted); font-size: var(--fs-md); } .admin-user a { font-weight: 650; color: var(--text-muted); text-decoration: none; } .admin-user a:hover { color: var(--text); } .admin-user a.danger:hover { color: var(--danger); } .admin-avatar { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--surface-3); color: var(--text); font-weight: 700; font-size: 12px; } /* ============================================================================ НАВИГАЦИЯ ========================================================================== */ .admin-nav { display: flex; flex-direction: column; gap: var(--sp-4); } .admin-nav-group-title { margin: 0 0 var(--sp-2); padding: 0 10px; color: var(--side-title); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .admin-nav-list { display: grid; gap: 2px; } .admin-nav a { position: relative; min-height: 36px; display: flex; align-items: center; gap: 10px; border-radius: var(--r-sm); padding: 8px 10px; color: var(--side-text); font-size: var(--fs-md); font-weight: 500; text-decoration: none; transition: background .14s, color .14s; } .admin-nav a > i, .admin-nav a > svg { width: 18px; height: 18px; flex: 0 0 auto; opacity: .85; } .admin-nav .nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .admin-nav a:hover { background: var(--side-hover); color: #fff; } .admin-nav a:hover > i, .admin-nav a:hover > svg { opacity: 1; } .admin-nav a.is-active { background: var(--side-active-bg); color: var(--side-active-text); font-weight: 600; } .admin-nav a.is-active > i, .admin-nav a.is-active > svg { opacity: 1; color: var(--accent); } .admin-nav a.is-active::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); } body.nav-collapsed .admin-nav a.is-active::before { display: none; } /* ============================================================================ КОМПОНЕНТЫ (плоско — границы вместо теней) ========================================================================== */ .admin-panel, .admin-card { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); } .admin-card-pad { padding: var(--sp-5); } .page-header { margin-bottom: var(--sp-6); } .page-title { margin: 0; font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.02em; } .page-subtitle { margin: var(--sp-2) 0 0; color: var(--text-muted); font-size: var(--fs-md); max-width: 72ch; } .filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); margin-bottom: var(--sp-6); } .filter-field { display: flex; flex-direction: column; gap: 4px; } .filter-field > label { font-size: var(--fs-sm); font-weight: 650; color: var(--text-muted); } .admin-input, .admin-select { min-height: 38px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 8px 11px; font-size: var(--fs-md); color: var(--text); background: var(--surface); } .admin-input:focus, .admin-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .admin-label { display: block; font-size: var(--fs-sm); font-weight: 650; color: var(--text-muted); margin-bottom: 4px; } .admin-btn { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); border-radius: var(--r-sm); padding: 9px 14px; font-size: var(--fs-md); font-weight: 650; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background .14s, border-color .14s, color .14s; } .admin-btn-primary { background: var(--accent); color: var(--on-accent); } .admin-btn-primary:hover { background: var(--accent-hover); } .admin-btn-secondary { border-color: var(--border-strong); background: var(--surface); color: var(--text); } .admin-btn-secondary:hover { background: var(--surface-2); } .admin-btn-ghost { background: transparent; color: var(--text-muted); } .admin-btn-ghost:hover { background: var(--surface-2); color: var(--text); } .admin-btn-sm { min-height: 30px; padding: 5px 10px; font-size: var(--fs-sm); } .badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 99px; font-size: var(--fs-xs); font-weight: 650; background: var(--surface-3); color: var(--text-muted); } .badge-ok { background: var(--ok-soft); color: var(--ok); } .badge-warn { background: var(--warn-soft); color: var(--warn); } .badge-danger { background: var(--danger-soft); color: var(--danger); } .badge-info { background: var(--info-soft); color: var(--info); } .status-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--text-faint); } .status-dot.ok { background: var(--ok); } .status-dot.warn { background: var(--warn); } .status-dot.danger { background: var(--danger); } .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-6); } .kpi-card { padding: var(--sp-4) var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); } .kpi-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); } .kpi-value { margin-top: 6px; font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .kpi-delta { margin-top: 4px; font-size: var(--fs-sm); font-weight: 650; } .kpi-delta.up { color: var(--ok); } .kpi-delta.down { color: var(--danger); } .admin-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); } .admin-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); } .admin-table th, .admin-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; } .admin-table th { position: sticky; top: 0; background: var(--surface-2); color: var(--text-muted); font-weight: 650; font-size: var(--fs-sm); z-index: 1; } .admin-table tbody tr:last-child td { border-bottom: 0; } .admin-table tbody tr:hover { background: var(--surface-2); } .admin-table td.num, .admin-table th.num { text-align: right; font-variant-numeric: tabular-nums; } .empty-state { text-align: center; padding: var(--sp-8) var(--sp-5); color: var(--text-muted); } .empty-state .empty-icon { font-size: 30px; opacity: .5; } .empty-state .empty-title { margin-top: var(--sp-3); font-size: var(--fs-lg); font-weight: 700; color: var(--text); } .empty-state .empty-text { margin-top: var(--sp-2); font-size: var(--fs-md); max-width: 48ch; margin-inline: auto; } .help-note { display: flex; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--r-sm); background: var(--accent-soft); color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-5); } /* — Алерт-баннеры (saved/error на формах) — */ .alert { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-sm); font-size: var(--fs-md); font-weight: 600; margin-bottom: var(--sp-4); } .alert-ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, transparent); color: var(--ok); } .alert-danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger); } .alert-warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); color: var(--warn); } /* — Чекбокс/радио в фирменный акцент — */ input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); } /* — Внутристраничные вкладки (сегментированный бар под заголовком) — единый компонент для под-разделов: дашборды, метрики отчётов и т.п. Разметка: */ .page-tabs { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); overflow-x: auto; scrollbar-width: thin; margin-bottom: var(--sp-6); } .page-tab { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 8px 14px; border-radius: var(--r-sm); border: 1px solid transparent; font-size: var(--fs-md); font-weight: 600; color: var(--text-muted); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .14s, color .14s; } .page-tab > i, .page-tab > svg { width: 16px; height: 16px; flex: 0 0 auto; opacity: .8; } .page-tab:hover { color: var(--text); } .page-tab.is-active { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: 0 1px 2px rgba(15, 23, 42, .05); } .page-tab.is-active > i, .page-tab.is-active > svg { opacity: 1; color: var(--accent); } /* — Хелперы (типографика/кликабельные карточки/списки разделов) — */ .t-muted { color: var(--text-muted); } .t-faint { color: var(--text-faint); } .section-title { margin: 0; font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em; } .section-sub { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--text-muted); } .card-link { text-decoration: none; transition: border-color .14s, background .14s; } .card-link:hover { border-color: var(--border-strong); background: var(--surface-2); } .list-rows > a { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 12px 0; border-top: 1px solid var(--border); text-decoration: none; } .list-rows > a:first-child { border-top: 0; } .list-rows .row-title { font-weight: 650; color: var(--text); } .list-rows > a:hover .row-title { color: var(--accent); } .list-rows .row-sub { margin-top: 2px; font-size: var(--fs-sm); color: var(--text-muted); } .list-rows .row-meta { font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted); white-space: nowrap; } /* ============================================================================ АДАПТИВ ========================================================================== */ @media (max-width: 1040px) { /* мобильный: сайдбар — выезжающий оверлей; рельс НЕ применяем */ .admin-app, body.nav-collapsed .admin-app { grid-template-columns: minmax(0, 1fr); } .admin-sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: var(--z-sidebar); transform: translateX(-100%); box-shadow: var(--shadow-pop); } body.nav-open .admin-sidebar { transform: translateX(0); } body.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(15,23,42,.4); z-index: calc(var(--z-sidebar) - 1); } .admin-content { grid-column: 1; } /* на мобильном показываем полный сайдбар (подписи), а не рельс */ body.nav-collapsed .nav-label, body.nav-collapsed .admin-nav-group-title, body.nav-collapsed .admin-brand-text { display: revert; } body.nav-collapsed .admin-sidebar-inner { padding: var(--sp-4) var(--sp-3); align-items: stretch; } body.nav-collapsed .admin-nav a { justify-content: flex-start; width: auto; padding: 8px 10px; margin: 0; } body.nav-collapsed .admin-brand { justify-content: flex-start; } } @media (max-width: 720px) { .admin-main, .admin-footer { padding-left: var(--sp-4); padding-right: var(--sp-4); } .admin-main { padding-top: var(--sp-5); } .page-title { font-size: var(--fs-xl); } } /* ============================================================================ DARK-MODE COMPAT SHIM Ещё не мигрированные страницы используют хардкод-утилиты Tailwind (text-slate-950, bg-white, border-slate-200 …), которые не реагируют на тёмную тему → тёмный текст на тёмном фоне. Пока страницы не переведены на токены — в тёмной теме переопределяем эти утилиты на наши токены, чтобы всё оставалось читаемым. По мере миграции страниц шим становится не нужен (но безвреден). Селектор [data-theme=dark] .class имеет специфичность выше одиночной утилиты → перебивает без !important. ========================================================================== */ :root[data-theme="dark"] .text-slate-950, :root[data-theme="dark"] .text-slate-900, :root[data-theme="dark"] .text-slate-800, :root[data-theme="dark"] .text-black { color: var(--text); } :root[data-theme="dark"] .text-slate-700, :root[data-theme="dark"] .text-slate-600 { color: #c4cedb; } :root[data-theme="dark"] .text-slate-500, :root[data-theme="dark"] .text-slate-400, :root[data-theme="dark"] .text-slate-300 { color: var(--text-muted); } :root[data-theme="dark"] .bg-white { background-color: var(--surface); } :root[data-theme="dark"] .bg-slate-50, :root[data-theme="dark"] .bg-slate-100 { background-color: var(--surface-2); } :root[data-theme="dark"] .bg-slate-900, :root[data-theme="dark"] .bg-slate-950 { background-color: var(--surface-2); } :root[data-theme="dark"] .border-slate-100, :root[data-theme="dark"] .border-slate-200, :root[data-theme="dark"] .border-slate-300 { border-color: var(--border); } :root[data-theme="dark"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]), :root[data-theme="dark"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border); } /* статусные цвета на тёмном — ярче */ :root[data-theme="dark"] .text-emerald-700, :root[data-theme="dark"] .text-emerald-300 { color: var(--ok); } :root[data-theme="dark"] .text-rose-700, :root[data-theme="dark"] .text-rose-300 { color: var(--danger); } :root[data-theme="dark"] .text-amber-700, :root[data-theme="dark"] .text-amber-300 { color: var(--warn); } :root[data-theme="dark"] .bg-rose-50 { background-color: var(--danger-soft); } /* инпуты/селекты с хардкод-утилитами */ :root[data-theme="dark"] input.bg-white, :root[data-theme="dark"] select.bg-white, :root[data-theme="dark"] textarea.bg-white { color: var(--text); border-color: var(--border-strong); } :root[data-theme="dark"] ::placeholder { color: var(--text-faint); }