@charset "UTF-8"; /* ===== N3000 Web — дизайн-система (тёмная тема СКУД) ===== */ :root { --bg: #0e1116; --bg-panel: #161b22; --bg-panel-2: #1c2230; --bg-elev: #212a38; --border: #2a3340; --border-strong: #3a4656; --text: #e6edf3; --text-dim: #9aa7b4; --text-mute: #64707d; --accent: #2dd4bf; --accent-2: #22a89a; --accent-ink: #06231f; --danger: #f26d6d; --danger-bg: #3a1f22; --ok: #4ec98b; --ok-bg: #16311f; --warn: #e2b23c; --warn-bg: #33290f; --radius: 9px; --radius-sm: 6px; --sidebar-w: 236px; --shadow: 0 8px 28px rgba(0,0,0,.45); --login-glow: #16202b; --sidebar-bg: linear-gradient(180deg, #12161d, #0d1014); --door-opening: #0a0e13; --door-panel: linear-gradient(135deg, #33404f, #232c39); color-scheme: dark; font-synthesis: none; } /* ===== Светлая тема (переключается через data-theme на ) ===== */ :root[data-theme="light"] { --bg: #eef1f6; --bg-panel: #ffffff; --bg-panel-2: #f4f6fa; --bg-elev: #ffffff; --border: #dfe4ec; --border-strong: #c6cedb; --text: #17202e; --text-dim: #566072; --text-mute: #8b95a5; --accent: #0f9e8f; --accent-2: #0c7d72; --accent-ink: #ffffff; --danger: #d64545; --danger-bg: #fdeaea; --ok: #1f9d57; --ok-bg: #e8f6ed; --warn: #c98a12; --warn-bg: #f7ecd0; --shadow: 0 10px 30px rgba(26,38,60,.12); --login-glow: #d3e0ea; --sidebar-bg: linear-gradient(180deg, #ffffff, #eef1f6); --door-opening: #7c8b9c; --door-panel: linear-gradient(135deg, #eef2f7, #dbe3ec); color-scheme: light; } * { box-sizing: border-box; } /* ===== Анимации появления страниц ===== */ @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } /* Спиннер (напр. на кнопке поиска во время сканирования). */ @keyframes spin { to { transform: rotate(360deg); } } .spinner { display: inline-block; width: 13px; height: 13px; border: 2px solid rgba(127,127,127,.35); border-top-color: currentColor; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; margin-right: 6px; } /* Скелетон-заглушка таблицы (мерцание) во время загрузки. */ @keyframes shimmer { 0% { background-position: -360px 0; } 100% { background-position: calc(100% + 360px) 0; } } .skeleton-row { height: 40px; border-radius: 8px; margin: 8px 14px; /* бегущий блик поверх нейтральной подложки — виден и в светлой, и в тёмной теме (прежний градиент panel→panel-2 в светлой теме был практически неразличим) */ background-color: var(--bg-panel-2); background-image: linear-gradient(90deg, transparent 0, rgba(127,127,127,.25) 180px, transparent 360px); background-repeat: no-repeat; background-size: 360px 100%; animation: shimmer 1.15s infinite linear; } .skeleton-row:last-child { margin-bottom: 14px; } .page-head { animation: rise .3s ease both; } /* backwards, не both: после анимации transform возвращается к none. При both Chrome оставляет единичную matrix(1,0,0,1,0,0) — а любой transform≠none делает .card containing-block'ом и stacking-контекстом, из-за чего всплывающее меню строки (position:fixed) смещалось и уходило под соседние ячейки. Вход сохраняется (to == базовое состояние, «прыжка» нет). */ .card { animation: rise .34s ease backwards; } .stats .stat { animation: rise .34s ease both; } .stats .stat:nth-child(2) { animation-delay: .04s; } .stats .stat:nth-child(3) { animation-delay: .08s; } .stats .stat:nth-child(4) { animation-delay: .12s; } .stats .stat:nth-child(5) { animation-delay: .16s; } /* backwards, не both: заполняющая (both) анимация держит строку постоянным stacking-контекстом, и следующая строка рисуется поверх всплывающего меню предыдущей. backwards оставляет вход, но в покое строка — не stacking-контекст. */ .grid tbody tr { animation: fade .3s ease backwards; } @media (prefers-reduced-motion: reduce) { .page-head, .card, .stats .stat, .grid tbody tr, .modal, .modal-backdrop { animation: none !important; transition: none !important; } } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: "Segoe UI", "Inter", system-ui, -apple-system, sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { margin: 0 0 .4em; font-weight: 600; letter-spacing: -.01em; } h1:focus, h1:focus-visible { outline: none; } /* убрать фокус-рамку от FocusOnNavigate */ /* Кнопки-иконки в топбаре (тема, звук) */ .icon-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-dim); font-size: 15px; cursor: pointer; padding: 0; line-height: 1; transition: background .15s, color .15s, border-color .15s; } .icon-btn:hover { background: var(--bg-elev); color: var(--text); border-color: var(--border-strong); } .icon-btn.muted { color: var(--text-mute); } /* Триггер командной палитры в сайдбаре */ .cmdk-trigger { display: flex; align-items: center; gap: 8px; margin: 6px 12px 4px; padding: 8px 10px; background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-mute); font-size: 12.5px; font-family: inherit; cursor: pointer; transition: border-color .15s, color .15s; } .cmdk-trigger:hover { border-color: var(--border-strong); color: var(--text-dim); } .cmdk-trigger .cmdk-ico { font-size: 14px; } .cmdk-trigger .cmdk-kbd { margin-left: auto; } .cmdk-kbd { font-size: 10px; color: var(--text-mute); border: 1px solid var(--border-strong); border-radius: 4px; padding: 1px 5px; letter-spacing: .04em; white-space: nowrap; } h1 { font-size: 1.4rem; } h2 { font-size: 1.1rem; } /* ===== Каркас ===== */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--sidebar-bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .brand { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 18px 16px; border-bottom: 1px solid var(--border); } .brand-logo { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; color: var(--accent-ink); font-weight: 800; font-size: 15px; box-shadow: 0 0 0 1px rgba(45,212,191,.25), 0 4px 14px rgba(45,212,191,.25); } .brand-name { font-weight: 700; font-size: 15px; line-height: 1; } .brand-sub { color: var(--text-mute); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; } /* Логотип бренда (ControlledCare) — на боковой панели и на странице входа */ .brand-img { max-width: 100%; height: 30px; width: auto; object-fit: contain; } .login-card .brand-img { height: 40px; } .nav { padding: 8px 10px; overflow-y: auto; flex: 1; } .nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 2px 0; border-radius: var(--radius-sm); color: var(--text-dim); font-weight: 500; text-decoration: none; transition: background .12s, color .12s; } .nav a:hover { background: var(--bg-panel-2); color: var(--text); } .nav a .ico { width: 18px; text-align: center; opacity: .9; font-size: 15px; } /* Верхнеуровневые пункты (Dashboard + заголовки секций) */ .nav-top { font-weight: 600; } /* Заголовок секции —