📋
(или
============================================================ */
.empty-state {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: var(--sp-3);
padding: var(--sp-12) var(--sp-6);
text-align: center;
color: var(--text-muted);
border: 1px dashed var(--border);
border-radius: var(--r-lg);
background: var(--bg-surface);
}
.empty-state-icon {
width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center;
border-radius: var(--r-full);
background: var(--bg-card);
color: var(--text-dim);
font-size: 22px;
}
.empty-state-icon svg { width: 22px; height: 22px; }
.empty-state-title {
margin: 0;
font-size: var(--text-h3);
font-weight: 600;
color: var(--text-primary);
}
.empty-state-desc {
margin: 0;
font-size: var(--text-sm);
color: var(--text-muted);
max-width: 42ch;
line-height: var(--lh-base);
}
.empty-state-cta {
margin-top: var(--sp-2);
display: inline-flex; align-items: center; gap: var(--sp-2);
min-height: 44px;
padding: 0 var(--sp-4);
background: var(--accent-blue);
color: #fff;
font-size: var(--text-sm);
font-weight: 600;
border-radius: var(--r-md);
text-decoration: none;
transition: background-color .15s, transform .15s;
}
.empty-state-cta:hover { background: var(--accent-blue); filter: brightness(1.08); transform: translateY(-1px); }
.empty-state-presets {
display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center;
margin-top: var(--sp-2);
}
.empty-state-presets a {
font-size: var(--text-xs);
padding: 6px 10px;
border: 1px solid var(--border);
border-radius: var(--r-full);
color: var(--text-muted);
text-decoration: none;
}
.empty-state-presets a:hover { color: var(--accent-blue); border-color: var(--accent-blue); }
/* ============================================================
PAGE HEADER — единая шапка страницы (title + опционально KPI inline)
Использование:
============================================================ */
.page-header {
display: flex; justify-content: space-between; align-items: flex-end;
gap: var(--sp-4); flex-wrap: wrap;
margin-bottom: var(--sp-5);
}
.page-header-title {
margin: 0 0 var(--sp-1);
font-size: var(--text-h1);
font-weight: 700;
letter-spacing: var(--tracking-tight);
color: var(--text-primary);
}
.page-header-title span { color: var(--text-muted); font-weight: 500; }
.page-header-sub {
margin: 0;
font-size: var(--text-xs);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
}
.page-header-kpis {
display: flex; gap: var(--sp-5); flex-wrap: wrap;
}
.page-header-kpi {
font-size: var(--text-sm);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
}
.page-header-kpi b {
display: inline-block; min-width: 1.5ch;
margin-right: var(--sp-1);
font-family: var(--font-mono);
font-size: var(--text-h2);
font-weight: 700;
color: var(--text-primary);
text-transform: none;
}
/* ============================================================
GLOBAL A11Y — focus-visible + skip-link
============================================================ */
*:focus-visible {
outline: 2px solid var(--accent-blue);
outline-offset: 2px;
border-radius: var(--r-sm);
}
.skip-link {
position: absolute;
left: 8px; top: -100px;
z-index: 9999;
padding: var(--sp-2) var(--sp-4);
background: var(--accent-blue);
color: #fff;
font-weight: 600;
text-decoration: none;
border-radius: var(--r-md);
}
.skip-link:focus { top: 8px; }
/* ============================================================
PULSE DOT (для алертов и live-индикаторов)
============================================================ */
@keyframes pulseDot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(1.6); }
}
.pulse-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--accent-green);
animation: pulseDot 2s ease-in-out infinite;
}
.pulse-dot.blue { background: var(--accent-blue); }
.pulse-dot.red { background: var(--accent-red); }
.pulse-dot.gold { background: var(--accent-gold); }
/* ============================================================
TICKER (бегущая лента алертов)
============================================================ */
@keyframes ticker {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.ticker-anim { animation: ticker 40s linear infinite; }
.ticker-anim:hover { animation-play-state: paused; }
/* ============================================================
TV / PRESENTATION MODE (font scaling для совещаний и больших экранов)
Применяется через data-font-scale="1.25|1.5|1.75|2" на .
TV-режим (data-tv="1") дополнительно: скрывает sidebar/FAB, расширяет container.
============================================================ */
html[data-font-scale="1.25"] body { zoom: 1.25; }
html[data-font-scale="1.5"] body { zoom: 1.5; }
html[data-font-scale="1.75"] body { zoom: 1.75; }
html[data-font-scale="2"] body { zoom: 2; }
/* TV-режим: чистый экран для проектора/большого монитора */
html[data-tv="1"] .cockpit-sidebar,
html[data-tv="1"] #cockpit-sidebar,
html[data-tv="1"] #ask-fab,
html[data-tv="1"] .ask-fab,
html[data-tv="1"] .cmdk-trigger,
html[data-tv="1"] .floating-help,
html[data-tv="1"] .pin-btn { display: none !important; }
html[data-tv="1"] main,
html[data-tv="1"] .container,
html[data-tv="1"] .cockpit-main {
margin-left: 0 !important;
max-width: 100% !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
html[data-tv="1"] .hero-banner,
html[data-tv="1"] .ai-narrative { padding: 28px 32px; }
html[data-tv="1"] body { font-size: 16px; }
/* Маленькая плашка-индикатор в углу когда TV-режим активен */
html[data-tv="1"]::after {
content: "TV";
position: fixed; top: 8px; right: 8px;
font-family: var(--font-mono);
font-size: 11px; font-weight: 700;
color: var(--accent-red);
background: rgba(239, 68, 68, 0.12);
border: 1px solid var(--accent-red);
padding: 3px 8px; border-radius: 4px;
letter-spacing: 0.08em;
pointer-events: none;
z-index: 9998;
}