/* ============================================================================ ПАРКОС (ParkOS) — тема CRM под домен паркос.рф Активируется при html[data-theme="parkos"] (выставлен статически на в index.html). Брендбук: design/parkos/brand-guidelines.md + design/parkos/style.css Фаза 0 (токены/шрифты) + Фаза 1 (desktop-shell: сайдбар-пульт, топбар, статы). ============================================================================ */ /* ---------- Токены ParkOS + переопределение брендовых токенов приложения ---------- */ html[data-theme="parkos"] { /* Палитра бренда */ --pk-primary: #7C5CFF; --pk-primary-strong: #6D5BFF; --pk-cyan: #22D3EE; --pk-lime: #A3E635; --pk-ink: #0E1525; --pk-slate: #475069; --pk-muted: #8A93A8; --pk-danger: #EF4444; --pk-line: #E7E9F2; --pk-bg: #F6F7FB; --pk-surface: #FFFFFF; --pk-surface-2: #F1F2F8; --pk-side: #0E1525; --pk-side-2: #161E33; --pk-side-line: #222C45; --pk-side-muted: #8893AD; --pk-grad: linear-gradient(135deg, #7C5CFF, #22D3EE); --pk-grad-soft: linear-gradient(135deg, rgba(124,92,255,.16), rgba(34,211,238,.16)); --pk-shadow: 0 18px 44px rgba(14, 21, 37, 0.10); --pk-shadow-side: 0 28px 70px rgba(8, 12, 24, 0.45); /* Шрифты */ --pk-font: "Manrope", -apple-system, system-ui, "Segoe UI", sans-serif; --pk-display: "Unbounded", "Manrope", sans-serif; --pk-mono: "JetBrains Mono", ui-monospace, monospace; /* Перекрытие существующих токенов приложения — всё, что использует var(--brand-*), автоматически становится фиолетовым/cyan */ --brand-yellow: #7C5CFF; --brand-yellow-deep: #6D5BFF; --brand-black: #0E1525; --brand-gray: #475069; --brand-gray-soft: #E7E9F2; --brand-gray-deep: #161E33; --surface: #FFFFFF; --surface-strong: #FFFFFF; --line: rgba(14, 21, 37, 0.10); --line-strong: rgba(14, 21, 37, 0.18); --shadow: 0 18px 44px rgba(14, 21, 37, 0.12); --shadow-soft: 0 12px 28px rgba(14, 21, 37, 0.10); --success: #22C55E; --danger: #EF4444; } /* ---------- Базовая типографика ---------- */ html[data-theme="parkos"] body { font-family: var(--pk-font); color: var(--pk-ink); } html[data-theme="parkos"] h1, html[data-theme="parkos"] h2, html[data-theme="parkos"] .desktop-topbar__intro h1, html[data-theme="parkos"] #desktopMapSummaryCard h2, html[data-theme="parkos"] .desktop-metric-card__value { font-family: var(--pk-display); letter-spacing: -0.4px; } /* числа/деньги — табличный mono (метрики, значения сводки) */ html[data-theme="parkos"] .desktop-metric-card__value, html[data-theme="parkos"] .desktop-map-summary__grid strong { font-feature-settings: "tnum" 1; } /* ========================================================================= ФАЗА 1 — DESKTOP-SHELL (виден на десктопе, ≥1180px) Переопределяем уже существующую разметку: сайдбар-«пульт» + светлый контент. Селекторы с html[data-theme=parkos] имеют бóльшую специфичность и грузятся после style.css — гарантированно перекрывают базовую тему. ========================================================================= */ @media (min-width: 1180px) { /* Светлый рабочий фон */ html[data-theme="parkos"] body { background: var(--pk-bg); } html[data-theme="parkos"] body::before { background: radial-gradient(circle at 82% 6%, rgba(124, 92, 255, 0.08), transparent 30%), radial-gradient(circle at 4% 96%, rgba(34, 211, 238, 0.06), transparent 26%); } /* Карта-подложка ТОЛЬКО в режиме «Панель» приглушаем; в режиме «Карта» (body.desktop-map-mode) база ставит opacity:1 — не перебиваем, иначе карта белеет. */ html[data-theme="parkos"] body:not(.desktop-map-mode) #map { opacity: 0.14; } /* ---- Сайдбар-«пульт» ---- */ html[data-theme="parkos"] #desktopSidebar { background: linear-gradient(180deg, var(--pk-side) 0%, var(--pk-side-2) 100%); border: 1px solid var(--pk-side-line); box-shadow: var(--pk-shadow-side); border-radius: 22px; color: #fff; /* Помещаем меню в один экран: уплотняем отступы, при нехватке высоты — внутренний скролл */ gap: 12px !important; padding: 14px 12px !important; max-height: calc(100vh - 44px); overflow-y: auto; } html[data-theme="parkos"] #desktopSidebarNav { gap: 5px !important; } html[data-theme="parkos"] #desktopSidebarBrand { background: rgba(124, 92, 255, 0.12); border: 1px solid rgba(124, 92, 255, 0.22); border-radius: 16px; } html[data-theme="parkos"] #desktopSidebarBrand img { background: var(--pk-grad); border-radius: 12px; padding: 4px; } html[data-theme="parkos"] #desktopSidebarBrand strong { font-family: var(--pk-display); letter-spacing: -0.5px; } html[data-theme="parkos"] #desktopSidebarBrand small { color: var(--pk-side-muted); } /* Навигация */ html[data-theme="parkos"] .desktop-sidebar__link { background: transparent; border: 1px solid transparent; border-radius: 12px; color: #C4CBDC; font-weight: 700; padding: 9px 13px; } html[data-theme="parkos"] .desktop-sidebar__link:hover { background: rgba(124, 92, 255, 0.10); border-color: transparent; color: #fff; transform: none; } html[data-theme="parkos"] .desktop-sidebar__link.is-active { background: rgba(124, 92, 255, 0.20); border-color: rgba(124, 92, 255, 0.32); color: #fff; transform: none; } html[data-theme="parkos"] .desktop-sidebar__link-badge { background: var(--pk-grad); color: #fff; box-shadow: 0 6px 16px rgba(124, 92, 255, 0.30); } html[data-theme="parkos"] .desktop-sidebar__mode-btn { background: var(--pk-grad-soft); border: 1px solid rgba(124, 92, 255, 0.30); border-radius: 12px; color: #fff; } html[data-theme="parkos"] #desktopSidebarFoot { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--pk-side-line); border-radius: 16px; } html[data-theme="parkos"] .desktop-sidebar__foot-label, html[data-theme="parkos"] .desktop-sidebar__user-pin { color: var(--pk-side-muted); } /* ---- Топбар ---- */ html[data-theme="parkos"] #desktopTopbar { background: var(--pk-surface); border: 1px solid var(--pk-line); box-shadow: var(--pk-shadow); border-radius: 22px; } html[data-theme="parkos"] .desktop-topbar__eyebrow { color: var(--pk-primary-strong); } html[data-theme="parkos"] .desktop-topbar__intro p { color: var(--pk-slate); } /* Переключатель Панель/Карта */ html[data-theme="parkos"] .desktop-view-switch { background: var(--pk-surface-2); border: 1px solid var(--pk-line); border-radius: 14px; } html[data-theme="parkos"] .desktop-view-switch__btn { color: var(--pk-muted); border-radius: 10px; } html[data-theme="parkos"] .desktop-view-switch__btn.is-active { background: var(--pk-primary); color: #fff; box-shadow: 0 8px 20px rgba(124, 92, 255, 0.30); } /* Кнопки топбара */ html[data-theme="parkos"] #desktopTopbarNewClient { background: var(--pk-primary); color: #fff; box-shadow: 0 10px 24px rgba(124, 92, 255, 0.30); border-radius: 12px; } html[data-theme="parkos"] #desktopTopbarFocusMap, html[data-theme="parkos"] #desktopMapSummaryFocus { background: var(--pk-surface); color: var(--pk-ink); border: 1px solid var(--pk-line); border-radius: 12px; } /* Фильтры выручки */ html[data-theme="parkos"] .revenue-filter-button { border: 1px solid var(--pk-line); background: var(--pk-surface); border-radius: 10px; color: var(--pk-slate); } html[data-theme="parkos"] .revenue-filter-button.is-active { background: var(--pk-primary); color: #fff; box-shadow: 0 8px 18px rgba(124, 92, 255, 0.22); } html[data-theme="parkos"] .desktop-metrics-filter__label, html[data-theme="parkos"] .desktop-metrics-filter__scope-label { color: var(--pk-slate); } html[data-theme="parkos"] #networkDashboardScopeWrap { background: var(--pk-surface); border: 1px solid var(--pk-line); } html[data-theme="parkos"] .desktop-metrics-filter__scope select, html[data-theme="parkos"] #networkDashboardScopeSelect { border: 1px solid var(--pk-line); background: var(--pk-surface); color: var(--pk-ink); border-radius: 10px; } /* ---- Стат-карты ---- */ html[data-theme="parkos"] .desktop-metric-card { background: var(--pk-surface); border: 1px solid var(--pk-line); box-shadow: var(--pk-shadow); border-radius: 16px; } html[data-theme="parkos"] .desktop-metric-card--revenue::before { background: var(--pk-primary); } html[data-theme="parkos"] .desktop-metric-card--active::before { background: var(--pk-cyan); } html[data-theme="parkos"] .desktop-metric-card--clients::before { background: var(--pk-lime); } html[data-theme="parkos"] .desktop-metric-card--devices::before { background: var(--pk-primary-strong); } html[data-theme="parkos"] .desktop-metric-card__label, html[data-theme="parkos"] .desktop-metric-card__hint { color: var(--pk-muted); } html[data-theme="parkos"] .desktop-metric-card__value { color: var(--pk-ink); } /* ---- Карточка-сводка флота ---- */ html[data-theme="parkos"] #desktopMapSummaryCard, html[data-theme="parkos"] .desktop-surface { background: var(--pk-surface); border: 1px solid var(--pk-line); box-shadow: var(--pk-shadow); border-radius: 16px; } html[data-theme="parkos"] .desktop-surface__eyebrow { color: var(--pk-primary-strong); } html[data-theme="parkos"] .desktop-map-summary__grid div { background: var(--pk-surface-2); border: 1px solid var(--pk-line); border-radius: 12px; } html[data-theme="parkos"] .desktop-map-summary__grid span { color: var(--pk-muted); } html[data-theme="parkos"] .desktop-map-summary__grid strong { color: var(--pk-ink); font-family: var(--pk-mono); } } /* ========================================================================= ФАЗА 2 — ЭКРАН ВХОДА «Вход в Паркос» (split-screen по прототипу) #authGate и #pinGate (класс .auth-gate). parkos.js пересобирает диалог в .auth-gate--parkos: слева бренд-панель (лого + вордмарк + чеклист), справа форма. Адаптив: на узких экранах колонки складываются (мобильная версия). ========================================================================= */ html[data-theme="parkos"] .auth-gate__backdrop { background: radial-gradient(circle at 18% 8%, rgba(124, 92, 255, 0.40), transparent 42%), radial-gradient(circle at 88% 92%, rgba(34, 211, 238, 0.28), transparent 42%), var(--pk-ink); opacity: 1; } /* Заслонка (auth-shield) — тот же фон, что и backdrop окна входа, чтобы переход «заслонка → форма входа» был бесшовным (без скачка цвета). */ html[data-theme="parkos"] #authShield { background: radial-gradient(circle at 18% 8%, rgba(124, 92, 255, 0.40), transparent 42%), radial-gradient(circle at 88% 92%, rgba(34, 211, 238, 0.28), transparent 42%), var(--pk-ink); } html[data-theme="parkos"] .auth-shield__brand img { background: rgba(255, 255, 255, 0.10); padding: 8px; } /* В CRM нет глобального *{border-box}; панели входа — content-box, из-за чего width:100% + padding переполняли диалог и обрезались. Форсируем border-box. */ html[data-theme="parkos"] .auth-gate--parkos, html[data-theme="parkos"] .auth-gate--parkos * { box-sizing: border-box; } /* Контейнер диалога → две колонки */ html[data-theme="parkos"] .auth-gate--parkos { display: flex; flex-direction: row; align-items: stretch; width: min(960px, calc(100vw - 32px)); max-width: none; padding: 0; border-radius: 22px; overflow: hidden; background: var(--pk-surface); border: 1px solid rgba(14, 21, 37, 0.10); box-shadow: 0 50px 120px rgba(8, 12, 24, 0.6); } /* Левая бренд-панель: логотип-иконка + текстовый вордмарк + слоган + чеклист */ html[data-theme="parkos"] .pk-authL { flex: 1 1 0; min-width: 0; background: var(--pk-grad); color: #fff; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 52px 46px; } html[data-theme="parkos"] .pk-authL__top { display: flex; align-items: center; gap: 16px; } html[data-theme="parkos"] .pk-authL__logo { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 18px; background: rgba(255, 255, 255, 0.16); flex: 0 0 auto; } html[data-theme="parkos"] .pk-authL__logo img { display: block; width: 56px; height: 56px; } html[data-theme="parkos"] .pk-authL__wm { font-family: var(--pk-display); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -1px; color: #fff; } html[data-theme="parkos"] .pk-authL__wm .pk-d { color: var(--pk-lime); } /* Левая боковая панель: вордмарк «Парк» + лаймовое «ос» — как в логотипе. */ html[data-theme="parkos"] #desktopSidebarBrand strong .pk-d { color: var(--pk-lime); } html[data-theme="parkos"] .pk-authL__tagline { font-size: 17px; font-weight: 600; opacity: 0.95; } html[data-theme="parkos"] .pk-authL__list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } html[data-theme="parkos"] .pk-authL__list li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; } html[data-theme="parkos"] .pk-authL__list svg { flex: 0 0 auto; color: #fff; } /* Правая панель с формой */ html[data-theme="parkos"] .pk-authR { width: 420px; flex: 0 0 auto; background: var(--pk-surface); display: flex; flex-direction: column; justify-content: center; padding: 48px 46px; } html[data-theme="parkos"] .pk-authR .auth-gate__title-group { text-align: left; margin: 0 0 10px; } html[data-theme="parkos"] .pk-authR .auth-gate__title { font-family: var(--pk-display); font-size: 24px; letter-spacing: -0.4px; margin: 0; color: var(--pk-ink); } html[data-theme="parkos"] .pk-authR .auth-gate__subtitle { display: none; } html[data-theme="parkos"] .pk-authR .auth-gate__hint { color: var(--pk-muted); } html[data-theme="parkos"] .pk-authR .auth-gate__form label { display: block; margin-top: 16px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--pk-muted); } html[data-theme="parkos"] .pk-authR .auth-gate__form input { width: 100%; margin-top: 6px; background: var(--pk-surface-2); border: 1px solid var(--pk-line); border-radius: 11px; padding: 12px 14px; color: var(--pk-ink); } html[data-theme="parkos"] .pk-authR .auth-gate__form input:focus { outline: none; border-color: var(--pk-primary); box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.16); } html[data-theme="parkos"] #authGateSubmit, html[data-theme="parkos"] #pinGateSubmit { width: 100%; margin-top: 24px; justify-content: center; background: var(--pk-grad); color: #fff; border: none; border-radius: 12px; font-weight: 800; box-shadow: 0 12px 28px rgba(124, 92, 255, 0.32); } html[data-theme="parkos"] .auth-gate__secondary { color: var(--pk-primary-strong); font-weight: 700; } html[data-theme="parkos"] .auth-gate__error { color: var(--pk-danger); } html[data-theme="parkos"] .pk-forgot { display: block; text-align: center; margin-top: 16px; font-size: 13px; font-weight: 700; color: var(--pk-primary-strong); text-decoration: none; } /* Мобильная версия экрана входа: колонки в стопку, компактная бренд-шапка */ @media (max-width: 760px) { html[data-theme="parkos"] .auth-gate--parkos { flex-direction: column; width: min(440px, calc(100vw - 24px)); } html[data-theme="parkos"] .pk-authL { flex: 0 0 auto; padding: 26px 24px 22px; gap: 12px; } html[data-theme="parkos"] .pk-authL__logo { width: 56px; height: 56px; border-radius: 14px; } html[data-theme="parkos"] .pk-authL__logo img { width: 42px; height: 42px; } html[data-theme="parkos"] .pk-authL__wm { font-size: 30px; } html[data-theme="parkos"] .pk-authL__tagline { font-size: 14px; } html[data-theme="parkos"] .pk-authL__list { display: none; } html[data-theme="parkos"] .pk-authR { width: 100%; padding: 24px 22px 28px; } } /* ========================================================================= ФАЗА 3 — КАБИНЕТ СЕТИ: ОБЗОР (панели дашборда → ParkOS .panel/.tbl/.stat) Дашборд уже держит панели Флот/Аренды/Клиенты/Аналитика в desktop-grid. Приводим их общий каркас (.panel-*) и фильтры к виду прототипа. Десктоп ≥1180px. ========================================================================= */ @media (min-width: 1180px) { /* Карточки-панели дашборда → светлый surface ParkOS */ html[data-theme="parkos"] #deviceListWrapper, html[data-theme="parkos"] #analyticsWrapper, html[data-theme="parkos"] #staffAnalyticsWrapper, html[data-theme="parkos"] #rentalsTopControl, html[data-theme="parkos"] #clientListWrapper, html[data-theme="parkos"] #employeeAuditWrapper { background: var(--pk-surface); border: 1px solid var(--pk-line); box-shadow: var(--pk-shadow); border-radius: 16px; } /* Заголовок панели (.ph по прототипу) */ html[data-theme="parkos"] .panel-title { font-family: var(--pk-display); font-weight: 700; font-size: 14px; letter-spacing: -0.2px; color: var(--pk-ink); } html[data-theme="parkos"] .panel-title--action:hover { color: var(--pk-primary-strong); } html[data-theme="parkos"] .panel-toggle { color: var(--pk-muted); } /* Бейдж-счётчик панели → фиолетовый чип */ html[data-theme="parkos"] .panel-badge { background: rgba(124, 92, 255, 0.12); color: var(--pk-primary-strong); border: 1px solid rgba(124, 92, 255, 0.18); border-radius: 999px; font-weight: 800; } /* Фильтры/поиск в шапках панелей → инпуты ParkOS */ html[data-theme="parkos"] .device-fleet-filter-select, html[data-theme="parkos"] .rentals-filter-select, html[data-theme="parkos"] .device-fleet-search-input, html[data-theme="parkos"] #clientPhoneFilter, html[data-theme="parkos"] #deviceSearchFilter, html[data-theme="parkos"] .network-branch-scope-field select { background: var(--pk-surface-2); border: 1px solid var(--pk-line); border-radius: 10px; color: var(--pk-ink); font-weight: 600; } html[data-theme="parkos"] .device-fleet-filter-select:focus, html[data-theme="parkos"] .rentals-filter-select:focus, html[data-theme="parkos"] #clientPhoneFilter:focus, html[data-theme="parkos"] #deviceSearchFilter:focus { outline: none; border-color: var(--pk-primary); box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.14); } /* Кнопки внутри панелей */ html[data-theme="parkos"] #btnNewClient { background: var(--pk-primary); color: #fff; border: none; border-radius: 10px; font-weight: 800; box-shadow: 0 8px 18px rgba(124, 92, 255, 0.24); } html[data-theme="parkos"] #clientPhoneFilterClear { background: var(--pk-surface-2); border: 1px solid var(--pk-line); color: var(--pk-slate); border-radius: 10px; } /* Стат-карты: подсказка → «дельта» с цветом статуса (как .delta в прототипе) */ html[data-theme="parkos"] .desktop-metric-card__hint { font-weight: 700; } html[data-theme="parkos"] .desktop-metric-card--revenue .desktop-metric-card__hint { color: var(--success); } html[data-theme="parkos"] .desktop-metric-card--active .desktop-metric-card__hint { color: #0e7490; } html[data-theme="parkos"] .desktop-metric-card--clients .desktop-metric-card__hint { color: #3f6212; } /* Служебная сводка сотрудника → карточки ParkOS с цветовым выделением по статусу. Тинты/акцент берём из --sa-* токенов (заданы в style.css по модификатору статуса), чтобы под темой parkos сохранялась цветовая подсветка, а не плоский surface. */ html[data-theme="parkos"] .staff-analytics-card { background: linear-gradient(150deg, var(--sa-tint-a), var(--sa-tint-b)); border: 1px solid var(--sa-border); border-radius: 14px; } html[data-theme="parkos"] .staff-analytics-card__num { font-family: var(--pk-display); color: var(--sa-accent); } html[data-theme="parkos"] .staff-analytics-card__label { color: var(--pk-muted); } /* Таблицы внутри панелей (если есть .tbl) → строки/шапка ParkOS */ html[data-theme="parkos"] .panel .tbl th, html[data-theme="parkos"] #rentalsMapContent table th, html[data-theme="parkos"] #deviceList table th { color: var(--pk-muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.4px; border-bottom: 1px solid var(--pk-line); } html[data-theme="parkos"] #rentalsMapContent table td, html[data-theme="parkos"] #deviceList table td { border-bottom: 1px solid var(--pk-line); } } /* ---- Плавающие плашки сессии/операций (видны в реальном кабинете) ---- */ html[data-theme="parkos"] .auth-session-badge { background: var(--pk-surface); border: 1px solid var(--pk-line); box-shadow: var(--pk-shadow); border-radius: 16px; color: var(--pk-ink); } html[data-theme="parkos"] .auth-session-badge__fio { color: var(--pk-ink); font-weight: 800; } html[data-theme="parkos"] .auth-session-badge__pin { color: var(--pk-muted); } html[data-theme="parkos"] .auth-session-badge #authLogoutBtn, html[data-theme="parkos"] #startRentalBadge #startRentalBtn, html[data-theme="parkos"] #startRentalBadge .auth-session-badge__content button { background: var(--pk-primary); color: #fff; border: none; border-radius: 12px; font-weight: 800; box-shadow: 0 10px 22px rgba(124, 92, 255, 0.28); } /* Квадратная кнопка скана QR — фирменный градиент вместо зелёного */ html[data-theme="parkos"] #startRentalBadge .start-rental-scan-btn { background: var(--pk-grad); border: none; } /* Хэндлы плашек (вертикальные «ушки») — был жёлтый у сессии / зелёный у аренд */ html[data-theme="parkos"] #startRentalBadge .auth-session-badge__handle, html[data-theme="parkos"] #authSessionBadge .auth-session-badge__handle { background: var(--pk-grad); border: 1px solid rgba(124, 92, 255, 0.30); } html[data-theme="parkos"] #authSessionBadge .auth-session-badge__handle::before, html[data-theme="parkos"] #authSessionBadge .auth-session-badge__handle::after { background: #fff; } /* Плашка сессии (#authSessionBadge) должна появляться СРАЗУ при перезагрузке — как нижняя «Операции» (#startRentalBadge). Базовый style.css прячет #authSessionBadge во время восстановления сессии (body.session-restoring → display:none), поэтому верхняя плашка выезжала позже нижней — только когда подгрузятся сессия/данные. Разрешаем показ её каркаса уже во время восстановления; parkos.js держит её СВЁРНУТОЙ (виден только хэндл, без пустого контента), а имя/филиал дорисует app.js. Селектор специфичнее базового (1,2,2 > 1,1,0). */ html[data-theme="parkos"] body.session-restoring #authSessionBadge { display: grid !important; visibility: visible !important; } /* ========================================================================= ФАЗА 3 — КАРТА: маркеры великов (чип с system_code) + метки прокатов (капля) + переключатель «Велики ⇄ Прокаты». Всё parkos-scoped. Маркеры создаёт app.js (makeAliasIconV2, класс pk-bikepin-wrap) и parkos.js (pk-pointpin-wrap). ========================================================================= */ /* Маркер велика — фирменный чип с системным кодом, цвет по статусу */ html[data-theme="parkos"] .pk-bikepin { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; font-family: var(--pk-font); font-weight: 800; font-size: 12px; line-height: 1; color: #0E1525; white-space: nowrap; border: 1.5px solid rgba(255, 255, 255, 0.9); box-shadow: 0 5px 14px rgba(14, 21, 37, 0.30); } html[data-theme="parkos"] .pk-bikepin__code { display: inline-block; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; } html[data-theme="parkos"] .pk-bikepin.is-online { background: var(--pk-lime); } /* онлайн — лайм */ html[data-theme="parkos"] .pk-bikepin.is-rent { background: var(--pk-cyan); } /* в аренде — cyan */ html[data-theme="parkos"] .pk-bikepin.is-off { background: #C2C9D8; } /* оффлайн — серый */ html[data-theme="parkos"] .pk-bikepin.is-repair { background: #F59E0B; color: #fff; } /* ремонт — янтарь */ html[data-theme="parkos"] .pk-bikepin.is-overdue { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.55), 0 5px 14px rgba(14, 21, 37, 0.30); } /* Метка проката — фирменная капля с числом доступных великов */ html[data-theme="parkos"] .pk-pointpin { width: 34px; height: 34px; border-radius: 50% 50% 50% 4px; transform: rotate(45deg); background: var(--pk-grad); display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 6px 16px rgba(14, 21, 37, 0.38); } html[data-theme="parkos"] .pk-pointpin b { transform: rotate(-45deg); color: #fff; font-family: var(--pk-display); font-weight: 800; font-size: 13px; } /* Переключение видимости слоёв по режиму */ html[data-theme="parkos"] .pk-pointpin-wrap { display: none !important; } html[data-theme="parkos"] body.pk-points-mode .pk-bikepin-wrap { display: none !important; } html[data-theme="parkos"] body.pk-points-mode .pk-pointpin-wrap { display: block !important; } /* Переключатель «Велики ⇄ Прокаты» — живёт В ШАПКЕ режима карты (parkos.js кладёт его в #desktopTopbar), поэтому в потоке, без fixed. */ html[data-theme="parkos"] #pkMarkerModeToggle { display: none; align-items: center; gap: 2px; padding: 3px; border-radius: 11px; background: var(--pk-surface-2); border: 1px solid var(--pk-line); } html[data-theme="parkos"] .pk-marker-mode__btn { border: none; background: transparent; cursor: pointer; font: inherit; font-weight: 800; font-size: 13px; color: var(--pk-muted); padding: 8px 14px; border-radius: 9px; } html[data-theme="parkos"] .pk-marker-mode__btn.is-active { background: var(--pk-primary); color: #fff; } @media (min-width: 1180px) { /* Переключатель «Велики/Прокаты» — ТОЛЬКО в кабинете сети (несколько точек-филиалов). В кабинете филиала и у роли сотрудника точка одна (свой филиал), поэтому режим «Прокаты» бессмыслен — переключатель скрыт (по просьбе владельца). */ html[data-theme="parkos"] body.desktop-map-mode:not(.branch-session-active) #pkMarkerModeToggle { display: flex; } } /* ========================================================================= ФАЗА 3 — ЭКРАН «КАРТА» по прототипу: карта слева + список аренд справа (right-rail) + поиск сверху + плашка статуса. Одинаковая вёрстка для кабинета СЕТИ, кабинета ФИЛИАЛА и роли СОТРУДНИКА (раньше скоупилось через :not(.branch-session-active) — только сеть; теперь применяется ко всем сессиям desktop-режима карты). Плашки метрик (#desktopMetrics) остаются ролезависимыми сами по себе (общий блок + правила body.role-staff). Только parkos + режим карты, ≥1180px. ========================================================================= */ @media (min-width: 1180px) { /* Ширина правой панели аренд (right-rail). Одна переменная управляет картой, топбаром, плашкой статуса и поиском — смещения всегда совпадают. Расширена против прежних узких 360px: тянется по ширине экрана (30vw), но не уже 420px и не шире 520px. */ html[data-theme="parkos"] body.desktop-map-mode { --pk-rail-w: clamp(420px, 30vw, 520px); --pk-gutter-l: calc(var(--desktop-sidebar-width) + 40px); } /* Сайдбар в режиме карты — фиксированный, верх/низ вровень с шапкой, картой и списком аренд */ html[data-theme="parkos"] body.desktop-map-mode #desktopSidebar { position: fixed !important; top: 18px !important; bottom: auto !important; left: 22px !important; width: var(--desktop-sidebar-width) !important; height: calc(100vh - 36px) !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; overflow-y: auto; z-index: 1662; } /* Карта — карточка под метриками (слева от списка аренд), с шапкой «Карта парка» */ html[data-theme="parkos"] body.desktop-map-mode #map { position: fixed !important; top: 224px !important; left: var(--pk-gutter-l) !important; right: calc(var(--pk-rail-w) + 32px) !important; bottom: 18px !important; height: auto !important; border: 1px solid var(--pk-line) !important; border-top: none !important; border-radius: 0 0 16px 16px !important; box-shadow: var(--pk-shadow) !important; overflow: hidden; } /* Шапка карточки карты «Карта парка» (создаёт parkos.js) — над картой */ html[data-theme="parkos"] #pkFleetCard { display: none; } html[data-theme="parkos"] body.desktop-map-mode #pkFleetCard { display: flex; align-items: center; justify-content: space-between; position: fixed; top: 176px; left: var(--pk-gutter-l); right: calc(var(--pk-rail-w) + 32px); height: 48px; padding: 0 16px; background: var(--pk-surface); border: 1px solid var(--pk-line); border-bottom: none; border-radius: 16px 16px 0 0; box-shadow: var(--pk-shadow); z-index: 1656; } html[data-theme="parkos"] .pk-fleet__title { margin: 0; font-size: 14px; font-weight: 800; color: var(--pk-ink); } html[data-theme="parkos"] .pk-seg { display: inline-flex; background: var(--pk-surface-2); border: 1px solid var(--pk-line); border-radius: 10px; padding: 3px; } html[data-theme="parkos"] .pk-seg span { padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 800; color: var(--pk-muted); cursor: pointer; } html[data-theme="parkos"] .pk-seg span.is-on { background: var(--pk-surface); color: var(--pk-ink); box-shadow: var(--pk-shadow); } /* Кнопки зума/гео — плавающие на карте (правый-нижний угол карты, левее списка аренд) */ html[data-theme="parkos"] body.desktop-map-mode #mapControls { right: calc(var(--pk-rail-w) + 50px) !important; top: auto !important; bottom: 36px !important; transform: none !important; z-index: 1658 !important; } /* Правая панель — список аренд со статусами (перекрываем map-mode display:none) */ html[data-theme="parkos"] body.desktop-map-mode #rentalsTopControl { display: flex !important; flex-direction: column; position: fixed !important; top: 18px !important; right: 18px !important; bottom: 18px !important; left: auto !important; width: var(--pk-rail-w) !important; max-width: var(--pk-rail-w) !important; height: auto !important; max-height: none !important; margin: 0 !important; z-index: 1660; background: var(--pk-surface); border: 1px solid var(--pk-line); border-radius: 16px; box-shadow: var(--pk-shadow); overflow: hidden; } html[data-theme="parkos"] body.desktop-map-mode #rentalsMapHeader { flex: 0 0 auto; padding: 14px 16px; border-bottom: 1px solid var(--pk-line); } html[data-theme="parkos"] body.desktop-map-mode #rentalsMapContent { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 6px 10px 10px; } /* === ШАПКА режима карты: [Панель|Карта] + [Велики|Прокаты] + поиск === #desktopTopbar — полноширинная панель над метриками (слева от панели аренд). */ html[data-theme="parkos"] body.desktop-map-mode #desktopTopbar { position: fixed !important; top: 18px !important; left: var(--pk-gutter-l) !important; right: calc(var(--pk-rail-w) + 32px) !important; width: auto !important; max-width: none !important; min-height: 0 !important; margin: 0 !important; display: flex !important; align-items: center; gap: 12px; padding: 8px 12px !important; background: var(--pk-surface) !important; backdrop-filter: none !important; border: 1px solid var(--pk-line); border-radius: 14px; box-shadow: var(--pk-shadow); z-index: 1661; } html[data-theme="parkos"] body.desktop-map-mode .desktop-topbar__intro, html[data-theme="parkos"] body.desktop-map-mode #desktopTopbarNewClient, html[data-theme="parkos"] body.desktop-map-mode #desktopTopbarFocusMap, html[data-theme="parkos"] body.desktop-map-mode #desktopMetricsFilter { display: none !important; } /* «Обзор» слева в шапке (создаёт parkos.js) */ html[data-theme="parkos"] .pk-maphead__title { display: none; } html[data-theme="parkos"] body.desktop-map-mode .pk-maphead__title { display: block; order: 0; flex: 0 0 auto; margin: 0 6px 0 2px; font-family: var(--pk-display); font-weight: 800; font-size: 17px; color: var(--pk-ink); letter-spacing: -0.01em; } html[data-theme="parkos"] body.desktop-map-mode .desktop-topbar__actions { order: 1; display: flex !important; align-items: center; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } html[data-theme="parkos"] body.desktop-map-mode #desktopViewSwitch { min-width: 0 !important; width: auto !important; margin: 0 !important; } html[data-theme="parkos"] body.desktop-map-mode .desktop-view-switch__btn { flex: 0 0 auto !important; min-width: 0 !important; padding: 7px 16px !important; font-size: 13px !important; } /* Велики/Прокаты — рядом с Панель/Карта (только кабинет сети) */ html[data-theme="parkos"] body.desktop-map-mode:not(.branch-session-active) #pkMarkerModeToggle { order: 2; flex: 0 0 auto; } /* Поиск — справа в шапке */ html[data-theme="parkos"] #pkMapSearch { display: none; } html[data-theme="parkos"] body.desktop-map-mode #pkMapSearch { display: flex; order: 3; position: static !important; flex: 1 1 0; min-width: 130px; max-width: 360px; margin-left: auto; align-items: center; gap: 8px; padding: 9px 13px; background: var(--pk-surface-2); border: 1px solid var(--pk-line); border-radius: 11px; box-shadow: none; z-index: auto; } html[data-theme="parkos"] #pkMapSearch svg { flex: 0 0 auto; color: var(--pk-muted); } html[data-theme="parkos"] #pkMapSearch input { border: none; outline: none; background: transparent; width: 100%; min-height: 0; height: auto; line-height: 1.3; padding: 0; margin: 0; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--pk-ink); } html[data-theme="parkos"] #pkMapSearch input::placeholder { color: var(--pk-muted); font-weight: 600; } /* === МЕТРИКИ (как в режиме панели) — ряд плашек ПОД шапкой === */ html[data-theme="parkos"] body.desktop-map-mode #desktopMetrics { display: flex !important; gap: 10px; position: fixed !important; top: 86px !important; left: var(--pk-gutter-l) !important; right: calc(var(--pk-rail-w) + 32px) !important; width: auto !important; margin: 0 !important; padding: 0 !important; z-index: 1655; pointer-events: none; } html[data-theme="parkos"] body.desktop-map-mode #desktopMetrics .mobile-metrics-mini-filters { display: none !important; } html[data-theme="parkos"] body.desktop-map-mode .desktop-metric-card { flex: 1 1 0 !important; min-width: 0 !important; margin: 0 !important; padding: 12px 14px !important; background: var(--pk-surface) !important; border: 1px solid var(--pk-line) !important; border-radius: 14px !important; box-shadow: var(--pk-shadow) !important; overflow: hidden; } html[data-theme="parkos"] body.desktop-map-mode .desktop-metric-card__label { font-size: 11px !important; font-weight: 700 !important; color: var(--pk-muted) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-theme="parkos"] body.desktop-map-mode .desktop-metric-card__value { font-family: var(--pk-display) !important; font-size: 22px !important; font-weight: 800 !important; color: var(--pk-ink) !important; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-theme="parkos"] body.desktop-map-mode .desktop-metric-card__hint { font-size: 11px !important; color: var(--pk-muted) !important; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* #pkBookings — прокручиваемый контент панели аренд */ html[data-theme="parkos"] body.desktop-map-mode #pkBookings { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 6px 8px 10px; } /* Панель аренд кликабельна (стек выше — pointer-events:none) */ html[data-theme="parkos"] body.desktop-map-mode #rentalsTopControl { pointer-events: auto !important; } /* Статус-плашку (Онлайн/дата) в режиме карты убираем */ html[data-theme="parkos"] body.desktop-map-mode #statusBar { display: none !important; } /* Плашку сессии и выдвижную «Начать аренду» прячем */ html[data-theme="parkos"] body.desktop-map-mode #authSessionBadge, html[data-theme="parkos"] body.desktop-map-mode #startRentalBadge { display: none !important; } } /* ========================================================================= Плашка сессии (#pkSessionLabel, parkos.js) — вместо «Онлайн: дата/время» показываем филиал / кабинет сети, под которым вошли. Нативный #status скрыт. ========================================================================= */ html[data-theme="parkos"] #status { display: none !important; } html[data-theme="parkos"] #pkSessionLabel { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 24px; background: linear-gradient(135deg, var(--pk-side), var(--pk-side-2)); border: 1px solid var(--pk-side-line); box-shadow: var(--pk-shadow); color: #fff; font-family: var(--pk-font); font-weight: 600; line-height: 1.1; white-space: nowrap; letter-spacing: 0.01em; } html[data-theme="parkos"] #pkSessionLabel[hidden] { display: none !important; } html[data-theme="parkos"] #pkSessionLabel .pk-sess__pin { display: inline-flex; color: var(--pk-cyan); } html[data-theme="parkos"] #pkSessionLabel .pk-sess__pin svg { display: block; } html[data-theme="parkos"] #pkSessionLabel .pk-sess__eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pk-side-muted); } html[data-theme="parkos"] #pkSessionLabel .pk-sess__name { font-size: 14px; font-weight: 700; color: #fff; max-width: min(60vw, 360px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ========================================================================= ФАЗА 3 — ОБЗОР (Панель) по прототипу: статы + [Карта парка | Последние брони], переключатель Панель/Карта справа (место «Добавить устройство»). Компактная таблица броней (#pkBookings) — рендерит parkos.js из реальных данных. ========================================================================= */ @media (min-width: 1180px) { /* В обзоре справа в топбаре — переключатель Панель/Карта + кнопка «Добавить клиента» (лишнюю «Показать весь флот» прячем) */ html[data-theme="parkos"] body:not(.desktop-map-mode) #desktopTopbarFocusMap { display: none !important; } html[data-theme="parkos"] #desktopViewSwitch { justify-self: end; } /* В режиме панели кнопку «Добавить клиента» ставим ПОД переключателем Панель/Карта: одна колонка, switch сверху, кнопка снизу, обе выровнены вправо */ html[data-theme="parkos"] body:not(.desktop-map-mode) .desktop-topbar__actions { grid-template-columns: auto; grid-template-areas: "switch" "new-client"; justify-items: end; } /* «Добавить клиента» под переключателем — светлая фирменная кнопка (без тёмного дефолта) */ html[data-theme="parkos"] body:not(.desktop-map-mode) #desktopTopbarNewClient { display: inline-flex !important; align-items: center; justify-self: end; background: var(--pk-grad-soft) !important; color: var(--pk-primary-strong) !important; border: 1px solid var(--pk-line) !important; border-radius: 12px !important; font-weight: 700 !important; box-shadow: none !important; } html[data-theme="parkos"] body:not(.desktop-map-mode) #desktopTopbarNewClient:hover { background: var(--pk-grad-soft) !important; border-color: var(--pk-primary) !important; transform: none; } /* Сетку обзора (режим панели) НЕ трогаем — используем штатную раскладку приложения (fleet|analytics / devices|rentals / clients), чтобы панели были на своих местах. */ /* НО: базовый style.css держит #rentalsTopControl ГЛОБАЛЬНО display:none (мобильный overlay-стиль, стр.2220 перебивает display:flex со стр.438), а десктоп-правила дашборда задают только position/grid-area и display НЕ возвращают. Из-за этого панель «Аренды» появляется лишь когда её догрузит JS (позже остальных). Возвращаем её в грид СРАЗУ — наравне с «Флотом»/«Клиентами», чтобы каркас (скелетон #pkBookings) был виден с первого кадра. Только режим «Панель» (карту/филиал-сессию не трогаем). */ html[data-theme="parkos"] body.desktop-dashboard-active:not(.desktop-map-mode):not(.branch-session-active) #rentalsTopControl { display: flex !important; flex-direction: column; } /* Плавающие плашки сессии (выход) и «Начать аренду» ВОЗВРАЩЕНЫ в кабинет сети (по просьбе владельца). На экране «Панель» обе видны (выход — app.js, «Начать аренду» форсит parkos.js, перебивая app.js, который прячет её в сети). В режиме «Карта» обе остаются скрытыми (правило выше в @media-блоке desktop-map-mode), чтобы не загромождать редизайн-карту. */ /* === Внутренний скролл списков «Аренды»/«Флот» в режиме Панели === Скроллим САМ список по явному max-height + overflow (самодостаточный скроллер). ОБЁРТКИ НЕ ТРОГАЕМ: их overflow:hidden и раскладку грида оставляем как есть. (Раньше ставил обёрткам overflow:visible — несхлопнутый список вытекал и НАЕЗЖАЛ на соседние панели «Клиенты»/«Аренды». Больше так не делаем.) Скоуп 2 id (#wrapper #list), чтобы перебить базовое #...Wrapper.panel-open #list { max-height:none; overflow:visible } (тоже 2 id). ВАЖНО: для «Аренд» НЕ исключаем .branch-session-active. В отличие от «Флота» (где скроллит нативный #deviceListContent через базовый style.css), «Аренды» рендерятся в НАШ #pkBookings, а нативный #rentalsMapContent скрыт (display:none), поэтому без этого правила в кабинете филиала список аренд не получал max-height и не пролистывался. */ html[data-theme="parkos"] body.desktop-dashboard-active:not(.desktop-map-mode) #rentalsTopControl #pkBookings { max-height: min(56vh, 480px) !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 4px 6px 8px; } /* «Флот» работает как «Аренды»: поиск ЗАФИКСИРОВАН над списком, скроллится только сам список. Раньше скроллил #deviceListContent (поиск лежал ВНУТРИ него и уезжал вверх при прокрутке). Теперь #deviceListContent — нескроллящаяся flex-колонка (поиск .device-list-search-row = flex:0 0 auto сверху, статичен), а скроллером стал САМ #deviceList (flex:1 + min-height:0 + overflow-y). Так же, как в «Арендах» #pkBookingsSearch стоит над скроллером #pkBookings. Шапка колонок .pk-fleet__head (position:sticky) теперь липнет к верху #deviceList. overflow:hidden у контента — страховка от вытекания списка на соседние панели. 2 id, чтобы перебить базу/Safari. НЕ исключаем .branch-session-active: app.js рисует .pk-fleet и в кабинете филиала, padding:0 держит поиск «Флота» на одном уровне с поиском «Аренд». */ html[data-theme="parkos"] body.desktop-dashboard-active:not(.desktop-map-mode) #deviceListWrapper #deviceListContent { max-height: min(58vh, 500px) !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; /* убираем базовый отступ 14px — иначе поиск «Флота» опущен ниже и левее, чем в «Арендах» */ padding: 0 !important; } html[data-theme="parkos"] body.desktop-dashboard-active:not(.desktop-map-mode) #deviceListWrapper #deviceList.pk-fleet { flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; overflow-y: auto !important; overflow-x: hidden !important; } } /* ---- Компактная таблица «Последние брони» (#pkBookings) ---- */ /* Жёстко прячем штатные громоздкие карточки аренд — их перебивает только !important (app.js повторно рендерит #rentalsMapContent и возвращает ему display). Показываем нашу таблицу. */ html[data-theme="parkos"] #rentalsMapContent { display: none !important; } html[data-theme="parkos"] .pk-bookings { display: flex; flex-direction: column; gap: 10px; } html[data-theme="parkos"] .pk-bookings__head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.95fr) minmax(0, 0.9fr) minmax(64px, 0.7fr); text-align: left; gap: 10px; padding: 10px 14px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: var(--pk-muted); background: var(--pk-surface); border-bottom: 1px solid var(--pk-line); /* Шапка колонок «Аренд» залипает к верху скроллера #pkBookings — так же, как .pk-fleet__head во «Флоте». Фон непрозрачный (var(--pk-surface)) — строки уходят под неё. */ position: sticky; top: 0; z-index: 1; } html[data-theme="parkos"] .pk-book-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.95fr) minmax(0, 0.9fr) minmax(64px, 0.7fr); text-align: left; gap: 10px; align-items: center; padding: 12px 14px; background: var(--pk-surface); border-bottom: 1px solid var(--pk-line); font-size: 13px; font-weight: 600; cursor: pointer; } html[data-theme="parkos"] .pk-book-row:hover { background: var(--pk-surface-2); } html[data-theme="parkos"] .pk-book-row__client { color: var(--pk-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-theme="parkos"] .pk-book-row__device { color: var(--pk-slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Круглишок связи устройства (онлайн/офлайн по телеметрии) перед названием велика */ html[data-theme="parkos"] .pk-conn { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: middle; flex: 0 0 auto; } html[data-theme="parkos"] .pk-conn--on { background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); } html[data-theme="parkos"] .pk-conn--off { background: #C2C9D8; box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.16); } html[data-theme="parkos"] .pk-book-row__tariff { color: var(--pk-slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-theme="parkos"] .pk-book-row__status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; } html[data-theme="parkos"] .pk-book-row .pk-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } html[data-theme="parkos"] .pk-st--rent { color: #0e7490; } html[data-theme="parkos"] .pk-st--rent .pk-dot { background: var(--pk-cyan); } html[data-theme="parkos"] .pk-st--overdue { color: var(--pk-danger); } html[data-theme="parkos"] .pk-st--overdue .pk-dot { background: var(--pk-danger); } html[data-theme="parkos"] .pk-st--off { color: var(--pk-muted); } html[data-theme="parkos"] .pk-st--off .pk-dot { background: #C2C9D8; } html[data-theme="parkos"] .pk-bookings__empty { padding: 16px; color: var(--pk-muted); font-weight: 600; } /* ---- Виджет «дней до завершения аренды» (5-я колонка «Осталось») ---- */ html[data-theme="parkos"] .pk-book-row__days { display: flex; align-items: center; justify-content: flex-start; min-width: 0; } html[data-theme="parkos"] .pk-days { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; border: 1px solid transparent; white-space: nowrap; } /* 5 и более дней — зелёный */ html[data-theme="parkos"] .pk-days--green { color: #166534; background: rgba(34, 197, 94, 0.14); border-color: rgba(34, 197, 94, 0.30); } /* 3–4 дня — оранжевый */ html[data-theme="parkos"] .pk-days--orange { color: #b45309; background: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.34); } /* 2 и 1 день — красный */ html[data-theme="parkos"] .pk-days--red { color: #b91c1c; background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.32); } /* Прочерк — нет активной аренды/срока */ html[data-theme="parkos"] .pk-days--muted { color: var(--pk-muted); background: transparent; border-color: transparent; font-weight: 700; min-width: 0; padding: 0; } /* Просрочка — заливка-красный, пульсация для привлечения внимания */ html[data-theme="parkos"] .pk-days--overdue { color: #fff; background: var(--pk-danger, #ef4444); border-color: transparent; animation: pkDaysPulse 1.15s ease-in-out infinite; } @keyframes pkDaysPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); transform: scale(1); } 50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); transform: scale(1.07); } } @media (prefers-reduced-motion: reduce) { html[data-theme="parkos"] .pk-days--overdue { animation: none; } } /* ---- Подвал списка аренд: ссылка на полноэкранный «Экран аренд» ---- */ /* Виден при прокрутке до самого конца контейнера #pkBookings — там же завершённые аренды. */ html[data-theme="parkos"] .pk-book-foot { display: block; width: 100%; margin: 4px 0 0; padding: 13px 14px; border: 0; border-top: 1px dashed var(--pk-line); background: transparent; color: var(--pk-slate); font-size: 12.5px; font-weight: 600; text-align: center; cursor: pointer; } html[data-theme="parkos"] .pk-book-foot:hover { background: var(--pk-surface-2); } html[data-theme="parkos"] .pk-book-foot__link { color: var(--pk-primary-strong, var(--pk-primary)); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; } /* Скелетон списка аренд: каркас панели виден сразу, данные подгружаются поверх */ html[data-theme="parkos"] .pk-book-row.pk-book-skel { cursor: default; } html[data-theme="parkos"] .pk-book-row.pk-book-skel:hover { background: var(--pk-surface); } html[data-theme="parkos"] .pk-skel-bar { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--pk-surface-2) 25%, #E9EBF3 37%, var(--pk-surface-2) 63%); background-size: 400% 100%; animation: pk-skel-shimmer 1.4s ease-in-out infinite; } @keyframes pk-skel-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } @media (prefers-reduced-motion: reduce) { html[data-theme="parkos"] .pk-skel-bar { animation: none; } } /* Поиск-пилюля (иконка + безрамочный инпут) — общий вид для «Аренд» (#pkBookingsSearch) и «Флота» (.device-list-search-row). Иконку во «Флот» добавляет parkos.js. */ html[data-theme="parkos"] #pkBookingsSearch, html[data-theme="parkos"] .device-list-search-row, html[data-theme="parkos"] #clientPhoneFilterWrap { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; margin: 10px 12px; padding: 8px 12px; border: 1px solid var(--pk-line) !important; border-radius: 12px !important; background: var(--pk-surface-2) !important; } /* поиск клиентов живёт в шапке-строке (рядом с «Новый клиент») — тянется, без внешних полей */ html[data-theme="parkos"] #clientHeaderActions #clientPhoneFilterWrap { flex: 1 1 auto; margin: 0; } html[data-theme="parkos"] #pkBookingsSearch:focus-within, html[data-theme="parkos"] .device-list-search-row:focus-within, html[data-theme="parkos"] #clientPhoneFilterWrap:focus-within { border-color: var(--pk-primary) !important; box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.14) !important; } html[data-theme="parkos"] #pkBookingsSearch svg, html[data-theme="parkos"] .device-list-search-row svg, html[data-theme="parkos"] #clientPhoneFilterWrap svg { flex: 0 0 auto; color: var(--pk-muted); } html[data-theme="parkos"] #pkBookingsSearch input, html[data-theme="parkos"] .device-list-search-row #deviceSearchFilter, html[data-theme="parkos"] #clientPhoneFilterWrap #clientPhoneFilter { flex: 1 1 auto; min-width: 0; height: auto !important; min-height: 0 !important; margin: 0 !important; /* высоту пилюли задаёт её собственный padding (8px), инпут без своего паддинга — иначе базовое .device-fleet-search-input{padding:8px 11px!important} делает «Флот» выше «Аренд» */ padding: 0 !important; line-height: 20px !important; border: none !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; color: var(--pk-ink); font-family: var(--pk-font); font-size: 13px !important; font-weight: 600; outline: none; -webkit-appearance: none !important; appearance: none !important; } /* убираем нативный «крестик» очистки у type=search, чтобы поля были идентичны */ html[data-theme="parkos"] #pkBookingsSearch input::-webkit-search-decoration, html[data-theme="parkos"] #pkBookingsSearch input::-webkit-search-cancel-button { -webkit-appearance: none; } html[data-theme="parkos"] #pkBookingsSearch input::placeholder, html[data-theme="parkos"] .device-list-search-row #deviceSearchFilter::placeholder, html[data-theme="parkos"] #clientPhoneFilterWrap #clientPhoneFilter::placeholder { color: var(--pk-muted); font-weight: 600; } /* кнопка «Сброс» внутри пилюли поиска клиентов — компактный гост */ html[data-theme="parkos"] #clientPhoneFilterWrap #clientPhoneFilterClear { flex: 0 0 auto; margin: 0 !important; padding: 4px 10px !important; border: 1px solid var(--pk-line) !important; border-radius: 8px !important; background: var(--pk-surface) !important; color: var(--pk-muted) !important; font-weight: 700 !important; font-size: 12px !important; } /* ========================================================================= КЛИЕНТЫ — карточки в фирменном стиле ParkOS (как панели Флот/Аренды) ========================================================================= */ /* Карточки клиентов одинакового размера: грид с равными колонками + единая мин-высота. (база делает .client-list-grid флексом с width:auto/max-width:420px — перекрываем.) */ html[data-theme="parkos"] #clientList.client-list-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important; gap: 12px !important; align-items: stretch !important; } html[data-theme="parkos"] #clientList.client-list-grid > .client-list-card { width: auto !important; max-width: none !important; min-width: 0 !important; height: 100% !important; min-height: 128px; margin: 0 !important; box-sizing: border-box; } /* Список клиентов ВСЕГДА виден и кликабелен: app.js при фоновой подгрузке ставит инлайн opacity:0.45 + pointer-events:none (затемнение «как загрузка») — гасим это насовсем. */ html[data-theme="parkos"] #clientList { opacity: 1 !important; pointer-events: auto !important; } /* Белые surface-карточки вместо кремовых (база #clientList > div даёт кремовую с !important) */ html[data-theme="parkos"] #clientList .client-list-card { background: var(--pk-surface) !important; border: 1px solid var(--pk-line) !important; border-radius: 16px !important; box-shadow: var(--pk-shadow) !important; overflow: hidden; transition: border-color .14s, box-shadow .14s, transform .14s; } html[data-theme="parkos"] #clientList .client-list-card:hover { border-color: rgba(124, 92, 255, 0.45) !important; box-shadow: 0 18px 40px rgba(124, 92, 255, 0.16) !important; } /* ЧС: красный фон карточки клиента в списках — перебиваем surface-фон парко-темы (иначе var(--pk-surface) !important гасит подсветку стоп-листа) */ html[data-theme="parkos"] #clientList .client-list-card.client-list-card--blacklisted { background: #fff1f2 !important; border-color: #fecaca !important; } html[data-theme="parkos"] #clientList .client-list-card.client-list-card--blacklisted:hover { border-color: #fca5a5 !important; } html[data-theme="parkos"] .clients-table-view tr.client-row--blacklisted td { background: #fff1f2 !important; } html[data-theme="parkos"] .clients-table-view tr.client-row--blacklisted:hover td { background: #ffe4e6 !important; } html[data-theme="parkos"] .dashboard-list-card.dashboard-list-card--blacklisted { background: #fff1f2 !important; border-color: #fecaca !important; } html[data-theme="parkos"] .client-list-card__title { font-family: var(--pk-display) !important; font-weight: 800 !important; color: var(--pk-ink) !important; letter-spacing: -0.01em; } /* телефон-ссылка → фирменный фиолет (в app.js инлайн #2563eb) */ html[data-theme="parkos"] .client-list-card__meta a { color: var(--pk-primary) !important; font-weight: 700; } /* кнопка «Открыть» → primary, «Данные» → гост (перебиваем инлайн-стили из app.js) */ html[data-theme="parkos"] .client-list-card__open-btn { background: var(--pk-primary) !important; color: #fff !important; border: none !important; border-radius: 10px !important; font-weight: 800 !important; box-shadow: 0 8px 18px rgba(124, 92, 255, 0.24) !important; } html[data-theme="parkos"] .client-list-card__details-btn { background: var(--pk-surface-2) !important; color: var(--pk-slate) !important; border: 1px solid var(--pk-line) !important; border-radius: 10px !important; font-weight: 700 !important; } /* ========================================================================= ДЕЙСТВИЯ СОТРУДНИКОВ (#employeeAuditWrapper) — фирменный стиль ParkOS ========================================================================= */ /* поля фильтра (С/По дата, Сотрудник, Тип) — пилюли как инпуты ParkOS */ html[data-theme="parkos"] .employee-audit-filter-field { background: var(--pk-surface-2) !important; border: 1px solid var(--pk-line) !important; border-radius: 10px !important; color: var(--pk-slate) !important; } html[data-theme="parkos"] .employee-audit-filter-field > span { color: var(--pk-muted) !important; font-weight: 700; } html[data-theme="parkos"] .employee-audit-filter-field input, html[data-theme="parkos"] .employee-audit-filter-field select { background: transparent !important; border: none !important; color: var(--pk-ink) !important; font-family: var(--pk-font) !important; font-weight: 600 !important; } html[data-theme="parkos"] .employee-audit-filter-field:focus-within { border-color: var(--pk-primary) !important; box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.14) !important; } /* кнопки-пресеты периода — гост-пилюли */ html[data-theme="parkos"] #employeeAuditTodayBtn, html[data-theme="parkos"] #employeeAuditYesterdayBtn, html[data-theme="parkos"] #employeeAuditMonthBtn, html[data-theme="parkos"] #employeeAuditAllTimeBtn, html[data-theme="parkos"] #employeeAuditOpenAllBtn { background: var(--pk-surface-2) !important; border: 1px solid var(--pk-line) !important; color: var(--pk-slate) !important; border-radius: 10px !important; font-weight: 700 !important; } html[data-theme="parkos"] #employeeAuditTodayBtn:hover, html[data-theme="parkos"] #employeeAuditYesterdayBtn:hover, html[data-theme="parkos"] #employeeAuditMonthBtn:hover, html[data-theme="parkos"] #employeeAuditAllTimeBtn:hover, html[data-theme="parkos"] #employeeAuditOpenAllBtn:hover { background: rgba(124, 92, 255, 0.10) !important; border-color: rgba(124, 92, 255, 0.35) !important; color: var(--pk-primary-strong) !important; } /* «Применить» — primary */ html[data-theme="parkos"] #employeeAuditApplyBtn { background: var(--pk-primary) !important; color: #fff !important; border: none !important; border-radius: 10px !important; font-weight: 800 !important; box-shadow: 0 8px 18px rgba(124, 92, 255, 0.24) !important; } /* мета-строка «Журнал за … Найдено действий: N» */ html[data-theme="parkos"] .employee-audit-meta { color: var(--pk-muted) !important; font-weight: 600 !important; } /* карточки сводки по сотруднику — белый surface ParkOS */ html[data-theme="parkos"] .employee-audit-summary-card { background: var(--pk-surface) !important; border: 1px solid var(--pk-line) !important; border-radius: 16px !important; box-shadow: var(--pk-shadow) !important; } html[data-theme="parkos"] .employee-audit-summary-card--network { border-color: rgba(124, 92, 255, 0.35) !important; } html[data-theme="parkos"] .employee-audit-summary-card__name { font-family: var(--pk-display) !important; font-weight: 800 !important; color: var(--pk-ink) !important; letter-spacing: -0.01em; } html[data-theme="parkos"] .employee-audit-summary-card__pin, html[data-theme="parkos"] .employee-audit-summary-card__branch, html[data-theme="parkos"] .employee-audit-summary-card__hint { color: var(--pk-muted) !important; } html[data-theme="parkos"] .employee-audit-summary-card__count { font-family: var(--pk-display) !important; font-weight: 800 !important; color: var(--pk-primary-strong) !important; font-feature-settings: "tnum" 1; } /* чипы действий (Вход в систему: 1 и т.п.) */ html[data-theme="parkos"] .employee-audit-chip { background: var(--pk-surface-2) !important; border: 1px solid var(--pk-line) !important; color: var(--pk-slate) !important; border-radius: 999px !important; font-weight: 700 !important; } /* кнопка «Показать историю сотрудника» */ html[data-theme="parkos"] .employee-audit-summary-card__toggle { background: var(--pk-surface-2) !important; border: 1px solid var(--pk-line) !important; color: var(--pk-primary-strong) !important; border-radius: 10px !important; font-weight: 800 !important; } html[data-theme="parkos"] .employee-audit-summary-card__toggle:hover { background: rgba(124, 92, 255, 0.10) !important; border-color: rgba(124, 92, 255, 0.35) !important; } /* записи раскрытой истории */ html[data-theme="parkos"] .employee-audit-entry { background: var(--pk-surface-2) !important; border: 1px solid var(--pk-line) !important; border-radius: 12px !important; } html[data-theme="parkos"] .employee-audit-entry__title { color: var(--pk-ink) !important; font-weight: 700 !important; } html[data-theme="parkos"] .employee-audit-entry__actor, html[data-theme="parkos"] .employee-audit-entry__time { color: var(--pk-muted) !important; } html[data-theme="parkos"] .employee-audit-entry__branch { background: rgba(124, 92, 255, 0.12) !important; color: var(--pk-primary-strong) !important; border-radius: 999px !important; } html[data-theme="parkos"] .employee-audit-empty { color: var(--pk-muted) !important; } /* Раскладка шапки фильтров (десктоп): заголовок сверху, фильтры — ОДНОЙ строкой во всю ширину панели от левого края. База делает шапку гридом [auto|1fr] + justify-content:flex-end → фильтры жались вправо и переносились. */ @media (min-width: 1180px) { html[data-theme="parkos"] #employeeAuditWrapper #employeeAuditHeader { display: block !important; } html[data-theme="parkos"] #employeeAuditWrapper #employeeAuditHeader .panel-heading-group { margin-bottom: 12px; } /* ВСЕ фильтры в ОДНУ строку: компактные гэпы между кнопками + ОДИНАКОВЫЕ отступы слева/справа от краёв контейнера (центрированная группа + симметричный padding). */ html[data-theme="parkos"] #employeeAuditWrapper .employee-audit-actions { display: flex !important; flex-wrap: nowrap !important; justify-content: center !important; /* равные отступы слева/справа */ align-items: center !important; gap: 4px !important; /* небольшое расстояние между кнопками */ width: 100% !important; min-width: 0 !important; padding: 0 8px !important; /* гарантированный симметричный отступ от краёв */ box-sizing: border-box !important; overflow: hidden !important; } html[data-theme="parkos"] #employeeAuditWrapper .employee-audit-actions > * { margin: 0 !important; } /* пустой mount скоупа филиала не должен занимать место в строке */ html[data-theme="parkos"] #employeeAuditWrapper #employeeAuditScopeMount:empty { display: none !important; } /* кнопки период/применить — не сжимаются (текст), компактные */ html[data-theme="parkos"] #employeeAuditWrapper .employee-audit-actions > button { flex: 0 0 auto; padding: 6px 7px !important; font-size: 12.5px; white-space: nowrap; } /* НАЖАТАЯ (активная) кнопка периода — фирменный фиолет */ html[data-theme="parkos"] #employeeAuditWrapper .employee-audit-actions > button.is-active { background: var(--pk-primary) !important; color: #fff !important; border-color: var(--pk-primary) !important; box-shadow: 0 8px 18px rgba(124, 92, 255, 0.28) !important; } /* «Вся история» — ВСЕГДА в цвете (градиент) и СПРАВА (отступ от края даёт padding шапки) */ html[data-theme="parkos"] #employeeAuditWrapper #employeeAuditOpenAllBtn { order: 10 !important; margin-left: 4px !important; background: var(--pk-grad) !important; color: #fff !important; border: none !important; box-shadow: 0 8px 18px rgba(124, 92, 255, 0.24) !important; } /* поля С/По/Сотрудник/Тип — компактные, фиксированной ширины, с ВИДИМОЙ фирменной рамкой (раньше --pk-line сливался с фоном шапки — особенно у «Сотрудник»). */ html[data-theme="parkos"] #employeeAuditWrapper .employee-audit-filter-field { flex: 0 0 auto; min-width: 0; padding: 4px 8px !important; gap: 4px; border: 1px solid rgba(124, 92, 255, 0.32) !important; } html[data-theme="parkos"] #employeeAuditWrapper .employee-audit-filter-field > span { font-size: 10px; flex: 0 0 auto; } html[data-theme="parkos"] #employeeAuditWrapper .employee-audit-filter-field input, html[data-theme="parkos"] #employeeAuditWrapper .employee-audit-filter-field select { min-width: 0; } /* дата ЦЕЛИКОМ: прячем нативную иконку календаря (съедала ~24px и резала «2026») + поле шире */ html[data-theme="parkos"] #employeeAuditWrapper .employee-audit-filter-field input[type="date"] { width: 116px !important; min-width: 0 !important; font-size: 12px; cursor: pointer; } html[data-theme="parkos"] #employeeAuditWrapper .employee-audit-filter-field input[type="date"]::-webkit-calendar-picker-indicator { display: none !important; } html[data-theme="parkos"] #employeeAuditWrapper #employeeAuditEmployeeFilter { width: 62px !important; font-size: 12px; } html[data-theme="parkos"] #employeeAuditWrapper .employee-audit-filter-field--type select { width: 106px !important; max-width: 106px !important; font-size: 12px; } } /* ---- Флот (#deviceList) — фирменный компактный список как «Аренды» ---- ВАЖНО: база (style.css) задаёт #deviceList > div { display:block!important; кремовая карточка с border-radius!important } со специфичностью по id. Поэтому строки/шапку скоупим под #deviceList.pk-fleet и перебиваем !important, иначе грид не применяется. */ html[data-theme="parkos"] #deviceList.pk-fleet { display: flex !important; flex-direction: column; } html[data-theme="parkos"] #deviceList.pk-fleet > .pk-fleet__head { display: flex !important; align-items: center; overflow: visible !important; gap: 10px; padding: 10px 14px !important; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: var(--pk-muted); background: var(--pk-surface) !important; border: none !important; border-bottom: 1px solid var(--pk-line) !important; border-radius: 0 !important; box-shadow: none !important; position: sticky; top: 0; z-index: 1; } html[data-theme="parkos"] #deviceList.pk-fleet > .pk-fleet-row { display: flex !important; align-items: center; overflow: visible !important; gap: 10px; padding: 12px 14px !important; margin: 0 !important; background: var(--pk-surface) !important; border: none !important; border-bottom: 1px solid var(--pk-line) !important; border-radius: 0 !important; box-shadow: none !important; font-size: 13px; font-weight: 600; cursor: pointer; } html[data-theme="parkos"] #deviceList.pk-fleet > .pk-fleet-row:hover { background: var(--pk-surface-2) !important; } html[data-theme="parkos"] #deviceList.pk-fleet > .pk-fleet-row.is-dim { opacity: 0.55; } /* колонки: одинаковые доли для шапки и строк (флекс-базис, без grid) */ html[data-theme="parkos"] #deviceList.pk-fleet > .pk-fleet__head > span:nth-child(1), html[data-theme="parkos"] .pk-fleet-row__dev { flex: 1 1 auto; min-width: 0; } html[data-theme="parkos"] #deviceList.pk-fleet > .pk-fleet__head > span:nth-child(2), html[data-theme="parkos"] .pk-fleet-row__status { flex: 0 0 30%; min-width: 0; } html[data-theme="parkos"] #deviceList.pk-fleet > .pk-fleet__head > span:nth-child(3), html[data-theme="parkos"] .pk-fleet-row__rental { flex: 0 0 22%; min-width: 0; } html[data-theme="parkos"] .pk-fleet-row__dev { display: flex; align-items: center; color: var(--pk-ink); overflow: visible; } html[data-theme="parkos"] .pk-fleet-row__name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-theme="parkos"] .pk-fleet-row__code { color: var(--pk-cyan); font-weight: 700; } html[data-theme="parkos"] .pk-fleet-row__status { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: visible; } html[data-theme="parkos"] .pk-fleet-row__status .pk-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } /* статус-цвета флота */ html[data-theme="parkos"] .pk-fl--ready { color: var(--pk-primary-strong); } html[data-theme="parkos"] .pk-fl--ready .pk-dot { background: var(--pk-primary); } html[data-theme="parkos"] .pk-fl--rent { color: #0e7490; } html[data-theme="parkos"] .pk-fl--rent .pk-dot { background: var(--pk-cyan); } html[data-theme="parkos"] .pk-fl--overdue { color: var(--pk-danger); } html[data-theme="parkos"] .pk-fl--overdue .pk-dot { background: var(--pk-danger); } html[data-theme="parkos"] .pk-fl--repair { color: #b45309; } html[data-theme="parkos"] .pk-fl--repair .pk-dot { background: #F59E0B; } html[data-theme="parkos"] .pk-fl--reserved { color: #7c3aed; } html[data-theme="parkos"] .pk-fl--reserved .pk-dot { background: #A78BFA; } html[data-theme="parkos"] .pk-fl--retired, html[data-theme="parkos"] .pk-fl--other { color: var(--pk-muted); } html[data-theme="parkos"] .pk-fl--retired .pk-dot, html[data-theme="parkos"] .pk-fl--other .pk-dot { background: #C2C9D8; } /* колонка «Аренда» */ html[data-theme="parkos"] .pk-fleet-row__rental { display: flex; align-items: center; overflow: visible; } html[data-theme="parkos"] .pk-fleet-row__rental.is-empty { color: var(--pk-muted); } html[data-theme="parkos"] .pk-fleet-row__rentlink { max-width: 100%; background: none; border: none; padding: 0; font: inherit; font-weight: 800; color: var(--pk-primary); cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-theme="parkos"] .pk-fleet-row__rentlink:hover { text-decoration: underline; } html[data-theme="parkos"] #deviceList.pk-fleet > .pk-fleet__empty { padding: 16px !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; color: var(--pk-muted); font-weight: 600; } /* Скелетон «Флота»: каркас списка виден сразу, данные подгружаются поверх (как у «Аренд») */ html[data-theme="parkos"] #deviceList.pk-fleet > .pk-fleet-row.pk-fleet-skel { cursor: default; } html[data-theme="parkos"] #deviceList.pk-fleet > .pk-fleet-row.pk-fleet-skel:hover { background: var(--pk-surface) !important; } html[data-theme="parkos"] #deviceList.pk-fleet > .pk-fleet-row.pk-fleet-skel .pk-skel-bar { display: block; } /* ---- Модал детали аренды в фирменном стиле ParkOS (#rentalDetailsMiniModal) ---- */ html[data-theme="parkos"] .pkrm { background: var(--pk-surface) !important; border: 1px solid var(--pk-line) !important; border-radius: 18px !important; box-shadow: 0 30px 80px rgba(14, 21, 37, 0.30) !important; font-family: var(--pk-font) !important; padding: 24px 22px 20px !important; } html[data-theme="parkos"] .pkrm-title { font-family: var(--pk-display) !important; font-weight: 800 !important; font-size: 18px !important; color: var(--pk-ink) !important; letter-spacing: -0.01em; } html[data-theme="parkos"] .pkrm-sec { font-family: var(--pk-display) !important; font-weight: 800 !important; color: var(--pk-ink) !important; } html[data-theme="parkos"] .pkrm input, html[data-theme="parkos"] .pkrm select, html[data-theme="parkos"] .pkrm textarea { border: 1px solid var(--pk-line) !important; border-radius: 10px !important; background: var(--pk-surface-2) !important; color: var(--pk-ink) !important; font-family: var(--pk-font) !important; } html[data-theme="parkos"] .pkrm button { border-radius: 11px !important; font-family: var(--pk-font) !important; } html[data-theme="parkos"] .pkrm-primary { background: var(--pk-primary) !important; color: #fff !important; border: none !important; font-weight: 800 !important; box-shadow: 0 8px 20px rgba(124, 92, 255, 0.30) !important; } html[data-theme="parkos"] .pkrm-secondary { background: var(--pk-surface-2) !important; color: var(--pk-ink) !important; border: 1px solid var(--pk-line) !important; font-weight: 700 !important; } html[data-theme="parkos"] .pkrm-ghost { background: var(--pk-surface-2) !important; color: var(--pk-slate) !important; border: 1px solid var(--pk-line) !important; font-weight: 700 !important; } html[data-theme="parkos"] .pkrm-danger { background: #EF4444 !important; color: #fff !important; border: none !important; font-weight: 800 !important; } /* Кликабельные ссылки в модале (клиент / велосипед) */ html[data-theme="parkos"] .pkrm-link { background: none; border: none; padding: 0; font: inherit; font-weight: 700; color: var(--pk-primary); cursor: pointer; text-align: left; } html[data-theme="parkos"] .pkrm-link:hover { text-decoration: underline; } html[data-theme="parkos"] .pkrm-devcode { color: var(--pk-cyan); font-weight: 700; } /* Карточки клиента/устройства, открытые ИЗ модала аренды, — поверх него (модал деталей аренды #rentalDetailsMiniModal имеет z-index:9100). */ html[data-theme="parkos"] #clientCardModal, html[data-theme="parkos"] #deviceCardModal, html[data-theme="parkos"] #extendRentalModal, html[data-theme="parkos"] #replaceDeviceModal, html[data-theme="parkos"] #pkBreakdownModal { z-index: 9300 !important; } /* ---- Модал «Продление аренды» (#extendRentalModal) в стиле ParkOS + затемнённый фон ---- */ html[data-theme="parkos"] #extendRentalModal { background: var(--pk-surface) !important; border: 1px solid var(--pk-line) !important; border-radius: 18px !important; overflow: hidden; font-family: var(--pk-font) !important; /* затемнённый фон за модалом без отдельного оверлея (тень-«подложка» на весь экран) */ box-shadow: 0 0 0 100vmax rgba(15, 23, 37, 0.55) !important; } html[data-theme="parkos"] #extendRentalModal .device-card__header { background: var(--pk-surface-2) !important; border-bottom: 1px solid var(--pk-line) !important; color: var(--pk-ink) !important; } html[data-theme="parkos"] #extendRentalModal .device-card__title { font-family: var(--pk-display) !important; font-weight: 800 !important; color: var(--pk-ink) !important; } html[data-theme="parkos"] #extendRentalModal .device-card__category, html[data-theme="parkos"] #extendRentalModal .device-card__meta { color: var(--pk-muted) !important; } html[data-theme="parkos"] #extendRentalModal .device-card__close-btn { background: var(--pk-surface) !important; border: 1px solid var(--pk-line) !important; color: var(--pk-muted) !important; border-radius: 10px !important; } html[data-theme="parkos"] #extendRentalModal .form-input { border: 1px solid var(--pk-line) !important; border-radius: 10px !important; background: var(--pk-surface-2) !important; color: var(--pk-ink) !important; font-family: var(--pk-font) !important; } html[data-theme="parkos"] #extendRentalModal #extendRentalSaveBtn { background: var(--pk-primary) !important; color: #fff !important; border: none !important; border-radius: 11px !important; font-weight: 800 !important; box-shadow: 0 8px 20px rgba(124, 92, 255, 0.30) !important; } html[data-theme="parkos"] #extendRentalModal #extendRentalCancelBtn { background: var(--pk-surface-2) !important; color: var(--pk-ink) !important; border: 1px solid var(--pk-line) !important; border-radius: 11px !important; } /* ---- Модалы «Замена устройства» (#replaceDeviceModal) и «Описание поломки» (#pkBreakdownModal — брендовая замена native prompt) в стиле ParkOS. Затемнённый фон даём тенью-«подложкой» на весь экран (box-shadow 100vmax), как у модала продления — оверлей #modalBackdrop под Паркосом не виден. ---- */ html[data-theme="parkos"] #replaceDeviceModal, html[data-theme="parkos"] #pkBreakdownModal { background: var(--pk-surface) !important; border: 1px solid var(--pk-line) !important; border-radius: 18px !important; overflow: hidden; font-family: var(--pk-font) !important; box-shadow: 0 0 0 100vmax rgba(15, 23, 37, 0.55), 0 30px 80px rgba(14, 21, 37, 0.30) !important; } html[data-theme="parkos"] #replaceDeviceModal .device-card__header, html[data-theme="parkos"] #pkBreakdownModal .device-card__header { background: var(--pk-surface-2) !important; border-bottom: 1px solid var(--pk-line) !important; color: var(--pk-ink) !important; } html[data-theme="parkos"] #replaceDeviceModal .device-card__title, html[data-theme="parkos"] #pkBreakdownModal .device-card__title { font-family: var(--pk-display) !important; font-weight: 800 !important; color: var(--pk-ink) !important; } html[data-theme="parkos"] #replaceDeviceModal .device-card__meta, html[data-theme="parkos"] #pkBreakdownModal .device-card__meta { color: var(--pk-muted) !important; } html[data-theme="parkos"] #replaceDeviceModal .device-card__category, html[data-theme="parkos"] #pkBreakdownModal .device-card__category { background: rgba(124, 92, 255, 0.10) !important; color: var(--pk-primary) !important; font-weight: 700 !important; } html[data-theme="parkos"] #replaceDeviceModal .device-card__close-btn, html[data-theme="parkos"] #pkBreakdownModal .device-card__close-btn { background: var(--pk-surface) !important; border: 1px solid var(--pk-line) !important; color: var(--pk-muted) !important; border-radius: 10px !important; } html[data-theme="parkos"] #replaceDeviceModal .device-card__close-btn:hover, html[data-theme="parkos"] #pkBreakdownModal .device-card__close-btn:hover { background: var(--pk-surface-2) !important; color: var(--pk-ink) !important; } /* подписи полей */ html[data-theme="parkos"] #replaceDeviceModal label, html[data-theme="parkos"] #pkBreakdownModal label { color: var(--pk-ink) !important; } /* поля ввода (select / input / textarea) */ html[data-theme="parkos"] #replaceDeviceModal .form-input, html[data-theme="parkos"] #replaceDeviceModal select, html[data-theme="parkos"] #replaceDeviceModal input, html[data-theme="parkos"] #replaceDeviceModal textarea, html[data-theme="parkos"] #pkBreakdownModal .form-input, html[data-theme="parkos"] #pkBreakdownModal textarea { border: 1px solid var(--pk-line) !important; border-radius: 10px !important; background: var(--pk-surface-2) !important; color: var(--pk-ink) !important; font-family: var(--pk-font) !important; } html[data-theme="parkos"] #replaceDeviceModal .form-input:focus, html[data-theme="parkos"] #replaceDeviceModal select:focus, html[data-theme="parkos"] #replaceDeviceModal input:focus, html[data-theme="parkos"] #replaceDeviceModal textarea:focus, html[data-theme="parkos"] #pkBreakdownModal .form-input:focus, html[data-theme="parkos"] #pkBreakdownModal textarea:focus { outline: none !important; border-color: var(--pk-primary) !important; box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.15) !important; } /* основная кнопка действия */ html[data-theme="parkos"] #replaceDeviceModal #replaceDeviceSaveBtn, html[data-theme="parkos"] #pkBreakdownModal #pkBreakdownSaveBtn { background: var(--pk-primary) !important; color: #fff !important; border: none !important; border-radius: 11px !important; font-weight: 800 !important; box-shadow: 0 8px 20px rgba(124, 92, 255, 0.30) !important; } /* вторичная кнопка (отмена) */ html[data-theme="parkos"] #replaceDeviceModal #replaceDeviceCancelBtn, html[data-theme="parkos"] #pkBreakdownModal #pkBreakdownCancelBtn { background: var(--pk-surface-2) !important; color: var(--pk-ink) !important; border: 1px solid var(--pk-line) !important; border-radius: 11px !important; font-weight: 700 !important; } /* ---- Модал «Завершение аренды и акт» (#rentalCloseActModal): поверх деталей + затемнение ---- Бокс оформляется классом .pkrm (фон/поля/кнопки), здесь — слой и тень-«подложка». */ html[data-theme="parkos"] #rentalCloseActModal.pkrm { z-index: 9300 !important; box-shadow: 0 0 0 100vmax rgba(15, 23, 37, 0.55) !important; /* компактнее, примерно как модал продления */ width: min(460px, calc(100vw - 24px)) !important; padding: 16px 18px 16px !important; /* база .app-modal задаёт height: min(92dvh, 980px) → бокс тянется ниже кнопок; делаем высоту по контенту (до кнопок), при нехватке экрана — внутренний скролл */ height: auto !important; max-height: calc(100dvh - 24px) !important; overflow-y: auto !important; } html[data-theme="parkos"] #rentalCloseActModal.pkrm label { color: var(--pk-ink) !important; } /* уплотняем вертикальные отступы между блоками/полями */ html[data-theme="parkos"] #rentalCloseActModal.pkrm > label, html[data-theme="parkos"] #rentalCloseActModal.pkrm > div { margin-top: 9px !important; } html[data-theme="parkos"] #rentalCloseActModal.pkrm textarea, html[data-theme="parkos"] #rentalCloseActModal.pkrm input, html[data-theme="parkos"] #rentalCloseActModal.pkrm select { padding: 8px 10px !important; margin-top: 4px !important; } /* Крестик закрытия (верх-право) */ html[data-theme="parkos"] #rentalCloseActModal.pkrm .pkrm-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 10px !important; border: 1px solid var(--pk-line) !important; background: var(--pk-surface-2) !important; color: var(--pk-slate) !important; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; } html[data-theme="parkos"] #rentalCloseActModal.pkrm .pkrm-close:hover { background: var(--pk-grad-soft) !important; color: var(--pk-primary-strong) !important; border-color: rgba(124, 92, 255, 0.30) !important; } /* Подзаголовок / сводка дат / подсказка статуса */ html[data-theme="parkos"] #rentalCloseActModal.pkrm .pkrm-sub { color: var(--pk-muted) !important; } html[data-theme="parkos"] #rentalCloseActModal.pkrm .pkrm-summary { background: var(--pk-surface-2) !important; color: var(--pk-slate) !important; border: 1px solid var(--pk-line) !important; border-radius: 12px !important; } html[data-theme="parkos"] #rentalCloseActModal.pkrm .pkrm-summary b { color: var(--pk-ink) !important; } html[data-theme="parkos"] #rentalCloseActModal.pkrm .pkrm-hint { color: var(--pk-muted) !important; } /* ========================================================================= «Показать на карте» — кнопка в деталях аренды, подсветка маркера, свёрнутая карточка ========================================================================= */ /* Кнопка в модале аренды */ html[data-theme="parkos"] .pkrm .pkrm-mapbtn { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 16px; padding: 10px 16px; border-radius: 12px !important; border: 1px solid rgba(124, 92, 255, 0.35) !important; background: rgba(124, 92, 255, 0.08) !important; color: var(--pk-primary-strong) !important; font-weight: 800 !important; font-size: 14px; cursor: pointer; } html[data-theme="parkos"] .pkrm .pkrm-mapbtn:hover { background: rgba(124, 92, 255, 0.14) !important; border-color: var(--pk-primary) !important; } html[data-theme="parkos"] .pkrm .pkrm-mapbtn svg { flex: 0 0 auto; } /* Подсветка маркера велика выбранной аренды — фирменный фиолет, пульсирующее кольцо */ html[data-theme="parkos"] .pk-bikepin.pk-bikepin--pinned { background: var(--pk-primary) !important; color: #fff !important; border-color: #fff !important; box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.45), 0 8px 22px rgba(124, 92, 255, 0.50) !important; animation: pk-pin-pulse 1.4s ease-out infinite; } @keyframes pk-pin-pulse { 0% { box-shadow: 0 0 0 0 rgba(124, 92, 255, 0.55), 0 8px 22px rgba(124, 92, 255, 0.45); } 60% { box-shadow: 0 0 0 13px rgba(124, 92, 255, 0), 0 8px 22px rgba(124, 92, 255, 0.45); } 100% { box-shadow: 0 0 0 0 rgba(124, 92, 255, 0), 0 8px 22px rgba(124, 92, 255, 0.45); } } /* Свёрнутая карточка деталей аренды — плавает в углу карты, разворачивается обратно */ html[data-theme="parkos"] .pk-rentcollapsed { position: fixed; z-index: 9200; display: flex; align-items: stretch; gap: 8px; width: 280px; max-width: calc(100vw - 32px); padding: 12px; background: var(--pk-surface); border: 1px solid var(--pk-line); border-left: 4px solid var(--pk-primary); border-radius: 14px; box-shadow: var(--pk-shadow); font-family: var(--pk-font); /* дефолт — правый верх (не-карта / узкие экраны) */ top: 78px; right: 16px; } html[data-theme="parkos"] .pk-rentcollapsed__main { flex: 1 1 auto; min-width: 0; background: none; border: none; padding: 0; margin: 0; text-align: left; cursor: pointer; font-family: inherit; } html[data-theme="parkos"] .pk-rentcollapsed__title { font-family: var(--pk-display); font-weight: 800; font-size: 14px; color: var(--pk-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-theme="parkos"] .pk-rentcollapsed__sub { margin-top: 2px; font-weight: 700; font-size: 12px; color: var(--pk-primary-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-theme="parkos"] .pk-rentcollapsed__sub2 { margin-top: 1px; font-size: 12px; color: var(--pk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-theme="parkos"] .pk-rentcollapsed__btns { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; } html[data-theme="parkos"] .pk-rentcollapsed__expand, html[data-theme="parkos"] .pk-rentcollapsed__close { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border-radius: 8px; border: 1px solid var(--pk-line); background: var(--pk-surface-2); color: var(--pk-slate); cursor: pointer; font-size: 18px; line-height: 1; } html[data-theme="parkos"] .pk-rentcollapsed__expand { color: var(--pk-primary); } html[data-theme="parkos"] .pk-rentcollapsed__expand:hover, html[data-theme="parkos"] .pk-rentcollapsed__close:hover { background: var(--pk-line); } /* В режиме карты кабинета сети — правый верхний угол карты, под шапкой «Карта парка» */ @media (min-width: 1180px) { html[data-theme="parkos"] body.desktop-map-mode .pk-rentcollapsed { top: 236px; right: calc(var(--pk-rail-w) + 44px); left: auto; } } /* ========================================================================= КАРТОЧКА КЛИЕНТА (#clientCardModal) — фирменная переверстка ParkOS Слайд-овер: брендовая шапка, блоки-карточки на светлом фоне, аккуратные строки «Канал связи» / действий (без наезжания), карточки аренд. Хуки-классы из parkos.js: .pk-cc, .pk-cc__top, .pk-cc__channel, .pk-cc__actions, .pk-cc__tginfo, .pk-cc__bind. ========================================================================= */ html[data-theme="parkos"] #clientCardModal { font-family: var(--pk-font); } html[data-theme="parkos"] #clientCardModal .device-card-modal, html[data-theme="parkos"] #clientCardModal .device-card-modal__body { background: var(--pk-bg) !important; } /* ---- Шапка (фирменный тёмный градиент, как сайдбар) ---- */ html[data-theme="parkos"] #clientCardModal .device-card__header { background: linear-gradient(135deg, var(--pk-side) 0%, var(--pk-side-2) 100%) !important; border-bottom: 1px solid var(--pk-side-line) !important; padding: 20px 22px 18px !important; } /* ЧС: красная шапка карточки клиента — перебиваем surface-фон парко-темы (селектор с #clientCardModal + двумя классами, чтобы точно победить по специфичности) */ html[data-theme="parkos"] #clientCardModal .device-card__header.device-card__header--blacklisted { background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%) !important; border-bottom: 1px solid #7f1d1d !important; } html[data-theme="parkos"] #clientCardModal .device-card__title { font-family: var(--pk-display) !important; font-weight: 800 !important; font-size: 19px !important; letter-spacing: -0.01em; color: #fff !important; } html[data-theme="parkos"] #clientCardModal .device-card__meta { margin-top: 9px !important; gap: 7px !important; } html[data-theme="parkos"] #clientCardModal .device-card__code { background: rgba(124, 92, 255, 0.30) !important; color: #d8ccff !important; font-weight: 700 !important; border-radius: 999px !important; } html[data-theme="parkos"] #clientCardModal .device-card__category { background: rgba(255, 255, 255, 0.10) !important; color: rgba(255, 255, 255, 0.78) !important; border-radius: 999px !important; } html[data-theme="parkos"] #clientCardModal .device-card__status { border-radius: 999px !important; font-weight: 700 !important; } html[data-theme="parkos"] #clientCardModal .device-card__close-btn { background: rgba(255, 255, 255, 0.12) !important; border-radius: 10px !important; font-size: 15px !important; } html[data-theme="parkos"] #clientCardModal .device-card__close-btn:hover { background: rgba(255, 255, 255, 0.22) !important; } /* ---- Блоки → отдельные карточки на светлом фоне ---- */ html[data-theme="parkos"] #clientCardModal .device-card__block { background: var(--pk-surface) !important; border: 1px solid var(--pk-line) !important; border-radius: 16px !important; margin: 14px 14px 0 !important; padding: 16px !important; box-shadow: 0 10px 26px rgba(14, 21, 37, 0.05) !important; } html[data-theme="parkos"] #clientCardModal .device-card__block:last-child { margin-bottom: 16px !important; } html[data-theme="parkos"] #clientCardModal .device-card__block-title { font-family: var(--pk-display) !important; font-weight: 800 !important; font-size: 14px !important; color: var(--pk-ink) !important; letter-spacing: -0.005em; } /* ---- Инфо-строка телеграма ---- */ html[data-theme="parkos"] #clientCardModal .pk-cc__tginfo { color: var(--pk-muted) !important; font-size: 12.5px !important; } /* ---- «Канал связи» — фикс наезжания: чистый wrap-ряд, метки не переносятся ---- */ html[data-theme="parkos"] #clientCardModal .pk-cc__channel { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; padding: 10px 12px !important; margin-bottom: 12px !important; background: var(--pk-surface-2) !important; border: 1px solid var(--pk-line) !important; border-radius: 12px !important; } html[data-theme="parkos"] #clientCardModal .pk-cc__channel > span:first-child { font-weight: 700 !important; color: var(--pk-slate) !important; font-size: 12.5px !important; } html[data-theme="parkos"] #clientCardModal .pk-cc__channel label { white-space: nowrap !important; flex: 0 0 auto !important; gap: 5px !important; font-size: 12.5px !important; color: var(--pk-ink) !important; } html[data-theme="parkos"] #clientCardModal .pk-cc__channel input[type="radio"] { accent-color: var(--pk-primary); width: 15px; height: 15px; margin: 0; flex: 0 0 auto; } html[data-theme="parkos"] #clientCardModal .pk-cc__channel button { margin-left: auto !important; background: var(--pk-primary) !important; color: #fff !important; border: none !important; border-radius: 9px !important; font-weight: 700 !important; padding: 6px 14px !important; font-size: 12px !important; cursor: pointer; } /* ---- Ряд кнопок действий (Удалить клиента / Напоминание / Чат / Max / Данные) ---- */ html[data-theme="parkos"] #clientCardModal .pk-cc__actions { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; } /* ---- Общая тематизация кнопок и полей внутри карточки ---- */ html[data-theme="parkos"] #clientCardModal .fleet-btn { border-radius: 10px !important; font-family: var(--pk-font) !important; } html[data-theme="parkos"] #clientCardModal .fleet-btn--primary { background: var(--pk-primary) !important; color: #fff !important; box-shadow: 0 6px 16px rgba(124, 92, 255, 0.25) !important; } html[data-theme="parkos"] #clientCardModal .fleet-btn--primary:hover:not(:disabled) { background: var(--pk-primary-strong) !important; } html[data-theme="parkos"] #clientCardModal .fleet-btn--secondary { background: var(--pk-surface-2) !important; color: var(--pk-ink) !important; border: 1px solid var(--pk-line) !important; } html[data-theme="parkos"] #clientCardModal .fleet-btn--secondary:hover:not(:disabled) { background: var(--pk-line) !important; } html[data-theme="parkos"] #clientCardModal textarea { border-radius: 10px !important; font-family: var(--pk-font) !important; } /* ---- Блок «Аренды»: бокс привязки устройства ---- */ html[data-theme="parkos"] #clientCardModal .pk-cc__bind select, html[data-theme="parkos"] #clientCardModal .pk-cc__bind .form-input { border: 1px solid var(--pk-line) !important; border-radius: 10px !important; background: var(--pk-surface-2) !important; color: var(--pk-ink) !important; font-family: var(--pk-font) !important; padding: 9px 11px !important; } /* ---- Карточки аренд (внутри блока «Аренды») ---- */ html[data-theme="parkos"] #clientCardModal .client-rental-card { border-radius: 14px !important; font-family: var(--pk-font) !important; } html[data-theme="parkos"] #clientCardModal .client-rental-card-active { border: 1px solid rgba(34, 197, 94, 0.30) !important; border-left: 4px solid #22C55E !important; background: linear-gradient(160deg, rgba(220, 252, 231, 0.6), var(--pk-surface)) !important; box-shadow: 0 8px 20px rgba(34, 197, 94, 0.08) !important; } html[data-theme="parkos"] #clientCardModal .client-rental-card-completed { border: 1px solid var(--pk-line) !important; border-left: 4px solid var(--pk-muted) !important; background: var(--pk-surface-2) !important; } html[data-theme="parkos"] #clientCardModal .client-rental-card__device-name { font-family: var(--pk-display) !important; font-weight: 800 !important; color: var(--pk-ink) !important; } html[data-theme="parkos"] #clientCardModal .client-rental-card__status-badge { border-radius: 999px !important; } /* ---- История аренд: заголовок ---- */ html[data-theme="parkos"] #clientCardModal .client-card-completed { border-top-color: var(--pk-line) !important; } html[data-theme="parkos"] #clientCardModal .client-card-completed-title, html[data-theme="parkos"] #clientCardModal .device-card__block .client-card-completed .device-card__block-title { font-family: var(--pk-display) !important; font-weight: 800 !important; color: var(--pk-ink) !important; } /* ---- Мобильная версия ---- */ @media (max-width: 560px) { html[data-theme="parkos"] #clientCardModal .device-card__header { padding: 16px 16px 14px !important; } html[data-theme="parkos"] #clientCardModal .device-card__title { font-size: 18px !important; } html[data-theme="parkos"] #clientCardModal .device-card__block { margin: 10px 10px 0 !important; padding: 14px 13px !important; } html[data-theme="parkos"] #clientCardModal .device-card__block:last-child { margin-bottom: 12px !important; } html[data-theme="parkos"] #clientCardModal .pk-cc__channel button { margin-left: 0 !important; } } /* ========================================================================= Модал сканера QR (#deviceQrScannerModal.pk-qr) — фирменная переверстка Паркос. Хуки (угловые скобки, лупа в поиске, разделитель «или») ставит parkos.js; все ID/элементы сохранены — обработчики app.js не ломаются. Только Паркос. ========================================================================= */ html[data-theme="parkos"] #deviceQrScannerModal { border-radius: 24px !important; overflow: hidden; } /* Шапка: плитка-иконка фирменным градиентом */ html[data-theme="parkos"] #deviceQrScannerModal .qrs-header { padding: 18px 20px 16px; border-bottom: 1px solid var(--pk-line); background: linear-gradient(180deg, rgba(124, 92, 255, 0.06), rgba(124, 92, 255, 0)); } html[data-theme="parkos"] #deviceQrScannerModal .qrs-header__icon { background: var(--pk-grad) !important; color: #fff !important; border-radius: 14px; box-shadow: 0 10px 24px rgba(124, 92, 255, 0.30) !important; } html[data-theme="parkos"] #deviceQrScannerModal .qrs-header__title { font-family: var(--pk-display); letter-spacing: -0.3px; color: var(--pk-ink) !important; } html[data-theme="parkos"] #deviceQrScannerModal .qrs-header__subtitle { color: var(--pk-muted) !important; } html[data-theme="parkos"] #deviceQrScannerModal .qrs-close-btn { border-radius: 12px !important; border: 1px solid var(--pk-line) !important; background: var(--pk-surface-2) !important; color: var(--pk-slate) !important; } html[data-theme="parkos"] #deviceQrScannerModal .qrs-close-btn:hover { background: var(--pk-grad-soft) !important; color: var(--pk-primary-strong) !important; } /* Нейтральный статус-чип — мягкий фирменный тон (ошибка/успех остаются красным/зелёным) */ html[data-theme="parkos"] #deviceQrScannerModal .device-qr-scanner-status:not(.is-error):not(.is-success) { border-radius: 14px; background: var(--pk-grad-soft); color: var(--pk-ink); border: 1px solid rgba(124, 92, 255, 0.18); } /* Превью камеры — тёмная «пультовая» панель с cyan-свечением */ html[data-theme="parkos"] #deviceQrScannerModal .device-qr-scanner-preview { border-radius: 22px; border: 1px solid var(--pk-side-line); background: radial-gradient(120% 80% at 50% 0%, rgba(34, 211, 238, 0.22), transparent 55%), linear-gradient(180deg, var(--pk-side), var(--pk-ink)); } html[data-theme="parkos"] #deviceQrScannerModal .device-qr-scanner-preview::before { background: linear-gradient(180deg, rgba(34, 211, 238, 0), rgba(34, 211, 238, 0.42), rgba(34, 211, 238, 0)); } /* Рамка: убираем сплошную жёлтую границу — остаются угловые скобки + тёмный «маск»-бордюр */ html[data-theme="parkos"] #deviceQrScannerModal .device-qr-scanner-frame { border-color: transparent !important; border-radius: 18px; box-shadow: 0 0 0 999px rgba(8, 12, 24, 0.46) !important; } html[data-theme="parkos"] .pk-qr-corner { position: absolute; width: 26px; height: 26px; border: 3px solid var(--pk-cyan); pointer-events: none; } html[data-theme="parkos"] .pk-qr-corner--tl { top: -2px; left: -2px; border-right: 0; border-bottom: 0; border-top-left-radius: 12px; } html[data-theme="parkos"] .pk-qr-corner--tr { top: -2px; right: -2px; border-left: 0; border-bottom: 0; border-top-right-radius: 12px; } html[data-theme="parkos"] .pk-qr-corner--bl { bottom: -2px; left: -2px; border-right: 0; border-top: 0; border-bottom-left-radius: 12px; } html[data-theme="parkos"] .pk-qr-corner--br { bottom: -2px; right: -2px; border-left: 0; border-top: 0; border-bottom-right-radius: 12px; } /* Загрузочный чип в фирменных цветах */ html[data-theme="parkos"] #deviceQrScannerModal .device-qr-scanner-loading-chip { background: rgba(14, 21, 37, 0.86); color: #fff; } html[data-theme="parkos"] #deviceQrScannerModal .device-qr-scanner-loading-spinner { border-top-color: var(--pk-cyan); } /* «Запустить камеру» — фирменный градиент во всю ширину */ html[data-theme="parkos"] #deviceQrScannerModal .device-qr-scanner-actions { justify-content: stretch; } html[data-theme="parkos"] #deviceQrScannerModal .qrs-start-btn { width: 100%; background: var(--pk-grad) !important; color: #fff !important; border-radius: 14px !important; box-shadow: 0 12px 26px rgba(124, 92, 255, 0.30) !important; } /* Камера включена — та же кнопка в роли «Выключить камеру» (нейтральный вид) */ html[data-theme="parkos"] #deviceQrScannerModal .qrs-start-btn.is-camera-on { background: var(--pk-surface-2) !important; color: var(--pk-ink) !important; border: 1px solid var(--pk-line) !important; box-shadow: none !important; } /* Разделитель «или найдите вручную» */ html[data-theme="parkos"] .pk-qr-divider { display: flex; align-items: center; gap: 12px; color: var(--pk-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } html[data-theme="parkos"] .pk-qr-divider::before, html[data-theme="parkos"] .pk-qr-divider::after { content: ''; flex: 1; height: 1px; background: var(--pk-line); } /* Поле поиска: пилюля с лупой */ html[data-theme="parkos"] #deviceQrScannerModal .device-qr-scanner-form label { color: var(--pk-slate); font-weight: 700; } html[data-theme="parkos"] .pk-qr-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 14px; border: 1px solid var(--pk-line); background: var(--pk-surface-2); } html[data-theme="parkos"] .pk-qr-search:focus-within { border-color: var(--pk-primary); box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.16); } html[data-theme="parkos"] .pk-qr-search > svg { color: var(--pk-muted); flex-shrink: 0; } html[data-theme="parkos"] .pk-qr-search input { flex: 1 1 auto; min-width: 0; width: auto !important; border: none !important; background: transparent !important; padding: 12px 0 !important; box-shadow: none !important; } /* «Открыть устройство» — фирменный фиолет */ html[data-theme="parkos"] #deviceQrScannerModal .qrs-submit-btn { background: var(--pk-primary) !important; color: #fff !important; border-radius: 14px !important; box-shadow: 0 12px 26px rgba(124, 92, 255, 0.28) !important; } /* Список совпадений — фирменные карточки (псевдоним + системный код + ID) */ html[data-theme="parkos"] #deviceQrScannerModal .device-qr-scanner-matches { border-radius: 16px; border: 1px solid var(--pk-line); background: var(--pk-surface-2); } html[data-theme="parkos"] #deviceQrScannerModal .device-qr-scanner-match-item { border-radius: 12px; border: 1px solid var(--pk-line); background: var(--pk-surface); color: var(--pk-ink); } html[data-theme="parkos"] #deviceQrScannerModal .device-qr-scanner-match-item:hover { border-color: var(--pk-primary); box-shadow: 0 10px 22px rgba(124, 92, 255, 0.16); } html[data-theme="parkos"] #deviceQrScannerModal .device-qr-scanner-match-title { color: var(--pk-ink); } html[data-theme="parkos"] #deviceQrScannerModal .device-qr-scanner-match-meta { color: var(--pk-muted); } /* ============================================================================ МОДАЛ «НОВАЯ АРЕНДА» (#rentalsModal с .rental-create-form) — фирменный ParkOS База: .app-modal = кремовый градиент + внутренняя кремовая карточка (#rentalsList > div). Переверстываем в одну белую «пультовую» поверхность: тёмный фон-«подложка» (box-shadow 100vmax, штатный #modalBackdrop под Паркосом не виден), display-заголовок, поля surface-2, фиолет-cyan градиент на главном действии, деньги в моноширинном с tabular-nums. Скоуп по :has(.rental-create-form), чтобы не задеть обычный список аренд в этом же #rentalsModal. ============================================================================ */ /* — Бокс модала: белая поверхность + затемнённый фон без отдельного оверлея — */ html[data-theme="parkos"] #rentalsModal:has(.rental-create-form) { background: var(--pk-surface) !important; border: 1px solid var(--pk-line) !important; border-radius: 22px !important; font-family: var(--pk-font) !important; box-shadow: 0 0 0 100vmax rgba(15, 23, 37, 0.55), 0 34px 90px rgba(14, 21, 37, 0.34) !important; } /* — Скролл-тело: белый фон, равномерные отступы — */ html[data-theme="parkos"] #rentalsModal:has(.rental-create-form) #rentalsList { background: var(--pk-surface) !important; padding: 20px 22px 22px !important; } /* — Сама форма: убираем вложенную кремовую карточку (#rentalsList > div) — */ html[data-theme="parkos"] #rentalsModal:has(.rental-create-form) #rentalsList > .rental-create-form { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; overflow: visible !important; } /* — Шапка: иконка-бренд (фиолет→cyan), display-заголовок, разделитель. Закреплена сверху (sticky): тело формы скроллится под ней, шапка не уезжает. Фон = --pk-surface (как у тела) — контент уходит под шапку без просвечивания; z-index держит её над полями. Скролл-контейнер — #rentalsList, форма overflow:visible. */ html[data-theme="parkos"] #rentalsModal:has(.rental-create-form) #rentalsList { padding-top: 0 !important; } html[data-theme="parkos"] .rental-create-form .rental-create-header { position: sticky; top: 0; z-index: 6; background: var(--pk-surface) !important; padding: 20px 0 14px !important; border-bottom: 1px solid var(--pk-line) !important; } html[data-theme="parkos"] .rental-create-form .rental-create-header__icon { background: var(--pk-grad) !important; border-radius: 13px !important; box-shadow: 0 10px 24px rgba(124, 92, 255, 0.34) !important; } html[data-theme="parkos"] .rental-create-form .rental-create-header__title { font-family: var(--pk-display) !important; font-weight: 800 !important; letter-spacing: -0.01em; color: var(--pk-ink) !important; } html[data-theme="parkos"] .rental-create-form .rental-create-header__sub { color: var(--pk-muted) !important; } /* крестик закрытия */ html[data-theme="parkos"] .rental-create-form #rentalFormHeaderCloseBtn { color: var(--pk-muted) !important; border-radius: 10px !important; } html[data-theme="parkos"] .rental-create-form #rentalFormHeaderCloseBtn:hover { color: var(--pk-ink) !important; background: var(--pk-surface-2) !important; } /* — Блок клиент/устройство/филиал: чистая карточка-секция — */ html[data-theme="parkos"] .rental-create-form .rental-create-meta { background: var(--pk-surface-2) !important; border: 1px solid var(--pk-line) !important; border-radius: 16px !important; } /* — Подписи полей: приглушённые, капсом — */ html[data-theme="parkos"] .rental-create-form .rental-create-field-label { color: var(--pk-muted) !important; font-weight: 700 !important; letter-spacing: 0.5px; } /* — Поля ввода (select / input / textarea) — */ html[data-theme="parkos"] .rental-create-form select, html[data-theme="parkos"] .rental-create-form input[type="text"], html[data-theme="parkos"] .rental-create-form input[type="number"], html[data-theme="parkos"] .rental-create-form input[type="datetime-local"], html[data-theme="parkos"] .rental-create-form textarea { background: var(--pk-surface) !important; border: 1px solid var(--pk-line) !important; border-radius: 11px !important; color: var(--pk-ink) !important; font-family: var(--pk-font) !important; } html[data-theme="parkos"] .rental-create-form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A93A8' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; } html[data-theme="parkos"] .rental-create-form select:focus, html[data-theme="parkos"] .rental-create-form input[type="text"]:focus, html[data-theme="parkos"] .rental-create-form input[type="number"]:focus, html[data-theme="parkos"] .rental-create-form input[type="datetime-local"]:focus, html[data-theme="parkos"] .rental-create-form textarea:focus { border-color: var(--pk-primary) !important; box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.16) !important; } html[data-theme="parkos"] .rental-create-form input:disabled, html[data-theme="parkos"] .rental-create-form select:disabled { background: var(--pk-surface-2) !important; color: var(--pk-muted) !important; border-color: var(--pk-line) !important; } html[data-theme="parkos"] .rental-create-form input::placeholder, html[data-theme="parkos"] .rental-create-form textarea::placeholder { color: var(--pk-muted) !important; } /* — Итоговая сумма как «результат»: моноширинный, tabular-nums, фиолет-акцент. Тип-селектор `input` нужен, чтобы перебить более специфичные базовые `input[type="number"]` и `input:disabled`. — */ html[data-theme="parkos"] .rental-create-form input.rental-amount-input { font-family: var(--pk-mono) !important; font-size: 16px !important; font-weight: 800 !important; font-variant-numeric: tabular-nums !important; letter-spacing: 0.2px; } html[data-theme="parkos"] .rental-create-form input.rental-amount-input--disabled { background: rgba(124, 92, 255, 0.08) !important; border-color: rgba(124, 92, 255, 0.28) !important; color: var(--pk-ink) !important; cursor: default; } html[data-theme="parkos"] .rental-create-form input.rental-amount-input--active { background: var(--pk-surface) !important; color: var(--pk-ink) !important; } /* — Подсказки/служебный текст (VIN, договор, сводка цены) — */ html[data-theme="parkos"] .rental-create-form > div:not([class]) { color: var(--pk-muted) !important; } /* — Кнопки поиска/вторичные (Найти, Создать клиента) — */ html[data-theme="parkos"] .rental-create-form .rental-search-btn, html[data-theme="parkos"] .rental-create-form .rental-secondary-btn { background: var(--pk-surface) !important; color: var(--pk-ink) !important; border: 1px solid var(--pk-line) !important; border-radius: 11px !important; font-weight: 700 !important; } html[data-theme="parkos"] .rental-create-form .rental-search-btn:hover:not(:disabled), html[data-theme="parkos"] .rental-create-form .rental-secondary-btn:hover:not(:disabled) { background: var(--pk-surface-2) !important; border-color: var(--pk-primary) !important; } /* — Кнопки действий — */ /* главное действие «Начать аренду» — бренд-градиент */ html[data-theme="parkos"] .rental-create-form .rental-action-btn--start, html[data-theme="parkos"] .rental-create-form .rental-action-btn--confirm { background: var(--pk-grad) !important; color: #fff !important; border: none !important; border-radius: 12px !important; font-weight: 800 !important; box-shadow: 0 12px 28px rgba(124, 92, 255, 0.30) !important; } /* договор и отмена — вторичные «пультовые» */ html[data-theme="parkos"] .rental-create-form .rental-action-btn--preview { background: var(--pk-surface) !important; color: var(--pk-ink) !important; border: 1px solid var(--pk-line) !important; border-radius: 12px !important; font-weight: 700 !important; box-shadow: none !important; } html[data-theme="parkos"] .rental-create-form .rental-action-btn--cancel { background: var(--pk-surface-2) !important; color: var(--pk-slate) !important; border: 1px solid var(--pk-line) !important; border-radius: 12px !important; font-weight: 700 !important; box-shadow: none !important; } html[data-theme="parkos"] .rental-create-form .rental-action-btn--preview:hover:not(:disabled), html[data-theme="parkos"] .rental-create-form .rental-action-btn--cancel:hover:not(:disabled) { border-color: var(--pk-primary) !important; background: var(--pk-surface-2) !important; } /* — Блок реквизитов перевода — */ html[data-theme="parkos"] .rental-create-form .rental-bank-help { background: var(--pk-surface-2) !important; border: 1px dashed var(--pk-line) !important; border-radius: 12px !important; color: var(--pk-ink) !important; } html[data-theme="parkos"] .rental-create-form .rental-bank-help__title { color: var(--pk-ink) !important; } /* ============================================================================ МОДАЛЫ КЛИЕНТА — фирменный ParkOS #newClientModal («Новый клиент») и #clientDataModal («Данные клиента» — просмотр/редактирование). Оба используют общие классы формы (.modal-form, .form-grid, .modal-fieldset, .new-client-date-input, .modal-actions), поэтому правила собраны вместе через :is(). Карточка #clientCardModal стилизуется выше. ============================================================================ */ /* — Бокс модала: белая поверхность + затемнённый фон-«подложка» — */ html[data-theme="parkos"] #newClientModal, html[data-theme="parkos"] #clientDataModal { background: var(--pk-surface) !important; border: 1px solid var(--pk-line) !important; border-radius: 22px !important; font-family: var(--pk-font) !important; width: min(940px, calc(100vw - 32px)) !important; box-shadow: 0 0 0 100vmax rgba(15, 23, 37, 0.55), 0 34px 90px rgba(14, 21, 37, 0.34) !important; } /* — Шапка #newClientModal (.modal-header — была жёлтым градиентом) — */ html[data-theme="parkos"] #newClientModal .modal-header { background: var(--pk-surface-2) !important; border-bottom: 1px solid var(--pk-line) !important; } html[data-theme="parkos"] #newClientModal .modal-title { font-family: var(--pk-display) !important; font-weight: 800 !important; color: var(--pk-ink) !important; letter-spacing: -0.01em; } html[data-theme="parkos"] #newClientModal .modal-subtitle { color: var(--pk-muted) !important; } /* кнопка «Закрыть» (была тёмно-серой пилюлей) */ html[data-theme="parkos"] #newClientClose { background: var(--pk-surface) !important; color: var(--pk-slate) !important; border: 1px solid var(--pk-line) !important; border-radius: 11px !important; font-weight: 700 !important; } html[data-theme="parkos"] #newClientClose:hover { background: var(--pk-surface-2) !important; color: var(--pk-ink) !important; border-color: var(--pk-primary) !important; } /* — Шапка #clientDataModal (.device-card__header) — */ html[data-theme="parkos"] #clientDataModal .device-card__header { background: var(--pk-surface-2) !important; border-bottom: 1px solid var(--pk-line) !important; } html[data-theme="parkos"] #clientDataModal .device-card__title { font-family: var(--pk-display) !important; font-weight: 800 !important; color: var(--pk-ink) !important; } html[data-theme="parkos"] #clientDataModal .device-card__category, html[data-theme="parkos"] #clientDataModal .device-card__meta { color: var(--pk-muted) !important; } html[data-theme="parkos"] #clientDataModal .device-card__close-btn { background: var(--pk-surface) !important; border: 1px solid var(--pk-line) !important; color: var(--pk-muted) !important; border-radius: 10px !important; } html[data-theme="parkos"] #clientDataModal .device-card__close-btn:hover { background: var(--pk-surface-2) !important; color: var(--pk-ink) !important; } /* — Подписи полей формы — */ html[data-theme="parkos"] :is(#newClientModal, #clientDataModal) .modal-form label { color: var(--pk-ink) !important; font-weight: 600 !important; } /* — Поля ввода (исключая радио/чекбоксы/файлы) — */ html[data-theme="parkos"] :is(#newClientModal, #clientDataModal) input:not([type="radio"]):not([type="checkbox"]):not([type="file"]), html[data-theme="parkos"] :is(#newClientModal, #clientDataModal) select, html[data-theme="parkos"] :is(#newClientModal, #clientDataModal) textarea { background: var(--pk-surface) !important; border: 1px solid var(--pk-line) !important; border-radius: 11px !important; color: var(--pk-ink) !important; font-family: var(--pk-font) !important; font-size: 14px !important; padding: 11px 13px !important; } /* На телефоне/планшете — 16px, иначе iOS зумит страницу при фокусе на поле. Та же специфичность, но правило позже → перебивает 14px только на мобиле. */ @media (max-width: 1179px) { html[data-theme="parkos"] :is(#newClientModal, #clientDataModal) input:not([type="radio"]):not([type="checkbox"]):not([type="file"]), html[data-theme="parkos"] :is(#newClientModal, #clientDataModal) select, html[data-theme="parkos"] :is(#newClientModal, #clientDataModal) textarea { font-size: 16px !important; } } html[data-theme="parkos"] :is(#newClientModal, #clientDataModal) input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):focus, html[data-theme="parkos"] :is(#newClientModal, #clientDataModal) select:focus, html[data-theme="parkos"] :is(#newClientModal, #clientDataModal) textarea:focus { border-color: var(--pk-primary) !important; box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.16) !important; } html[data-theme="parkos"] :is(#newClientModal, #clientDataModal) input::placeholder, html[data-theme="parkos"] :is(#newClientModal, #clientDataModal) textarea::placeholder { color: var(--pk-muted) !important; } /* фирменная стрелка у select */ html[data-theme="parkos"] :is(#newClientModal, #clientDataModal) select { appearance: none !important; -webkit-appearance: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A93A8' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 13px center !important; padding-right: 36px !important; } /* — Секции (паспорт / документы) — */ html[data-theme="parkos"] :is(#newClientModal, #clientDataModal) .modal-fieldset { background: var(--pk-surface-2) !important; border: 1px solid var(--pk-line) !important; border-radius: 16px !important; } html[data-theme="parkos"] :is(#newClientModal, #clientDataModal) .modal-fieldset legend { color: var(--pk-ink) !important; font-weight: 800 !important; font-family: var(--pk-font) !important; } /* — Канал связи: аккуратные пилюли вместо «съехавших» радио. База: глобальный input{width:100%;padding:12px 14px} растягивал радио и ломал ряд. — */ html[data-theme="parkos"] :is(#newClientModal, #clientDataModal) input[type="radio"], html[data-theme="parkos"] :is(#newClientModal, #clientDataModal) input[type="checkbox"] { width: auto !important; min-height: 0 !important; height: auto !important; padding: 0 !important; margin: 0 !important; border: none !important; background: none !important; box-shadow: none !important; appearance: auto; -webkit-appearance: auto; accent-color: var(--pk-primary); flex: 0 0 auto; } html[data-theme="parkos"] #newClientModal .nc-channel-caption { color: var(--pk-muted) !important; font-weight: 600 !important; } html[data-theme="parkos"] #newClientModal .nc-channel-opt { display: inline-flex !important; align-items: center !important; gap: 7px !important; padding: 7px 14px !important; border: 1px solid var(--pk-line) !important; border-radius: 999px !important; background: var(--pk-surface-2) !important; color: var(--pk-slate) !important; font-weight: 600 !important; font-size: 13px !important; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; } html[data-theme="parkos"] #newClientModal .nc-channel-opt:hover { border-color: var(--pk-primary) !important; } html[data-theme="parkos"] #newClientModal .nc-channel-opt:has(input:checked) { background: rgba(124, 92, 255, 0.10) !important; border-color: var(--pk-primary) !important; color: var(--pk-primary) !important; } /* — Поле выбора файлов (было кремово-жёлтым из базового input) — */ html[data-theme="parkos"] :is(#newClientModal, #clientDataModal) input[type="file"] { background: var(--pk-surface) !important; border: 1px solid var(--pk-line) !important; border-radius: 11px !important; color: var(--pk-ink) !important; font-family: var(--pk-font) !important; font-size: 14px !important; padding: 9px 12px !important; } html[data-theme="parkos"] :is(#newClientModal, #clientDataModal) input[type="file"]::file-selector-button { background: var(--pk-surface-2); color: var(--pk-ink); border: 1px solid var(--pk-line); border-radius: 9px; padding: 7px 13px; margin-right: 12px; font-family: var(--pk-font); font-weight: 700; font-size: 13px; cursor: pointer; transition: border-color .15s ease, background .15s ease; } html[data-theme="parkos"] :is(#newClientModal, #clientDataModal) input[type="file"]::file-selector-button:hover { border-color: var(--pk-primary); background: var(--pk-surface); } /* Safari/WebKit (старый префикс) — отдельным правилом, иначе вся группа отбрасывается */ html[data-theme="parkos"] :is(#newClientModal, #clientDataModal) input[type="file"]::-webkit-file-upload-button { background: var(--pk-surface-2); color: var(--pk-ink); border: 1px solid var(--pk-line); border-radius: 9px; padding: 7px 13px; margin-right: 12px; font-family: var(--pk-font); font-weight: 700; font-size: 13px; cursor: pointer; } /* — Загрузка файлов — */ html[data-theme="parkos"] :is(#newClientModal, #clientDataModal) .new-client-files-hint { color: var(--pk-muted) !important; } html[data-theme="parkos"] :is(#newClientModal, #clientDataModal) .new-client-file-card { background: var(--pk-surface) !important; border: 1px solid var(--pk-line) !important; border-radius: 14px !important; } html[data-theme="parkos"] :is(#newClientModal, #clientDataModal) .new-client-file-card--add { background: rgba(124, 92, 255, 0.07) !important; border: 1px dashed rgba(124, 92, 255, 0.35) !important; } html[data-theme="parkos"] :is(#newClientModal, #clientDataModal) .new-client-file-card--add:hover { background: rgba(124, 92, 255, 0.12) !important; } html[data-theme="parkos"] :is(#newClientModal, #clientDataModal) .new-client-file-card__plus { background: rgba(124, 92, 255, 0.12) !important; color: var(--pk-primary) !important; } html[data-theme="parkos"] :is(#newClientModal, #clientDataModal) .new-client-file-card__remove { background: var(--pk-surface-2) !important; color: var(--pk-slate) !important; border: 1px solid var(--pk-line) !important; border-radius: 9px !important; } /* — Кнопки действий — */ /* основная (Создать / Сохранить данные) */ html[data-theme="parkos"] #newClientModal #newClientSave, html[data-theme="parkos"] #clientDataModal .modal-actions button[style] { background: var(--pk-grad) !important; color: #fff !important; border: none !important; border-radius: 12px !important; font-weight: 800 !important; box-shadow: 0 12px 28px rgba(124, 92, 255, 0.30) !important; } /* вторичная (Отмена) */ html[data-theme="parkos"] #newClientModal #newClientCancel, html[data-theme="parkos"] #clientDataModal .modal-actions button:not([style]):not(.danger-icon-button):not(.restore-action-button) { background: var(--pk-surface-2) !important; color: var(--pk-slate) !important; border: 1px solid var(--pk-line) !important; border-radius: 12px !important; font-weight: 700 !important; } /* ---- Редактор графика работы филиала по дням (#networkBranchScheduleEditor) ---- */ html[data-theme="parkos"] .branch-schedule { margin: 4px 0 10px; padding: 8px 10px; background: var(--pk-surface-2); border: 1px solid var(--pk-line); border-radius: 12px; } html[data-theme="parkos"] .branch-schedule__head { font-family: var(--pk-display); font-weight: 800; font-size: 12px; color: var(--pk-ink); margin-bottom: 2px; } html[data-theme="parkos"] .branch-schedule__row { border-top: 1px solid var(--pk-line); } html[data-theme="parkos"] .branch-schedule__row:first-of-type { border-top: none; } html[data-theme="parkos"] .branch-schedule__name { color: var(--pk-ink); font-size: 13px; } html[data-theme="parkos"] .branch-schedule__row--off .branch-schedule__name { color: var(--pk-muted); } html[data-theme="parkos"] .branch-schedule__chk { width: 15px; height: 15px; accent-color: var(--pk-primary); cursor: pointer; } html[data-theme="parkos"] .branch-schedule__dash { color: var(--pk-muted); font-weight: 700; } html[data-theme="parkos"] .branch-schedule__from, html[data-theme="parkos"] .branch-schedule__to { background: var(--pk-surface) !important; border: 1px solid var(--pk-line) !important; border-radius: 8px !important; color: var(--pk-ink) !important; font-family: var(--pk-mono) !important; font-weight: 600; font-size: 12.5px !important; padding: 3px 6px !important; } html[data-theme="parkos"] .branch-schedule__from:focus, html[data-theme="parkos"] .branch-schedule__to:focus { outline: none; border-color: var(--pk-primary) !important; box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.14); } html[data-theme="parkos"] .branch-schedule__row--invalid .branch-schedule__from, html[data-theme="parkos"] .branch-schedule__row--invalid .branch-schedule__to { border-color: var(--pk-danger) !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14); } html[data-theme="parkos"] .branch-schedule__err { color: var(--pk-danger); font-weight: 600; } /* ---- Компоновка настроек филиала (Parkos) ---- */ /* Поле «Время работы» больше не нужно — его заменил график работы по дням */ html[data-theme="parkos"] .branch-working-hours-row { display: none !important; } /* График работы и блок контактов уведомлений растягиваем на всю ширину сетки формы, иначе они занимают одну колонку и переполняются, выталкивая остальные поля */ html[data-theme="parkos"] #networkBranchScheduleWrap, html[data-theme="parkos"] .branch-notify-contacts { grid-column: 1 / -1; } /* Компактный график: дни в две колонки, узкие поля времени, плотные строки */ html[data-theme="parkos"] .branch-schedule { padding: 7px 10px 8px; } html[data-theme="parkos"] #networkBranchScheduleEditor { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 0; } html[data-theme="parkos"] .branch-schedule__row { padding: 0 !important; gap: 6px !important; min-height: 26px; } html[data-theme="parkos"] .branch-schedule__row:nth-child(-n+2) { border-top: none; } html[data-theme="parkos"] .branch-schedule__day { min-width: 88px !important; gap: 6px !important; font-size: 12px !important; } html[data-theme="parkos"] .branch-schedule__name { font-size: 12px; } html[data-theme="parkos"] .branch-schedule__times { gap: 4px !important; margin-left: auto; } html[data-theme="parkos"] .branch-schedule__from, html[data-theme="parkos"] .branch-schedule__to { width: 76px !important; min-height: 24px !important; height: 24px !important; padding: 1px 4px !important; font-size: 12px !important; } html[data-theme="parkos"] .branch-schedule__chk { width: 14px; height: 14px; } html[data-theme="parkos"] .branch-schedule__err { flex-basis: 100%; } /* Контакты уведомлений филиала: почта сверху на всю ширину, ниже MAX слева и Telegram справа */ html[data-theme="parkos"] .branch-notify-contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* Почта для уведомлений — отделяем отступом и тонкой линией от групп TG/MAX */ html[data-theme="parkos"] .branch-notify-contacts__email { grid-column: 1 / -1; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px dashed var(--pk-line); } html[data-theme="parkos"] .branch-notify-contacts__max { grid-column: 1; } html[data-theme="parkos"] .branch-notify-contacts__tg { grid-column: 2; } /* Убираем настройку собственного ТГ/Макс-бота филиала — оставляем только группы уведомлений */ html[data-theme="parkos"] #networkBranchBotTokenSection { display: none !important; } /* Кнопки раздела «Категории устройств» — светлые, на токенах брендбука (без тёмного дефолта) */ html[data-theme="parkos"] #deviceCategoriesSaveBtn { background: var(--pk-grad-soft) !important; color: var(--pk-primary-strong) !important; border: 1px solid var(--pk-line) !important; border-radius: 12px !important; font-weight: 700 !important; box-shadow: none !important; } html[data-theme="parkos"] #deviceCategoriesSaveBtn:hover { background: var(--pk-grad-soft) !important; border-color: var(--pk-primary) !important; transform: none; } html[data-theme="parkos"] #deviceCategoriesAddBtn { background: var(--pk-surface) !important; color: var(--pk-slate) !important; border: 1px solid var(--pk-line) !important; border-radius: 12px !important; font-weight: 700 !important; box-shadow: none !important; } html[data-theme="parkos"] #deviceCategoriesAddBtn:hover { background: var(--pk-surface-2) !important; transform: none; } /* ============================================================================ МОДАЛ «ТРАНЗАКЦИИ» (#transactionsFullscreenModal) — фирменный ParkOS. База даёт кремовый градиент модала, жёлтый тулбар и нейтральный список — переверстываем в одну белую «пультовую» поверхность: тулбар/мета surface-2, список сгруппирован по дням, строки на pk-line, деньги tabular-nums. ============================================================================ */ html[data-theme="parkos"] #transactionsFullscreenModal { background: var(--pk-surface) !important; border: 1px solid var(--pk-line) !important; font-family: var(--pk-font) !important; } html[data-theme="parkos"] #transactionsFullscreenModal .modal-title { font-family: var(--pk-display) !important; font-weight: 800 !important; letter-spacing: -0.01em; color: var(--pk-ink) !important; } html[data-theme="parkos"] #transactionsFullscreenModal .modal-subtitle { color: var(--pk-muted) !important; } html[data-theme="parkos"] #transactionsFullscreenModal .modal-header { background: var(--pk-surface) !important; border-bottom: 1px solid var(--pk-line) !important; } html[data-theme="parkos"] #transactionsFullscreenModal .modal-close-x { background: var(--pk-surface-2) !important; color: var(--pk-muted) !important; border: 1px solid var(--pk-line) !important; } html[data-theme="parkos"] #transactionsFullscreenModal .modal-close-x:hover { background: var(--pk-surface) !important; color: var(--pk-ink) !important; border-color: var(--pk-primary) !important; } /* Тулбар фильтров: убираем жёлтый градиент → чистая surface-2 карточка */ html[data-theme="parkos"] #transactionsFullscreenModal .dashboard-screen__toolbar { background: var(--pk-surface-2) !important; border: 1px solid var(--pk-line) !important; border-radius: 18px !important; box-shadow: none !important; } html[data-theme="parkos"] #transactionsFullscreenModal .dashboard-screen__select, html[data-theme="parkos"] #transactionsFullscreenModal .dashboard-screen__search, html[data-theme="parkos"] #transactionsFullscreenModal .dashboard-screen__date-field input, html[data-theme="parkos"] #transactionsFullscreenModal .network-branch-scope-field select { background: var(--pk-surface) !important; border: 1px solid var(--pk-line) !important; border-radius: 11px !important; color: var(--pk-ink) !important; font-family: var(--pk-font) !important; } html[data-theme="parkos"] #transactionsFullscreenModal .dashboard-screen__select:focus, html[data-theme="parkos"] #transactionsFullscreenModal .dashboard-screen__search:focus, html[data-theme="parkos"] #transactionsFullscreenModal .dashboard-screen__date-field input:focus { outline: none; border-color: var(--pk-primary) !important; box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.14) !important; } html[data-theme="parkos"] #transactionsFullscreenModal .dashboard-screen__date-field span, html[data-theme="parkos"] #transactionsFullscreenModal .network-branch-scope-field__label { color: var(--pk-muted) !important; } html[data-theme="parkos"] #transactionsFullscreenModal #transactionsRefreshBtn { background: var(--pk-surface) !important; border: 1px solid var(--pk-line) !important; border-radius: 11px !important; color: var(--pk-ink) !important; font-weight: 700 !important; } html[data-theme="parkos"] #transactionsFullscreenModal #transactionsRefreshBtn:hover { background: var(--pk-line) !important; } /* Мета-итог (приход/расход/нетто) */ html[data-theme="parkos"] #transactionsFullscreenModal .dashboard-screen__meta { background: var(--pk-surface) !important; border: 1px solid var(--pk-line) !important; color: var(--pk-slate) !important; font-family: var(--pk-font) !important; } /* Список (одна колонка, группы по дням) */ html[data-theme="parkos"] #transactionsFullscreenModal .txn-day__date { color: var(--pk-muted) !important; } html[data-theme="parkos"] #transactionsFullscreenModal .txn-day__total { color: var(--pk-primary) !important; } html[data-theme="parkos"] #transactionsFullscreenModal .txn-group { background: var(--pk-surface) !important; border: 1px solid var(--pk-line) !important; border-radius: 16px !important; box-shadow: var(--pk-shadow) !important; } html[data-theme="parkos"] #transactionsFullscreenModal .txn-row { border-bottom: 1px solid var(--pk-line) !important; } html[data-theme="parkos"] #transactionsFullscreenModal .txn-row--last { border-bottom: none !important; } html[data-theme="parkos"] #transactionsFullscreenModal .txn-row__title { color: var(--pk-ink) !important; } html[data-theme="parkos"] #transactionsFullscreenModal .txn-row__meta { color: var(--pk-muted) !important; } html[data-theme="parkos"] #transactionsFullscreenModal .txn-row__meta .txn-row__client { color: var(--pk-slate) !important; } html[data-theme="parkos"] #transactionsFullscreenModal .txn-row__amount--income { color: #16a34a !important; } html[data-theme="parkos"] #transactionsFullscreenModal .txn-row__amount--expense { color: var(--pk-danger) !important; } html[data-theme="parkos"] #transactionsFullscreenModal .txn-row__amount--info { color: var(--pk-muted) !important; } html[data-theme="parkos"] #transactionsFullscreenModal .dashboard-empty { color: var(--pk-muted) !important; } /* ═══════════════════════════════════════════════════════════════════════════ ТАРИФЫ — пересборка под прототип Паркоса (кабинет сети и филиала). Грид «квадратов» #pkTariffGrid заменяет нативный список развёрнутых форм #networkRentalTariffsList; редактирование — в модале #pkTariffModal, куда parkos.js временно переносит нативный список (там он снова виден). ═══════════════════════════════════════════════════════════════════════════ */ /* Нативный список форм виден только когда перенесён в модал. В странице — грид. */ html[data-theme="parkos"] #networkRentalTariffsList:not([data-pk-in-modal="1"]) { display: none !important; } /* «+ Тариф» вынесен в шапку раздела — нативную кнопку добавления прячем (она ещё кликается). */ html[data-theme="parkos"] #networkRentalTariffAddBtn { display: none !important; } /* Кнопка «+ Тариф» в шапке раздела «Тарифы» */ html[data-theme="parkos"] .pk-tariff-add-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 18px; border: none; border-radius: 12px; background: var(--pk-grad); color: #fff; font-family: var(--pk-font); font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 20px rgba(124, 92, 255, 0.28); transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; } html[data-theme="parkos"] .pk-tariff-add-btn > span { font-size: 18px; line-height: 1; margin-top: -1px; } html[data-theme="parkos"] .pk-tariff-add-btn:hover { filter: brightness(1.04); box-shadow: 0 10px 24px rgba(124, 92, 255, 0.34); } html[data-theme="parkos"] .pk-tariff-add-btn:active { transform: translateY(1px); } /* Грид «квадратов» */ html[data-theme="parkos"] .pk-tariff-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; margin-top: 6px; } @media (max-width: 760px) { html[data-theme="parkos"] .pk-tariff-grid { grid-template-columns: 1fr; } } html[data-theme="parkos"] .pk-tariff-empty { grid-column: 1 / -1; padding: 22px 18px; border: 1px dashed var(--pk-line); border-radius: 14px; color: var(--pk-muted); font-size: 13px; text-align: center; background: var(--pk-surface); } html[data-theme="parkos"] .pk-tariff-card { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 18px; border: 1px solid var(--pk-line); background: var(--pk-surface); box-shadow: 0 10px 26px rgba(14, 21, 37, 0.05); cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; } html[data-theme="parkos"] .pk-tariff-card:hover { transform: translateY(-2px); border-color: rgba(124, 92, 255, 0.4); box-shadow: 0 18px 40px rgba(14, 21, 37, 0.10); } html[data-theme="parkos"] .pk-tariff-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } html[data-theme="parkos"] .pk-tariff-card__title { margin: 0; font-family: var(--pk-font); font-size: 17px; font-weight: 800; color: var(--pk-ink); letter-spacing: -0.01em; } html[data-theme="parkos"] .pk-tariff-card__badge { flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; letter-spacing: 0.01em; } html[data-theme="parkos"] .pk-tariff-card__badge--base { background: rgba(124, 92, 255, 0.12); color: var(--pk-primary-strong); } html[data-theme="parkos"] .pk-tariff-card__badge--buy { background: rgba(245, 158, 11, 0.14); color: #b45309; } html[data-theme="parkos"] .pk-tariff-card__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px; } html[data-theme="parkos"] .pk-tariff-card__sum { font-family: var(--pk-font); font-size: 28px; font-weight: 800; color: var(--pk-ink); line-height: 1.05; letter-spacing: -0.02em; } html[data-theme="parkos"] .pk-tariff-card__sum--empty { font-size: 16px; font-weight: 700; color: var(--pk-muted); } html[data-theme="parkos"] .pk-tariff-card__per { font-size: 13px; font-weight: 500; color: var(--pk-muted); } html[data-theme="parkos"] .pk-tariff-card__rows { display: flex; flex-direction: column; gap: 8px; } html[data-theme="parkos"] .pk-tariff-card__row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--pk-slate); } html[data-theme="parkos"] .pk-tariff-card__row b { color: var(--pk-ink); font-weight: 700; } html[data-theme="parkos"] .pk-tariff-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; } /* Сегмент вкл/выкл — визуальный индикатор активности (как в прототипе) */ html[data-theme="parkos"] .pk-tariff-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--pk-surface-2); border: 1px solid var(--pk-line); } html[data-theme="parkos"] .pk-tariff-seg > button { font-family: var(--pk-font); font-size: 12px; font-weight: 600; color: var(--pk-muted); padding: 4px 12px; border: none; border-radius: 7px; background: transparent; cursor: pointer; transition: background .12s ease, color .12s ease, box-shadow .12s ease; } html[data-theme="parkos"] .pk-tariff-seg > button:hover { color: var(--pk-ink); } html[data-theme="parkos"] .pk-tariff-seg > button.is-on { background: var(--pk-surface); color: var(--pk-ink); box-shadow: 0 1px 3px rgba(14, 21, 37, 0.10); cursor: default; } html[data-theme="parkos"] .pk-tariff-seg > [data-pk-tariff-disable].is-on { color: var(--pk-danger); } /* Выключенный тариф — приглушаем карточку, но оставляем управляемой */ html[data-theme="parkos"] .pk-tariff-card--off { background: var(--pk-surface-2); border-style: dashed; } html[data-theme="parkos"] .pk-tariff-card--off .pk-tariff-card__title, html[data-theme="parkos"] .pk-tariff-card--off .pk-tariff-card__price, html[data-theme="parkos"] .pk-tariff-card--off .pk-tariff-card__rows { opacity: 0.5; } html[data-theme="parkos"] .pk-tariff-card__edit { flex-shrink: 0; height: 36px; padding: 0 18px; border-radius: 11px; border: 1px solid var(--pk-line); background: var(--pk-surface); color: var(--pk-ink); font-family: var(--pk-font); font-size: 13px; font-weight: 700; cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease; } html[data-theme="parkos"] .pk-tariff-card__edit:hover { background: rgba(124, 92, 255, 0.08); border-color: rgba(124, 92, 255, 0.4); color: var(--pk-primary-strong); } /* ── Модал изменения тарифа ───────────────────────────────────────────────── position:fixed разрешается относительно #networkAdminModal (.app-modal имеет transform) → оверлей накрывает именно окно настроек. */ html[data-theme="parkos"] .pk-tariff-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 24px; } html[data-theme="parkos"] .pk-tariff-modal[hidden] { display: none !important; } html[data-theme="parkos"] .pk-tariff-modal__backdrop { position: absolute; inset: 0; background: rgba(14, 21, 37, 0.45); backdrop-filter: blur(2px); } html[data-theme="parkos"] .pk-tariff-modal__dialog { position: relative; z-index: 1; display: flex; flex-direction: column; width: min(640px, 100%); max-height: calc(100% - 16px); background: var(--pk-surface); border-radius: 20px; border: 1px solid var(--pk-line); box-shadow: 0 32px 80px rgba(8, 12, 24, 0.40); overflow: hidden; } html[data-theme="parkos"] .pk-tariff-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--pk-line); } html[data-theme="parkos"] .pk-tariff-modal__title { font-family: var(--pk-font); font-size: 18px; font-weight: 800; color: var(--pk-ink); letter-spacing: -0.01em; } html[data-theme="parkos"] .pk-tariff-modal__x { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--pk-line); background: var(--pk-surface); color: var(--pk-slate); cursor: pointer; transition: background .12s ease, color .12s ease; } html[data-theme="parkos"] .pk-tariff-modal__x:hover { background: var(--pk-surface-2); color: var(--pk-ink); } html[data-theme="parkos"] .pk-tariff-modal__body { padding: 20px 22px; overflow-y: auto; } /* Внутри модала показываем нативную карточку-форму выбранного тарифа */ html[data-theme="parkos"] .pk-tariff-modal__body #networkRentalTariffsList { display: flex !important; } html[data-theme="parkos"] .pk-tariff-modal__body .network-rental-tariff-card.pk-tariff-hide { display: none !important; } html[data-theme="parkos"] .pk-tariff-modal__body .network-rental-tariff-card { border: none; border-left: none; padding: 0; box-shadow: none; } html[data-theme="parkos"] .pk-tariff-modal__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--pk-line); } html[data-theme="parkos"] .pk-tariff-modal__done { height: 40px; padding: 0 22px; border: none; border-radius: 12px; background: var(--pk-grad); color: #fff; font-family: var(--pk-font); font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 20px rgba(124, 92, 255, 0.28); } html[data-theme="parkos"] .pk-tariff-modal__done:hover { filter: brightness(1.04); } /* ── Филиалы: грид карточек под прототип Паркоса ───────────────────────────── Нативный список + колонка деталей прячутся; грид #pkBranchGrid заменяет их. Колонка деталей видна только когда перенесена в модал (data-pk-in-modal=1). */ html[data-theme="parkos"] #settingsSectionBranches .settings-branches-list-col { display: none !important; } html[data-theme="parkos"] #settingsSectionBranches .settings-branches-layout { display: block !important; grid-template-columns: none !important; overflow-y: auto !important; padding: 20px 22px !important; } html[data-theme="parkos"] #settingsSectionBranches .settings-branches-detail-col:not([data-pk-in-modal="1"]) { display: none !important; } /* Кабинет филиала: «Настройки филиала» — своя форма инлайн, без грида/списка других филиалов */ html[data-theme="parkos"] #settingsSectionBranches.settings-section--branch-self .settings-branches-detail-col { display: flex !important; } html[data-theme="parkos"] #settingsSectionBranches.settings-section--branch-self #pkBranchGrid, html[data-theme="parkos"] #settingsSectionBranches.settings-section--branch-self #pkBranchAddBtn, html[data-theme="parkos"] #settingsSectionBranches.settings-section--branch-self #pkBranchSearch, html[data-theme="parkos"] #settingsSectionBranches.settings-section--branch-self .settings-branches-list-col { display: none !important; } html[data-theme="parkos"] .pk-branch-add-btn { font-size: 14px; } /* Поиск филиала в шапке раздела */ html[data-theme="parkos"] #settingsSectionBranches .settings-content__topbar { gap: 12px; } html[data-theme="parkos"] .pk-branch-search { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--pk-line); border-radius: 12px; background: var(--pk-surface-2); color: var(--pk-muted); } html[data-theme="parkos"] .pk-branch-search:focus-within { border-color: rgba(124, 92, 255, 0.5); background: var(--pk-surface); } html[data-theme="parkos"] .pk-branch-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--pk-font); font-size: 14px; color: var(--pk-ink); } html[data-theme="parkos"] .pk-branch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; margin-top: 6px; } @media (max-width: 1100px) { html[data-theme="parkos"] .pk-branch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { html[data-theme="parkos"] .pk-branch-grid { grid-template-columns: 1fr; } } html[data-theme="parkos"] .pk-branch-empty { grid-column: 1 / -1; padding: 22px 18px; border: 1px dashed var(--pk-line); border-radius: 14px; color: var(--pk-muted); font-size: 13px; text-align: center; background: var(--pk-surface); } html[data-theme="parkos"] .pk-branch-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 18px; border: 1px solid var(--pk-line); background: var(--pk-surface); box-shadow: 0 10px 26px rgba(14, 21, 37, 0.05); cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; } html[data-theme="parkos"] .pk-branch-card:hover { transform: translateY(-2px); border-color: rgba(124, 92, 255, 0.4); box-shadow: 0 18px 40px rgba(14, 21, 37, 0.10); } html[data-theme="parkos"] .pk-branch-card:focus-visible { outline: 2px solid var(--pk-primary-strong); outline-offset: 2px; } html[data-theme="parkos"] .pk-branch-card--off { opacity: 0.62; } html[data-theme="parkos"] .pk-branch-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } html[data-theme="parkos"] .pk-branch-card__title { margin: 0; font-family: var(--pk-font); font-size: 16px; font-weight: 800; color: var(--pk-ink); letter-spacing: -0.01em; } html[data-theme="parkos"] .pk-branch-card__badge { flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; } html[data-theme="parkos"] .pk-branch-card__badge--ok { background: rgba(16, 185, 129, 0.14); color: #047857; } html[data-theme="parkos"] .pk-branch-card__badge--warn { background: rgba(245, 158, 11, 0.16); color: #b45309; } html[data-theme="parkos"] .pk-branch-card__badge--deleted { background: rgba(148, 163, 184, 0.20); color: #475569; } html[data-theme="parkos"] .pk-branch-card__addr { font-size: 12px; color: var(--pk-muted); line-height: 1.4; } html[data-theme="parkos"] .pk-branch-card__stats { display: flex; gap: 10px; } html[data-theme="parkos"] .pk-branch-card__stat { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } html[data-theme="parkos"] .pk-branch-card__stat-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pk-muted); } html[data-theme="parkos"] .pk-branch-card__stat-val { font-size: 16px; font-weight: 800; color: var(--pk-ink); } html[data-theme="parkos"] .pk-branch-card__stat-val--cyan { color: #0891b2; } html[data-theme="parkos"] .pk-branch-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; } html[data-theme="parkos"] .pk-branch-card__actions { display: flex; gap: 6px; } html[data-theme="parkos"] .pk-branch-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--pk-line); background: var(--pk-surface); color: var(--pk-slate); cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease; } html[data-theme="parkos"] .pk-branch-card__icon:hover { background: var(--pk-surface-2); color: var(--pk-ink); } html[data-theme="parkos"] .pk-branch-card__icon--danger:hover { background: rgba(220, 38, 38, 0.10); color: #dc2626; border-color: rgba(220, 38, 38, 0.30); } html[data-theme="parkos"] .pk-branch-card__open { font-size: 12px; font-weight: 700; color: var(--pk-primary-strong); } /* ── Модалы филиалов (детали + создание) ──────────────────────────────────── */ html[data-theme="parkos"] .pk-branch-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px; } html[data-theme="parkos"] .pk-branch-modal[hidden] { display: none !important; } html[data-theme="parkos"] .pk-branch-modal__backdrop { position: absolute; inset: 0; background: rgba(14, 21, 37, 0.45); backdrop-filter: blur(2px); } html[data-theme="parkos"] .pk-branch-modal__dialog { position: relative; z-index: 1; display: flex; flex-direction: column; width: min(820px, 100%); max-height: calc(100% - 16px); background: var(--pk-surface); border-radius: 20px; border: 1px solid var(--pk-line); box-shadow: 0 32px 80px rgba(8, 12, 24, 0.40); overflow: hidden; } html[data-theme="parkos"] .pk-branch-modal__dialog--narrow { width: min(560px, 100%); } html[data-theme="parkos"] .pk-branch-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--pk-line); flex-shrink: 0; } html[data-theme="parkos"] .pk-branch-modal__title { font-family: var(--pk-font); font-size: 18px; font-weight: 800; color: var(--pk-ink); letter-spacing: -0.01em; } html[data-theme="parkos"] .pk-branch-modal__x { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--pk-line); background: var(--pk-surface); color: var(--pk-slate); cursor: pointer; transition: background .12s ease, color .12s ease; flex-shrink: 0; } html[data-theme="parkos"] .pk-branch-modal__x:hover { background: var(--pk-surface-2); color: var(--pk-ink); } html[data-theme="parkos"] .pk-branch-modal__body { padding: 20px 22px; overflow-y: auto; } /* Колонка деталей внутри модала — без внешних отступов/двойных рамок */ html[data-theme="parkos"] .pk-branch-modal__body .settings-branches-detail-col { display: flex !important; flex-direction: column; gap: 16px; width: 100%; } html[data-theme="parkos"] .pk-branch-modal__body .network-admin-panel--create { margin: 0; } html[data-theme="parkos"] .pk-branch-modal__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--pk-line); flex-shrink: 0; } html[data-theme="parkos"] .pk-branch-modal__done { height: 40px; padding: 0 22px; border: none; border-radius: 12px; background: var(--pk-grad); color: #fff; font-family: var(--pk-font); font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 20px rgba(124, 92, 255, 0.28); } html[data-theme="parkos"] .pk-branch-modal__done:hover { filter: brightness(1.04); } /* ── «Аккаунт сети»: кнопка показать пароль рядом с текущим паролем ───────── */ html[data-theme="parkos"] #networkAdminCurrentPasswordRow { align-items: center; } html[data-theme="parkos"] #networkAdminCurrentPassword { font-family: monospace; letter-spacing: 0.06em; } html[data-theme="parkos"] .pk-pass-reveal { margin-left: 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--pk-line); background: var(--pk-surface); color: var(--pk-slate); border-radius: 8px; width: 30px; height: 28px; cursor: pointer; line-height: 1; opacity: 0.7; transition: opacity .12s ease, background .12s ease; } html[data-theme="parkos"] .password-eye-btn { border: 1px solid var(--pk-line) !important; background: var(--pk-surface) !important; color: var(--pk-slate) !important; border-radius: 8px !important; } html[data-theme="parkos"] .password-eye-btn:hover { background: var(--pk-surface-2) !important; color: var(--pk-ink) !important; border-color: var(--pk-line) !important; } html[data-theme="parkos"] .pk-pass-reveal:hover { background: var(--pk-surface-2); opacity: 1; } html[data-theme="parkos"] .pk-pass-reveal.is-on { opacity: 1; border-color: var(--pk-line); color: var(--pk-ink); } /* Пояснение к сроку цикла выкупа в форме редактирования тарифа */ html[data-theme="parkos"] .network-rental-buyout-note { flex: 1 0 100%; margin: 0 0 4px; padding: 10px 12px; border-radius: 10px; background: rgba(124, 92, 255, 0.08); border: 1px solid rgba(124, 92, 255, 0.18); color: var(--pk-slate); font-size: 12px; line-height: 1.45; } /* ========================================================================= ЗАЩИТА ВЕРХНЕЙ ПАНЕЛИ (топбар) ОТ «ПРОПАДАНИЯ» НА ГЛАВНОМ ЭКРАНЕ Симптом: иногда в режиме «Панель» верхняя панель с кнопками (Панель/Карта/ Добавить клиента) не отрисовывается до конца или исчезает через несколько секунд после загрузки (гонка ре-рендера). В режиме Панели (desktop, не карта) у топбара и его действий НЕТ валидной причины быть скрытыми — жёстко держим их видимыми, перебивая возможный inline display:none / состояние гонки. Скоуп: только Паркос, только ≥1180px, только НЕ режим карты — так что карту и мобильную/компактную вёрстку правило не затрагивает. ========================================================================= */ @media (min-width: 1180px) { html[data-theme="parkos"] body:not(.desktop-map-mode) #desktopTopbar { display: flex !important; visibility: visible !important; opacity: 1 !important; } html[data-theme="parkos"] body:not(.desktop-map-mode) #desktopTopbar .desktop-topbar__actions { display: grid !important; visibility: visible !important; } html[data-theme="parkos"] body:not(.desktop-map-mode) #desktopTopbar #desktopViewSwitch { display: inline-flex !important; } }