/* ============================================================================
ЕДИНЫЙ СТИЛЬ ПРОЕКТА — НЕОМОРФИЗМ
----------------------------------------------------------------------------
Перенесен из dashboard.html, чтобы все страницы выглядели одинаково.
ПОДКЛЮЧЕНИЕ: в каждой страницы, ПОСЛЕ Tailwind:
Ключевые классы:
.neu, .neu-sm, .neu-lg — выпуклые блоки (карточки, панели)
.neu-inset, .neu-inset-sm — впадины (поля ввода, области)
.metric-card — карточка показателя, всплывает при наведении
.soft-select — выпадающие списки и поля
.btn-soft — кнопки, активная становится впадиной
.neu-chip, .neu-icon — мелкие плашки и круглые иконки
.glass, .glass-soft — старые имена, оставлены для совместимости
Если страница верстается классами Tailwind (bg-white, shadow-sm, border),
раздел «АДАПТАЦИЯ СТАРОЙ ВЕРСТКИ» внизу приводит ее к общему виду
автоматически, без правки разметки.
============================================================================ */
:root {
--bg: #e4e9f2;
--bg-light: #f0f4fa;
--shadow-dark: #c8d0e0;
--shadow-light: #ffffff;
--accent: #5b7cfa;
--accent-soft: #7b93f5;
--text: #3d4a5c;
--text-muted: #8b97a8;
}
.custom-scrollbar::-webkit-scrollbar { height: 6px; width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #c8d0e0;
border-radius: 20px;
box-shadow: inset 1px 1px 2px #a8b4c8, inset -1px -1px 2px #e8eef8;
}
/* ===== NEUMORPHISM: выпуклые элементы (raised) ===== */
.neu {
background: var(--bg);
border-radius: 24px;
border: none;
box-shadow:
9px 9px 18px var(--shadow-dark),
-9px -9px 18px var(--shadow-light);
}
.neu-sm {
background: var(--bg);
border-radius: 16px;
border: none;
box-shadow:
5px 5px 12px var(--shadow-dark),
-5px -5px 12px var(--shadow-light);
}
.neu-lg {
background: var(--bg);
border-radius: 28px;
border: none;
box-shadow:
12px 12px 24px var(--shadow-dark),
-12px -12px 24px var(--shadow-light);
}
/* ===== NEUMORPHISM: впадины (inset / recessed) ===== */
.neu-inset {
background: var(--bg);
border-radius: 20px;
border: none;
box-shadow:
inset 6px 6px 12px var(--shadow-dark),
inset -6px -6px 12px var(--shadow-light);
}
.neu-inset-sm {
background: var(--bg);
border-radius: 14px;
border: none;
box-shadow:
inset 4px 4px 8px var(--shadow-dark),
inset -4px -4px 8px var(--shadow-light);
}
.neu-inset-deep {
background: var(--bg);
border-radius: 24px;
border: none;
box-shadow:
inset 8px 8px 16px var(--shadow-dark),
inset -8px -8px 16px var(--shadow-light);
}
/* Совместимость со старыми классами glass */
.glass, .glass-strong {
background: var(--bg);
border-radius: 24px;
border: none;
box-shadow:
9px 9px 18px var(--shadow-dark),
-9px -9px 18px var(--shadow-light);
}
.glass-soft {
background: var(--bg);
border-radius: 16px;
border: none;
box-shadow:
inset 4px 4px 8px var(--shadow-dark),
inset -4px -4px 8px var(--shadow-light);
}
/* Sidebar — мягкий выпуклый блок */
.sidebar {
background: var(--bg);
border-right: none;
box-shadow:
6px 0 18px var(--shadow-dark),
-2px 0 8px var(--shadow-light);
}
.nav-item {
transition: all 0.2s ease;
border-radius: 14px;
color: var(--text-muted);
}
.nav-item:hover {
box-shadow:
inset 3px 3px 6px var(--shadow-dark),
inset -3px -3px 6px var(--shadow-light);
color: var(--text);
}
.nav-item.active {
box-shadow:
inset 4px 4px 8px var(--shadow-dark),
inset -4px -4px 8px var(--shadow-light);
color: var(--accent);
font-weight: 600;
}
/* Селекты — впадины */
.soft-select {
background: var(--bg);
border: none;
border-radius: 14px;
color: var(--text);
box-shadow:
inset 4px 4px 8px var(--shadow-dark),
inset -4px -4px 8px var(--shadow-light);
transition: all 0.2s;
}
.soft-select:focus {
outline: none;
box-shadow:
inset 5px 5px 10px var(--shadow-dark),
inset -5px -5px 10px var(--shadow-light),
0 0 0 3px rgba(91, 124, 250, 0.12);
}
/* Метрики — выпуклые, при наведении чуть «всплывают» */
.metric-card {
background: var(--bg);
border-radius: 24px;
border: none;
box-shadow:
8px 8px 16px var(--shadow-dark),
-8px -8px 16px var(--shadow-light);
transition: all 0.25s ease;
}
.metric-card:hover {
box-shadow:
12px 12px 24px var(--shadow-dark),
-12px -12px 24px var(--shadow-light);
transform: translateY(-3px);
}
/* Кнопки — выпуклые / активная = впадина */
.btn-soft {
background: var(--bg);
border: none;
border-radius: 14px;
color: var(--text-muted);
box-shadow:
4px 4px 8px var(--shadow-dark),
-4px -4px 8px var(--shadow-light);
transition: all 0.15s ease;
}
.btn-soft:hover {
color: var(--text);
}
.btn-soft:active,
.btn-soft.active {
color: var(--accent);
font-weight: 600;
box-shadow:
inset 4px 4px 8px var(--shadow-dark),
inset -4px -4px 8px var(--shadow-light);
}
/* Иконки в кружках — мягкие впадины */
.neu-icon {
background: var(--bg);
border-radius: 16px;
box-shadow:
inset 3px 3px 6px var(--shadow-dark),
inset -3px -3px 6px var(--shadow-light);
}
/* Прогресс-бар — впадина */
.neu-progress {
background: var(--bg);
border-radius: 20px;
box-shadow:
inset 3px 3px 6px var(--shadow-dark),
inset -3px -3px 6px var(--shadow-light);
}
/* Чипы / бейджи */
.neu-chip {
background: var(--bg);
border-radius: 12px;
border: none;
box-shadow:
3px 3px 6px var(--shadow-dark),
-3px -3px 6px var(--shadow-light);
}
/* Фон страницы */
/* База цвета — на html; body прозрачный, чтобы фоновый слой
с самолётами (z-index:-1, дочерний к body) был виден. */
html { background: var(--bg) !important; }
body {
background: transparent !important;
color: var(--text);
}
/* Мягкие разделители без линий */
.neu-divider {
height: 2px;
background: transparent;
box-shadow:
inset 0 1px 1px var(--shadow-dark),
inset 0 -1px 1px var(--shadow-light);
border: none;
margin: 0;
}
/* Карточки зон внутри тепловой карты */
.zone-card {
background: var(--bg);
border-radius: 24px;
border: none;
box-shadow:
8px 8px 16px var(--shadow-dark),
-8px -8px 16px var(--shadow-light);
transition: all 0.25s ease;
}
.zone-card:hover {
box-shadow:
10px 10px 20px var(--shadow-dark),
-10px -10px 20px var(--shadow-light);
}
/* Статус комнаты — мягкая впадина */
.room-status {
border-radius: 16px;
border: none;
box-shadow:
inset 3px 3px 6px rgba(0,0,0,0.06),
inset -3px -3px 6px rgba(255,255,255,0.7);
}
/* ==========================================================
БОКОВАЯ ПАНЕЛЬ
Панель занимает всю высоту окна и не прокручивается целиком:
логотип сверху и блок выхода снизу закреплены. Прокручивается
только средняя часть