/* ========= БАЗОВАЯ ТЕМА ========= :root — это псевдокласс CSS который применяется к корню документа (тегу ). Здесь мы объявляем CSS-переменные — это как константы в программировании. Синтаксис: --название-переменной: значение; Использование в коде: color: var(--accent); Зачем: чтобы менять цвет/размер в одном месте и это применялось везде. */ :root { --primary-bg: #b7d9ff; /* Основной фон страницы (голубой) */ --primary-card: #ffffff; /* Фон карточек (белый) */ --primary-card-soft: #f3f7ff; /* Мягкий фон карточек (светло-голубой) */ --primary-border: #b6c2d6; /* Цвет рамок */ --accent: #5ba8ff; /* Акцентный цвет (синий) — кнопки, иконки */ --accent-soft: rgba(91, 168, 255, 0.15); /* Акцент с прозрачностью — для hover эффектов */ --accent-strong: #2f80ff; /* Более насыщенный акцент — заголовки, ссылки */ --danger: #ff6b6b; /* Красный — удаление, ошибки */ --success: #2eaf65; /* Зеленый — успех, галочки */ --warning: #ffb74d; /* Оранжевый — предупреждения */ --text-main: #1b2535; /* Основной цвет текста (темно-синий) */ --text-muted: #6c7a96; /* Приглушенный текст (подписи, метки) */ --text-soft: #7b8aa5; /* Еще более мягкий текст */ --radius-lg: 18px; /* Скругление углов большое — карточки */ --radius-md: 12px; /* Скругление углов среднее — поля ввода */ --radius-pill: 999px; /* Скругление-таблетка — кнопки, бейджи */ --shadow-soft: 0 18px 45px rgba(46, 97, 172, 0.25); /* Мягкая тень для модальных окон */ --shadow-card: 0 4px 14px rgba(46, 97, 172, 0.25); /* Тень для карточек */ --transition-fast: 0.18s ease-out; /* Быстрая анимация — hover кнопок */ --transition-normal: 0.25s ease-out; /* Нормальная анимация — раскрытие блоков */ --base-font-size: 14px; /* Базовый размер шрифта на всей странице */ } /* ========= БЛОКИРОВЩИК КОНТЕНТА И АВТОРИЗАЦИЯ ========= При загрузке страницы весь контент блокируется — поверх него накладывается темный полупрозрачный экран (content-blocker) и форма ввода пароля. Это клиентская защита — пароль хранится прямо в JS коде (CORRECT_PASSWORD). Важно понимать: это защита "от случайного просмотра", не от взлома. Если кто-то откроет DevTools в браузере — увидит пароль в коде. */ .content-blocker { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); z-index: 9998; display: flex; align-items: center; justify-content: center; } .auth-modal-center { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; min-width: 320px; transition: all 0.8s ease-in-out; /* КОММЕНТАРИЙ: Здесь можно изменить скорость сползания (2s) */ } .auth-modal-center.slide-down { top: 250%; /* Сползает вниз за пределы экрана */ } .auth-modal-center .modal-content { border-radius: var(--radius-lg); border: 2px solid var(--primary-border); box-shadow: var(--shadow-soft); background: linear-gradient(145deg, #ffffff, #f3f7ff); } body { margin: 0; padding: 16px; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: var(--base-font-size); background: radial-gradient(circle at top, #f5fbff 0, #b7d9ff 40%, #dae8ff 100%); color: var(--text-main); -webkit-font-smoothing: antialiased; min-height: 100vh; } .app-shell { /*max-width: 1440px;*/ margin: 0 auto; transition: filter 0.3s ease; } .app-shell.unauthorized { filter: blur(8px); pointer-events: none; user-select: none; } .card-soft { background: radial-gradient(circle at top left, rgba(91, 168, 255, 0.12) 0, var(--primary-card-soft) 55%); border-radius: var(--radius-lg); border: 1px solid var(--primary-border); box-shadow: var(--shadow-card); padding: 16px 18px; margin-bottom: 16px; } .card-soft-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .card-soft-title { font-size: 1.05rem; font-weight: 600; display: flex; align-items: center; gap: 8px; color: var(--text-main); } .card-soft-title i { color: var(--accent-strong); } .card-soft-subtitle { font-size: 0.8rem; color: var(--text-muted); } .pill { border-radius: var(--radius-pill); padding: 3px 10px; border: 1px solid var(--primary-border); background-color: #f8fbff; font-size: 0.75rem; color: var(--text-soft); } .app-header { margin-bottom: 18px; } .header-inner { background: linear-gradient(135deg, rgba(91, 168, 255, 0.18), #ffffff); border-radius: var(--radius-lg); padding: 16px 20px; border: 1px solid var(--primary-border); box-shadow: var(--shadow-soft); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .header-left { display: flex; align-items: center; gap: 14px; } .header-logo-wrap { width: 80px; height: 80px; border-radius: 20px; background: radial-gradient(circle at top, rgba(255, 255, 255, 0.96) 0, #e4f1ff 65%); display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(129, 167, 214, 0.6); } .header-logo-wrap img { max-height: 140px; width: auto; } .header-title-block h1 { font-size: 1.2rem; margin: 0; font-weight: 600; } .header-title-block p { margin: 2px 0 0; font-size: 0.8rem; color: var(--text-muted); } .header-right { display: flex; align-items: center; gap: 10px; } .header-badge { font-size: 0.75rem; padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid rgba(91, 168, 255, 0.55); color: var(--accent-strong); background-color: rgba(91, 168, 255, 0.12); } /* ========= СЕТКА СТРАНИЦЫ ========= Страница разбита на два ряда через CSS Grid. Grid — это система из строк и колонок, как таблица но гибче. layout-top-row: верхний ряд — Фильтры (60%) + Статистика (40%) 2.4fr и 1.6fr — это доли: fr = fraction (часть). 2.4fr + 1.6fr = 4fr итого. Первый блок занимает 2.4/4 = 60% ширины. layout-main-row: нижний ряд — Контейнеры (фиксированная колонка) + Оборудование (остаток) minmax(260px, 360px) — колонка контейнеров: минимум 260px, максимум 360px minmax(0, 1fr) — колонка оборудования: занимает всё оставшееся место @media — адаптив для мобильных: на экранах до 992px складываем всё в одну колонку */ .layout-top-row { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.6fr); gap: 16px; margin-bottom: 16px; } .layout-main-row { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 16px; align-items: flex-start; } @media (max-width: 992px) { .layout-top-row, .layout-main-row { grid-template-columns: minmax(0, 1fr); /* На мобильном — одна колонка */ } } .btn-main { border-radius: var(--radius-pill); background: linear-gradient(135deg, #5ba8ff, #86d4ff); border: none; color: #ffffff; font-weight: 600; font-size: 0.85rem; padding: 7px 18px; display: inline-flex; align-items: center; gap: 6px; transition: all var(--transition-fast); } .btn-main:hover { transform: translateY(-1px); box-shadow: 0 10px 25px rgba(91, 168, 255, 0.35); } .btn-ghost { border-radius: var(--radius-pill); border: 1px solid var(--primary-border); background-color: #f7f9ff; color: var(--text-soft); font-size: 0.75rem; padding: 5px 10px; display: inline-flex; align-items: center; gap: 6px; transition: all var(--transition-fast); } .btn-ghost:hover { background-color: var(--accent-soft); color: var(--accent-strong); transform: translateY(-1px); } .btn-icon-sm { border-radius: var(--radius-pill); border: 1px solid var(--primary-border); background-color: #f7f9ff; color: var(--text-soft); padding: 2px 7px; font-size: 0.7rem; display: inline-flex; align-items: center; gap: 4px; transition: all var(--transition-fast); } .btn-icon-sm:hover { background-color: var(--accent-soft); color: var(--accent-strong); } .btn-icon-sm-danger:hover { background-color: rgba(255, 107, 107, 0.16); color: #d84343; } .form-label { font-size: 0.78rem; color: var(--text-soft); margin-bottom: 3px; } .form-control, .form-select { background-color: #f7f9ff; border-radius: var(--radius-md); border: 1px solid var(--primary-border); color: var(--text-main); font-size: 0.82rem; padding: 6px 9px; } .form-control:focus, .form-select:focus { outline: none; border-color: rgba(91, 168, 255, 0.9); box-shadow: 0 0 0 1px rgba(91, 168, 255, 0.45); background-color: #ffffff; } .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } .containers-card { background: linear-gradient(145deg, #ffffff, #f3f7ff); border-radius: var(--radius-lg); border: 1px solid var(--primary-border); padding: 12px 14px; box-shadow: var(--shadow-card); } .containers-list { margin-top: 8px; max-height: 520px; overflow-y: auto; padding-right: 4px; } .container-item { border-radius: var(--radius-md); padding: 7px 9px; margin-bottom: 6px; border: 1px solid var(--primary-border); background-color: #f8fbff; cursor: pointer; display: flex; flex-direction: column; gap: 3px; transition: all var(--transition-fast); } .container-item:hover { background-color: #e6f0ff; border-color: rgba(91, 168, 255, 0.7); transform: translateY(-1px); } .container-item.active { background: linear-gradient(135deg, rgba(91, 168, 255, 0.18), #eef4ff); border-color: rgba(91, 168, 255, 0.95); } .container-main-line { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .container-title { font-size: 0.85rem; font-weight: 600; color: var(--text-main); } .container-tag-row { display: flex; flex-wrap: wrap; gap: 4px; font-size: 0.72rem; color: var(--text-muted); } .container-tag { padding: 1px 6px; border-radius: var(--radius-pill); border: 1px solid var(--primary-border); background-color: #ffffff; } .container-meta { margin-top: 2px; display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--text-soft); } .equipment-card { background: linear-gradient(145deg, #ffffff, #f3f7ff); border-radius: var(--radius-lg); border: 1px solid var(--primary-border); padding: 12px 14px; box-shadow: var(--shadow-card); } .equipment-header-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .equipment-count-pill { border-radius: var(--radius-pill); padding: 2px 10px; font-size: 0.75rem; border: 1px solid var(--primary-border); color: var(--text-soft); background-color: #f7f9ff; } .equipment-table-wrap { margin-top: 4px; border-radius: var(--radius-md); border: 1px solid var(--primary-border); overflow: hidden; background-color: #ffffff; } .table { margin: 0; font-size: 0.8rem; color: var(--text-main); } .table thead { background: linear-gradient(135deg, #eef4ff, #dde9ff); } .table thead th { border-bottom: 1px solid var(--primary-border); padding: 6px 8px; white-space: nowrap; font-weight: 500; color: var(--text-soft); } .table tbody tr { transition: background var(--transition-fast); } .table tbody tr:hover { background-color: #eef4ff; } .table tbody td { border-top: 1px solid #e2ebff; padding: 6px 8px; vertical-align: middle; } .container-row { background: radial-gradient(circle at left, rgba(17, 125, 249, 0.35), #f5f8ff); cursor: pointer; } .container-row:hover { background: radial-gradient(circle at left, rgba(91, 168, 255, 0.43), #edf3ff); } .container-toggle-icon { font-size: 0.78rem; margin-right: 4px; color: var(--accent-strong); transition: transform 0.2s; } .equipment-child-row { background-color: #8bc2fc75; } .equipment-child-row td { border-top-style: dashed; } .status-true { color: var(--success); font-weight: 600; } .status-false { color: var(--danger); font-weight: 600; } .badge-soft { border-radius: var(--radius-pill); padding: 2px 8px; border: 1px solid var(--primary-border); background-color: #f7f9ff; font-size: 0.75rem; } .add-equipment-card { background: linear-gradient(135deg, #ffffff, #f3f7ff); border-radius: var(--radius-lg); border: 1px solid var(--primary-border); padding: 14px 16px 10px; margin-bottom: 10px; box-shadow: var(--shadow-card); } .add-equipment-header { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; } .add-equipment-title { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 600; } .add-equipment-toggle-icon { transition: transform var(--transition-normal); font-size: 0.85rem; color: var(--text-soft); } .add-equipment-toggle-icon.collapsed { transform: rotate(-90deg); } .add-equipment-body { margin-top: 10px; overflow: hidden; } .add-equipment-body-inner { padding-top: 6px; border-top: 1px dashed rgba(148, 167, 214, 0.6); } .filters-quick-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .filters-search-wrap { flex: 1 1 auto; position: relative; } .filters-search-wrap i { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 0.78rem; color: var(--text-muted); } #globalSearch { padding-left: 24px; } .filters-buttons { display: flex; gap: 6px; flex-wrap: wrap; } .stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } @media (max-width: 992px) { .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .stat-card { border-radius: var(--radius-md); padding: 10px 10px 8px; border: 1px solid var(--primary-border); background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.8) 0, #f3f7ff 55%); cursor: pointer; transition: all var(--transition-normal); } .stat-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(119, 155, 214, 0.35); border-color: rgba(91, 168, 255, 0.7); } .stat-label { font-size: 0.75rem; color: var(--text-soft); margin-bottom: 3px; } .stat-value { font-size: 0.98rem; font-weight: 600; } .stat-badge-row { margin-top: 8px; display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-muted); } .light-modal { background: linear-gradient(145deg, #ffffff, #f3f7ff); border-radius: var(--radius-lg); border: 1px solid var(--primary-border); box-shadow: var(--shadow-soft); } .file-upload-section { border: 2px dashed var(--primary-border); border-radius: var(--radius-md); padding: 12px; background: var(--primary-card-soft); margin-bottom: 15px; } .file-item { background: white; border-radius: var(--radius-md); padding: 8px; margin-bottom: 6px; border: 1px solid var(--primary-border); display: flex; justify-content: space-between; align-items: center; } .file-info a { color: var(--text-main); text-decoration: none; } .file-info a:hover { color: var(--accent-strong); } .file-hint { font-size: 0.75rem; color: var(--text-muted); } @keyframes authShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } .auth-shake { animation: authShake 0.3s ease-in-out; } .database-status-toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; min-width: 300px; max-width: 500px; } /* ========= НОВАЯ СТРУКТУРА ========= */ .main-content { padding-bottom: 80px; } .search-hero { background: linear-gradient(135deg, rgba(91, 168, 255, 0.18), #ffffff); border-radius: var(--radius-lg); border: 1px solid var(--primary-border); box-shadow: var(--shadow-card); padding: 20px 24px; margin-bottom: 12px; } .search-hero-row { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; } .search-hero-input-wrap { flex: 1; position: relative; } .search-hero-input-wrap i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); } .search-hero-input-wrap input { padding-left: 34px; font-size: 0.95rem; height: 40px; } .search-filters-row { display: flex; gap: 8px; flex-wrap: wrap; } .search-filters-row .form-select { flex: 1 1 140px; max-width: 200px; } .search-results { display: none; } .search-results.visible { display: block; } .tab-panel { display: none; } .tab-panel.active { display: block; } .app-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); border-top: 1px solid var(--primary-border); padding: 8px 16px; display: flex; justify-content: center; gap: 8px; } .footer-btn { border-radius: var(--radius-pill); border: 1px solid var(--primary-border); background: #f7f9ff; color: var(--text-soft); font-size: 0.8rem; padding: 7px 18px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: all var(--transition-fast); font-weight: 500; } .footer-btn:hover { background: var(--accent-soft); color: var(--accent-strong); border-color: rgba(91,168,255,0.6); transform: translateY(-1px); } .footer-btn.active { background: linear-gradient(135deg, #5ba8ff, #86d4ff); color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(91,168,255,0.4); } .year-group { margin-bottom: 12px; } .year-header { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: linear-gradient(135deg, rgba(91,168,255,0.15), #eef4ff); border-radius: var(--radius-md); border: 1px solid var(--primary-border); cursor: pointer; user-select: none; margin-bottom: 6px; transition: all var(--transition-fast); } .year-header:hover { background: linear-gradient(135deg, rgba(91,168,255,0.25), #e4edff); } .year-title { font-weight: 600; font-size: 0.95rem; color: var(--accent-strong); } .year-count { font-size: 0.75rem; color: var(--text-muted); margin-left: auto; } .stats-panel { max-width: 700px; margin: 0 auto; } .stats-big-card { background: linear-gradient(145deg, #ffffff, #f3f7ff); border-radius: var(--radius-lg); border: 1px solid var(--primary-border); box-shadow: var(--shadow-card); padding: 24px; margin-bottom: 16px; text-align: center; } .stats-big-value { font-size: 2rem; font-weight: 700; color: var(--accent-strong); margin: 8px 0; } .stats-big-label { font-size: 0.85rem; color: var(--text-muted); } /* Базовый стиль для карточки контейнера */ .container-card { transition: background-color 0.3s ease, border-color 0.3s ease; border: 1px solid #e0e0e0; background-color: #ffffff; } /* Стиль, который автоматически применится, когда контейнер РАЗВЕРНУТ */ .container-card.is-expanded { background-color: #f4f7fc !important; /* Мягкий пастельный сине-серый оттенок */ border-color: #b4c6e7; /* Выделение границ */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Легкая тень для объема */ } /* Специфический цвет фона для списка оборудования внутри развернутого контейнера */ .container-card.is-expanded .equipment-list { background-color: #ffffff; border-radius: 6px; padding: 10px; border: 1px dashed #ced4da; }