/* =============================================================================
Телеферма — editorial design system (П0)
Подключение в HTML:
Каркас страницы:
...
============================================================================= */
/* --- Design tokens -------------------------------------------------------- */
:root {
/* Palette — warm neutral editorial */
--color-bg: #f7f4ef;
--color-bg-elevated: #ffffff;
--color-bg-muted: #ede8e0;
--color-bg-sidebar: #1c1917;
--color-bg-sidebar-hover: rgba(255, 255, 255, 0.06);
--color-bg-sidebar-active: rgba(196, 106, 58, 0.18);
--color-text: #292524;
--color-text-secondary: #57534e;
--color-text-muted: #78716c;
--color-text-inverse: #fafaf9;
--color-text-sidebar: #d6d3d1;
--color-text-sidebar-muted: #a8a29e;
/* Warm accent — terracotta */
--color-accent: #c46a3a;
--color-accent-hover: #a8562c;
--color-accent-soft: #f3e4d8;
--color-accent-ring: rgba(196, 106, 58, 0.35);
/* Semantic */
--color-success: #3d7a52;
--color-success-soft: #e3f0e8;
--color-warning: #b8860b;
--color-warning-soft: #faf0d4;
--color-danger: #b83a3a;
--color-danger-soft: #fce8e8;
--color-info: #3a6eb8;
--color-info-soft: #e4eef9;
/* Typography */
--font-serif: "DM Serif Display", Georgia, "Times New Roman", serif;
--font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 2rem;
--text-4xl: 2.5rem;
--leading-tight: 1.2;
--leading-normal: 1.5;
--leading-relaxed: 1.65;
/* Spacing */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
/* Layout */
--sidebar-width: 17.5rem;
--topbar-height: 4rem;
--content-max: 80rem;
--radius-sm: 0.375rem;
--radius-md: 0.625rem;
--radius-lg: 1rem;
--radius-xl: 1.25rem;
--radius-full: 9999px;
/* Elevation */
--shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.06);
--shadow-md: 0 4px 16px rgba(28, 25, 23, 0.08);
--shadow-lg: 0 12px 40px rgba(28, 25, 23, 0.1);
--shadow-card: 0 2px 8px rgba(28, 25, 23, 0.05), 0 8px 24px rgba(28, 25, 23, 0.06);
/* Motion */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--duration-fast: 120ms;
--duration-normal: 200ms;
}
/* --- Reset & base --------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
margin: 0;
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: var(--leading-normal);
color: var(--color-text);
background: var(--color-bg);
}
h1, h2, h3, h4 {
font-family: var(--font-serif);
font-weight: 400;
line-height: var(--leading-tight);
margin: 0 0 var(--space-3);
color: var(--color-text);
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
p {
margin: 0 0 var(--space-4);
color: var(--color-text-secondary);
}
a {
color: var(--color-accent);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-out);
}
a:hover {
color: var(--color-accent-hover);
}
img, svg {
display: block;
max-width: 100%;
}
/* --- App shell ------------------------------------------------------------ */
.app {
display: flex;
min-height: 100vh;
}
.app-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.page {
flex: 1;
padding: var(--space-8);
max-width: calc(var(--content-max) + var(--space-16));
margin-inline: auto;
}
.page-header {
margin-bottom: var(--space-8);
}
.page-header__eyebrow {
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: var(--space-2);
}
.page-header__title {
margin-bottom: var(--space-2);
}
.page-header__subtitle {
font-size: var(--text-sm);
color: var(--color-text-muted);
max-width: 42rem;
margin: 0;
}
.page-header__subtitle--full {
max-width: none;
}
/* --- Sidebar (left menu) -------------------------------------------------- */
.sidebar {
width: var(--sidebar-width);
flex-shrink: 0;
background: var(--color-bg-sidebar);
color: var(--color-text-sidebar);
display: flex;
flex-direction: column;
padding: var(--space-6) 0;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
.sidebar__brand {
padding: 0 var(--space-6) var(--space-6);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
margin-bottom: var(--space-4);
}
.sidebar__logo {
font-family: var(--font-serif);
font-size: var(--text-2xl);
color: var(--color-text-inverse);
line-height: 1.1;
}
.sidebar__tagline {
font-size: var(--text-xs);
color: var(--color-text-sidebar-muted);
margin-top: var(--space-1);
letter-spacing: 0.02em;
}
.sidebar__nav {
flex: 1;
padding: 0 var(--space-3);
}
.nav-section {
margin-bottom: var(--space-6);
}
.nav-section__label {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-sidebar-muted);
padding: 0 var(--space-3);
margin-bottom: var(--space-2);
}
.nav-list {
list-style: none;
margin: 0;
padding: 0;
}
.nav-item {
margin-bottom: var(--space-1);
}
.nav-link {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-3);
border-radius: var(--radius-md);
color: var(--color-text-sidebar);
font-size: var(--text-sm);
font-weight: 500;
transition:
background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.nav-link:hover {
background: var(--color-bg-sidebar-hover);
color: var(--color-text-inverse);
}
.nav-link.is-active {
background: var(--color-bg-sidebar-active);
color: #f5d0b8;
}
.nav-link__icon {
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
opacity: 0.75;
}
.nav-link.is-active .nav-link__icon {
opacity: 1;
color: var(--color-accent);
}
.sidebar__footer {
padding: var(--space-4) var(--space-6) 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
font-size: var(--text-xs);
color: var(--color-text-sidebar-muted);
}
/* --- Topbar (header) ------------------------------------------------------ */
.topbar {
height: var(--topbar-height);
padding: 0 var(--space-8);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
background: var(--color-bg-elevated);
border-bottom: 1px solid var(--color-bg-muted);
position: sticky;
top: 0;
z-index: 10;
}
.topbar__breadcrumb {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.topbar__breadcrumb a {
color: var(--color-text-muted);
}
.topbar__breadcrumb a:hover {
color: var(--color-accent);
}
.topbar__breadcrumb-sep {
opacity: 0.4;
}
.topbar__actions {
display: flex;
align-items: center;
gap: var(--space-3);
}
.topbar__site-name {
font-weight: 600;
color: var(--color-text);
}
/* --- Grid & layout helpers ------------------------------------------------ */
.grid {
display: grid;
gap: var(--space-6);
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1200px) {
.grid--5,
.grid--4 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.grid--2,
.grid--3,
.grid--4,
.grid--5 { grid-template-columns: 1fr; }
.sidebar {
display: none;
}
.page {
padding: var(--space-4);
}
}
.stack {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.row {
display: flex;
align-items: center;
gap: var(--space-4);
flex-wrap: wrap;
}
/* --- Card (base) ---------------------------------------------------------- */
.card {
background: var(--color-bg-elevated);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
border: 1px solid rgba(28, 25, 23, 0.04);
overflow: hidden;
}
.card__header {
padding: var(--space-5) var(--space-6);
border-bottom: 1px solid var(--color-bg-muted);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
}
.card__title {
font-family: var(--font-serif);
font-size: var(--text-xl);
margin: 0;
}
.card__subtitle {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin: var(--space-1) 0 0;
}
.card__body {
padding: var(--space-6);
}
.card__footer {
padding: var(--space-4) var(--space-6);
border-top: 1px solid var(--color-bg-muted);
background: var(--color-bg);
font-size: var(--text-sm);
color: var(--color-text-muted);
}
/* --- KPI card ------------------------------------------------------------- */
.kpi-card {
background: var(--color-bg-elevated);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
border: 1px solid rgba(28, 25, 23, 0.04);
padding: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-3);
transition: transform var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out);
}
.kpi-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.kpi-card__label {
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.kpi-card__value {
font-family: var(--font-serif);
font-size: var(--text-3xl);
line-height: 1;
color: var(--color-text);
}
.kpi-card__unit {
font-family: var(--font-sans);
font-size: var(--text-lg);
font-weight: 400;
color: var(--color-text-muted);
margin-left: var(--space-1);
}
.kpi-card__delta {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-sm);
font-weight: 600;
}
.kpi-card__delta--up {
color: var(--color-success);
}
.kpi-card__delta--down {
color: var(--color-danger);
}
.kpi-card__delta--neutral {
color: var(--color-text-muted);
}
.kpi-card__spark {
height: 2.5rem;
margin-top: auto;
opacity: 0.7;
}
.kpi-card--accent {
background: linear-gradient(135deg, var(--color-accent) 0%, #a8562c 100%);
border-color: transparent;
}
.kpi-card--accent .kpi-card__label,
.kpi-card--accent .kpi-card__value,
.kpi-card--accent .kpi-card__unit,
.kpi-card--accent .kpi-card__delta {
color: var(--color-text-inverse);
}
.kpi-card--accent .kpi-card__delta--up,
.kpi-card--accent .kpi-card__delta--down {
color: rgba(255, 255, 255, 0.9);
}
.kpi-card--accent .gauge-bar__label,
.kpi-card--accent .gauge-bar__value {
color: rgba(255, 255, 255, 0.9);
}
.kpi-card--accent .gauge-bar__track {
background: rgba(255, 255, 255, 0.25);
}
.kpi-card--forecast {
gap: var(--space-3);
}
.kpi-card__forecast-text {
margin: 0;
font-family: var(--font-serif);
font-size: var(--text-xl);
font-weight: 400;
line-height: 1.3;
color: var(--color-text-inverse);
}
.kpi-card__forecast-text strong {
font-weight: 600;
}
.kpi-card--accent .kpi-card__forecast-text {
color: var(--color-text-inverse);
}
.kpi-card--forecast .kpi-card__delta {
display: block;
font-weight: 500;
}
.kpi-card--section {
padding: var(--space-4);
gap: var(--space-2);
}
.kpi-card--section .kpi-card__header {
display: flex;
align-items: center;
justify-content: space-between;
}
.kpi-card--section .kpi-card__value {
font-size: var(--text-2xl);
}
.kpi-card__gauge {
margin-top: auto;
}
.kpi-card--accent .gauge-bar__fill--success {
background: rgba(255, 255, 255, 0.92);
}
/* --- Sensor gauge --------------------------------------------------------- */
.gauge {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
text-align: center;
}
.gauge__arc-wrap {
position: relative;
width: 7rem;
height: 4rem;
}
.gauge__svg {
width: 100%;
height: 100%;
overflow: visible;
}
.gauge__track {
fill: none;
stroke: var(--color-bg-muted);
stroke-width: 10;
stroke-linecap: round;
}
.gauge__fill {
fill: none;
stroke: var(--color-accent);
stroke-width: 10;
stroke-linecap: round;
transition: stroke-dashoffset var(--duration-normal) var(--ease-out);
}
.gauge__fill--success { stroke: var(--color-success); }
.gauge__fill--warning { stroke: var(--color-warning); }
.gauge__fill--danger { stroke: var(--color-danger); }
.gauge__fill--info { stroke: var(--color-info); }
.gauge__value {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-serif);
font-size: var(--text-xl);
line-height: 1;
color: var(--color-text);
}
.gauge__unit {
font-family: var(--font-sans);
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.gauge__label {
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-text-secondary);
}
.gauge__range {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
/* Compact inline gauge (bar) */
.gauge-bar {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.gauge-bar__header {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: var(--text-sm);
}
.gauge-bar__label {
font-weight: 600;
color: var(--color-text-secondary);
}
.gauge-bar__value {
font-weight: 600;
color: var(--color-text);
}
.gauge-bar__track {
height: 0.5rem;
background: var(--color-bg-muted);
border-radius: var(--radius-full);
overflow: hidden;
}
.gauge-bar__fill {
height: 100%;
border-radius: var(--radius-full);
background: var(--color-accent);
transition: width var(--duration-normal) var(--ease-out);
}
.gauge-bar__fill--success { background: var(--color-success); }
.gauge-bar__fill--warning { background: var(--color-warning); }
.gauge-bar__fill--danger { background: var(--color-danger); }
/* Gauge grid inside card */
.gauge-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
gap: var(--space-6);
}
/* --- Table ---------------------------------------------------------------- */
.table-wrap {
overflow-x: auto;
border-radius: var(--radius-md);
}
.table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
}
.table th,
.table td {
padding: var(--space-3) var(--space-4);
text-align: left;
border-bottom: 1px solid var(--color-bg-muted);
}
.table th {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-text-muted);
background: var(--color-bg);
}
.table tbody tr {
transition: background var(--duration-fast) var(--ease-out);
}
.table tbody tr:hover {
background: var(--color-accent-soft);
}
.table tbody tr:last-child td {
border-bottom: none;
}
.table td.num {
font-variant-numeric: tabular-nums;
text-align: right;
}
.table th.num {
text-align: right;
}
.table__empty {
text-align: center;
padding: var(--space-8);
color: var(--color-text-muted);
}
/* --- Badges --------------------------------------------------------------- */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 0.2em 0.65em;
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.02em;
border-radius: var(--radius-full);
white-space: nowrap;
line-height: 1.4;
}
.badge--default {
background: var(--color-bg-muted);
color: var(--color-text-secondary);
}
.badge--success {
background: var(--color-success-soft);
color: var(--color-success);
}
.badge--warning {
background: var(--color-warning-soft);
color: var(--color-warning);
}
.badge--danger {
background: var(--color-danger-soft);
color: var(--color-danger);
}
.badge--info {
background: var(--color-info-soft);
color: var(--color-info);
}
.badge--accent {
background: var(--color-accent-soft);
color: var(--color-accent);
}
.badge__dot {
width: 0.45rem;
height: 0.45rem;
border-radius: var(--radius-full);
background: currentColor;
flex-shrink: 0;
}
.badge--outline {
background: transparent;
border: 1px solid currentColor;
}
/* --- Tabs ----------------------------------------------------------------- */
.tabs {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.tabs__list {
display: flex;
gap: var(--space-1);
padding: var(--space-1);
background: var(--color-bg-muted);
border-radius: var(--radius-md);
width: fit-content;
flex-wrap: wrap;
}
.tabs__tab {
appearance: none;
border: none;
background: transparent;
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-text-muted);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-sm);
cursor: pointer;
transition:
background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
.tabs__tab:hover {
color: var(--color-text);
}
.tabs__tab.is-active {
background: var(--color-bg-elevated);
color: var(--color-text);
box-shadow: var(--shadow-sm);
}
.tabs__panel {
display: none;
}
.tabs__panel.is-active {
display: block;
animation: tab-fade-in var(--duration-normal) var(--ease-out);
}
@keyframes tab-fade-in {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Underline variant */
.tabs--underline .tabs__list {
background: none;
padding: 0;
border-bottom: 1px solid var(--color-bg-muted);
border-radius: 0;
width: 100%;
}
.tabs--underline .tabs__tab {
border-radius: 0;
margin-bottom: -1px;
border-bottom: 2px solid transparent;
}
.tabs--underline .tabs__tab.is-active {
background: none;
box-shadow: none;
border-bottom-color: var(--color-accent);
color: var(--color-accent);
}
/* --- Buttons (minimal, for topbar/actions) -------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: 600;
border-radius: var(--radius-md);
border: 1px solid transparent;
cursor: pointer;
transition:
background var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.btn--primary {
background: var(--color-accent);
color: var(--color-text-inverse);
}
.btn--primary:hover {
background: var(--color-accent-hover);
}
.btn--ghost {
background: transparent;
color: var(--color-text-secondary);
border-color: var(--color-bg-muted);
}
.btn--ghost:hover {
background: var(--color-bg-muted);
color: var(--color-text);
}
/* --- Chart placeholder (stub for prototype screens) ----------------------- */
.chart-placeholder {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-2);
height: 12rem;
padding: var(--space-4);
background: linear-gradient(180deg, var(--color-bg) 0%, transparent 100%);
border-radius: var(--radius-md);
}
.chart-placeholder__bar {
flex: 1;
background: var(--color-accent-soft);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
min-height: 1rem;
transition: height var(--duration-normal) var(--ease-out);
}
.chart-placeholder__bar:nth-child(odd) {
background: var(--color-accent);
opacity: 0.65;
}
/* --- Alert list item (for dashboard feed stub) ---------------------------- */
.alert-item {
display: flex;
gap: var(--space-4);
padding: var(--space-4);
border-radius: var(--radius-md);
border: 1px solid var(--color-bg-muted);
background: var(--color-bg-elevated);
}
.alert-item + .alert-item {
margin-top: var(--space-3);
}
.alert-item__time {
font-size: var(--text-xs);
color: var(--color-text-muted);
white-space: nowrap;
}
.alert-item__body {
flex: 1;
min-width: 0;
}
.alert-item__title {
font-weight: 600;
font-size: var(--text-sm);
margin-bottom: var(--space-1);
}
.alert-item__desc {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin: 0;
}
/* --- Utilities ------------------------------------------------------------ */
.text-muted { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.text-accent { color: var(--color-accent); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.mt-0 { margin-top: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
/* --- Dashboard layout (П1) ------------------------------------------------ */
.dashboard-split {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
gap: var(--space-6);
align-items: start;
}
@media (max-width: 1024px) {
.dashboard-split {
grid-template-columns: 1fr;
}
}
.activity-chart {
position: relative;
height: 11rem;
padding: var(--space-4) var(--space-2) var(--space-2);
background: linear-gradient(180deg, var(--color-bg) 0%, transparent 70%);
border-radius: var(--radius-md);
}
.activity-chart__svg {
width: 100%;
height: 100%;
}
.activity-chart__line {
fill: none;
stroke: var(--color-accent);
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.activity-chart__area {
fill: url(#activity-gradient);
opacity: 0.35;
}
.activity-chart__grid-line {
stroke: var(--color-bg-muted);
stroke-width: 1;
}
.activity-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--color-bg-muted);
}
.activity-stat__label {
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-muted);
margin-bottom: var(--space-1);
}
.activity-stat__value {
font-family: var(--font-serif);
font-size: var(--text-xl);
color: var(--color-text);
}
.activity-stat__hint {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-top: var(--space-1);
}
.audio-meter {
display: flex;
align-items: flex-end;
gap: 3px;
height: 3rem;
margin-top: var(--space-4);
}
.audio-meter__bar {
flex: 1;
background: var(--color-accent-soft);
border-radius: 2px 2px 0 0;
min-height: 4px;
}
.audio-meter__bar:nth-child(3n) {
background: var(--color-accent);
opacity: 0.75;
}
.audio-meter__bar.is-peak {
background: var(--color-warning);
}
.alert-feed {
display: flex;
flex-direction: column;
gap: var(--space-3);
max-height: 28rem;
overflow-y: auto;
}
.alert-item--warning {
border-left: 3px solid var(--color-warning);
}
.alert-item--danger {
border-left: 3px solid var(--color-danger);
}
.alert-item--info {
border-left: 3px solid var(--color-info);
}
.section-status {
display: flex;
align-items: center;
gap: var(--space-3);
}
.section-status__bar {
flex: 1;
height: 0.375rem;
background: var(--color-bg-muted);
border-radius: var(--radius-full);
overflow: hidden;
}
.section-status__fill {
height: 100%;
border-radius: var(--radius-full);
background: var(--color-success);
}
.section-status__fill--warning {
background: var(--color-warning);
}
.kpi-sparkline {
width: 100%;
height: 2.5rem;
}
.kpi-sparkline__line {
fill: none;
stroke: var(--color-accent);
stroke-width: 2;
opacity: 0.6;
}
.kpi-card--accent .kpi-sparkline__line {
stroke: rgba(255, 255, 255, 0.85);
}
/* --- Weighing page (П2) --------------------------------------------------- */
.weighing-split {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
gap: var(--space-6);
align-items: start;
}
@media (max-width: 1100px) {
.weighing-split {
grid-template-columns: 1fr;
}
}
.chart-legend {
display: flex;
flex-wrap: wrap;
gap: var(--space-3) var(--space-4);
font-size: var(--text-xs);
color: var(--color-text-muted);
}
.chart-legend__item {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.chart-legend__swatch {
width: 1rem;
height: 0.2rem;
border-radius: var(--radius-full);
}
.chart-legend__swatch--actual {
background: var(--color-accent);
}
.chart-legend__swatch--norm {
background: var(--color-text-muted);
opacity: 0.5;
}
.chart-legend__swatch--forecast {
background: var(--color-info);
background-image: repeating-linear-gradient(
90deg,
var(--color-info) 0,
var(--color-info) 4px,
transparent 4px,
transparent 7px
);
}
.chart-legend__swatch--marker {
background: var(--color-warning);
width: 0.2rem;
height: 0.75rem;
}
.growth-chart {
position: relative;
padding: var(--space-2);
background: linear-gradient(180deg, var(--color-bg) 0%, transparent 60%);
border-radius: var(--radius-md);
}
.growth-chart__svg {
width: 100%;
height: auto;
min-height: 16rem;
}
.growth-chart__grid line {
stroke: var(--color-bg-muted);
stroke-width: 1;
}
.growth-chart__axis-label {
font-family: var(--font-sans);
font-size: 11px;
fill: var(--color-text-muted);
}
.growth-chart__axis-title {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
fill: var(--color-text-muted);
letter-spacing: 0.04em;
}
.growth-chart__line {
fill: none;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.growth-chart__line--actual {
stroke: var(--color-accent);
}
.growth-chart__line--norm {
stroke: var(--color-text-muted);
stroke-width: 2;
stroke-dasharray: 6 4;
opacity: 0.55;
}
.growth-chart__line--forecast {
stroke: var(--color-info);
stroke-width: 2;
stroke-dasharray: 5 4;
}
.growth-chart__area {
fill: url(#growth-area-gradient);
}
.growth-chart__marker-line {
stroke: var(--color-warning);
stroke-width: 1.5;
stroke-dasharray: 4 3;
opacity: 0.7;
}
.growth-chart__marker-dot {
fill: var(--color-warning);
stroke: var(--color-bg-elevated);
stroke-width: 2;
}
.growth-chart__today-line {
stroke: var(--color-accent);
stroke-width: 1.5;
opacity: 0.35;
}
.growth-chart__today-dot {
fill: var(--color-accent);
stroke: var(--color-bg-elevated);
stroke-width: 2;
}
.growth-chart__forecast-dot {
fill: var(--color-info);
stroke: var(--color-bg-elevated);
stroke-width: 2;
}
.growth-chart__callout {
fill: var(--color-warning-soft);
stroke: var(--color-warning);
stroke-width: 1;
}
.growth-chart__callout-text {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
fill: var(--color-warning);
}
.growth-chart__callout-sub {
font-family: var(--font-sans);
font-size: 10px;
fill: var(--color-text-secondary);
}
.growth-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
margin-top: var(--space-5);
padding-top: var(--space-5);
border-top: 1px solid var(--color-bg-muted);
}
@media (max-width: 900px) {
.growth-stats {
grid-template-columns: repeat(2, 1fr);
}
}
.growth-stat__label {
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-muted);
margin-bottom: var(--space-1);
}
.growth-stat__value {
font-family: var(--font-serif);
font-size: var(--text-xl);
color: var(--color-text);
}
.growth-stat__hint {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-top: var(--space-1);
}
.forecast-card .card__body {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.forecast-highlight {
padding: var(--space-5);
background: linear-gradient(135deg, var(--color-accent-soft) 0%, var(--color-bg) 100%);
border-radius: var(--radius-md);
border: 1px solid rgba(196, 106, 58, 0.15);
text-align: center;
}
.forecast-highlight__label {
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
margin-bottom: var(--space-2);
}
.forecast-highlight__value {
font-family: var(--font-serif);
font-size: var(--text-3xl);
color: var(--color-accent);
line-height: 1;
}
.forecast-highlight__unit {
font-family: var(--font-sans);
font-size: var(--text-lg);
color: var(--color-text-muted);
}
.forecast-highlight__date {
font-size: var(--text-sm);
color: var(--color-text-secondary);
margin-top: var(--space-2);
}
.forecast-rows {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.forecast-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--space-3);
font-size: var(--text-sm);
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--color-bg-muted);
}
.forecast-row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.forecast-row__label {
color: var(--color-text-muted);
}
.forecast-row__value {
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.forecast-note {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin: 0;
line-height: var(--leading-relaxed);
}
.efficiency-badge {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-4);
background: var(--color-success-soft);
border-radius: var(--radius-md);
margin-bottom: var(--space-4);
}
.efficiency-badge__icon {
font-size: var(--text-2xl);
color: var(--color-success);
line-height: 1;
}
.efficiency-badge__title {
font-weight: 600;
font-size: var(--text-sm);
color: var(--color-success);
}
.efficiency-badge__desc {
font-size: var(--text-sm);
color: var(--color-text-secondary);
margin-top: var(--space-1);
}
.fcr-chart {
height: 5rem;
margin-bottom: var(--space-4);
padding: var(--space-2);
background: var(--color-bg);
border-radius: var(--radius-md);
}
.fcr-chart__svg {
width: 100%;
height: 100%;
}
.fcr-chart__line {
fill: none;
stroke: var(--color-accent);
stroke-width: 2;
opacity: 0.6;
}
.fcr-chart__min-dot {
fill: var(--color-warning);
stroke: var(--color-bg-elevated);
stroke-width: 2;
}
.fcr-chart__min-line {
stroke: var(--color-warning);
stroke-width: 1;
stroke-dasharray: 3 3;
opacity: 0.6;
}
.fcr-chart__label {
font-family: var(--font-sans);
font-size: 10px;
font-weight: 700;
fill: var(--color-warning);
}
.efficiency-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.efficiency-list li {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-3);
font-size: var(--text-sm);
}
.table tfoot td {
font-weight: 600;
background: var(--color-bg);
border-top: 2px solid var(--color-bg-muted);
}
/* --- Climate page (П3) ---------------------------------------------------- */
.climate-split {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
gap: var(--space-6);
align-items: start;
}
@media (max-width: 1100px) {
.climate-split {
grid-template-columns: 1fr;
}
}
.gauge-grid--climate {
grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
}
.climate-trend {
position: relative;
padding: var(--space-2);
background: linear-gradient(180deg, var(--color-bg) 0%, transparent 60%);
border-radius: var(--radius-md);
min-height: 12rem;
}
.climate-trend__svg {
width: 100%;
height: auto;
min-height: 11rem;
}
.climate-trend__axis {
stroke: var(--color-bg-muted);
stroke-width: 1;
}
.climate-trend__grid {
stroke: var(--color-bg-muted);
stroke-width: 1;
stroke-dasharray: 4 4;
opacity: 0.6;
}
.climate-trend__threshold {
stroke: var(--color-warning);
stroke-width: 1.5;
stroke-dasharray: 6 4;
opacity: 0.75;
}
.climate-trend__threshold-label {
font-family: var(--font-sans);
font-size: 10px;
fill: var(--color-warning);
font-weight: 600;
}
.climate-trend__band {
stroke: var(--color-success);
stroke-width: 1;
stroke-dasharray: 4 4;
opacity: 0.45;
}
.climate-trend__band-label {
font-family: var(--font-sans);
font-size: 10px;
fill: var(--color-success);
}
.climate-trend__axis-label {
font-family: var(--font-sans);
font-size: 10px;
fill: var(--color-text-muted);
}
.climate-trend__line {
fill: none;
stroke: var(--color-accent);
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.climate-trend__line--warning {
stroke: var(--color-warning);
}
.climate-trend__line--info {
stroke: var(--color-info);
}
.climate-trend__line--muted {
stroke: var(--color-text-muted);
stroke-width: 2;
opacity: 0.5;
}
.climate-trend__area {
fill: url(#trend-co2-gradient);
opacity: 0.4;
}
.climate-trend__area--warning {
fill: var(--color-warning-soft);
opacity: 0.5;
}
.climate-trend__peak {
fill: var(--color-warning);
stroke: var(--color-bg-elevated);
stroke-width: 2;
}
.climate-trend__peak--info {
fill: var(--color-info);
}
.climate-trend__peak-label {
font-family: var(--font-sans);
font-size: 10px;
font-weight: 700;
fill: var(--color-warning);
}
.climate-trend-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--color-bg-muted);
}
@media (max-width: 600px) {
.climate-trend-stats {
grid-template-columns: 1fr;
}
}
.climate-trend-stat__label {
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-muted);
margin-bottom: var(--space-1);
}
.climate-trend-stat__value {
font-family: var(--font-serif);
font-size: var(--text-lg);
color: var(--color-text);
}
.text-warning {
color: var(--color-warning);
}
.section-map-legend {
display: flex;
flex-wrap: wrap;
gap: var(--space-3) var(--space-4);
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-bottom: var(--space-4);
}
.section-map-legend__item {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.section-map-legend__swatch {
width: 0.75rem;
height: 0.75rem;
border-radius: var(--radius-sm);
}
.section-map-legend__swatch--ok {
background: var(--color-success-soft);
border: 1px solid var(--color-success);
}
.section-map-legend__swatch--warn {
background: var(--color-warning-soft);
border: 1px solid var(--color-warning);
}
.section-map-legend__swatch--bad {
background: var(--color-danger-soft);
border: 1px solid var(--color-danger);
}
.section-map {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.section-map__building {
display: grid;
grid-template-columns: 5.5rem 1fr;
gap: var(--space-3);
align-items: stretch;
}
.section-map__building-label {
display: flex;
align-items: center;
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-text-secondary);
}
.section-map__zones {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2);
}
.section-map__zone {
position: relative;
padding: var(--space-4);
border-radius: var(--radius-md);
border: 1px solid transparent;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-1);
min-height: 4.5rem;
transition: transform var(--duration-fast) var(--ease-out);
}
.section-map__zone:hover {
transform: scale(1.02);
}
.section-map__zone--ok {
background: var(--color-success-soft);
border-color: rgba(61, 122, 82, 0.25);
}
.section-map__zone--warn {
background: var(--color-warning-soft);
border-color: rgba(184, 134, 11, 0.35);
}
.section-map__zone--bad {
background: var(--color-danger-soft);
border-color: rgba(184, 58, 58, 0.35);
}
.section-map__zone-name {
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-muted);
}
.section-map__zone-score {
font-family: var(--font-serif);
font-size: var(--text-2xl);
line-height: 1;
color: var(--color-text);
}
.section-map__zone-hint {
font-size: var(--text-xs);
font-weight: 600;
color: var(--color-warning);
}
.section-map-detail {
margin-top: var(--space-5);
padding: var(--space-4);
background: var(--color-bg);
border-radius: var(--radius-md);
border: 1px solid var(--color-bg-muted);
}
.section-map-detail__title {
font-weight: 600;
font-size: var(--text-sm);
margin-bottom: var(--space-3);
}
.section-map-detail__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-3);
font-size: var(--text-sm);
margin-bottom: var(--space-3);
}
@media (max-width: 480px) {
.section-map-detail__grid {
grid-template-columns: repeat(2, 1fr);
}
}
.section-map-detail__note {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin: 0;
}
.gateway-status {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4);
background: var(--color-success-soft);
border-radius: var(--radius-md);
margin-bottom: var(--space-4);
}
.gateway-status__icon {
font-size: var(--text-2xl);
color: var(--color-success);
line-height: 1;
}
.gateway-status__title {
font-weight: 600;
font-size: var(--text-sm);
color: var(--color-success);
}
.gateway-status__desc {
font-size: var(--text-xs);
color: var(--color-text-secondary);
margin-top: var(--space-1);
}
.gateway-metrics {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.gateway-metrics li {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--space-3);
font-size: var(--text-sm);
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--color-bg-muted);
}
.gateway-metrics li:last-child {
border-bottom: none;
padding-bottom: 0;
}
.sensor-battery {
display: inline-block;
width: 3rem;
height: 0.375rem;
background: var(--color-bg-muted);
border-radius: var(--radius-full);
overflow: hidden;
vertical-align: middle;
margin-right: var(--space-1);
}
.sensor-battery__fill {
display: block;
height: 100%;
border-radius: var(--radius-full);
background: var(--color-success);
}
.sensor-battery__fill--warning {
background: var(--color-warning);
}
/* --- Behavior page (П4) --------------------------------------------------- */
.behavior-split {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
gap: var(--space-6);
align-items: start;
}
@media (max-width: 1100px) {
.behavior-split {
grid-template-columns: 1fr;
}
}
.heatmap-legend {
display: flex;
flex-wrap: wrap;
gap: var(--space-3) var(--space-4);
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-bottom: var(--space-4);
}
.heatmap-legend__item {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.heatmap-legend__swatch {
width: 1.25rem;
height: 0.5rem;
border-radius: var(--radius-sm);
}
.heatmap-legend__swatch--low {
background: var(--color-info-soft);
border: 1px solid var(--color-info);
}
.heatmap-legend__swatch--mid {
background: var(--color-accent-soft);
border: 1px solid var(--color-accent);
}
.heatmap-legend__swatch--high {
background: var(--color-warning-soft);
border: 1px solid var(--color-warning);
}
.heatmap-legend__swatch--hot {
background: var(--color-danger-soft);
border: 1px solid var(--color-danger);
}
.heatmap {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.heatmap__building {
display: grid;
grid-template-columns: 5.5rem 1fr;
gap: var(--space-3);
align-items: stretch;
}
.heatmap__building-label {
display: flex;
align-items: center;
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-text-secondary);
}
.heatmap__grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 3px;
aspect-ratio: 3 / 1;
min-height: 4.5rem;
}
@media (max-width: 600px) {
.heatmap__grid {
grid-template-columns: repeat(4, 1fr);
}
}
.heatmap__cell {
border-radius: var(--radius-sm);
border: 1px solid rgba(28, 25, 23, 0.06);
transition: transform var(--duration-fast) var(--ease-out);
}
.heatmap__cell:hover {
transform: scale(1.08);
z-index: 1;
box-shadow: var(--shadow-md);
}
.heatmap__cell--0 { background: #e4eef9; }
.heatmap__cell--1 { background: #c8ddf5; }
.heatmap__cell--2 { background: #f3e4d8; }
.heatmap__cell--3 { background: #e8c4a8; }
.heatmap__cell--4 { background: #faf0d4; }
.heatmap__cell--5 { background: #f5d4a8; }
.heatmap__cell--6 { background: #fce8e8; }
.heatmap-detail {
margin-top: var(--space-4);
padding: var(--space-4);
background: var(--color-bg);
border-radius: var(--radius-md);
border: 1px solid var(--color-bg-muted);
}
.heatmap-detail__title {
font-weight: 600;
font-size: var(--text-sm);
margin-bottom: var(--space-2);
}
.heatmap-detail__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-3);
font-size: var(--text-sm);
}
.heatmap-detail__note {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin: var(--space-3) 0 0;
}
.feed-water-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-6);
}
@media (max-width: 768px) {
.feed-water-grid {
grid-template-columns: 1fr;
}
}
.intake-chart {
position: relative;
height: 9rem;
padding: var(--space-3) var(--space-2);
background: linear-gradient(180deg, var(--color-bg) 0%, transparent 70%);
border-radius: var(--radius-md);
}
.intake-chart__svg {
width: 100%;
height: 100%;
}
.intake-chart__bar {
fill: var(--color-accent-soft);
rx: 2;
}
.intake-chart__bar--feed {
fill: var(--color-accent);
opacity: 0.7;
}
.intake-chart__bar--water {
fill: var(--color-info);
opacity: 0.65;
}
.intake-chart__line {
fill: none;
stroke: var(--color-text-muted);
stroke-width: 1.5;
stroke-dasharray: 4 3;
opacity: 0.5;
}
.intake-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-4);
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--color-bg-muted);
}
.intake-stat__label {
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-muted);
margin-bottom: var(--space-1);
}
.intake-stat__value {
font-family: var(--font-serif);
font-size: var(--text-lg);
color: var(--color-text);
}
.feeder-status {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.feeder-status__item {
display: grid;
grid-template-columns: 6rem 1fr auto;
gap: var(--space-3);
align-items: center;
font-size: var(--text-sm);
}
.feeder-status__label {
font-weight: 600;
color: var(--color-text-secondary);
}
.feeder-status__bar {
height: 0.5rem;
background: var(--color-bg-muted);
border-radius: var(--radius-full);
overflow: hidden;
}
.feeder-status__fill {
height: 100%;
border-radius: var(--radius-full);
background: var(--color-success);
}
.feeder-status__fill--warning {
background: var(--color-warning);
}
.feeder-status__fill--danger {
background: var(--color-danger);
}
.audio-panel {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: var(--space-6);
align-items: start;
}
@media (max-width: 900px) {
.audio-panel {
grid-template-columns: 1fr;
}
}
.audio-waveform {
position: relative;
height: 6rem;
padding: var(--space-3);
background: var(--color-bg);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
}
.audio-waveform__svg {
width: 100%;
height: 100%;
}
.audio-waveform__line {
fill: none;
stroke: var(--color-accent);
stroke-width: 1.5;
opacity: 0.8;
}
.audio-waveform__line--stress {
stroke: var(--color-warning);
}
.audio-waveform__line--cough {
stroke: var(--color-danger);
opacity: 0.5;
}
.audio-indicators {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.audio-indicator {
padding: var(--space-4);
border-radius: var(--radius-md);
border: 1px solid var(--color-bg-muted);
background: var(--color-bg);
}
.audio-indicator__header {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-2);
}
.audio-indicator__title {
font-weight: 600;
font-size: var(--text-sm);
}
.audio-indicator__desc {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin: 0;
line-height: var(--leading-relaxed);
}
.audio-indicator--stress {
border-left: 3px solid var(--color-warning);
}
.audio-indicator--cough {
border-left: 3px solid var(--color-success);
}
.audio-indicator--aggression {
border-left: 3px solid var(--color-info);
}
/* --- Health page (П4) ----------------------------------------------------- */
.health-split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
gap: var(--space-6);
align-items: start;
}
@media (max-width: 1100px) {
.health-split {
grid-template-columns: 1fr;
}
}
.risk-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
gap: var(--space-4);
}
.risk-card {
padding: var(--space-5);
border-radius: var(--radius-md);
border: 1px solid var(--color-bg-muted);
background: var(--color-bg);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.risk-card--low {
border-left: 3px solid var(--color-success);
}
.risk-card--medium {
border-left: 3px solid var(--color-warning);
}
.risk-card--high {
border-left: 3px solid var(--color-danger);
}
.risk-card__name {
font-weight: 600;
font-size: var(--text-sm);
color: var(--color-text);
}
.risk-card__score {
font-family: var(--font-serif);
font-size: var(--text-2xl);
line-height: 1;
}
.risk-card__score--low { color: var(--color-success); }
.risk-card__score--medium { color: var(--color-warning); }
.risk-card__score--high { color: var(--color-danger); }
.risk-card__bar {
height: 0.375rem;
background: var(--color-bg-muted);
border-radius: var(--radius-full);
overflow: hidden;
}
.risk-card__fill {
height: 100%;
border-radius: var(--radius-full);
}
.risk-card__fill--low { background: var(--color-success); }
.risk-card__fill--medium { background: var(--color-warning); }
.risk-card__fill--high { background: var(--color-danger); }
.risk-card__hint {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin: 0;
}
.early-signs {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.early-sign {
display: flex;
gap: var(--space-4);
padding: var(--space-4);
border-radius: var(--radius-md);
border: 1px solid var(--color-bg-muted);
background: var(--color-bg-elevated);
}
.early-sign--active {
border-left: 3px solid var(--color-warning);
background: var(--color-warning-soft);
}
.early-sign--watch {
border-left: 3px solid var(--color-info);
}
.early-sign__icon {
flex-shrink: 0;
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background: var(--color-bg-muted);
font-size: var(--text-sm);
}
.early-sign--active .early-sign__icon {
background: var(--color-warning-soft);
color: var(--color-warning);
}
.early-sign__body {
flex: 1;
min-width: 0;
}
.early-sign__title {
font-weight: 600;
font-size: var(--text-sm);
margin-bottom: var(--space-1);
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.early-sign__desc {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin: 0;
}
.early-sign__meta {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-top: var(--space-2);
}
.health-trend {
position: relative;
padding: var(--space-2);
background: linear-gradient(180deg, var(--color-bg) 0%, transparent 60%);
border-radius: var(--radius-md);
min-height: 12rem;
}
.health-trend__svg {
width: 100%;
height: auto;
min-height: 11rem;
}
.health-trend__axis {
stroke: var(--color-bg-muted);
stroke-width: 1;
}
.health-trend__grid {
stroke: var(--color-bg-muted);
stroke-width: 1;
stroke-dasharray: 4 4;
opacity: 0.6;
}
.health-trend__threshold {
stroke: var(--color-warning);
stroke-width: 1.5;
stroke-dasharray: 6 4;
opacity: 0.75;
}
.health-trend__threshold-label {
font-family: var(--font-sans);
font-size: 10px;
fill: var(--color-warning);
font-weight: 600;
}
.health-trend__axis-label {
font-family: var(--font-sans);
font-size: 10px;
fill: var(--color-text-muted);
}
.health-trend__line {
fill: none;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.health-trend__line--overall {
stroke: var(--color-accent);
}
.health-trend__line--respiratory {
stroke: var(--color-warning);
}
.health-trend__line--digestive {
stroke: var(--color-info);
}
.health-trend__area {
fill: var(--color-accent-soft);
opacity: 0.35;
}
.health-trend-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--color-bg-muted);
}
.health-summary-banner {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-5);
background: linear-gradient(135deg, var(--color-success-soft) 0%, var(--color-bg) 100%);
border-radius: var(--radius-md);
border: 1px solid rgba(61, 122, 82, 0.2);
margin-bottom: var(--space-4);
}
.health-summary-banner--warning {
background: linear-gradient(135deg, var(--color-warning-soft) 0%, var(--color-bg) 100%);
border-color: rgba(184, 134, 11, 0.25);
}
.health-summary-banner__icon {
font-size: var(--text-3xl);
line-height: 1;
flex-shrink: 0;
}
.health-summary-banner__title {
font-weight: 600;
font-size: var(--text-sm);
margin-bottom: var(--space-1);
}
.health-summary-banner__desc {
font-size: var(--text-sm);
color: var(--color-text-secondary);
margin: 0;
}
/* --- Alerts page (П5) ----------------------------------------------------- */
.filter-bar {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--space-4);
padding: var(--space-5);
background: var(--color-bg-elevated);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
border: 1px solid rgba(28, 25, 23, 0.04);
}
.filter-bar__group {
display: flex;
flex-direction: column;
gap: var(--space-2);
min-width: 9rem;
}
.filter-bar__label {
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-muted);
}
.filter-bar__select {
appearance: none;
font-family: var(--font-sans);
font-size: var(--text-sm);
padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
border: 1px solid var(--color-bg-muted);
border-radius: var(--radius-md);
background: var(--color-bg)
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
no-repeat right 0.625rem center;
color: var(--color-text);
cursor: pointer;
}
.filter-bar__select:focus {
outline: 2px solid var(--color-accent-ring);
outline-offset: 1px;
}
.filter-bar__actions {
margin-left: auto;
display: flex;
gap: var(--space-2);
align-items: center;
}
.alerts-split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
gap: var(--space-6);
align-items: start;
}
@media (max-width: 1100px) {
.alerts-split {
grid-template-columns: 1fr;
}
}
.mortality-summary {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.mortality-stat {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-4);
}
.mortality-stat__item {
padding: var(--space-4);
background: var(--color-bg);
border-radius: var(--radius-md);
border: 1px solid var(--color-bg-muted);
}
.mortality-stat__label {
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-muted);
margin-bottom: var(--space-1);
}
.mortality-stat__value {
font-family: var(--font-serif);
font-size: var(--text-2xl);
line-height: 1;
color: var(--color-text);
}
.mortality-chart {
position: relative;
height: 10rem;
padding: var(--space-3);
background: linear-gradient(180deg, var(--color-bg) 0%, transparent 70%);
border-radius: var(--radius-md);
}
.mortality-chart__svg {
width: 100%;
height: 100%;
}
.mortality-chart__bar {
fill: var(--color-danger-soft);
stroke: var(--color-danger);
stroke-width: 1;
opacity: 0.85;
rx: 2;
}
.mortality-chart__bar--today {
fill: var(--color-danger);
opacity: 0.75;
}
.mortality-chart__axis {
stroke: var(--color-bg-muted);
stroke-width: 1;
}
.mortality-chart__label {
font-family: var(--font-sans);
font-size: 9px;
fill: var(--color-text-muted);
}
.event-row--critical td:first-child {
border-left: 3px solid var(--color-danger);
}
.event-row--warning td:first-child {
border-left: 3px solid var(--color-warning);
}
.event-row--info td:first-child {
border-left: 3px solid var(--color-info);
}
.event-type {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
font-weight: 600;
}
.event-type__icon {
width: 1.5rem;
height: 1.5rem;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-xs);
flex-shrink: 0;
}
.event-type__icon--mortality {
background: var(--color-danger-soft);
color: var(--color-danger);
}
.event-type__icon--climate {
background: var(--color-warning-soft);
color: var(--color-warning);
}
.event-type__icon--behavior {
background: var(--color-info-soft);
color: var(--color-info);
}
.event-type__icon--health {
background: var(--color-success-soft);
color: var(--color-success);
}
.event-type__icon--device {
background: var(--color-bg-muted);
color: var(--color-text-secondary);
}
.mass-incident {
padding: var(--space-5);
border-radius: var(--radius-md);
border: 1px solid rgba(184, 58, 58, 0.25);
background: var(--color-danger-soft);
}
.mass-incident__title {
font-weight: 600;
font-size: var(--text-sm);
color: var(--color-danger);
margin-bottom: var(--space-2);
display: flex;
align-items: center;
gap: var(--space-2);
}
.mass-incident__desc {
font-size: var(--text-sm);
color: var(--color-text-secondary);
margin: 0 0 var(--space-3);
}
.mass-incident__meta {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
/* --- Devices page (П5) ---------------------------------------------------- */
.devices-split {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: var(--space-6);
align-items: start;
}
@media (max-width: 1100px) {
.devices-split {
grid-template-columns: 1fr;
}
}
.gateway-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
}
@media (max-width: 900px) {
.gateway-grid {
grid-template-columns: 1fr;
}
}
.gateway-card {
padding: var(--space-5);
border-radius: var(--radius-md);
border: 1px solid var(--color-bg-muted);
background: var(--color-bg);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.gateway-card--online {
border-left: 3px solid var(--color-success);
}
.gateway-card--warning {
border-left: 3px solid var(--color-warning);
}
.gateway-card__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--space-3);
}
.gateway-card__name {
font-weight: 600;
font-size: var(--text-sm);
}
.gateway-card__model {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-top: var(--space-1);
}
.gateway-card__metrics {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
font-size: var(--text-xs);
}
.gateway-card__metrics li {
display: flex;
justify-content: space-between;
gap: var(--space-2);
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--color-bg-muted);
}
.gateway-card__metrics li:last-child {
border-bottom: none;
padding-bottom: 0;
}
.device-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
gap: var(--space-4);
}
.camera-card {
border-radius: var(--radius-md);
border: 1px solid var(--color-bg-muted);
background: var(--color-bg-elevated);
overflow: hidden;
transition: transform var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
.camera-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.camera-card__preview {
position: relative;
aspect-ratio: 16 / 10;
background: linear-gradient(145deg, #2a2624 0%, #1c1917 100%);
display: flex;
align-items: center;
justify-content: center;
}
.camera-card__preview svg {
width: 100%;
height: 100%;
opacity: 0.9;
}
.camera-card__status {
position: absolute;
top: var(--space-2);
right: var(--space-2);
}
.camera-card__body {
padding: var(--space-3) var(--space-4);
}
.camera-card__name {
font-weight: 600;
font-size: var(--text-sm);
margin-bottom: var(--space-1);
}
.camera-card__meta {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
.device-type-badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-xs);
font-weight: 600;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
background: var(--color-bg-muted);
color: var(--color-text-secondary);
}
.device-type-badge--camera {
background: var(--color-info-soft);
color: var(--color-info);
}
.device-type-badge--sensor {
background: var(--color-success-soft);
color: var(--color-success);
}
.device-type-badge--mic {
background: var(--color-accent-soft);
color: var(--color-accent);
}
.device-type-badge--gateway {
background: var(--color-bg-muted);
color: var(--color-text);
}
.sensor-battery__fill--danger {
background: var(--color-danger);
}
.device-offline {
opacity: 0.55;
}
.device-offline .camera-card__preview {
background: linear-gradient(145deg, #57534e 0%, #44403c 100%);
}
/* --- Shared utilities (П6) ----------------------------------------------- */
.badge--neutral {
background: var(--color-bg-muted);
color: var(--color-text-secondary);
}
.btn--sm {
padding: var(--space-1) var(--space-3);
font-size: var(--text-xs);
}
.table__row--highlight {
background: var(--color-accent-soft);
}
.table__row--highlight td {
border-bottom-color: rgba(196, 106, 58, 0.15);
}
/* --- Reports page (П6) ---------------------------------------------------- */
.reports-split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
gap: var(--space-6);
align-items: start;
}
@media (max-width: 1100px) {
.reports-split {
grid-template-columns: 1fr;
}
}
.reports-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.report-card {
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-md);
border: 1px solid var(--color-bg-muted);
background: var(--color-bg);
cursor: pointer;
transition: border-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
.report-card:hover {
border-color: rgba(196, 106, 58, 0.35);
box-shadow: var(--shadow-sm);
}
.report-card--selected {
border-color: var(--color-accent);
background: var(--color-accent-soft);
box-shadow: var(--shadow-sm);
}
.report-card--current {
border-left: 3px solid var(--color-info);
}
.report-card__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.report-card__title {
font-weight: 600;
font-size: var(--text-sm);
color: var(--color-text);
}
.report-card__meta {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-top: var(--space-1);
}
.report-card__metrics {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2);
font-size: var(--text-xs);
}
.report-card__metrics li {
display: flex;
justify-content: space-between;
gap: var(--space-2);
}
.report-preview {
padding: var(--space-6);
border-radius: var(--radius-lg);
border: 1px solid var(--color-bg-muted);
background: var(--color-bg-elevated);
box-shadow: var(--shadow-card);
}
.report-preview__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--space-4);
margin-bottom: var(--space-5);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--color-bg-muted);
}
.report-preview__title {
font-family: var(--font-serif);
font-size: var(--text-xl);
font-weight: 400;
margin: 0 0 var(--space-1);
}
.report-preview__subtitle {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin: 0;
}
.report-preview__actions {
display: flex;
gap: var(--space-2);
flex-shrink: 0;
}
.report-preview__sections {
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.report-preview__section-title {
font-size: var(--text-sm);
font-weight: 600;
margin: 0 0 var(--space-3);
color: var(--color-text);
}
.report-preview__chart {
padding: var(--space-3);
background: var(--color-bg);
border-radius: var(--radius-md);
margin-bottom: var(--space-3);
}
.report-preview__chart svg {
width: 100%;
height: auto;
display: block;
}
.report-preview__stats {
display: flex;
flex-wrap: wrap;
gap: var(--space-4) var(--space-6);
font-size: var(--text-sm);
}
.report-preview__stats--grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-3);
}
@media (max-width: 600px) {
.report-preview__stats--grid {
grid-template-columns: 1fr 1fr;
}
}
.report-preview__text {
font-size: var(--text-sm);
color: var(--color-text-secondary);
margin: 0;
line-height: var(--leading-relaxed);
}
.report-preview__footer {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: 1px solid var(--color-bg-muted);
font-size: var(--text-xs);
}
.report-template-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
gap: var(--space-4);
}
.report-template-card {
padding: var(--space-5);
border-radius: var(--radius-md);
border: 1px solid var(--color-bg-muted);
background: var(--color-bg);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.report-template-card--accent {
border-color: rgba(196, 106, 58, 0.35);
background: linear-gradient(145deg, var(--color-accent-soft) 0%, var(--color-bg-elevated) 100%);
}
.report-template-card__icon {
font-size: var(--text-2xl);
line-height: 1;
color: var(--color-accent);
}
.report-template-card__icon svg {
width: 1.75rem;
height: 1.75rem;
display: block;
}
.report-template-card__title {
font-size: var(--text-base);
font-weight: 600;
margin: 0;
font-family: var(--font-sans);
}
.report-template-card__desc {
font-size: var(--text-sm);
color: var(--color-text-secondary);
margin: 0;
flex: 1;
line-height: var(--leading-relaxed);
}
.report-template-card__meta {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
/* --- Settings page (П6) ------------------------------------------------- */
.settings-layout {
background: var(--color-bg-elevated);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
border: 1px solid rgba(28, 25, 23, 0.04);
overflow: hidden;
}
.settings-nav {
width: 100%;
}
.settings-nav .tabs--vertical {
display: grid;
grid-template-columns: 14rem minmax(0, 1fr);
min-height: 32rem;
}
@media (max-width: 800px) {
.settings-nav .tabs--vertical {
grid-template-columns: 1fr;
}
}
.tabs--vertical .tabs__list,
.settings-nav__list {
flex-direction: column;
align-items: stretch;
padding: var(--space-4);
gap: var(--space-1);
border-right: 1px solid var(--color-bg-muted);
border-bottom: none;
background: var(--color-bg);
}
@media (max-width: 800px) {
.tabs--vertical .tabs__list,
.settings-nav__list {
flex-direction: row;
flex-wrap: wrap;
border-right: none;
border-bottom: 1px solid var(--color-bg-muted);
}
}
.tabs--vertical .tabs__tab {
text-align: left;
justify-content: flex-start;
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
border: none;
background: transparent;
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-text-secondary);
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.tabs--vertical .tabs__tab:hover {
background: var(--color-bg-muted);
color: var(--color-text);
}
.tabs--vertical .tabs__tab.is-active {
background: var(--color-accent-soft);
color: var(--color-accent);
font-weight: 600;
}
.tabs--vertical .tabs__tab.is-active::after {
display: none;
}
.settings-panel {
padding: var(--space-8);
}
@media (max-width: 600px) {
.settings-panel {
padding: var(--space-5);
}
}
.settings-panel__title {
font-family: var(--font-serif);
font-size: var(--text-2xl);
margin: 0 0 var(--space-2);
}
.settings-panel__desc {
font-size: var(--text-xs);
color: var(--color-text-secondary);
margin: 0 0 var(--space-6);
max-width: 40rem;
}
.form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-5);
margin-bottom: var(--space-6);
}
.form-grid--thresholds {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
.form-grid--thresholds {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.form-grid,
.form-grid--thresholds {
grid-template-columns: 1fr;
}
}
.form-field--wide {
grid-column: 1 / -1;
}
.form-field {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.form-field__label {
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-muted);
}
.form-field__input,
.form-field__select,
.form-field__textarea {
font-family: var(--font-sans);
font-size: var(--text-sm);
padding: var(--space-2) var(--space-3);
border: 1px solid var(--color-bg-muted);
border-radius: var(--radius-md);
background: var(--color-bg-elevated);
color: var(--color-text);
width: 100%;
}
.form-field__select {
appearance: none;
padding-right: var(--space-8);
background: var(--color-bg-elevated)
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
no-repeat right 0.625rem center;
cursor: pointer;
}
.form-field__textarea {
resize: vertical;
min-height: 5rem;
line-height: var(--leading-relaxed);
}
.form-field__input:focus,
.form-field__select:focus,
.form-field__textarea:focus {
outline: 2px solid var(--color-accent-ring);
outline-offset: 1px;
}
.form-field__hint {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
.form-field__range {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.form-section {
margin-bottom: var(--space-6);
padding-top: var(--space-2);
}
.form-section__title {
font-size: var(--text-sm);
font-weight: 600;
margin: 0 0 var(--space-4);
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--color-bg-muted);
font-family: var(--font-sans);
}
.settings-toggle-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
border: 1px solid var(--color-bg-muted);
border-radius: var(--radius-md);
overflow: hidden;
}
.settings-toggle {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-4);
padding: var(--space-4) var(--space-5);
background: var(--color-bg-elevated);
border-bottom: 1px solid var(--color-bg-muted);
}
.settings-toggle:last-child {
border-bottom: none;
}
.settings-toggle__label {
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-text);
}
.settings-toggle__hint {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-top: var(--space-1);
}
.toggle {
position: relative;
display: inline-flex;
flex-shrink: 0;
cursor: pointer;
}
.toggle input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.toggle__track {
display: block;
width: 2.75rem;
height: 1.5rem;
border-radius: var(--radius-full);
background: var(--color-bg-muted);
transition: background var(--duration-fast) var(--ease-out);
position: relative;
}
.toggle__track::after {
content: "";
position: absolute;
top: 0.1875rem;
left: 0.1875rem;
width: 1.125rem;
height: 1.125rem;
border-radius: 50%;
background: var(--color-bg-elevated);
box-shadow: var(--shadow-sm);
transition: transform var(--duration-fast) var(--ease-out);
}
.toggle input:checked + .toggle__track {
background: var(--color-accent);
}
.toggle input:checked + .toggle__track::after {
transform: translateX(1.25rem);
}
.toggle input:focus-visible + .toggle__track {
outline: 2px solid var(--color-accent-ring);
outline-offset: 2px;
}
.settings-info-banner {
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-md);
background: var(--color-info-soft);
border: 1px solid rgba(58, 110, 184, 0.2);
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
}
/* --- Context bar (group + hierarchy) -------------------------------------- */
.context-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-4) var(--space-6);
padding: var(--space-4) var(--space-5);
margin-bottom: var(--space-6);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.group-select {
display: flex;
align-items: center;
gap: var(--space-3);
}
.group-select__label {
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-text-secondary);
white-space: nowrap;
}
.group-select__input {
min-width: 10rem;
padding: 0.45rem 2rem 0.45rem 0.75rem;
font-family: inherit;
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-text);
background: var(--color-bg-muted);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
cursor: pointer;
}
.context-bar__breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--color-text-secondary);
}
.context-bar__sep {
color: var(--color-text-muted);
}
/* --- Transfer timeline ---------------------------------------------------- */
.transfer-timeline {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.transfer-timeline__item {
display: grid;
grid-template-columns: 5rem 1fr;
gap: var(--space-3);
align-items: start;
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--color-border-subtle);
}
.transfer-timeline__item:last-child {
padding-bottom: 0;
border-bottom: none;
}
.transfer-timeline__date {
font-size: var(--text-xs);
font-weight: 600;
color: var(--color-text-muted);
}
.transfer-timeline__text {
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
}
/* --- Status aliases (норма / внимание / критично) ----------------------- */
.status--norm,
.badge--norm {
background: var(--color-success-soft);
color: var(--color-success);
}
.status--attention,
.badge--attention {
background: var(--color-warning-soft);
color: var(--color-warning);
}
.status--critical,
.badge--critical {
background: var(--color-danger-soft);
color: var(--color-danger);
}
/* Full-width alerts on dashboard */
.dashboard-alerts-full {
width: 100%;
}
/* ============================================================
Печать / Экспорт PDF — Паспорт группы
============================================================ */
@media print {
@page { margin: 12mm; }
.sidebar,
.topbar__actions {
display: none !important;
}
.app,
.app-main {
display: block !important;
margin: 0 !important;
background: #fff !important;
}
.page {
max-width: none !important;
padding: 0 !important;
}
.card,
.kpi-card,
section {
break-inside: avoid;
page-break-inside: avoid;
}
.card,
.kpi-card {
box-shadow: none !important;
border: 1px solid #d0d0d0 !important;
}
}