/* ============================================================
   WashDesk 0.9 — строгий стиль экосистемы AluHub со стеклом (в духе Liquid Glass iOS).
   Подключается после components.css. Цвета — токены site.css (светлая и тёмная тема).

   Как устроено стекло, чтобы не тормозить на телефонах:
   • фон — пятна света (body::before), они и так мягкие, поэтому карточкам не нужно настоящее
     размытие: полупрозрачная заливка + светлая кромка выглядят стеклом и ничего не стоят;
   • настоящее размытие (backdrop-filter) — только у слоёв, под которыми прокручивается содержимое:
     шапка, нижнее меню, боковое меню, окна, выпадающие списки;
   • облегчённый режим (html.wd-lite, «Ещё → Оформление») — плотные поверхности, без размытия и анимаций.
   ============================================================ */

:root {
    /* На Apple — системный SF (как в iOS), на остальных — Inter */
    --wd-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, system-ui, sans-serif;
    --wd-blur: blur(24px) saturate(180%);
}

/* ---------- Фон: пятна света и тонкая сетка ---------- */
html { background: #eef0f5; }
html:has(body.dark) { background: #050608; }
body { background: transparent !important; }
body::before {
    content: ''; position: fixed; inset: -25%; z-index: -2; pointer-events: none;
    background:
        radial-gradient(38% 30% at 18% 18%, rgba(var(--wd-primary-rgb), .16), transparent 72%),
        radial-gradient(30% 26% at 84% 12%, rgba(0, 190, 200, .12), transparent 72%),
        radial-gradient(42% 36% at 74% 82%, rgba(120, 80, 255, .13), transparent 72%),
        radial-gradient(30% 28% at 22% 86%, rgba(255, 170, 120, .08), transparent 72%),
        var(--wd-bg);
    animation: wd-drift 50s cubic-bezier(.2, .8, .2, 1) infinite alternate;
}
body.dark::before {
    background:
        radial-gradient(38% 30% at 18% 18%, rgba(48, 86, 255, .32), transparent 72%),
        radial-gradient(30% 26% at 84% 12%, rgba(0, 170, 205, .20), transparent 72%),
        radial-gradient(42% 36% at 74% 82%, rgba(112, 64, 255, .24), transparent 72%),
        radial-gradient(28% 26% at 24% 86%, rgba(255, 255, 255, .05), transparent 72%),
        var(--wd-bg);
}
body::after {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(127, 127, 127, .07) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(127, 127, 127, .07) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 25%, #000 20%, transparent 80%);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 25%, #000 20%, transparent 80%);
}
@keyframes wd-drift { to { transform: translate3d(3%, -2.5%, 0) rotate(6deg) scale(1.05); } }

/* ---------- Карточки и группы: стекло без размытия ---------- */
.acc-hero, .acc-stats > div, .admin-card, .admin-tile, .cart-item, .client-card, .conflict-card,
.cp-review-card, .cp-stat-card, .emp-card, .feature-card, .note-item, .offline-status,
.off-quick-btn, .og-zone, .profile-header, .push-offer, .quick-action, .rev-card, .service-card,
.settings-company, .settings-group, .shift-card, .shift-now, .shift-quick, .slot-btn, .stat-card,
.stat-card2, .svc-catalog-item, .veh-picker-btn, .wash-card, .wd-form-card, .empty-state, .invite-card, .pp-svc, .cp-quick-item {
    box-shadow: var(--wd-edge), var(--wd-shadow);
    border-color: var(--wd-border);
}
/* Стопка пакетов (collapse.js wdStack): карточки лежат друг на друге — стекло тут только мешает.
   Все непрозрачные; у задних прячем содержимое, видны только края, как листы в стопке. */
.pkg-list.is-col .svc-catalog-item { background: var(--wd-surface-solid); }
.pkg-list.is-col .svc-catalog-item.pkg-chosen,
body.dark .pkg-list.is-col .svc-catalog-item.pkg-chosen {
    background: color-mix(in srgb, var(--wd-primary) 14%, var(--wd-surface-solid));
}
.pkg-list .svc-catalog-item > * { transition: opacity .25s ease; }
.pkg-list .svc-catalog-item.pkg-behind > * { opacity: 0; }

/* Чек — бумажный, непрозрачный */
.receipt { background: var(--wd-surface-solid); }

/* ---------- Слои поверх содержимого: стекло с размытием ---------- */
.topbar, .bottomnav, .sidebar, .off-top, .off-nav, .off-sheet-box, .modal-content, .dropdown-menu,
.emp-picker-menu, .veh-select-menu, .wd-dialog, .sortable-fallback, .wd-select-menu, .pub-modal-card, .cp-review-card,
.dd-list, .ck-keys-pop, .sal-pop-form, .cart-perf-menu, .wd-hint-pop,
.hs-period-menu, .wk-menu, .wk-pop, .car-suggest, .sup-dialog, .sch-menu, .pp-bar, .bk-pop, .sp-pop, .top-search-list,
.fab-menu-item-radial .fab-icon, .fab-menu-item-radial .fab-label {
    background: var(--wd-glass) !important;
    -webkit-backdrop-filter: var(--wd-blur);
    backdrop-filter: var(--wd-blur);
    border-color: var(--wd-border);
    box-shadow: var(--wd-edge), var(--wd-shadow-md);
}
.topbar { border-bottom: 1px solid var(--wd-border); box-shadow: var(--wd-edge); }
/* 0.13 (B7): предпросмотр заказа — окно поверх затемнения: стекло плотнее (как wd-dialog), чтобы яркие плашки под ним
   не мешали читать; в облегчённом режиме --wd-glass-modal — сплошной цвет */
.wk-prev {
    background: var(--wd-glass-modal) !important;
    -webkit-backdrop-filter: var(--wd-blur);
    backdrop-filter: var(--wd-blur);
    border-color: var(--wd-border);
    box-shadow: var(--wd-edge), var(--wd-shadow-md);
}
/* 0.12: стекло размывает только то, что под ним в пределах «корня фона». Внутри карточки или панели с прокруткой
   меню видело пустоту и было прозрачным — поэтому меню периода, «⋯» и карточка «В работе» на время показа
   переносятся в body (скрипт главной), а не лежат внутри карточки */

/* Нижнее меню — плавающая капсула, как панель вкладок iOS */
.bottomnav {
    left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom));
    padding-bottom: 0; border: 1px solid var(--wd-border); border-radius: 26px;
}
.fab-btn-wrap { bottom: calc(8px + env(safe-area-inset-bottom)); }
.fab-menu-radial { bottom: calc(var(--wd-bottomnav-h) + 34px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) {
    .bottomnav { left: 50%; right: auto; border-bottom: 1px solid var(--wd-border); border-radius: 26px; }
}
.bottomnav-item.active { color: var(--wd-primary); }
.bottomnav-item.active .bottomnav-icon { filter: none; }

/* Кнопка «+»: настоящее жидкое стекло (как шапка/нижнее меню), не синяя заливка — только иконка синяя */
.nav-fab {
    background: var(--wd-glass) !important;
    -webkit-backdrop-filter: var(--wd-blur);
    backdrop-filter: var(--wd-blur);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), var(--wd-edge), 0 10px 26px -10px rgba(15, 23, 42, .45);
}
.fab-overlay, .sidebar-overlay { background: rgba(0, 0, 0, .35); }

/* Боковое меню: строгая шапка без цветной заливки */
.sidebar { border-right: 1px solid var(--wd-border); }
.sidebar-header { background: transparent; color: var(--wd-text); border-bottom: 1px solid var(--wd-border); }
.sidebar-logo-img { background: rgba(127, 127, 127, .15); box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .35); }
.sidebar-avatar { background: var(--wd-primary-light); color: var(--wd-primary); }

/* ---------- Типографика ---------- */
body { letter-spacing: -.011em; }
.page-title, .greeting-title { font-weight: 650; letter-spacing: -.025em; }
.section-title, .settings-group-title, .sidebar-section-title { letter-spacing: .06em; }

/* ---------- Кнопки: капсулы, основная — синяя с бликом ---------- */
.btn { border-radius: 999px; font-weight: 600; letter-spacing: -.01em; transition: transform .15s ease, filter .2s, background .2s; }
.btn:active { transform: scale(.97); }
.btn-primary, .btn-primary:focus {
    background: linear-gradient(180deg, color-mix(in srgb, var(--wd-primary) 82%, #fff) 0%, var(--wd-primary) 100%);
    border-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 22px -10px rgba(var(--wd-primary-rgb), .75);
}
.btn-primary:hover { filter: brightness(1.06); background: linear-gradient(180deg, color-mix(in srgb, var(--wd-primary) 82%, #fff) 0%, var(--wd-primary) 100%); border-color: transparent; }
.btn-primary:disabled, .btn-primary.disabled { background: var(--wd-primary); border-color: transparent; box-shadow: none; }
.btn-outline-secondary, .btn-light, .btn-secondary {
    background: var(--wd-surface); color: var(--wd-text); border: 1px solid var(--wd-border); box-shadow: var(--wd-edge);
}
.btn-outline-secondary:hover, .btn-light:hover, .btn-secondary:hover { background: var(--wd-surface-2); color: var(--wd-text); border-color: var(--wd-border-strong); }
.btn-outline-primary { color: var(--wd-primary); border-color: rgba(var(--wd-primary-rgb), .45); background: rgba(var(--wd-primary-rgb), .06); }
.btn-outline-primary:hover { color: #fff; background: var(--wd-primary); border-color: var(--wd-primary); }
.btn-success { background: var(--wd-success); border-color: var(--wd-success); }
.btn-danger { background: var(--wd-danger); border-color: var(--wd-danger); }
.btn-outline-success { color: var(--wd-success); border-color: color-mix(in srgb, var(--wd-success) 50%, transparent); }
.btn-outline-danger { color: var(--wd-danger); border-color: color-mix(in srgb, var(--wd-danger) 50%, transparent); }
.btn-outline-success:hover { background: var(--wd-success); border-color: var(--wd-success); color: #fff; }
.btn-outline-danger:hover { background: var(--wd-danger); border-color: var(--wd-danger); color: #fff; }
.btn-link { color: var(--wd-primary); }
.wd-dialog-btn { border-radius: 999px; border: 1px solid var(--wd-border); background: var(--wd-surface-2); }
.wd-dialog-btn.is-primary { background: var(--wd-primary); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.wd-dialog-btn.is-danger { border-color: transparent; }
.wd-dialog { border-radius: 26px; }

/* ---------- Поля ---------- */
/* Кнопка выпадающего списка (js/wd-select.js) — такое же стеклянное поле, как обычные (0.11: была чёрной) */
.form-control, .form-select, .search-input, .wd-select-btn {
    background-color: rgba(255, 255, 255, .7); border: 1px solid var(--wd-border); border-radius: 13px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .05);
}
body.dark .form-control, body.dark .form-select, body.dark .search-input, body.dark .wd-select-btn {
    background-color: rgba(255, 255, 255, .055); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}
body .wd-select.is-compact .wd-select-btn { background-color: var(--wd-surface-2); border-radius: 999px; box-shadow: none; }
.form-control:focus, .form-select:focus, .search-input:focus {
    background-color: var(--wd-surface); border-color: rgba(var(--wd-primary-rgb), .9); box-shadow: 0 0 0 4px rgba(var(--wd-primary-rgb), .2);
}
/* Выпадающий список select рисует браузер: без этого в тёмной теме — белый фон и светлый текст.
   color-scheme заодно делает тёмными календарь, полосы прокрутки и автозаполнение. */
body.dark { color-scheme: dark; }
select option, select optgroup { background-color: var(--wd-surface-solid); color: var(--wd-text); }

.form-check-input:checked { background-color: var(--wd-primary); border-color: var(--wd-primary); }
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(var(--wd-primary-rgb), .2); border-color: rgba(var(--wd-primary-rgb), .6); }

/* ---------- Окна Bootstrap ---------- */
.modal-content { border-radius: 26px; border: 1px solid var(--wd-border); }
/* Bootstrap-подложка — тот же шаблон, что у остальных окон (--wd-overlay-* в site.css) */
.modal-backdrop { --bs-backdrop-bg: rgb(2, 6, 23); --bs-backdrop-opacity: .62;
    backdrop-filter: var(--wd-overlay-blur); -webkit-backdrop-filter: var(--wd-overlay-blur); }
.modal-backdrop.show { opacity: .62; }
/* Окна поверх затемнения (Bootstrap, витрина, лист «без сети», отзыв) — то же стекло, чуть плотнее:
   страница под ними уже затемнена и размыта, текст окна читается в обеих темах */
.modal .modal-content, .pub-modal-card, .off-sheet-box, .cp-review-modal .cp-review-card { background: var(--wd-glass-modal) !important; }
/* 0.11: подложка с backdrop-filter становится для окна «корнем фона» (так работает Chrome) — стекло окна видело только
   ровное затемнение и выглядело сплошным. Размытие и затемнение — отдельным слоем ::after под окном, сама подложка
   прозрачная: стекло окна снова видит размытую страницу. */
.pub-modal, .wd-dialog-overlay, .cp-review-modal, .off-sheet {
    background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.pub-modal::after, .wd-dialog-overlay::after, .cp-review-modal::after, .off-sheet::after {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: var(--wd-overlay-bg, rgba(2, 6, 23, .62));
    -webkit-backdrop-filter: var(--wd-overlay-blur, blur(12px)); backdrop-filter: var(--wd-overlay-blur, blur(12px));
}
html.wd-lite .pub-modal::after, html.wd-lite .wd-dialog-overlay::after, html.wd-lite .cp-review-modal::after, html.wd-lite .off-sheet::after {
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
.modal-header, .modal-footer { border-color: var(--wd-border); }

/* ---------- Сообщения: тонированное стекло ---------- */
.wd-alert { border-radius: 14px; }
.wd-alert-danger  { background: rgba(255, 59, 48, .10);  color: #c4261d; border-color: rgba(255, 59, 48, .25); }
.wd-alert-info    { background: rgba(0, 122, 255, .09);  color: #0058b8; border-color: rgba(0, 122, 255, .22); }
.wd-alert-success { background: rgba(52, 199, 89, .11);  color: #1d7a37; border-color: rgba(52, 199, 89, .28); }
.wd-alert-warning { background: rgba(255, 149, 0, .12);  color: #9a5800; border-color: rgba(255, 149, 0, .3); }
body.dark .wd-alert-danger  { background: rgba(255, 69, 58, .13); color: #ffb3ae; border-color: rgba(255, 69, 58, .3); }
body.dark .wd-alert-info    { background: rgba(10, 132, 255, .13); color: #b5d8ff; border-color: rgba(10, 132, 255, .3); }
body.dark .wd-alert-success { background: rgba(48, 209, 88, .12); color: #a6f0b8; border-color: rgba(48, 209, 88, .28); }
body.dark .wd-alert-warning { background: rgba(255, 159, 10, .13); color: #ffd28a; border-color: rgba(255, 159, 10, .3); }

/* «Ещё → Оформление»: выбор под подписью */
.look-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.settings-row.look-row .settings-text small { order: 0; white-space: normal; }

/* ---------- Чипы и сегменты ---------- */
.chip.is-active, .seg-btn.active, .rev-filter-chip.is-active { background: var(--wd-primary); border-color: var(--wd-primary); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }

/* ============================================================
   Облегчённый режим (html.wd-lite): плотные поверхности, без размытия и анимаций.
   Включается сам на слабых телефонах или вручную: «Ещё → Оформление».
   ============================================================ */
html.wd-lite body { --wd-surface: #ffffff; --wd-surface-2: #f2f2f7; --wd-glass: #ffffff; --wd-glass-modal: #ffffff; --wd-edge: 0 0 0 0 transparent; }
html.wd-lite body.dark { --wd-surface: #17191e; --wd-surface-2: #22252c; --wd-glass: #17191e; --wd-glass-modal: #17191e; }
html.wd-lite *, html.wd-lite *::before, html.wd-lite *::after {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html.wd-lite body::before { animation: none; background: var(--wd-bg); }
html.wd-lite body::after { display: none; }
html.wd-lite .form-control, html.wd-lite .form-select, html.wd-lite .search-input, html.wd-lite .wd-select-btn { background-color: var(--wd-surface-2); box-shadow: none; }

/* Телефоны: фон неподвижен — иначе шапка и нижнее меню пересчитывают размытие в каждом кадре */
@media (hover: none), (pointer: coarse) {
    body::before { animation: none; inset: -10%; }
}
@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; }
}

/* Логотип под тему: в разметке два img — тёмная плитка и светлая, показываем одну */
body:not(.dark) .wd-logo-dark, body.dark .wd-logo-light { display: none !important; }
body.dark .sidebar-logo-img { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 6px 18px -6px rgba(0, 0, 0, .5); }