/* ══════════════════════════════════════════════════════════════
THEME: VERHOFF
──────────────────────────────────────────────────────────────
Финальная фирменная тема организации VERHOFF.
⚠ ВАЖНО: VERHOFF — НЕПРИКОСНОВЕННЫЙ.
Визуал этой темы НЕ МЕНЯЕТСЯ ни в этом проекте, ни в будущем.
Все работы с этим файлом — исключительно техническая миграция
на новую структуру токенов с ПОПИКСЕЛЬНЫМ сохранением визуала.
Принципы:
• Семантические токены (--ink, --surface, --accent, --card-fg ...)
резолвятся в hex-значения, попиксельно соответствующие
историческому виду — компоненты рендерят те же цвета, что были
до миграции на семантику.
• Шрифты — Inter (ui) + GillSans (display/logo) — как было.
• Акцент = белый, не голубой. На VERHOFF понятие цветного
акцента отсутствует by design.
══════════════════════════════════════════════════════════════ */
@font-face {
font-family: 'GillSans';
src: url('/fonts/GillSansC.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
:root {
/* ════════════════════════════════════════════════════════════
ТИПОГРАФИКА — Inter + GillSans
════════════════════════════════════════════════════════════ */
--font-ui: 'Inter', sans-serif;
--font-display: 'GillSans', 'Playfair Display', Georgia, serif;
--font-logo: 'GillSans', 'Gill Sans', sans-serif;
/* ════════════════════════════════════════════════════════════
SEMANTIC LAYER — резолвится через legacy
──────────────────────────────────────────────────────────────
Главный приём: каждый семантический токен указывает на
соответствующее legacy-значение, чтобы компоненты на новой
семантике рендерили те же цвета, что были раньше.
════════════════════════════════════════════════════════════ */
/* ── Поверхности и фон ────────────────────────────────────── */
/* На VERHOFF страница чёрная, карточки — белые с прозрачностью.
Так было — так и оставляем. */
--bg: #000000; /* чёрный фон */
--bg-alt: #222222; /* чуть светлее, для зон */
--surface: rgba(255, 255, 255, .06); /* белая полупрозрачная карточка */
--surface-2: rgba(255, 255, 255, .08); /* поля ввода, плашки */
--surface-elevated: #111111; /* модалка — почти чёрная */
/* На VERHOFF тёмная поверхность инверсна — это БЕЛАЯ.
На чёрном фоне «тёмный» hero становится белым контрастом. */
--surface-dark: #ffffff;
--surface-dark-2: #f0f0f0;
/* ── Текст ─────────────────────────────────────────────────── */
/* Текст на VERHOFF на чёрном фоне — белый/серый. */
--ink: #ffffff;
--ink-2: #888888; /* #888 — серый средний */
--ink-3: #bbbbbb; /* #bbb — бледный третичный (placeholder, неактивные иконки) */
/* «Текст на тёмной поверхности» — на VERHOFF тёмная = БЕЛАЯ.
Поэтому --ink-on-dark становится чёрным. */
--ink-on-dark: #000000;
--ink-on-dark-2: rgba(0, 0, 0, .65);
--ink-on-dark-3: rgba(0, 0, 0, .4);
/* ── Линии ─────────────────────────────────────────────────── */
--line: rgba(255, 255, 255, .12);
--line-strong: rgba(255, 255, 255, .15);
/* Линии «на тёмной поверхности» — поверхность БЕЛАЯ → линии чёрные */
--line-on-dark: rgba(0, 0, 0, .1);
/* ── Акцент — на VERHOFF БЕЛЫЙ, не голубой ─────────────────── */
/* На VERHOFF понятие цветного акцента отсутствует. Все ссылки
на --accent / --accent-* резолвятся в чёрно-белую инверсию
соответствующего контекста. */
--accent: #ffffff;
--accent-strong: #ffffff;
--accent-deep: #000000;
--accent-soft-bg: rgba(255, 255, 255, .08);
--accent-soft-fg: #ffffff;
/* ── Primary CTA ──────────────────────────────────────────── */
/* На VERHOFF primary = белая кнопка с чёрным текстом */
--primary: #ffffff;
--primary-fg: #000000;
/* ── Семантика статусов ────────────────────────────────────── */
/* На VERHOFF status-плашки рендерятся НА БЕЛЫХ КАРТОЧКАХ (employee rows,
отчёты, чек-листы). Поэтому используются классические светло-цветные
плашки (как в default.css), не адаптированные под тёмный фон.
Это попиксельно соответствует тому что было в admin.css/employee.css
через хардкоды #e8f5e9 / #2e7d32 и подобные. */
--success-bg: #E8F5E9;
--success-fg: #2E7D32;
--success-strong: #4CAF50;
--success-line: #C8E6C9;
--warning-bg: #FFF4E5;
--warning-fg: #B85F00;
--warning-strong: #F59E0B;
--warning-line: #FFE0B2;
--danger-bg: #FEE2E2;
--danger-fg: #B91C1C;
--danger-strong: #EF4444;
--danger-line: #FCA5A5;
/* Info — для нейтральных статусов (например, revised/accepted ревизии).
На обеих темах одинаковый — синий, всегда на белой карточке. */
--info-bg: #E3F2FD;
--info-fg: #1565C0;
--info-strong: #1976D2;
--info-line: #BBDEFB;
/* ── Менеджер смены (МС) — фиолетовый, как был в admin.css ── */
--supervisor-bg: #F3E5F5;
--supervisor-fg: #7B1FA2;
--supervisor-line: #CE93D8;
/* ── Оверлеи и эффекты ────────────────────────────────────── */
--scrim: rgba(0, 0, 0, .7); /* плотнее чем у дефолта */
--hero-glow: rgba(255, 255, 255, .06); /* белое свечение, не голубое */
/* ── Login PIN-точки ───────────────────────────────────────── */
/* VERHOFF: обводные точки → заполненные белые при вводе.
Резолвится через legacy, чтобы сохранить текущий визуал. */
--pin-dot-bg: transparent;
--pin-dot-border: #555555; /* #555 — было var(--text-tertiary) */
--pin-dot-bg-filled: #ffffff;
--pin-dot-border-filled: #ffffff;
/* ── Каркас admin/employee — фон страницы и навбара ───────── */
/* На VERHOFF — чёрный фон страницы (под шапкой) + белые экраны и навбар.
Сохраняет текущий визуал попиксельно. */
--page-top-bg: #000000; /* фон body сверху, под шапкой */
--screen-bg: #ffffff; /* фон экранов (.screen) */
--nav-bg: #ffffff; /* фон нижнего навбара */
--nav-border: #e5e5e5; /* верхняя обводка навбара (#e5e5e5) */
--nav-fg-active: #000000; /* активная иконка — чёрная на белом */
--nav-fg-inactive: #bbbbbb; /* неактивная — светло-серая (#bbb) */
/* ── Org-banner (grace/suspended) ──────────────────────────
Banner ВСЕГДА с белым фоном — намеренный UX-выбор для контраста
с цветной рамкой (--banner-border-color, ставится из JS). */
--banner-bg: #ffffff;
--banner-fg: #111111; /* тёмный текст на белом */
--banner-fg-soft: #888888; /* вторичный (close-кнопка) */
/* ── Карточки и строки контента на белых экранах ────────────
На VERHOFF .screen белые, поэтому контент-карточки/строки
должны иметь сплошные (не полупрозрачные) цвета.
Резолвится через legacy для попиксельного сохранения. */
--card-bg: #ffffff;
--card-bg-hover: #fafafa; /* #fafafa — лёгкий ховер */
--card-fg: #000000; /* основной текст карточки */
--card-fg-2: #888888; /* #888 — вторичный */
--card-fg-3: #bbbbbb; /* #bbb — третичный */
--card-line: #f5f5f5; /* #f5f5f5 — разделители строк */
--card-line-strong: #e5e5e5; /* #e5e5e5 — сильные разделители */
/* Инверсные блоки внутри карточек (статус «Сдан», тёмные кнопки) */
--card-fg-inverse-bg: #000000;
--card-fg-inverse-fg: #ffffff;
/* Прогресс-бары на карточках */
--progress-track: #e5e5e5; /* #e5e5e5 */
--progress-fill: #000000; /* на VERHOFF — чёрный fill */
/* ── Поля ввода (form-input, form-select, dropdown cd-*) ────
Резолвится через legacy для попиксельного сохранения визуала.
Особенность VERHOFF: focus в admin.css не меняет рамку
(border-color: #e5e5e5 и до и после) — повторяем это
поведение через --field-border-focus = --gray-6. */
--field-bg: #ffffff;
--field-fg: #000000;
--field-border: #e5e5e5; /* #e5e5e5 */
--field-border-focus: #e5e5e5; /* без видимого focus — как было */
--field-placeholder: #bbbbbb; /* #bbb */
--field-label-fg: #555555; /* #555 — uppercase form-label */
--field-sublabel-fg: #888888; /* #888 — form-sublabel */
/* ── Кнопки rect (admin-модалки: btn-primary / btn-secondary) ──
На VERHOFF rect-btn-primary в модалках — ЧЁРНАЯ (был
`background: #000000`), не белая. Это отличается от
pill-CTA --primary, который белый. Разные компоненты. */
--btn-primary-bg: #000000;
--btn-primary-fg: #ffffff;
--btn-secondary-bg: #ffffff;
--btn-secondary-bg-hover:#fafafa; /* #fafafa */
--btn-secondary-fg: #000000;
--btn-secondary-border: #e5e5e5; /* #e5e5e5 */
/* ── Role-toggle (переключатель в invite-code модалке) ───────
На VERHOFF неактивная кнопка — рамка #bbb, текст чёрный;
активная — чёрная с белым. Резолвится через legacy. */
--toggle-btn-bg: transparent;
--toggle-btn-fg: #000000;
--toggle-btn-border: #bbbbbb; /* #bbb */
--toggle-btn-active-bg: #000000;
--toggle-btn-active-fg: #ffffff;
/* ── Custom dropdown (cd-*) — рамка выпадающего списка ──
На VERHOFF была заметной тёмной (#555555 = #555).
Сохраняем через legacy. */
--cd-list-border: #555555; /* #555 */
/* ── Bottom-sheet (modal-sheet, task-sheet) ─────────────────
На VERHOFF лист модалки белый (как было), handle серый.
Резолвится через legacy для попиксельного сохранения. */
--sheet-bg: #ffffff;
--sheet-handle: #e5e5e5; /* #e5e5e5 */
/* ── Day-cell (плашка дня на белом фоне) ────────────────────
На VERHOFF — #f5f5f5 (заметно отделяется от белой страницы),
возвращаем к исходному виду как было до 5.7.2c. */
--day-cell-bg: #f1f1f1; /* #f1f1f1 — чуть темнее исходного #f5f5f5 (по запросу: карточки вопросов/свайпы/календарь заметнее отделяются от белого) */
/* ── Icon-button (круглая, с серым фоном) ─────────────────── */
--icon-btn-bg: #f5f5f5; /* #f5f5f5 — как было */
/* ── Skeleton (placeholder при загрузке) ────────────────────
Сплошной серый — на белой карточке. Резолв через legacy. */
--skeleton-bg: #f5f5f5; /* #f5f5f5 */
/* ── Toast (всплывающее уведомление) ────────────────────────
Toast тёмный в обеих темах. На VERHOFF — чёрный с белым,
резолв через legacy для попиксельного сохранения. */
--toast-bg: #000000;
--toast-fg: #ffffff;
/* ════════════════════════════════════════════════════════════
ШАГ 7 — Новые семантические токены (замена legacy-мостов)
──────────────────────────────────────────────────────────────
Введены при удалении --gray-*, --black, --white, --font-serif.
Каждый токен заменяет конкретный мост, документированный в
REDESIGN_PLAN v11 «Полный список долгов».
На VERHOFF значения резолвятся через текущие legacy-токены
для попиксельного сохранения. После 7.4 (удаление legacy) эти
ссылки превратятся в прямые хексы.
════════════════════════════════════════════════════════════ */
/* ── Body text default ──────────────────────────────────────
На VERHOFF --ink инвертирован в белый, но текст в карточках
должен оставаться ТЁМНЫМ — карточки на VERHOFF тоже белые
(Урок 1: VERHOFF — гибрид). Поэтому НЕ var(--ink), а явный тёмный. */
--text-default: #1a1a1a; /* лёгкое смягчение от #000 — на белых
карточках читается мягче. На VERHOFF
--ink инвертируется в белый, поэтому
нужен явный тёмный токен (Урок 5). */
/* ── Hero-зоны (always-dark) ────────────────────────────────
Для #splash, .profile-header, .notif-panel-header, .success-overlay.
На VERHOFF — жёсткий чёрный/белый, как было через --black/--white. */
--hero-bg: #000000; /* #000000 на VERHOFF */
--hero-fg: #ffffff; /* #ffffff */
--hero-fg-2: #888888; /* #888 — был --gray-4 */
--hero-line: #555555; /* #555 — декоративная линия на splash, был --gray-3 */
--hero-avatar-bg: #222222; /* #222 — фон аватара на hero, был --gray-2 */
/* ── History/Archive текст ──────────────────────────────────
На VERHOFF был --gray-2 (#222) — тёмный приглушённый на белом фоне. */
--card-fg-history: #222222; /* #222 */
/* ── Swipe-action подпись (на пассивном фоне --day-cell-bg) ──
На VERHOFF тот же оттенок что --card-fg-history (#222), но
семантически другое — НЕ архив. Для .cl-action-*, .q-card-delete-btn. */
--swipe-action-fg: #222222; /* #222 */
/* ── Toggle-btn активный border ─────────────────────────────
Ранее был #bbbbbb = #bbb. Сохраняем точное значение. */
--toggle-btn-active-border: #bbbbbb; /* #bbbbbb */
/* ── Table-cell приглушённый фон ────────────────────────────
Ранее был #fafafa = #fafafa в инспекшен-таблице. */
--table-cell-bg-subtle: #fafafa; /* #fafafa */
/* ── Header action-кнопки ───────────────────────────────────
На VERHOFF — то же что на default: иконка наследует цвет шапки.
Fallback через --ink-on-dark (на VERHOFF = чёрный, см. Урок 1
— но header в обеих темах тёмный за счёт brand-header-bg). */
--header-action-btn-fg: var(--brand-header-fg, var(--ink-on-dark));
--header-action-btn-bg: transparent;
/* ── CTA-spinner (always-white-on-coloured) ─────────────────
Ранее был rgba(255,255,255,.3) и #ffffff. Полупрозрачный
белый track + сплошная белая дуга на цветной CTA-кнопке. */
--cta-spinner-track: rgba(255, 255, 255, .3);
--cta-spinner-fg: #ffffff;
/* ── PWA body-фон (always-dark/always-white) ────────────────
На VERHOFF то же что на default — это не семантика темы,
а PWA-shell поведение (см. default.css). */
--pwa-bg-top: #000000; /* #000 */
--pwa-bg-bottom: #ffffff; /* #fff */
/* ════════════════════════════════════════════════════════════
LEGACY SEMANTIC — токены старого слоя для login.html (как было)
──────────────────────────────────────────────────────────────
Эти токены остались от прошлой версии темы. Используются в
login.html. После Шага 4 (переписывание login) — удалить.
════════════════════════════════════════════════════════════ */
--page-bg: var(--bg);
--surface-1: rgba(255, 255, 255, .06);
--surface-1-hover: rgba(255, 255, 255, .10);
--surface-2-active: rgba(255, 255, 255, .20);
--border-faint: rgba(255, 255, 255, .12);
--border-medium: rgba(255, 255, 255, .15);
--border-strong: rgba(255, 255, 255, .30);
--border-focus: rgba(255, 255, 255, .40);
--text-primary: var(--ink);
--text-secondary: #888888;
--text-tertiary: #555555;
--accent-bg: var(--primary);
--accent-fg: var(--primary-fg);
--error-bg: rgba(200, 0, 0, .15);
--error-border: rgba(200, 0, 0, .30);
--error-fg: #ff7777;
--error-strong: #ff5555;
--modal-overlay: var(--scrim);
--modal-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
/* ════════════════════════════════════════════════════════════
КОМПОНЕНТНЫЕ ОВЕРРАЙДЫ — Фаза 2 (попиксельная сохранность VERHOFF)
──────────────────────────────────────────────────────────────
Этот блок — единое место для скрытия default-only компонентов,
добавляемых в Фазу 2 (компонентный редизайн под preview-v2.html).
Каждое правило здесь — гарантия Урока 1: на VERHOFF визуал
остаётся попиксельно тем же, каким был до Фазы 2.
Структура: один комментарий на под-шаг + точечный селектор по id
(не по классу), чтобы оверрайд не задевал другие потенциальные
экземпляры компонента.
════════════════════════════════════════════════════════════ */
/* B.heroRemoved (10 мая 2026): правила скрытия #home-hero и .hero-warm
удалены — узлы и классы больше не существуют (см. employee.html,
app_employee.js, base.css). На VERHOFF главная теперь сразу начинается
с .user-progress-row. */
/* ═══════════════════════════════════════════════════════════════════
media_gallery (PR-MG-2, 2026-05-11, итерация 2)
───────────────────────────────────────────────────────────────────
Канон VERHOFF (из ref-скринов от 11 мая):
• Палитра — чёрно-белая. Никаких золотых акцентов.
• Активный элемент = инверсия (чёрный фон + белый текст).
• Неактивный = белый фон + чёрный текст + тонкая обводка.
• Скругления малые (6-8px). Без pill-формы.
• CTA-кнопки — uppercase letter-spacing.
• Семантические цвета (зелёный/красный/жёлтый) только на бейджах
статуса. Для UI-акцентов не используем.
Все стили обёрнуты в [data-theme="verhoff"] для гарантированной
изоляции от default-темы.
═══════════════════════════════════════════════════════════════════ */
[data-theme="verhoff"] {
/* ── Dash-блок: превью на сводке ────────────────────────────────── */
/* Контейнер dash-блока — паттерн как у preps/admin_shift */
#dash-mg-block {
padding: 0 20px 24px;
}
/* Горизонтальная лента 6 миниатюр */
.mg-preview-strip {
display: flex;
gap: 6px;
overflow-x: auto;
margin: 0 -20px 12px;
padding: 0 20px 4px;
scrollbar-width: none;
}
.mg-preview-strip::-webkit-scrollbar { display: none; }
.mg-preview-thumb {
flex: 0 0 78px;
height: 78px;
border-radius: 4px;
background: var(--surface);
position: relative;
overflow: hidden;
cursor: pointer;
border: 1px solid var(--card-line-strong);
}
.mg-preview-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mg-preview-thumb .mg-thumb-time {
position: absolute;
bottom: 3px;
left: 4px;
font-family: var(--font-ui);
font-size: 9px;
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
font-weight: 500;
letter-spacing: 0.3px;
}
/* Пустое состояние превью */
.mg-preview-empty {
padding: 18px 16px;
text-align: center;
color: var(--ink-2);
font-family: var(--font-ui);
font-size: 12px;
background: var(--surface);
border-radius: 4px;
margin-bottom: 12px;
letter-spacing: 0.3px;
}
/* Кнопка «Открыть галерею» использует штатные классы:
`btn btn--ghost btn--block dash-btn` — те же, что у «Назначить смены»
и «Отчёт по заготовкам». Стиль приходит из base.css/verhoff.css,
кастомного .mg-open-btn нет. */
/* ── Fullscreen экран ────────────────────────────────────────────── */
#screen-media-gallery {
background: var(--card-bg, #fff);
color: var(--card-fg, #000);
min-height: 100vh;
}
/* Шапка экрана НЕ кастомная — используется штатная .app-header из
base.css/verhoff.css (паттерн как у screen-branches «Локации»).
Разметка в admin.html: .app-header > .header-top > [← title +].
Кастомизировать тут нечего — base.css сам разместит чёрную плашку
с белым текстом и нашими VERHOFF-шрифтами. */
/* Активные фильтры — чипы в стиле «Все/Сегодня/Неделя/Месяц» из refs.
Белый фон + тонкая обводка, активный = чёрный с белым текстом. */
.mg-chips {
display: flex;
gap: 8px;
padding: 12px 16px;
overflow-x: auto;
background: var(--card-bg, #fff);
border-bottom: 1px solid var(--card-line-strong);
scrollbar-width: none;
}
.mg-chips::-webkit-scrollbar { display: none; }
.mg-chip {
flex: 0 0 auto;
padding: 6px 14px;
background: var(--card-bg, #fff);
border: 1px solid var(--card-line-strong);
border-radius: 6px;
font-family: var(--font-ui);
font-size: 12px;
color: var(--card-fg, #000);
white-space: nowrap;
cursor: pointer;
font-weight: 500;
}
.mg-chip-active {
background: var(--ink-on-dark, #000);
color: var(--card-bg, #fff);
border-color: var(--ink-on-dark, #000);
}
/* ── Лента табов локаций над фидом (PR-MG, свайп по горизонтали) ──
Показывается JS только при >1 локации. Стиль 1-в-1 с чипами пикера
(.mg-picker-branch-*) для визуального единства. Sticky — прибита под
шапку (.app-header sticky top:0). Высоту шапки JS кладёт в --mg-header-h
(env safe-area плавающий, поэтому не хардкодим). */
.mg-branch-tabs {
background: var(--card-bg, #fff);
border-bottom: 1px solid var(--card-line-strong);
position: sticky;
top: var(--mg-header-h, 0px);
z-index: 40; /* ниже .app-header (z=50), выше плиток фида */
}
.mg-branch-strip {
display: flex;
gap: 6px;
overflow-x: auto;
padding: 12px 16px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.mg-branch-strip::-webkit-scrollbar { display: none; }
.mg-branch-tab {
flex: 0 0 auto;
padding: 6px 14px;
background: var(--card-bg, #fff);
border: 1px solid var(--card-line-strong);
border-radius: 6px;
font-family: var(--font-ui);
font-size: 12px;
color: var(--card-fg, #000);
white-space: nowrap;
cursor: pointer;
font-weight: 500;
}
.mg-branch-tab-active {
background: var(--ink-on-dark, #000);
color: var(--card-bg, #fff);
border-color: var(--ink-on-dark, #000);
}
/* Основная лента — 3 колонки, day-разделители на всю ширину */
.mg-feed {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
padding: 14px 16px 0;
background: var(--card-bg, #fff);
/* min-height чтобы grid не схлопывался когда пусто */
min-height: 200px;
}
/* Разделитель «Сегодня · 11 мая» — letter-spacing как у .section-label */
.mg-day-sep {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
margin: 16px 0 4px;
}
.mg-day-sep:first-child {
margin-top: 4px;
}
.mg-day-label {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 500;
color: var(--card-fg-2, #666);
text-transform: uppercase;
letter-spacing: 2px;
}
.mg-day-count {
font-family: var(--font-ui);
font-size: 11px;
color: var(--card-fg-3, #999);
letter-spacing: 0.5px;
}
/* Плитка — квадрат, минимальные скругления (4px как у элементов VERHOFF) */
.mg-tile {
aspect-ratio: 1;
border-radius: 4px;
background: var(--surface, #f0f0f0);
position: relative;
overflow: hidden;
cursor: pointer;
border: 1px solid var(--card-line-strong);
}
.mg-tile img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mg-tile-time {
position: absolute;
top: 4px;
left: 4px;
padding: 2px 6px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
font-family: var(--font-ui);
font-size: 9px;
border-radius: 3px;
line-height: 1.3;
font-weight: 500;
letter-spacing: 0.3px;
}
.mg-tile-label {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 12px 6px 6px;
color: #fff;
font-family: var(--font-ui);
font-size: 10px;
line-height: 1.2;
/* Тёмный градиент снизу для читаемости поверх любой фотки */
background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Видео-индикатор */
.mg-play-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
color: #fff;
}
.mg-play-overlay svg {
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}
/* Сентинель для IntersectionObserver */
.mg-sentinel {
height: 1px;
grid-column: 1 / -1;
}
.mg-loader {
padding: 18px;
text-align: center;
color: var(--card-fg-2, #888);
font-family: var(--font-ui);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
background: var(--card-bg, #fff);
}
/* Empty state */
.mg-empty-state {
padding: 60px 24px;
text-align: center;
grid-column: 1 / -1;
background: var(--card-bg, #fff);
}
.mg-empty-icon {
font-size: 40px;
margin-bottom: 12px;
opacity: 0.3;
}
.mg-empty-title {
font-family: var(--font-display);
font-size: 18px;
font-weight: 400;
color: var(--card-fg, #000);
margin-bottom: 6px;
letter-spacing: 1px;
}
.mg-empty-sub {
font-family: var(--font-ui);
font-size: 13px;
color: var(--card-fg-2, #666);
line-height: 1.5;
}
/* ── Экран выбора вопросов (#screen-mg-picker, PR-MG-2 v3) ───────── */
/* Шторка стала полноценным экраном (как screen-branches/Локации).
Шапка — штатная .app-header. Тело — #mg-picker-body — содержит
«Выбрано», поиск, фильтр локаций, дерево чек-листов. Снизу sticky-
футер с кнопкой «Готово». */
#screen-mg-picker {
background: var(--card-bg, #fff);
color: var(--card-fg, #000);
min-height: 100vh;
/* padding-bottom задан ниже — учитывает футер + bottom-nav + safe-area */
}
#mg-picker-body {
padding: 16px 0 24px;
}
/* ── Секция «Выбрано (N)» ── */
/* Только если selection непустой — JS вставляет блок только тогда,
если 0, то секции в DOM нет. */
.mg-picker-selected-section {
padding: 0 16px 14px;
border-bottom: 1px solid var(--card-line, #eee);
margin-bottom: 14px;
}
/* Шапка секции — «Выбрано (N)» слева + «Сбросить» справа */
.mg-picker-selected-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
/* Маленький uppercase-заголовок секции — как .section-label в проекте */
.mg-picker-section-label {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 500;
color: var(--card-fg-2, #666);
text-transform: uppercase;
letter-spacing: 2px;
}
/* Кнопка «Сбросить» — uppercase letter-spacing, маленькая, привязана
к контексту секции «Выбрано». Раньше была в шапке экрана, теперь тут. */
.mg-picker-reset-btn {
padding: 4px 8px;
background: transparent;
border: none;
color: var(--card-fg-2, #666);
font-family: var(--font-ui);
font-size: 11px;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.mg-picker-reset-btn:active {
color: var(--card-fg, #000);
}
/* Вариант когда заголовок стоит inline без шапки секции (фильтр локаций) */
.mg-picker-label-inline {
display: block;
padding: 0 16px;
margin-bottom: 8px;
margin-top: 4px;
}
.mg-picker-selected-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
/* Чип выбранного вопроса — чёрная плашка с крестиком справа.
Тап → снять, не открывая дерево. Размер увеличен с 11px до 13px
для читаемости (по фидбэку — раньше было мелко). */
.mg-picker-selected-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 10px 7px 12px;
background: var(--ink-on-dark, #000);
color: var(--card-bg, #fff);
border: none;
border-radius: 4px;
font-family: var(--font-ui);
font-size: 13px;
cursor: pointer;
max-width: 100%;
}
.mg-picker-selected-chip:active {
opacity: 0.85;
}
.mg-picker-chip-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 280px;
}
.mg-picker-chip-x {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
font-size: 16px;
line-height: 1;
opacity: 0.7;
}
/* ── Поиск ── */
.mg-picker-search-wrap {
padding: 0 16px 14px;
}
.mg-picker-search {
width: 100%;
padding: 11px 12px;
border-radius: 4px;
border: 1px solid var(--card-line-strong);
background: var(--card-bg, #fff);
color: var(--card-fg, #000);
font-family: var(--font-ui);
font-size: 13px;
box-sizing: border-box;
outline: none;
}
.mg-picker-search:focus {
border-color: var(--ink-on-dark, #000);
}
.mg-picker-search::placeholder {
color: var(--card-fg-3, #999);
}
/* ── Фильтр локаций ── */
/* Горизонтальная лента чипов как в скрине «Расписание смен»
(Москва — Неглинная / Саратов — Советская). */
.mg-picker-branch-strip {
display: flex;
gap: 6px;
overflow-x: auto;
padding: 0 16px 14px;
scrollbar-width: none;
}
.mg-picker-branch-strip::-webkit-scrollbar { display: none; }
.mg-picker-branch-chip {
flex: 0 0 auto;
padding: 6px 12px;
background: var(--card-bg, #fff);
border: 1px solid var(--card-line-strong);
border-radius: 6px;
font-family: var(--font-ui);
font-size: 12px;
color: var(--card-fg, #000);
white-space: nowrap;
cursor: pointer;
font-weight: 500;
}
.mg-picker-branch-chip-active {
background: var(--ink-on-dark, #000);
color: var(--card-bg, #fff);
border-color: var(--ink-on-dark, #000);
}
/* ── Дерево чек-листов ── */
.mg-picker-cl {
padding: 4px 16px 8px;
}
.mg-picker-cl + .mg-picker-cl {
border-top: 1px solid var(--card-line, #eee);
margin-top: 8px;
padding-top: 12px;
}
.mg-picker-cl-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 0 6px;
}
/* Заголовок чек-листа — uppercase letter-spacing как .section-label */
.mg-picker-cl-title {
flex: 1;
font-family: var(--font-ui);
font-size: 11px;
font-weight: 500;
color: var(--card-fg-2, #666);
text-transform: uppercase;
letter-spacing: 2px;
}
.mg-picker-cl-count {
font-family: var(--font-ui);
font-size: 11px;
color: var(--card-fg-3, #999);
letter-spacing: 0.5px;
}
.mg-picker-q-list {
padding: 2px 0;
}
.mg-picker-q {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 0;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
}
.mg-picker-q:active {
opacity: 0.7;
}
.mg-picker-q-text {
flex: 1;
font-family: var(--font-ui);
font-size: 13px;
color: var(--card-fg, #000);
line-height: 1.4;
}
/* Чекбокс — белый квадрат с чёткой обводкой, при on — чёрная заливка.
Эталон: «Менеджер смены (МС)» из ref «Редактировать группу». */
.mg-cb {
width: 20px;
height: 20px;
border-radius: 3px;
border: 1.5px solid var(--card-fg, #000);
background: var(--card-bg, #fff);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--card-bg, #fff);
margin-top: 1px;
box-sizing: border-box;
}
.mg-cb-on {
background: var(--card-fg, #000);
border-color: var(--card-fg, #000);
}
/* Маленькие иконки типа медиа справа от вопроса */
.mg-q-icon {
width: 14px;
height: 14px;
flex-shrink: 0;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.4;
margin-top: 2px;
}
.mg-q-icon-photo {
background-image: url("data:image/svg+xml;utf8,");
}
.mg-q-icon-video {
background-image: url("data:image/svg+xml;utf8,");
}
.mg-picker-empty {
padding: 32px 16px;
text-align: center;
color: var(--card-fg-2, #666);
font-family: var(--font-ui);
font-size: 13px;
}
/* ── Sticky-футер с кнопкой «Готово» ── */
/* Прижат к низу viewport НАД bottom-nav. Используем ту же формулу что
.nav-bottom-offset в admin.css — 56px + safe-area-inset-bottom, плюс
запас 6px на разные браузеры (на iOS Safari padding-bottom у nav
иногда оказывается чуть больше расчётного). bottom-nav остаётся
видимым — юзер может прыгнуть в любую вкладку.
Фон — явный белый (НЕ через var(--card-bg)) потому что на некоторых
темах CSS-переменная может быть полупрозрачной. Тут нужен 100%
непрозрачный, иначе пункты дерева просвечивают сквозь футер. */
.mg-picker-sticky-footer {
position: fixed;
left: 0;
right: 0;
bottom: calc(52px + env(safe-area-inset-bottom, 0px));
padding: 10px 16px 12px;
background: #ffffff;
border-top: 1px solid var(--card-line, #eee);
z-index: 49;
}
.mg-picker-done-btn {
width: 100%;
padding: 14px;
background: var(--ink-on-dark, #000);
color: var(--card-bg, #fff);
border: none;
border-radius: 4px;
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 2px;
}
.mg-picker-done-btn:active {
opacity: 0.85;
}
/* Резервируем место в теле экрана = высота футера (~68) + bottom-nav (~56)
+ запас (~16). Иначе последние элементы дерева закрывались бы футером. */
#screen-mg-picker {
padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px));
}
/* ── Skeleton-плейсхолдеры ──────────────────────────────────────── */
.mg-skeleton {
background: linear-gradient(
90deg,
var(--surface) 0%,
var(--surface-2) 50%,
var(--surface) 100%
);
background-size: 200% 100%;
animation: mg-skeleton-shimmer 1.4s infinite;
}
@keyframes mg-skeleton-shimmer {
0% { background-position: 100% 50%; }
100% { background-position: -100% 50%; }
}
} /* end [data-theme="verhoff"] */