/* ============================================================
   WashDesk — site.css (основные стили приложения)
   ============================================================ */

/* ---------- Токены ----------
   Цвета, тени и радиусы — только отсюда; в компонентах — var(--wd-*), без своих HEX.
   Шрифт — fonts.css (Inter). Шкала размеров текста: 11 / 12 / 13 / 14 / 15 / 16 / 18 / 20 / 22.
   0.9: строгий стиль экосистемы AluHub со стеклом (css/glass.css). Поверхности полупрозрачные —
   под ними фон с пятнами света; в облегчённом режиме (html.wd-lite) — плотные.
   Акцент — системный синий iOS; бирюзовый WashDesk остался только в иконке и логотипе. */
:root {
    --wd-bg: #eef0f5;
    --wd-surface: rgba(255,255,255,.66); --wd-surface-2: rgba(118,124,140,.10);
    --wd-surface-solid: #ffffff;          /* под выпадающими списками и окнами, если нет размытия */
    --wd-glass: rgba(255,255,255,.72);    /* шапка, меню, окна — со стеклом */
    --wd-glass-modal: rgba(255,255,255,.8); /* окна и тосты поверх затемнения: стекло чуть плотнее, чтобы текст читался */
    --wd-border: rgba(15,23,42,.09); --wd-border-strong: rgba(15,23,42,.16);
    --wd-text: #111318; --wd-text-muted: #6e6e73; --wd-text-subtle: #a1a1a6;
    --wd-primary: #007aff; --wd-primary-dark: #0062d6; --wd-primary-light: rgba(0,122,255,.12);
    --wd-primary-rgb: 0, 122, 255;
    --wd-danger: #ff3b30; --wd-warning: #ff9500; --wd-success: #34c759; --wd-star: #ffb800;
    --wd-edge: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.35);
    --wd-shadow: 0 1px 2px rgba(15,23,42,.06), 0 8px 24px -12px rgba(15,23,42,.12);
    --wd-shadow-md: 0 10px 30px -10px rgba(15,23,42,.18);
    --wd-shadow-lg: 0 24px 50px -20px rgba(15,23,42,.25);
    --wd-radius: 18px; --wd-radius-sm: 12px;
    --wd-topbar-h: 60px; --wd-bottomnav-h: 64px;
    /* Фон под любым окном (подтверждения, модальные, витрина, отзыв) — один шаблон на всё приложение */
    --wd-overlay-bg: rgba(2, 6, 23, .62);
    --wd-overlay-blur: blur(12px) saturate(120%);
    /* Всплывающие слои (меню списков, подсказки) — выше окон .wd-dialog-overlay (5000), иначе в окне не видны */
    --wd-z-popover: 5100;
}
body.dark {
    --wd-bg: #050608;
    --wd-surface: rgba(255,255,255,.065); --wd-surface-2: rgba(255,255,255,.08);
    --wd-surface-solid: #16181d;
    --wd-glass: rgba(24,26,32,.62);
    --wd-glass-modal: rgba(28,30,37,.72);
    --wd-border: rgba(255,255,255,.10); --wd-border-strong: rgba(255,255,255,.18);
    --wd-text: #f5f5f7; --wd-text-muted: rgba(235,235,245,.62); --wd-text-subtle: rgba(235,235,245,.36);
    --wd-primary: #0a84ff; --wd-primary-dark: #3d9bff; --wd-primary-light: rgba(10,132,255,.2);
    --wd-primary-rgb: 10, 132, 255;
    --wd-danger: #ff453a; --wd-warning: #ff9f0a; --wd-success: #30d158;
    --wd-edge: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.04);
    --wd-shadow: 0 1px 2px rgba(0,0,0,.4), 0 20px 40px -24px rgba(0,0,0,.8);
    --wd-shadow-md: 0 14px 34px -14px rgba(0,0,0,.8); --wd-shadow-lg: 0 30px 60px -24px rgba(0,0,0,.85);
}
/* Bootstrap берёт цвета из наших токенов — модалки, списки, карточки, text-muted сами
   переключаются с темой. Объявлено на body (а не :root), чтобы body.dark пересчитывал значения. */
body {
    --bs-body-font-family: var(--wd-font);
    --bs-body-bg: var(--wd-bg);
    --bs-body-color: var(--wd-text);
    --bs-secondary-color: var(--wd-text-muted);
    --bs-tertiary-bg: var(--wd-surface-2);
    --bs-border-color: var(--wd-border);
    --bs-emphasis-color: var(--wd-text);
    --bs-link-color: var(--wd-primary-dark);
    --bs-link-color-rgb: var(--wd-primary-rgb);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body { background: var(--wd-bg); color: var(--wd-text); font-family: var(--wd-font); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
a { color: var(--wd-primary-dark); text-decoration: none; }
.app-root { min-height: 100vh; }

/* ---------- TOPBAR ---------- */
.topbar { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 12px; height: var(--wd-topbar-h); padding: 0 16px; background: var(--wd-surface); border-bottom: 1px solid var(--wd-border); backdrop-filter: blur(12px); }
.topbar-menu-btn { width: 40px; height: 40px; border: none; background: transparent; border-radius: 10px; color: var(--wd-text); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.topbar-menu-btn:hover { background: var(--wd-surface-2); }
.topbar-title { flex: 1; text-align: center; min-width: 0; }
.topbar-app { font-size: 16px; font-weight: 700; color: var(--wd-text); line-height: 1.2; }
.topbar-company { font-size: 12px; color: var(--wd-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-company-switch { opacity: .65; }
.topbar-spacer { width: 44px; flex-shrink: 0; }   /* уравновешивает кнопку меню слева — название по центру */
/* 0.12 (Н-35): настройки уведомлений — отметки «✉ почта» / «✈ Telegram» под описанием вида */
.nf-dup { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 12px; color: var(--wd-text-muted); }
.nf-dup label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.nf-dup .form-check-input { margin: 0; width: 15px; height: 15px; }
/* 0.12 (Н-35): история уведомлений — новые подсвечены, время справа */
.nh-row.is-new { background: color-mix(in srgb, var(--wd-primary) 8%, transparent); }
.nh-row.is-new .settings-text b::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--wd-primary); vertical-align: middle; }
.nh-row .settings-text small { white-space: normal; }
.nh-time { flex-shrink: 0; font-size: 12px; color: var(--wd-text-muted); font-variant-numeric: tabular-nums; }
/* Ревью 15.10: важные уведомления. История: телефон — общая лента (⭐ у важных), ПК — две колонки «Важные» и «Остальные».
   Настройка: ⭐ у вида (сохраняется сразу); ПК — во всю ширину, виды в две колонки */
.nh-imp { font-style: normal; font-size: 11px; margin-right: 4px; }
.nh-cols, .nf-pc-title { display: none; }
.nf-star { flex-shrink: 0; width: 30px; height: 30px; margin: 0 -6px 0 -4px; padding: 0; border: 0; border-radius: 50%; background: transparent;
    color: var(--wd-text-muted); font-size: 19px; line-height: 1; cursor: pointer; transition: color .15s, transform .15s; }
.nf-star:hover { color: #f5b301; transform: scale(1.12); }
.nf-star.is-on { color: #f5b301; }
@media (min-width: 992px) {
    main.main-content:has(.nh-page), main.main-content:has(.nf-page) { max-width: none; }
    .nh-mob { display: none; }
    .nh-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; align-items: start; }
    .nh-col-title { margin: 0 4px 10px; font-size: 15px; font-weight: 700; }
    .nh-col-empty { padding: 16px 4px; font-size: 14px; color: var(--wd-text-muted); }
    .nh-clear { max-width: 420px; }
    .nf-pc-title { display: block; }
    .nf-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; align-items: start; }
    .nf-page > form > .settings-hint { max-width: 1100px; }
    .nf-groups { columns: 2 460px; column-gap: 24px; }
    .nf-g { break-inside: avoid; display: inline-block; width: 100%; }
    .nf-save { max-width: 420px; display: block; margin: 4px auto 0; }
}
/* 0.12 (Н-35): колокольчик истории уведомлений — на месте «распорки», той же ширины */
/* 0.12 (Н-66): колокольчик — круглая стеклянная кнопка (Liquid Glass) */
.topbar-bell { position: relative; width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; color: var(--wd-text); text-decoration: none; border: 1px solid var(--wd-border);
    background: var(--wd-glass, var(--wd-surface)); -webkit-backdrop-filter: var(--wd-blur, blur(20px)); backdrop-filter: var(--wd-blur, blur(20px));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), var(--wd-edge, none); transition: transform .15s, background .15s; }
.topbar-bell:hover { background: var(--wd-surface-2); color: var(--wd-text); }
.topbar-bell:active { transform: scale(.94); }
.topbar-bell-count { position: absolute; top: 3px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--wd-danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
/* 0.12 (B15): поиск по настройкам на странице «Ещё» */
.st-search { margin-bottom: 12px; }
.st-hidden { display: none !important; }
/* 0.12 (B15): «Штурман» — лупа (как колокольчик) раскрывается в поле поверх названия в шапке; результаты — стеклом */
.topbar-search { cursor: pointer; padding: 0; font: inherit; }
.top-search { display: none; position: absolute; left: 64px; right: 112px; top: 50%; transform: translateY(-50%); height: 42px;
    align-items: center; gap: 8px; padding: 0 6px 0 14px; border-radius: 999px; border: 1px solid var(--wd-primary);
    background: var(--wd-surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wd-primary) 22%, transparent); z-index: 2; }
.top-search.is-open { display: flex; }
@media (min-width: 992px) { .top-search { left: 50%; right: auto; width: min(640px, calc(100% - 260px)); transform: translate(-50%, -50%); } }
/* Правки 16.10 (телефон): «WashDesk» — ровно по центру экрана (слева одна кнопка ☰, справа две — лупа и колокольчик,
   и надпись съезжала влево); кнопки справа прижаты к краю. Раскрытый поиск — с равными отступами от краёв */
@media (max-width: 991.98px) {
    .topbar-title { position: absolute; left: 50%; top: calc(50% + env(safe-area-inset-top, 0px) / 2); transform: translate(-50%, -50%);
        flex: none; width: max-content; max-width: calc(100% - 232px); padding: 0 !important; }
    .topbar-title + * { margin-left: auto; }
}
@media (max-width: 767.98px) { .top-search { left: 64px; right: 64px; } }
.topbar-title { transition: opacity .2s ease, visibility 0s linear .2s; }
.topbar.is-searching .topbar-title { opacity: 0; visibility: hidden; }
/* 0.13 (G5): лупа сама вырастает в поле (js/navigator.js двигает рамку от кнопки к полю и обратно); пока рамка едет —
   внутри только значок, поле и ✕ проявляются после; кнопка на это время прячется — поле и есть она */
.topbar-search.is-ghost { visibility: hidden; }
.top-search.is-morphing { overflow: hidden; }
.top-search .top-search-input, .top-search .top-search-close { opacity: 0; transition: opacity .18s ease; }
.top-search.is-ready .top-search-input, .top-search.is-ready .top-search-close { opacity: 1; }
.top-search-ico { font-size: 14px; opacity: .7; }
.top-search-input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--wd-text); font: inherit; font-size: 15px; }
.top-search-input::-webkit-search-cancel-button { display: none; }
.top-search-close { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--wd-surface-2); color: var(--wd-text-muted); cursor: pointer; }
.top-search-list { position: fixed; z-index: 1090; max-height: min(70vh, 560px); overflow-y: auto; padding: 6px; border-radius: 16px; border: 1px solid var(--wd-border); }
.top-search-cap { padding: 8px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--wd-text-muted); }
.top-search-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--wd-text); text-decoration: none; }
.top-search-row:hover, .top-search-row.is-cur { background: var(--wd-surface-2); color: var(--wd-text); }
.top-search-row-ico { flex: none; width: 24px; text-align: center; }
.top-search-row-text { display: flex; flex-direction: column; min-width: 0; }
.top-search-row-text b { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-search-row-text small { font-size: 12px; color: var(--wd-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-search-empty { padding: 12px; font-size: 14px; color: var(--wd-text-muted); }
/* 0.13 (G2): окошко «Кратко» у вопроса справки в списке «Штурмана» — то же облачко, что у «?» (components.css .wd-hint-pop),
   над списком результатов */
.top-search-pop { z-index: 1095; }
/* 0.12 (С-35): установленное приложение на iPhone (viewport-fit=cover) — шапка ниже «чёлки» и часов.
   --wd-topbar-h включает отступ, поэтому липкие блоки (top: var(--wd-topbar-h)) тоже не уезжают под шапку */
@media (display-mode: standalone) {
    :root { --wd-topbar-h: calc(60px + env(safe-area-inset-top, 0px)); }
    body .topbar { padding-top: env(safe-area-inset-top, 0px); }
}

/* ---------- MAIN CONTENT ---------- */
.main-content { padding: 16px; max-width: 1200px; margin: 0 auto; }
.container-fluid { padding: 0; }

/* ---------- GREETING ---------- */
.greeting { margin-bottom: 24px; }
.greeting-title { font-size: 26px; font-weight: 700; margin: 0 0 4px; color: var(--wd-text); letter-spacing: -.5px; }
.greeting-date { font-size: 14px; color: var(--wd-text-muted); }

/* ---------- STATS ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
.stat-card { background: var(--wd-surface); border: 1px solid var(--wd-border); border-radius: var(--wd-radius); padding: 16px; transition: transform .15s, box-shadow .15s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--wd-shadow-lg); }
.stat-value { font-size: 22px; font-weight: 700; margin-bottom: 4px; letter-spacing: -.5px; }
.stat-label { font-size: 13px; color: var(--wd-text-muted); }

/* ---------- SECTIONS ---------- */
.section { margin: 0 0 16px; }
.section-title { font-size: 14px; font-weight: 600; color: var(--wd-text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }

/* ---------- QUICK ACTIONS ---------- */
.quick-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.quick-action { display: flex; flex-direction: column; align-items: center; padding: 16px 8px; background: var(--wd-surface); border: 1px solid var(--wd-border); border-radius: var(--wd-radius); color: var(--wd-text); transition: all .15s; text-decoration: none; }
.quick-action:hover { transform: translateY(-2px); box-shadow: var(--wd-shadow); border-color: var(--wd-primary); color: var(--wd-text); }
.quick-action-icon { font-size: 28px; margin-bottom: 8px; }
.quick-action-label { font-size: 12px; font-weight: 500; text-align: center; line-height: 1.3; }

/* ---------- EMPTY STATE ---------- */
.empty-state { text-align: center; padding: 40px 20px; background: var(--wd-surface); border: 1px dashed var(--wd-border); border-radius: var(--wd-radius); }
.empty-state-icon { font-size: 48px; margin-bottom: 12px; opacity: .5; }
.empty-state-icon svg { width: 48px; height: 48px; }
.empty-state-text { font-size: 16px; font-weight: 600; color: var(--wd-text); margin-bottom: 4px; }
.empty-state-hint { font-size: 13px; color: var(--wd-text-muted); }

/* ---------- BOTTOM NAV ---------- */
.bottomnav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; height: var(--wd-bottomnav-h); background: var(--wd-surface); border-top: 1px solid var(--wd-border); display: flex; justify-content: space-between; align-items: center; padding: 0 8px; padding-bottom: env(safe-area-inset-bottom); }
.bottomnav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 4px; color: var(--wd-text-muted); text-decoration: none; transition: color .15s; }
.bottomnav-item.active { color: var(--wd-primary); }
.bottomnav-icon { font-size: 22px; margin-bottom: 2px; display: flex; align-items: center; justify-content: center; }
.bottomnav-icon svg { width: 23px; height: 23px; }
.bottomnav-icon svg.bottomnav-car { width: 40px; height: 23px; }
.bottomnav-label { font-size: 11px; font-weight: 500; }
.nav-item-center { width: 84px; height: 64px; flex: none; }

/* ---------- FAB ---------- */
.fab-btn-wrap { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 84px; height: calc(var(--wd-bottomnav-h) + 14px); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; z-index: 950; pointer-events: none; }
.nav-fab { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--wd-border); background: var(--wd-surface); color: var(--wd-primary); line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(15,23,42,.18); cursor: pointer; padding: 0; margin-top: 4px; transition: transform .3s ease, box-shadow .15s ease, color .2s ease; pointer-events: auto; }
.nav-fab svg { width: 24px; height: 24px; transition: transform .3s ease; }
.nav-fab:hover { box-shadow: 0 8px 20px rgba(15,23,42,.24); }
.nav-fab:active { transform: scale(.94); }
.nav-fab.active { color: var(--wd-danger); }
.nav-fab.active svg { transform: rotate(45deg); }
.fab-label { margin-top: 4px; font-size: 11px; color: var(--wd-text-muted); pointer-events: none; text-align: center; }
.fab-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.35); backdrop-filter: blur(4px); z-index: 900; opacity: 0; pointer-events: none; transition: opacity .25s; }
.fab-overlay.active { opacity: 1; pointer-events: auto; }

/* ---------- FAB RADIAL MENU ---------- */
.fab-menu-radial { position: fixed; left: 50%; bottom: calc(var(--wd-bottomnav-h) + 26px); width: 0; height: 0; z-index: 940; pointer-events: none; }
.fab-menu-item-radial { position: absolute; left: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; transform: translate(-50%, 50%) scale(.3); opacity: 0; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease; pointer-events: none; text-decoration: none; }
.fab-menu-radial.open .fab-menu-item-radial { opacity: 1; pointer-events: auto; }
.fab-menu-item-radial .fab-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--wd-surface); border: 1px solid var(--wd-border); box-shadow: 0 8px 24px rgba(15,23,42,.18); display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--wd-primary); }
.fab-menu-item-radial .fab-icon svg { width: 24px; height: 24px; }
.fab-menu-item-radial .fab-label { font-size: 11px; font-weight: 600; color: var(--wd-text); background: var(--wd-surface); border: 1px solid var(--wd-border); padding: 2px 10px; border-radius: 10px; margin-top: 0; }
.fab-menu-radial[data-count="1"].open .fab-menu-item-radial:nth-child(1) { transform: translate(-50%, calc(50% - 96px)) scale(1); transition-delay: 0s; }
.fab-menu-radial[data-count="2"].open .fab-menu-item-radial:nth-child(1) { transform: translate(calc(-50% - 92px), calc(50% - 56px)) scale(1); transition-delay: 0s; }
.fab-menu-radial[data-count="2"].open .fab-menu-item-radial:nth-child(2) { transform: translate(calc(-50% + 92px), calc(50% - 56px)) scale(1); transition-delay: .05s; }
.fab-menu-radial[data-count="3"].open .fab-menu-item-radial:nth-child(1) { transform: translate(calc(-50% - 112px), calc(50% - 24px)) scale(1); transition-delay: 0s; }
.fab-menu-radial[data-count="3"].open .fab-menu-item-radial:nth-child(2) { transform: translate(-50%, calc(50% - 104px)) scale(1); transition-delay: .05s; }
.fab-menu-radial[data-count="3"].open .fab-menu-item-radial:nth-child(3) { transform: translate(calc(-50% + 112px), calc(50% - 24px)) scale(1); transition-delay: .1s; }
.fab-menu-radial[data-count="4"].open .fab-menu-item-radial:nth-child(1) { transform: translate(calc(-50% - 122px), calc(50% - 8px)) scale(1); transition-delay: 0s; }
.fab-menu-radial[data-count="4"].open .fab-menu-item-radial:nth-child(2) { transform: translate(calc(-50% - 66px), calc(50% - 92px)) scale(1); transition-delay: .05s; }
.fab-menu-radial[data-count="4"].open .fab-menu-item-radial:nth-child(3) { transform: translate(calc(-50% + 66px), calc(50% - 92px)) scale(1); transition-delay: .1s; }
.fab-menu-radial[data-count="4"].open .fab-menu-item-radial:nth-child(4) { transform: translate(calc(-50% + 122px), calc(50% - 8px)) scale(1); transition-delay: .15s; }

/* ---------- SIDEBAR ---------- */
.sidebar-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.5); backdrop-filter: blur(4px); z-index: 1250; opacity: 0; pointer-events: none; transition: opacity .25s; }
.sidebar-overlay.active { opacity: 1; pointer-events: auto; }
.sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 300px; max-width: 85vw; background: var(--wd-surface); z-index: 1300; transform: translate3d(-100%, 0, 0); transition: transform .3s cubic-bezier(.4, 0, .2, 1); display: flex; flex-direction: column; overflow-y: auto; box-shadow: 0 0 40px rgba(0,0,0,.2); }
.sidebar.open { transform: translate3d(0, 0, 0); }
.sidebar-header { display: flex; align-items: center; gap: 8px; padding: 16px 20px; background: linear-gradient(135deg, var(--wd-primary), var(--wd-primary-dark)); color: #fff; }
.sidebar-logo { display: flex; align-items: center; gap: 12px; }
.sidebar-logo-img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; background: rgba(255,255,255,.2); flex-shrink: 0; }
.sidebar-version-row { margin-top: auto; padding: 10px 20px; font-size: 11px; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
a.sidebar-version-row { color: var(--wd-text-subtle); text-decoration: none; cursor: pointer; }
a.sidebar-version-row:hover { color: var(--wd-primary); text-decoration: underline; }
.sidebar-version-row #appVersion, .sidebar-version-row .sidebar-version-title { color: inherit; }
.sidebar-version-title { color: var(--wd-text-subtle); opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
/* Версия не переносится: сколько бы она ни заняла, сжимается название (с многоточием) */
.sidebar-version-row #appVersion { flex: 0 0 auto; white-space: nowrap; }
.sidebar-logout-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sidebar-logout-row .sidebar-link { padding-left: 0; }
/* 0.12 (М-19): «Выйти» — кнопка формы POST, выглядит как ссылка меню */
.wd-logout-form { margin: 0; }
.wd-logout-form button.sidebar-link { background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.sidebar-copyright { font-size: 11px; color: var(--wd-text-subtle); white-space: nowrap; }
.sidebar-logo-text { flex: 1; min-width: 0; }
.sidebar-logo-title { font-size: 18px; font-weight: 700; }
.sidebar-logo-sub { font-size: 12px; opacity: .85; }
.sidebar-profile { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--wd-border); color: var(--wd-text); text-decoration: none; transition: background .15s; }
.sidebar-profile:hover { background: var(--wd-surface-2); color: var(--wd-text); }
.sidebar-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--wd-primary-light); color: var(--wd-primary-dark); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; flex-shrink: 0; overflow: hidden; }
.sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-name { font-size: 15px; font-weight: 600; line-height: 1.3; }
.sidebar-role { font-size: 12px; color: var(--wd-text-muted); }
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.sidebar-section { margin-bottom: 8px; }
/* Главная/Клиенты/Мойки в сайдбаре — только на ПК (там это единственный способ попасть сюда,
   см. @media (min-width: 992px) ниже); на телефоне для этого есть нижнее меню, повтор не нужен. */
.sidebar-section-primary { display: none; }
.sidebar-section-title { padding: 8px 20px; font-size: 11px; font-weight: 600; color: var(--wd-text-subtle); text-transform: uppercase; letter-spacing: .5px; }
.sidebar-link { display: flex; align-items: center; gap: 12px; padding: 10px 20px; color: var(--wd-text); text-decoration: none; font-size: 14px; font-weight: 500; border: none; background: transparent; width: 100%; text-align: left; cursor: pointer; transition: background .15s; }
.sidebar-link:hover { background: var(--wd-surface-2); color: var(--wd-text); }
.sidebar-link-icon { font-size: 18px; width: 24px; text-align: center; }
.sidebar-link-danger { color: var(--wd-danger); }
.sidebar-footer { padding: 16px 20px; border-top: 1px solid var(--wd-border); }

/* ---------- ПК/планшет (docs/DESKTOP.md, пункт 23 плана 0.10) ----------
   Меню закреплено и всегда открыто, сдвигает контент вправо вместо наезда поверх.
   Нижнее меню/кнопка «+» остаются как есть — не мешают, дублируют быстрый доступ. */
@media (min-width: 992px) {
    .topbar-menu-btn { display: none; }
    .sidebar-overlay { display: none !important; }
    .sidebar { position: fixed; width: var(--sb-w, 300px); transform: none !important; box-shadow: none; border-right: 1px solid var(--wd-border); }
    .topbar, .main-content { margin-left: var(--sb-w, 300px); }
    .sidebar-section-primary { display: block; }

    /* 0.12 (Н-7): меню сворачивается кнопкой — остаются значки и аватарка профиля (body.sb-mini, состояние в localStorage) */
    /* 0.13 (A5): характер сворачивания — из выбранной анимации меню (переменные --sb-size-* ниже) */
    .sidebar, .topbar, .main-content { transition: width var(--sb-size-dur) var(--sb-size-ease), margin-left var(--sb-size-dur) var(--sb-size-ease), margin-right var(--sb-size-dur) var(--sb-size-ease); }
    .sidebar-collapse { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: auto; padding: 8px 20px; border: 0; background: none;
        color: var(--wd-text-muted); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
    .sidebar-collapse:hover { color: var(--wd-primary); background: var(--wd-surface-2); }
    .sidebar-collapse-ico { width: 24px; text-align: center; font-size: 16px; }
    .sidebar-collapse + .sidebar-version-row { margin-top: 0; }
    body.sb-mini .sidebar { width: var(--sb-mini-w, 76px); overflow-x: hidden; }
    body.sb-mini .topbar, body.sb-mini .main-content { margin-left: var(--sb-mini-w, 76px); }
    body.sb-mini .sidebar-header { flex-direction: column; padding: 12px 0; }
    body.sb-mini .sidebar-logo-img { width: 40px; height: 40px; }
    body.sb-mini .sidebar-logo-text, body.sb-mini .sidebar-profile-info, body.sb-mini .sidebar-section-title,
    body.sb-mini .sidebar-version-row, body.sb-mini .sidebar-copyright, body.sb-mini .sidebar-collapse-text { display: none; }
    body.sb-mini .sidebar-profile { justify-content: center; padding: 12px 0; }
    body.sb-mini .sidebar-avatar { width: 40px; height: 40px; }
    /* Подпись пункта — голый текст после значка: прячем размером шрифта, значок со своим размером остаётся */
    body.sb-mini .sidebar-link { justify-content: center; gap: 0; padding: 10px 0; font-size: 0; }
    body.sb-mini .sidebar-section { margin-bottom: 4px; padding-top: 4px; border-top: 1px solid var(--wd-border); }
    body.sb-mini .sidebar-section:first-child { border-top: 0; }
    body.sb-mini .sidebar-collapse { justify-content: center; padding: 10px 0; }
    body.sb-mini .sidebar-footer { padding: 8px 0; }
    body.sb-mini .sidebar-logout-row { justify-content: center; }
    body.sb-mini .sidebar-logout-row .sidebar-link { padding: 10px 0; }

    /* 0.13 (A3): меню справа (настройка сотрудника, body.sb-right из Services/MenuPrefs): меню у правого края, шапка и
       содержимое отступают справа; «Свернуть» показывает стрелку в другую сторону (текст — в _Layout) */
    body.sb-right .sidebar { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--wd-border); }
    body.sb-right .topbar, body.sb-right .main-content { margin-left: 0; margin-right: var(--sb-w, 300px); }
    body.sb-right.sb-mini .topbar, body.sb-right.sb-mini .main-content { margin-left: 0; margin-right: var(--sb-mini-w, 76px); }
    body.sb-right .topbar-title { padding-left: 0; padding-right: 44px; }
    body.sb-right .fab-btn-wrap { right: auto; left: 32px; }
    body.sb-right .fab-menu-radial { right: auto; left: 60px; }
    body.sb-right .fab-menu-item-radial { flex-direction: row; right: auto; left: 0; }
    body.sb-right .fab-menu-radial.open .fab-menu-item-radial:nth-child(1) { transform: translate(-28px, 0) scale(1) !important; }
    body.sb-right .fab-menu-radial.open .fab-menu-item-radial:nth-child(2) { transform: translate(-28px, -66px) scale(1) !important; }
    body.sb-right .fab-menu-radial.open .fab-menu-item-radial:nth-child(3) { transform: translate(-28px, -132px) scale(1) !important; }
    body.sb-right .fab-menu-radial.open .fab-menu-item-radial:nth-child(4) { transform: translate(-28px, -198px) scale(1) !important; }

    /* 0.13 (A2): свёрнутое меню в два столбца значков (body.sb-cols2) — шире, пункты раздела сеткой 2×N */
    body.sb-mini.sb-cols2 .sidebar { width: var(--sb-mini2-w, 124px); }
    body.sb-mini.sb-cols2 .topbar, body.sb-mini.sb-cols2 .main-content { margin-left: var(--sb-mini2-w, 124px); }
    body.sb-right.sb-mini.sb-cols2 .topbar, body.sb-right.sb-mini.sb-cols2 .main-content { margin-left: 0; margin-right: var(--sb-mini2-w, 124px); }
    body.sb-mini.sb-cols2 .sidebar-section { display: grid; grid-template-columns: 1fr 1fr; }
    body.sb-mini.sb-cols2 .sidebar-section > .sidebar-section-title { grid-column: 1 / -1; }
    body.sb-mini.sb-cols2 .sidebar-link { padding: 9px 0; }
}
@media (max-width: 991.98px) { .sidebar-collapse { display: none; } }

/* ===== 0.13 (A5): поведение и анимация бокового меню — настройка сотрудника (Services/MenuPrefs → классы body) =====
   Анимация задаётся переменными: открытие (--sb-open-*), закрытие (--sb-close-*), сворачивание до значков (--sb-size-*).
   «Пружина» — по умолчанию: разгон, быстрая остановка с перелётом за край и возвратом; «плавно» — expo-out без перелёта;
   «резко» — быстро с коротким доездом; «стекло» — проявление из размытия без сдвига; «без» — всё мгновенно (так же в
   облегчённом режиме и при «уменьшить движение» в системе). Пункты меню догоняют панель по очереди (stagger). */
/* 0.13 (A5, блок 7): длительности анимации — базовые (--sb-*-base) × скорость сотрудника (--sb-speed: быстро 0.6,
   обычно 1, медленно 1.6; классы body.sb-speed-fast / -slow). Ширина меню на ПК — --sb-w (раскрытое), --sb-mini-w и
   --sb-mini2-w (свёрнутое в 1 и 2 столбца): узкое / обычное / широкое (body.sb-w-narrow / -wide) */
body { --sb-open-ease: cubic-bezier(.22, 1.5, .36, 1); --sb-open-base: .52s;
       --sb-close-ease: cubic-bezier(.55, -.25, .8, .45); --sb-close-base: .36s;
       --sb-size-ease: cubic-bezier(.22, 1.35, .36, 1); --sb-size-base: .45s; --sb-stagger-base: 22ms;
       --sb-speed: 1;
       --sb-open-dur: calc(var(--sb-open-base) * var(--sb-speed)); --sb-close-dur: calc(var(--sb-close-base) * var(--sb-speed));
       --sb-size-dur: calc(var(--sb-size-base) * var(--sb-speed)); --sb-stagger: calc(var(--sb-stagger-base) * var(--sb-speed));
       --sb-w: 300px; --sb-mini-w: 76px; --sb-mini2-w: 124px; }
body.sb-speed-fast { --sb-speed: .6; }
body.sb-speed-slow { --sb-speed: 1.6; }
body.sb-w-narrow { --sb-w: 248px; --sb-mini-w: 68px; --sb-mini2-w: 112px; }
body.sb-w-wide { --sb-w: 352px; --sb-mini-w: 84px; --sb-mini2-w: 140px; }
body.sb-anim-smooth { --sb-open-ease: cubic-bezier(.16, 1, .3, 1); --sb-open-base: .42s; --sb-close-ease: cubic-bezier(.7, 0, .84, 0); --sb-close-base: .3s;
                      --sb-size-ease: cubic-bezier(.16, 1, .3, 1); --sb-size-base: .36s; --sb-stagger-base: 18ms; }
body.sb-anim-snap { --sb-open-ease: cubic-bezier(.2, 1.3, .3, 1); --sb-open-base: .3s; --sb-close-ease: cubic-bezier(.5, 0, 1, .6); --sb-close-base: .2s;
                    --sb-size-ease: cubic-bezier(.2, 1.2, .3, 1); --sb-size-base: .26s; --sb-stagger-base: 12ms; }
body.sb-anim-glass { --sb-open-ease: cubic-bezier(.2, .8, .2, 1); --sb-open-base: .4s; --sb-close-ease: cubic-bezier(.4, 0, .9, .6); --sb-close-base: .28s;
                     --sb-size-ease: cubic-bezier(.2, .8, .2, 1); --sb-size-base: .32s; --sb-stagger-base: 16ms; }
body.sb-anim-none, html.wd-lite body { --sb-open-dur: 0s; --sb-close-dur: 0s; --sb-size-dur: 0s; --sb-stagger: 0ms; }
@media (prefers-reduced-motion: reduce) { body { --sb-open-dur: 0s; --sb-close-dur: 0s; --sb-size-dur: 0s; --sb-stagger: 0ms; } }

/* Выдвижная панель (телефон; на ПК — в скрытых режимах): закрывается с ускорением, открывается с характером */
.sidebar { transition: transform var(--sb-close-dur) var(--sb-close-ease); }
.sidebar.open { transition: transform var(--sb-open-dur) var(--sb-open-ease); }
.sidebar-overlay { transition: opacity var(--sb-open-dur) ease; }
/* Правки 16.10: пункты «выкидываются» сильнее панели — дальше старт (--sb-item-from) и свой перелёт (--sb-item-ease) */
body { --sb-item-from: 56px; --sb-item-ease: cubic-bezier(.18, 2.1, .32, 1); }
body.sb-anim-smooth { --sb-item-from: 28px; --sb-item-ease: cubic-bezier(.16, 1, .3, 1); }
body.sb-anim-snap { --sb-item-from: 40px; --sb-item-ease: cubic-bezier(.2, 1.7, .3, 1); }
body.sb-anim-glass { --sb-item-from: 16px; --sb-item-ease: cubic-bezier(.2, .8, .2, 1); }
.sidebar.open .sidebar-nav .sidebar-link { animation: sbItemIn var(--sb-open-dur) var(--sb-item-ease) both; animation-delay: calc(var(--i, 0) * var(--sb-stagger)); }
body.sb-right .sidebar.open .sidebar-nav .sidebar-link { animation-name: sbItemInRight; }
@keyframes sbItemIn { from { opacity: 0; transform: translate3d(calc(-1 * var(--sb-item-from)), 0, 0); } to { opacity: 1; transform: none; } }
@keyframes sbItemInRight { from { opacity: 0; transform: translate3d(var(--sb-item-from), 0, 0); } to { opacity: 1; transform: none; } }
/* Правки 16.10 (FPS): пока панель едет (body.sb-moving, js/site.js) — двигается только transform/opacity, без стекла,
   размытия подложки и тяжёлой тени: плотный фон того же цвета; стекло возвращается после остановки */
body.sb-moving .sidebar { will-change: transform; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    background: var(--wd-surface-solid, var(--wd-surface)) !important; box-shadow: 0 0 24px rgba(0, 0, 0, .18) !important; }
body.sb-moving .sidebar-overlay { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; will-change: opacity; }
body.sb-moving .sidebar .sidebar-nav .sidebar-link { will-change: transform, opacity; }
/* Запас панели за краем экрана: при перелёте пружины панель уходит за свою точку, и у края мелькал зазор со страницей.
   Тень-«полка» того же цвета продолжает панель за край (тень не обрезается прокруткой панели и не меняет размеры) */
.sidebar { --sb-bleed: 72px; }
/* В покое полоса за краем экрана и не видна — нужна только в движении (перелёт бывает только тогда).
   Владелец 17.10: и при уходе панели тоже — «пружина» перед отлётом чуть подаёт панель вперёд (замах), и у края
   мелькал зазор, потому что полка была только у открытой панели */
body.sb-moving .sidebar { box-shadow: calc(-1 * var(--sb-bleed)) 0 0 0 var(--wd-surface-solid, var(--wd-surface)) !important; }
body.sb-moving.sb-right .sidebar { box-shadow: var(--sb-bleed) 0 0 0 var(--wd-surface-solid, var(--wd-surface)) !important; }
/* «Стекло»: панель не выезжает, а проявляется из размытия с лёгким масштабом */
@media (max-width: 991.98px) {
    body.sb-anim-glass .sidebar { transform: none; opacity: 0; filter: blur(14px); scale: .96; pointer-events: none;
        transition: opacity var(--sb-close-dur) var(--sb-close-ease), filter var(--sb-close-dur) var(--sb-close-ease), scale var(--sb-close-dur) var(--sb-close-ease); }
    body.sb-anim-glass .sidebar.open { opacity: 1; filter: none; scale: 1; pointer-events: auto;
        transition: opacity var(--sb-open-dur) var(--sb-open-ease), filter var(--sb-open-dur) var(--sb-open-ease), scale var(--sb-open-dur) var(--sb-open-ease); }
}
@media (min-width: 992px) {
    /* Скрытое меню (при наведении / по кнопке): страница во всю ширину, панель выезжает поверх неё с тенью и лёгким затемнением */
    body.sb-hidden .topbar { margin-left: 0 !important; margin-right: 0 !important; }
    /* Блок 7: страница с ограниченной шириной (Ещё, отчёты…) — по центру, как без меню, а не прижата влево с зазором справа */
    body.sb-hidden .main-content { margin-left: auto !important; margin-right: auto !important; }
    body.sb-hidden .topbar-menu-btn { display: flex; }
    body.sb-hidden .topbar-title { padding-left: 0; padding-right: 0; }
    body.sb-hidden .sidebar { width: var(--sb-w, 300px); transform: translate3d(-100%, 0, 0) !important; box-shadow: 0 0 60px rgba(0, 0, 0, .28); border-right: 0; border-left: 0;
        transition: transform var(--sb-close-dur) var(--sb-close-ease); }
    body.sb-hidden.sb-right .sidebar { transform: translate3d(100%, 0, 0) !important; }
    body.sb-hidden .sidebar.open { transform: none !important; transition: transform var(--sb-open-dur) var(--sb-open-ease); }
    body.sb-hidden .sidebar-overlay { display: block !important; background: rgba(15, 23, 42, .16); backdrop-filter: none; }
    body.sb-hover .sidebar-overlay { pointer-events: none !important; }
    body.sb-hidden .sidebar-collapse { display: none; }
    body.sb-hidden.sb-anim-glass .sidebar { transform: none !important; opacity: 0; filter: blur(14px); scale: .96; pointer-events: none;
        transition: opacity var(--sb-close-dur) var(--sb-close-ease), filter var(--sb-close-dur) var(--sb-close-ease), scale var(--sb-close-dur) var(--sb-close-ease); }
    body.sb-hidden.sb-anim-glass .sidebar.open { opacity: 1; filter: none; scale: 1; pointer-events: auto;
        transition: opacity var(--sb-open-dur) var(--sb-open-ease), filter var(--sb-open-dur) var(--sb-open-ease), scale var(--sb-open-dur) var(--sb-open-ease); }
    /* Горячая полоска у края экрана — «при наведении» */
    .sidebar-hot { display: none; position: fixed; top: 0; bottom: 0; left: 0; width: 10px; z-index: 1299; }
    body.sb-hover .sidebar-hot { display: block; }
    body.sb-hover.sb-right .sidebar-hot { left: auto; right: 0; }
}

/* Аккаунт без мойки (профиль «Вы пока не подключены»): меню приложения ему не нужно — ни сбоку, ни кнопкой */
body.no-shell .sidebar, body.no-shell .sidebar-overlay, body.no-shell #menuBtn,
body.no-shell .bottomnav, body.no-shell .fab-btn-wrap, body.no-shell .fab-menu-radial { display: none !important; }
@media (min-width: 992px) {
    body.no-shell .topbar, body.no-shell .main-content { margin-left: 0; }
    body.no-shell .main-content { margin-left: auto; margin-right: auto; max-width: 760px; }
}

/* ---------- RESPONSIVE ---------- */
@media (min-width: 768px) {
    .stats-grid { grid-template-columns: repeat(4, 1fr); }
    .main-content { padding-top: 24px; }
    .greeting-title { font-size: 30px; }
}
@media (max-width: 480px) { .quick-actions { gap: 8px; } }

/* ---------- ПК: приложение — колонка по центру ----------
   WashDesk в первую очередь для телефона. На широком экране контент, шапка и нижнее
   меню ужимаются до ширины --wd-app-w, а не растягиваются на весь монитор
   (раньше для нормальных пропорций приходилось ставить масштаб браузера 175%). */
@media (min-width: 768px) {
    :root { --wd-app-w: 680px; }
    .main-content { max-width: var(--wd-app-w); padding-left: 16px; padding-right: 16px; }
    .topbar { padding: 0 max(16px, calc((100% - var(--wd-app-w)) / 2 + 16px)); }
    .bottomnav { left: 50%; right: auto; width: var(--wd-app-w); transform: translateX(-50%); border: 1px solid var(--wd-border); border-bottom: none; border-radius: 18px 18px 0 0; }
}
/* 0.12 (Н-49): ПК — страницы во всю ширину, поэтому шапка тоже: колокольчик у правого края, название — по центру
   (слева кнопки меню нет — отступ той же ширины, что колокольчик) */
@media (min-width: 992px) {
    .topbar { padding: 0 16px; }
    .topbar-title { padding-left: 44px; }
    body.is-bare .topbar-title { padding-left: 0; }
}

/* ---------- ПК (закреплённый сайдбар, ≥992px) — главная в 3 колонки, не узкой телефонной колонкой -----------
   680px выше — специально для телефона/планшета без сайдбара; с сайдбаром места больше, грех не занять. */
@media (min-width: 992px) {
    /* Обычные страницы (формы, списки) — до 960px, чтобы поля не растягивались на весь монитор;
       главная — на всю ширину справа от меню (с потолком для сверхшироких экранов). */
    .main-content { max-width: 960px; padding-left: 24px; padding-right: 24px; }

    /* Нижнее меню на ПК не нужно: те же разделы — в закреплённом боковом меню (docs/DESKTOP.md).
       Кнопка «+» остаётся — в правом нижнем углу, меню из неё раскрывается столбиком вверх. */
    .bottomnav { display: none !important; }
    main.main-content { padding-bottom: 110px !important; }
    .fab-btn-wrap { left: auto; right: 32px; bottom: 28px !important; transform: none; width: auto; height: auto; }
    .fab-btn-wrap .fab-label { display: none; }
    .nav-fab { width: 56px; height: 56px; margin-top: 0; }
    .fab-menu-radial { left: auto; right: 60px; bottom: 112px !important; }
    .fab-menu-item-radial { flex-direction: row-reverse; gap: 10px; transform: translate(0, 0) scale(.3); }
    .fab-menu-radial.open .fab-menu-item-radial:nth-child(n) { transition-delay: 0s; }
    .fab-menu-radial.open .fab-menu-item-radial:nth-child(1) { transform: translate(28px, 0) scale(1) !important; }
    .fab-menu-radial.open .fab-menu-item-radial:nth-child(2) { transform: translate(28px, -66px) scale(1) !important; transition-delay: .04s; }
    .fab-menu-radial.open .fab-menu-item-radial:nth-child(3) { transform: translate(28px, -132px) scale(1) !important; transition-delay: .08s; }
    .fab-menu-radial.open .fab-menu-item-radial:nth-child(4) { transform: translate(28px, -198px) scale(1) !important; transition-delay: .12s; }
    .fab-menu-item-radial { left: auto; right: 0; }
}

/* ---------- Клиенты (Pages/Clients/Index), пункт 23 ----------
   Телефон: карточки. ПК: те же строки — таблицей (у каждой строки одна сетка колонок, обёртки — display: contents). */
.clients-sort { margin: 4px 0 12px; }
.clients-head, .cc-col { display: none; }
@media (min-width: 992px) {
    /* 0.12 (ревью 15.10): во всю ширину — таблица без пустого зазора справа */
    main.main-content:has(.clients-list) { max-width: none; }
    .clients-head, .clients-list .client-card {
        display: grid; column-gap: 14px; align-items: center;
        grid-template-columns: 40px minmax(170px, 1.4fr) 128px minmax(120px, 1fr) 56px 104px 76px 150px 12px;
    }
    /* 0.13 (C3): ширина колонки «Клиент» — по формату имён на ПК (Ещё → Главная → Имена; data-names на списке и
       шапке): короткому имени — узкая, полному — широкая; номера и машина делят остальное место поровну */
    .clients-head[data-names], .clients-list[data-names] .client-card { grid-template-columns: 40px var(--cc-name, 200px) minmax(128px, 1fr) minmax(120px, 1fr) 56px 104px 76px 150px 12px; }
    .clients-head[data-names="short"], .clients-list[data-names="short"] { --cc-name: 150px; }
    .clients-head[data-names="lfm"], .clients-list[data-names="lfm"] { --cc-name: 200px; }
    .clients-head[data-names="lf"], .clients-list[data-names="lf"], .clients-head[data-names="fl"], .clients-list[data-names="fl"] { --cc-name: 190px; }
    .clients-head[data-names="full"], .clients-list[data-names="full"] { --cc-name: 270px; }
    .clients-head { padding: 0 14px 6px; font-size: 12px; font-weight: 600; color: var(--wd-text-muted); text-transform: uppercase; letter-spacing: .04em; }
    .clients-list { background: var(--wd-surface); border: 1px solid var(--wd-border); border-radius: var(--wd-radius); overflow: hidden; }
    .clients-list .client-card { margin: 0; padding: 8px 14px; border: 0; border-bottom: 1px solid var(--wd-border); border-radius: 0; background: transparent; }
    .clients-list .client-card:hover { background: var(--wd-surface-2); transform: none; box-shadow: none; }
    .clients-list .client-card-avatar { width: 36px; height: 36px; font-size: 13px; }
    .clients-list .client-card-body, .clients-list .client-card-meta { display: contents; }
    .clients-list .client-card > *, .clients-list .client-card-body > *, .clients-list .client-card-meta > * { grid-row: 1; min-width: 0; }
    .clients-list .client-card-avatar { grid-column: 1; }
    .clients-list .client-card-name { grid-column: 2; }
    .clients-list .client-card-plates { grid-column: 3; margin: 0; }
    .clients-list .cc-col { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .clients-list .cc-car { grid-column: 4; color: var(--wd-text-muted); }
    .clients-list .cc-count { grid-column: 5; }
    .clients-list .cc-spent { grid-column: 6; }
    .clients-list .cc-last { grid-column: 7; color: var(--wd-text-muted); }
    .clients-list .cc-washes { display: none; }
    .clients-list .cc-phone { grid-column: 8; font-size: 14px; color: var(--wd-text-muted); white-space: nowrap; }
    .clients-list .cc-phone::before { content: none; }
    .clients-list .client-card-arrow { grid-column: 9; }
    .clients-head .num, .clients-list .num { text-align: right; }
    .clients-list > .wd-more { border: 0; }
}

/* ---------- Смены (Pages/Shifts/Index), пункт 23: ПК — текущая смена слева, история справа ---------- */
@media (min-width: 992px) {
    main.main-content:has(.shifts-layout) { max-width: 1400px; }
    .shifts-layout { display: grid; grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); gap: 24px; align-items: start; }
    .shifts-now-col { position: sticky; top: calc(var(--wd-topbar-h) + 16px); }
    .shifts-history { margin-top: 0; }
    .shifts-history .shift-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; align-items: start; }
    .shifts-history .shift-card { margin: 0; }
}

/* ---------- Отчёты (Pages/Reports/Index) — ПК-раскладка в desktop-pages.css (0.11: блоки в порядке сотрудника) ---------- */

/* ---------- Записи: неделя календарём (Pages/Bookings, вкладка «Неделя»), пункт 23 ----------
   На телефоне сетка шире экрана — прокручивается сама сетка, а не страница. */
.cal-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.cal-scroll { overflow-x: auto; border: 1px solid var(--wd-border); border-radius: var(--wd-radius); background: var(--wd-surface); }
.cal { display: grid; grid-template-columns: 52px repeat(7, minmax(110px, 1fr)); min-width: 820px; }
.cal-corner, .cal-day-head { position: sticky; top: 0; z-index: 2; background: var(--wd-surface); border-bottom: 1px solid var(--wd-border); }
.cal-day-head { padding: 8px 10px; font-size: 13px; color: var(--wd-text-muted); border-left: 1px solid var(--wd-border); }
.cal-day-head b { color: var(--wd-text); font-size: 15px; margin-left: 4px; }
.cal-day-head.is-today b { color: #fff; background: var(--wd-primary); border-radius: 999px; padding: 1px 8px; }
.cal-hours { display: flex; flex-direction: column; }
.cal-hours span { height: var(--cal-hour); font-size: 11px; color: var(--wd-text-muted); text-align: right; padding: 2px 6px 0 0; }
.cal-col { position: relative; height: calc(var(--cal-hours) * var(--cal-hour)); border-left: 1px solid var(--wd-border);
    background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--cal-hour) - 1px), var(--wd-border) calc(var(--cal-hour) - 1px), var(--wd-border) var(--cal-hour)); }
.cal-col.is-today { background-color: color-mix(in srgb, var(--wd-primary) 5%, transparent); }
.cal-ev { position: absolute; left: 3px; right: 3px; overflow: hidden; display: flex; flex-direction: column; gap: 1px; padding: 3px 6px; border-radius: 8px;
    font-size: 12px; line-height: 1.25; text-decoration: none; color: var(--wd-text); background: var(--wd-primary-light); border-left: 3px solid var(--wd-primary); }
.cal-ev b { font-size: 12px; }
.cal-ev span, .cal-ev small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev small { color: var(--wd-text-muted); font-size: 11px; }
.cal-ev.is-requested { background: rgba(251, 191, 36, .18); border-left-color: #f59e0b; }
.cal-ev.is-arrived, .cal-ev.is-done { background: rgba(52, 211, 153, .16); border-left-color: #10b981; }
.cal-ev.is-noshow { background: rgba(248, 113, 113, .14); border-left-color: #ef4444; opacity: .75; }
@media (min-width: 992px) { main.main-content:has(.cal) { max-width: 1400px; } }

/* ---------- Главная (Pages/Index) ----------
   Телефон: одна колонка в прежнем порядке (панели разворачиваются в общий поток через display: contents).
   ПК: рабочий стол на всю высоту окна без прокрутки страницы — прокручиваются только панели. */
.home-panel-title { font-size: 14px; font-weight: 600; color: var(--wd-text-muted); text-transform: uppercase; letter-spacing: .06em; }
.home-panel-link { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--wd-primary); text-decoration: none; white-space: nowrap; }
.home-panel-empty { font-size: 13px; color: var(--wd-text-muted); line-height: 1.5; padding: 4px 2px; }
@media (max-width: 991.98px) {
    .home { display: flex; flex-direction: column; }
    .home-panels { display: contents; }
    /* 0.11: порядок блоков — из настройки главной (style="--m-order:N"); шапка, подсказки и сообщения — первыми (0) */
    .home > *, .home-panels > * { order: var(--m-order, 0); }
    .home-book-sec .home-book { margin-top: 0; }
    .home-shift-mob .shift-quick { margin: 0; }
    .home-desk { display: none !important; }
    .home-panel { margin-bottom: 20px; }
    .home-panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
}
@media (min-width: 992px) {
    .home-mob { display: none !important; }
    /* На всю высоту окна; если окно низкое — панели не сжимаются в щель (min-height), страница прокручивается */
    main.main-content:has(.home) { max-width: 2200px; height: calc(100dvh - var(--wd-topbar-h)); padding: 22px 28px 24px !important;
        display: flex; flex-direction: column; overflow-y: auto; }
    body:has(.home) .fab-btn-wrap, body:has(.home) .fab-menu-radial { display: none !important; }   /* те же действия — на панели кнопок */
    .home { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 16px; padding: 0; }
    .home > .wd-tips { margin-bottom: 0; }
    .home-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
    .home-head .greeting { margin: 0; }
    .home-cmd { display: flex; gap: 8px; flex-wrap: wrap; }
    .home-cmd-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px;
        border: 1px solid var(--wd-border); background: var(--wd-surface); color: var(--wd-text); font-size: 14px; font-weight: 600;
        text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, transform .1s; }
    .home-cmd-btn:hover { border-color: var(--wd-primary); color: var(--wd-text); }
    .home-cmd-btn:active { transform: scale(.97); }
    .home-cmd-btn.is-primary { background: var(--wd-primary); border-color: var(--wd-primary); color: #fff; }
    .home-cmd-btn.is-primary:hover { background: var(--wd-primary-dark); color: #fff; }
    .home-cmd-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--wd-danger); color: #fff;
        font-size: 11px; line-height: 20px; text-align: center; }


    /* 0.11: панели — по порядку настройки главной (home-pos-N), их 1–3 (n-N); последняя по порядку — самая широкая.
       Средняя ширина (ноутбук), три панели: первые две одна над другой слева, третья справа на всю высоту.
       flex-basis 0: высота — от окна, а не от длины списка моек (иначе прокручивалась вся страница) */
    /* 0.12 (Н-7): две панели — смена узкой колонкой, машины в работе (строками) — всё остальное место */
    /* 0.12 (Н-51): главная не растёт — панели до низа окна, «В работе» прокручивается внутри своей рамки */
    .home-panels { flex: 1 1 0; min-height: 300px; display: grid; gap: 16px; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr); }
    .home-panels.n-1 { grid-template-columns: minmax(0, 1fr); }
    .home-panels.n-2 .home-pos-1 { grid-column: 1; grid-row: 1; }
    .home-panels.n-2 .home-pos-2 { grid-column: 2; grid-row: 1; }
    .home-panels.n-3 { min-height: 620px; grid-template-rows: minmax(300px, 1.3fr) minmax(200px, 1fr); }
    .home-panels.n-3 .home-pos-1 { grid-column: 1; grid-row: 1; }
    .home-panels.n-3 .home-pos-2 { grid-column: 1; grid-row: 2; }
    .home-panels.n-3 .home-pos-3 { grid-column: 2; grid-row: 1 / span 2; }
    /* 0.12 (С-21): низкое окно (ноутбук 1366×768, ~700 px по высоте) — панели не держат высоту 460/620,
       а ужимаются до окна: прокручивается содержимое панелей, а не вся страница */
    @media (max-height: 820px) {
        main.main-content:has(.home) { padding: 14px 24px 16px !important; }
        .home { gap: 12px; }
        .home-panels, .home-panels.n-3 { min-height: 240px; }
        .home-panels.n-3 { grid-template-rows: minmax(120px, 1.3fr) minmax(100px, 1fr); }
    }
    .home-panel-title { white-space: nowrap; }
    .home-panel-foot .btn { white-space: nowrap; }
    .home-panel { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--wd-border); border-radius: var(--wd-radius);
        background: var(--wd-surface); overflow: hidden; }
    .home-panel-head { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 16px; border-bottom: 1px solid var(--wd-border); }
    .home-panel-title { font-size: 13px; color: var(--wd-text); }
    .home-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; }
    /* Кнопки смены делят ширину и переносятся, а не уезжают за левый край узкой панели */
    .home-panel-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--wd-border); }
    .home-panel-foot .btn { flex: 1 1 auto; min-width: 0; }
    .home-shift-since { font-size: 12px; color: var(--wd-text-muted); margin-bottom: 8px; }
    .home-shift-big { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; }
    .home-shift-big > div { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 10px; background: var(--wd-surface-2); }
    .home-shift-big b { font-size: 20px; font-variant-numeric: tabular-nums; }
    .home-shift-big small { font-size: 12px; color: var(--wd-text-muted); }
    .home-shift .shift-lines { font-size: 14px; gap: 4px; }
    .home-work .book-card { border: 1px solid var(--wd-border); border-radius: 12px; margin-bottom: 8px; }
}

/* 0.12 (Н-9): карточка выручки — ссылка на отчёт и переключатель счетов ◀ ▶ (кнопки не внутри ссылки) */
.stat-card2.home-rev { display: flex; flex-direction: column; padding: 0; }   /* components.css подключается позже — +класс */
.home-rev-link { position: relative; display: block; flex: 1; padding: 12px 14px 8px; color: inherit; text-decoration: none; border-radius: inherit; }
.home-rev-link:hover { color: inherit; }
.home-rev-link:hover .stat-arrow { opacity: 1; }
/* 0.12 (Н-8): новые клиенты — неделя и месяц мелкой строкой */
.stat-sub2 { margin-top: 2px; font-size: 11px; color: var(--wd-text-muted); white-space: nowrap; }
.stat-sub2 b { font-weight: 600; color: var(--wd-text); }

/* 0.12 (Н-62): номера клиента в одну строку — лишние прячет js/plates-more.js, «+N» — окошко со всеми машинами */
.client-card-plates { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.client-card-plates .pl-i { flex: none; display: inline-flex; }
.plate-more { flex: none; cursor: pointer; }
.bk-pop-row .plate-ru { flex: none; }
/* 0.12 (Н-19): имя — короткое на телефоне, полное на ПК (PersonNames.Html) */
.nm-d { display: none; }
@media (min-width: 992px) {
    .nm-m { display: none; }
    .nm-d { display: inline; }
}

/* 0.12 (Н-1б): выбор клиента — «Новый» и «Разовый» под поиском, две кнопки в ряд */
.sc-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.sc-quick .btn { padding: 10px 8px; font-weight: 600; }
@media (min-width: 992px) { .sc-quick { grid-template-columns: max-content max-content; } }

/* 0.12 (Н-1а): черновики чеков над машинами в работе — компактный свёртываемый список */
.home-drafts { margin-bottom: 10px; border: 1px dashed var(--wd-border); border-radius: 12px; padding: 6px 10px; background: var(--wd-surface); }
.home-drafts > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--wd-text-muted); padding: 2px 0; }
.home-draft-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--wd-border); }
.home-draft-row:first-of-type { border-top: 0; }
.home-draft-row form { margin: 0; }
.home-draft-link { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; color: var(--wd-text); text-decoration: none; }
.home-draft-link:hover { color: var(--wd-primary); }
.home-draft-who { font-weight: 600; font-size: 14px; }
.home-draft-time { font-size: 12px; color: var(--wd-text-muted); }

/* 0.12 (Н-7, Н-2): машины в работе. Узкая панель (телефон) — карточки; широкая (ПК) — плоская таблица строк.
   Решает ширина панели (container query), а не экрана: на ноутбуке с тремя панелями строки тоже не ломаются. */
.home-work .home-panel-body { container: wk / inline-size; }
.wk-list { display: flex; flex-direction: column; gap: 8px; }
/* Карточка: этап и кнопки сверху, машина и оплата, клиент, услуги, исполнители */
.wk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "stage act" "car pay" "client client" "svc svc" "who who";
    align-items: center; gap: 4px 10px; padding: 10px 12px; border: 1px solid var(--wd-border);
    border-radius: 12px; background: var(--wd-surface); }
.wk-list.act-left .wk-row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "act stage" "pay car" "client client" "svc svc" "who who"; }
.wk-row.is-ready { border-color: color-mix(in srgb, var(--wd-success) 55%, var(--wd-border)); }
.wk-row > * { min-width: 0; }
.wk-stage { grid-area: stage; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--wd-text-muted); }
/* Ревью 16.10: где стоит машина — компактный значок после времени (подсказка при наведении — .wk-pop) */
/* 0.13 (B5): место — только значок, подробности в окошке .wk-pop.is-place (история сверху мельче, сейчас крупно, план снизу) */
.wk-place { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 26px; height: 22px; padding: 0;
    border-radius: 999px; border: 1px solid var(--wd-border); background: var(--wd-surface-2); color: var(--wd-text); font-size: 13px; line-height: 1;
    cursor: help; transition: transform .18s cubic-bezier(.22, 1.4, .36, 1), box-shadow .18s ease; }
.wk-place:hover, .wk-place:focus-visible { transform: scale(1.15); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wd-primary) 22%, transparent); outline: none; }
.wk-pop.is-place { max-width: 300px; }
.wk-pop.is-place .wk-pl-hist { font-size: 11px; color: var(--wd-text-muted); margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--wd-border); }
.wk-pop.is-place .wk-pl-hist-row, .wk-pop.is-place .wk-pl-next-row { display: flex; gap: 8px; align-items: baseline; }
.wk-pop.is-place .wk-pl-hist-row b { flex: none; width: 38px; font-weight: 600; color: var(--wd-text); }
.wk-pop.is-place .wk-pl-now { display: flex; flex-direction: column; gap: 2px; }
.wk-pop.is-place .wk-pl-now b { font-size: 17px; font-weight: 700; color: var(--wd-text); }
.wk-pop.is-place .wk-pl-now span { font-size: 12px; color: var(--wd-text-muted); }
.wk-pop.is-place .wk-pl-next { font-size: 12px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--wd-border); }
.wk-pop.is-place .wk-pl-next-row b { flex: none; width: 48px; font-weight: 600; color: var(--wd-text); }
.wk-car { grid-area: car; display: inline-flex; align-items: center; gap: 8px; color: var(--wd-text); text-decoration: none; font-weight: 600; }
.wk-car:hover { color: var(--wd-primary); }
.wk-car > :first-child { flex: none; }   /* номер не сжимается — обрезается модель */
.wk-model { font-size: 14px; }
.wk-client { grid-area: client; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 14px; }
.wk-name { font-weight: 600; }
.wk-phone { color: var(--wd-primary); text-decoration: none; white-space: nowrap; font-size: 13px; }
.wk-svc { grid-area: svc; font-size: 13px; color: var(--wd-text-muted); }
.wk-who { grid-area: who; font-size: 13px; color: var(--wd-text-muted); }
.wk-none { font-style: italic; opacity: .8; }
.wk-pay { grid-area: pay; justify-self: end; font-size: 13px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wk-list.act-left .wk-pay { justify-self: start; }
.wk-pay.is-unpaid { color: var(--wd-warning); }
.wk-pay.is-paid { color: var(--wd-success); }
.wk-act { grid-area: act; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; justify-content: flex-end; }
.wk-act form { margin: 0; }
.wk-more { min-width: 34px; font-weight: 700; letter-spacing: 1px; }
/* 0.12 (Н-46): ПК — таблица: строка заказа в одну линию, столбцы по содержимому (общая сетка — subgrid), длинное
   обрезается «…» и видно целиком при наведении на строку */
@container wk (min-width: 600px) {
    .wk-list { display: grid; gap: 0; border: 1px solid var(--wd-border); border-radius: 12px; overflow: hidden;
        grid-template-columns: max-content minmax(110px, max-content) minmax(130px, max-content) minmax(0, 2fr) minmax(0, 1fr) max-content max-content; }
    .wk-list.act-left { grid-template-columns: max-content max-content minmax(110px, max-content) minmax(130px, max-content) minmax(0, 2fr) minmax(0, 1fr) max-content; }
    .wk-car { max-width: 240px; }
    .wk-client { max-width: 300px; }
    .wk-row, .wk-list.act-left .wk-row { grid-column: 1 / -1; grid-template-columns: subgrid; grid-template-areas: none;
        column-gap: 14px; padding: 6px 12px; border: 0; border-bottom: 1px solid var(--wd-border); border-radius: 0; background: transparent; }
    .wk-row > * { grid-area: auto; }
    .wk-list.act-left .wk-act { order: -1; }
    .wk-row:last-child { border-bottom: 0; }
    .wk-row:hover { background: var(--wd-surface-2); }
    .wk-row.is-ready { background: color-mix(in srgb, var(--wd-success) 7%, transparent); }
    .wk-stage { flex-wrap: nowrap; white-space: nowrap; }
    .wk-car { overflow: hidden; }
    .wk-model { font-size: 13px; font-weight: 500; color: var(--wd-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
    .wk-client { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .wk-phone { margin-left: 8px; }
    .wk-svc, .wk-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .wk-pay, .wk-list.act-left .wk-pay { justify-self: end; text-align: right; }
    .wk-pay-note { display: none; }
    .wk-row .is-cut { cursor: help; }
}
/* Средняя ширина панели (ноутбук): без столбца исполнителей и «клиент ответил» — строка всё равно в одну линию */
@container wk (min-width: 600px) and (max-width: 899px) {
    .wk-list { grid-template-columns: max-content minmax(90px, max-content) minmax(110px, max-content) minmax(0, 1fr) max-content max-content; }
    .wk-list.act-left { grid-template-columns: max-content max-content minmax(90px, max-content) minmax(110px, max-content) minmax(0, 1fr) max-content; }
    .wk-who, .wk-seen { display: none !important; }
    /* Блок 7: модель здесь обрезалась до одной буквы («С309ТХ Н») — номера хватает, модель и услуги — в предпросмотре (B7) */
    .wk-model { display: none; }
    .wk-car { max-width: 170px; }
    .wk-client { max-width: 200px; }
}
/* 0.13 (G3): «Открыть» из помощи — то, о чём читали, три раза мягко пульсирует рамкой и возвращается к обычному виду */
.wd-hl-pulse { position: relative; z-index: 2; border-radius: 10px; outline: 2px solid var(--wd-primary); outline-offset: 3px;
    animation: wdHlPulse .9s ease-in-out 3; }
@keyframes wdHlPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wd-primary) 45%, transparent); }
    50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--wd-primary) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .wd-hl-pulse { animation: none; } }

/* 0.13 (B7): предпросмотр заказа из «В работе» — окошко по центру (ПК), у строки (режим «при наведении») или шторка
   снизу (телефон); кнопки внизу — копии кнопок строки. Стекло — glass.css (.wk-prev). Выше бокового меню (1300) и
   шапки — затемнение закрывает всю страницу; ниже окон подтверждения и выбора (5000), которые открывают кнопки окошка */
.wk-list[data-preview="click"] .wk-row, .wk-list[data-preview="hover"] .wk-row { cursor: pointer; }
.wk-row:focus-visible { outline: 2px solid var(--wd-primary); outline-offset: -2px; }
.wk-prev-back { position: fixed; inset: 0; z-index: 1390; background: rgba(2, 6, 23, .35); opacity: 0; transition: opacity .18s ease; }
.wk-prev-back.is-on { opacity: 1; }
.wk-prev { position: fixed; z-index: 1400; left: 50%; top: 50%; width: min(560px, calc(100vw - 24px)); max-height: min(86vh, 760px);
    display: flex; flex-direction: column; padding: 14px 16px 12px; border-radius: 18px; border: 1px solid var(--wd-border);
    background: var(--wd-surface); color: var(--wd-text); box-shadow: 0 18px 50px rgba(0, 0, 0, .3); outline: none;
    opacity: 0; transform: translate(-50%, -50%) scale(.96); transition: opacity .18s ease, transform .22s cubic-bezier(.22, 1.3, .36, 1); }
.wk-prev.is-on { opacity: 1; transform: translate(-50%, -50%); }
/* display: flex выше перебил бы атрибут hidden — невидимое окошко ловило бы нажатия */
.wk-prev[hidden], .wk-prev-back[hidden] { display: none; }
.wk-prev.is-anchored { left: 0; top: 0; width: min(520px, calc(100vw - 16px)); max-height: min(80vh, 680px); transform: translateY(6px); }
.wk-prev.is-anchored.is-on { transform: none; }
.wk-prev-x { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 999px;
    background: var(--wd-surface-2); color: var(--wd-text-muted); font-size: 14px; line-height: 1; cursor: pointer; }
.wk-prev-x:hover, .wk-prev-x:focus-visible { color: var(--wd-text); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--wd-primary) 22%, transparent); }
.wk-prev-body { min-height: 0; overflow-y: auto; padding-right: 28px; overscroll-behavior: contain; }
.wk-prev-wait { padding: 22px 0; color: var(--wd-text-muted); text-align: center; font-size: 14px; }
.wk-prev-act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--wd-border); }
.wk-prev-act form { margin: 0; }
.wk-prev-act .btn { white-space: nowrap; }
.wk-prev-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.wk-prev-head .wash-card-veh { flex: none; }
.wk-prev-title { min-width: 0; }
.wk-prev-car { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; }
.wk-prev-model { font-weight: 500; color: var(--wd-text-muted); }
.wk-prev-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; font-size: 12px; color: var(--wd-text-muted); }
.wk-prev-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; font-size: 14px; margin-bottom: 10px; }
.wk-prev-cap { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--wd-text-muted); padding-top: 3px; }
.wk-prev-client { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.wk-prev-notes { flex-basis: 100%; font-size: 12px; color: var(--wd-text-muted); white-space: pre-line; }
.wk-prev-items { border-top: 1px solid var(--wd-border); }
.wk-prev-item { display: grid; grid-template-columns: minmax(0, 1fr) max-content max-content; gap: 10px; padding: 6px 0;
    border-bottom: 1px solid var(--wd-border); font-size: 14px; align-items: baseline; }
.wk-prev-item small { display: block; font-size: 12px; color: var(--wd-text-muted); }
.wk-prev-item-qty { color: var(--wd-text-muted); font-size: 13px; white-space: nowrap; }
.wk-prev-item-sum { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wk-prev-totals { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 2px 10px; padding-top: 8px; font-size: 14px; font-variant-numeric: tabular-nums; }
.wk-prev-totals .is-total { font-weight: 700; font-size: 15px; }
.wk-prev-totals .is-muted { color: var(--wd-text-muted); }
.wk-prev-pay { margin-top: 6px; font-size: 13px; font-weight: 600; }
.wk-prev-pay.is-unpaid { color: var(--wd-warning); }
.wk-prev-pay.is-paid { color: var(--wd-success); }
/* 0.13 (C7): заказ в долг — в предпросмотре и строке «В работе» (просроченный — .is-unpaid / pill-danger) */
.wk-prev-pay.is-debt { color: var(--wd-warning); }
.wk-debt { white-space: nowrap; margin-left: 4px; font-size: 11px; }
.wk-prev-row { margin-top: 8px; font-size: 14px; }
.wk-prev-row .wk-prev-cap { display: block; margin-bottom: 2px; }
.wk-prev-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.wk-prev-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--wd-border); }
.wk-prev-comment { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--wd-surface-2); font-size: 14px; white-space: pre-line; }
@media (max-width: 767.98px) {
    .wk-prev, .wk-prev.is-anchored { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; max-height: 88vh;
        border-radius: 18px 18px 0 0; padding-bottom: max(12px, env(safe-area-inset-bottom)); transform: translateY(100%); }
    .wk-prev.is-on, .wk-prev.is-anchored.is-on { transform: none; }
    .wk-prev-act .btn { flex: 1 1 45%; }
}
@media (prefers-reduced-motion: reduce) { .wk-prev, .wk-prev-back { transition: none; } }

/* Наведение на обрезанное «…» — всплывающая карточка с тем, что не поместилось (скрипт на главной) */
.wk-pop { position: fixed; z-index: var(--wd-z-popover); max-width: min(420px, calc(100vw - 16px)); padding: 10px 14px; border-radius: 14px;
    border: 1px solid var(--wd-border); color: var(--wd-text);
    font-size: 14px; line-height: 1.45; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; }
.wk-pop.is-on { opacity: 1; transform: none; }
.wk-pop-cap { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--wd-text-muted); }
.wk-pop ul { margin: 0; padding-left: 18px; }
.wk-pop li + li { margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .wk-pop { transition: none; } }
/* Меню «⋯» — переносится в body и ставится у кнопки (панель с прокруткой его бы обрезала) */
.wk-menu { position: fixed; z-index: 1085; min-width: 210px; max-width: calc(100vw - 16px); padding: 6px; border: 1px solid var(--wd-border);
    border-radius: 14px; }   /* фон и размытие — стекло из glass.css */
.wk-menu form { margin: 0; }
.wk-menu-item { display: block; width: 100%; padding: 8px 12px; border: 0; border-radius: 9px; background: none; color: var(--wd-text);
    font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap; }
.wk-menu-item:hover, .wk-menu-item:focus-visible { background: var(--wd-surface-2); color: var(--wd-text); outline: none; }
.wk-menu-item.is-danger { color: var(--wd-danger); }
.wk-menu-item.is-muted { color: var(--wd-text-muted); font-size: 13px; }
/* Окно «💸 Расход» на главной: форма затраты без своей карточки и заголовка (заголовок — у окна) */
.home-exp-body > .wd-form-card { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.home-exp-body .wd-form-title { display: none; }
.wk-menu-sep { height: 1px; margin: 4px 6px; background: var(--wd-border); }
/* 0.12 (Н-51): показатели главной — плашки в ряд: выручка (ср. чек рядом с суммой), записи, широкая «Оплата / Сферы /
   Счета» (вид — стрелками по краям), новые клиенты. Телефон — две колонки: выручка и разбивка на всю ширину. */
.home-kpi2 { display: flex; flex-wrap: wrap; gap: 8px; }
.home-kpi2 > .stat-card2 { flex: 1 1 calc(50% - 4px); min-width: 0; }
.home-kpi2 > .home-rev, .home-kpi2 > .home-brk { flex-basis: 100%; }
.home-rev-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
/* Правки 16.10 (A6), телефон: выручка и «Записи» — в одной строке (по половине), «Ср. чек» — под суммой; «Оплата /
   Сферы / Счета» и «Новые клиенты» сворачиваются одной кнопкой (is-folded — из MenuPrefs.Fold) */
@media (max-width: 991.98px) {
    .home-kpi2 > .home-rev { flex-basis: calc(50% - 4px); }
    .home-kpi2 .home-rev-row { flex-direction: column; align-items: flex-start; gap: 0; }
    .home-kpi2 .home-rev .stat-value2 { font-size: clamp(22px, 7vw, 30px); white-space: nowrap; }
    .home-kpi2 > .home-rev, .home-kpi2 > .home-bk { display: flex; flex-direction: column; }
    .home-kpi2 .home-rev-link { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
    .home-kpi2 .home-bk-today small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .home-fold-more { flex-basis: 100%; display: flex; align-items: center; gap: 8px; padding: 4px 6px; border: 0; background: none;
        color: var(--wd-text-muted); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
    .home-fold-ico { display: inline-block; transition: transform .2s ease; }
    .home-kpi2.is-folded .home-fold-ico { transform: rotate(-90deg); }
    .home-kpi2.is-folded > .home-brk, .home-kpi2.is-folded > .home-nc { display: none; }
}
.home-rev-avg { font-size: 13px; color: rgba(255, 255, 255, .85); white-space: nowrap; }
.home-rev-avg b { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.home-rev .hs-period { top: 8px; right: 8px; }
.greeting-note { color: var(--wd-text-muted); }

/* 0.12 (B15): Записи — «сегодня» крупно (и заявки); наведение — окошко с записями по дням */
.home-bk { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease; }
.home-bk:hover { color: inherit; transform: translateY(-2px); box-shadow: var(--wd-shadow-md); }
.home-bk:hover .stat-arrow { opacity: 1; }
.home-bk-title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 15px; font-weight: 600; color: var(--wd-text); }
.home-bk-req { padding: 1px 9px; border-radius: 999px; background: color-mix(in srgb, var(--wd-warning) 18%, transparent);
    color: var(--wd-warning); font-size: 14px; font-weight: 700; }
.home-bk-today { display: flex; flex-direction: column; }
.home-bk-today b { font-size: 30px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.home-bk-today small { font-size: 13px; color: var(--wd-text-muted); }
.hb-pop { min-width: 300px; max-width: min(460px, calc(100vw - 16px)); max-height: min(70vh, 560px); overflow-y: auto; }
/* 0.12 (B15): новые клиенты — число и мини-график по дням за 2 недели */
.home-nc { background: linear-gradient(135deg, color-mix(in srgb, #8b5cf6 16%, var(--wd-surface)), var(--wd-surface) 70%); }
.home-nc-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.home-nc-chart { flex: 1 1 auto; max-width: 160px; height: 44px; display: flex; align-items: flex-end; gap: 3px; }
.home-nc-chart i { flex: 1; min-height: 3px; border-radius: 3px 3px 1px 1px; background: color-mix(in srgb, #8b5cf6 45%, transparent); }
.home-nc-chart i.is-today { background: #8b5cf6; }
.bk-day + .bk-day { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--wd-border); }
.bk-day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 2px;
    font-size: 13px; font-weight: 700; }
.bk-day-head.is-day { text-transform: capitalize; }   /* дни недели в окошке записей — «Сегодня, Пт» */
.bk-day-head small { font-weight: 500; color: var(--wd-text-muted); text-transform: none; }
.bk-day.is-off .bk-day-head { color: var(--wd-text-muted); }
.bk-day.is-off .bk-day-head small { color: var(--wd-danger); }
/* Ревью 15.10: окошки подробностей плашек главной — строка «название … сумма доля», полоска доли, дни сеткой */
.hp-row { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; font-size: 13px; }
.hp-row > span { flex: 1; min-width: 0; }
.hp-row > b { flex: none; font-variant-numeric: tabular-nums; }
.hp-row small { color: var(--wd-text-muted); font-size: 12px; }
.hp-row > small { flex: none; min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; }
.hp-row .is-plus { color: var(--wd-success); }
.hp-row .is-minus { color: var(--wd-danger); }
.hp-sub { margin-top: -2px; font-size: 12px; color: var(--wd-text-muted); }
.hp-bar { height: 4px; margin: 2px 0 6px; border-radius: 4px; background: var(--wd-surface-2); overflow: hidden; }
.hp-bar > i { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: var(--wd-primary); }
.hp-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 4px; }
.hp-days > span { display: flex; flex-direction: column; align-items: center; padding: 4px 2px; border-radius: 8px;
    background: var(--wd-surface-2); font-size: 10px; color: var(--wd-text-muted); }
.hp-days > span b { font-size: 14px; color: var(--wd-text-muted); font-variant-numeric: tabular-nums; }
.hp-days > span.is-on { background: color-mix(in srgb, #8b5cf6 18%, var(--wd-surface-2)); }
.hp-days > span.is-on b { color: var(--wd-text); }
.hp-days > span.is-today { outline: 1.5px solid #8b5cf6; }
.hp-foot { margin-top: 8px; font-size: 12px; color: var(--wd-text-muted); }
.bk-pop-row { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; font-size: 13px; }
.bk-pop-row b { flex: none; min-width: 42px; font-variant-numeric: tabular-nums; }
.bk-pop-row span { flex: 1; min-width: 0; }
.bk-pop-row .pill { flex: none; }
.bk-pop-empty { font-size: 13px; color: var(--wd-text-muted); padding-top: 2px; }

/* Оплата / Сферы / Счета */
.stat-card2.home-brk { position: relative; display: flex; align-items: stretch; padding: 10px 14px; }
.home-brk-body { flex: 1; min-width: 0; }
.home-brk-title { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; font-size: 13px; font-weight: 600; }
.home-brk-title small { font-weight: 400; color: var(--wd-text-muted); }
.home-brk-dots { display: inline-flex; gap: 4px; margin-left: auto; align-self: center; }
.home-brk-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--wd-border-strong); }
.home-brk-dots i.is-on { background: var(--wd-primary); }
.home-brk-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 18px; max-height: 120px; overflow-y: auto; }
.home-brk-row { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 13px; }
.home-brk-row > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-brk-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.home-brk-row small { font-size: 11px; color: var(--wd-text-muted); white-space: nowrap; }
.home-brk-row .is-plus { color: var(--wd-success); }
.home-brk-row .is-minus { color: var(--wd-danger); }
.home-brk-empty { font-size: 13px; color: var(--wd-text-muted); }
.home-brk-arrow { flex: none; align-self: center; width: 26px; height: 26px; margin: 0 -4px; padding: 0; border: 0; border-radius: 50%;
    background: var(--wd-surface-2); color: var(--wd-text); font-size: 18px; line-height: 24px; cursor: pointer; }
.home-brk-arrow:hover { background: var(--wd-primary); color: #fff; }
.home-brk-arrow.is-prev { margin-right: 8px; }
.home-brk-arrow.is-next { margin-left: 8px; }
@media (max-width: 991.98px) {
    .home-stats { margin-bottom: 20px; }
}
@media (min-width: 992px) {
    /* 0.12 (B15): ПК — содержимое плашек по центру, шрифт крупнее; «Оплата» — каждая строка отдельно */
    .home-kpi2 > .stat-card2 { display: flex; flex-direction: column; justify-content: center; }
    .home-kpi2 > .home-brk { flex-direction: row; }
    .home-kpi2 .home-rev-link { flex: 1; display: flex; flex-direction: column; justify-content: center; }
    .home-kpi2 .home-rev .stat-value2 { font-size: 30px; }
    .home-kpi2 .home-rev-avg { font-size: 15px; }
    .home-kpi2 .home-rev .stat-label2 { font-size: 13px; }
    .home-brk-body { align-self: center; }
    .home-brk-title { font-size: 15px; }
    .home-brk-row { font-size: 15px; padding: 1px 0; }
    .home-brk-row small { font-size: 12px; }
    .home-nc .stat-value2 { font-size: 30px; }
    .home-nc .stat-label2, .home-nc .stat-sub2 { font-size: 13px; }
    /* Ревью 15.10: плашки в три яруса — сверху значок или заголовок (на линии шестерёнки), посередине крупное
       число, внизу подпись */
    .home-kpi2 > .stat-card2.home-bk, .home-kpi2 > .stat-card2.home-nc { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
    .home-kpi2 .home-nc-top { flex: 1; }
    .home-kpi2 .home-bk-title { flex-wrap: nowrap; white-space: nowrap; }
    .home-kpi2 .home-bk-today small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .home-kpi2 .home-rev-link { justify-content: space-between; gap: 6px; padding: 14px 16px; }
    .home-kpi2 .home-rev .stat-icon2 { height: 28px; display: flex; align-items: center; }
    .home-kpi2 .home-rev-row { flex-direction: column; align-items: flex-start; gap: 2px; }
    .home-kpi2 .home-rev .stat-value2 { font-size: 42px; line-height: 1.05; }
    .home-kpi2 .home-rev-avg { font-size: 16px; }
    .home-kpi2 .home-rev .stat-label2 { font-size: 14px; }
    .home-kpi2 .home-bk-title { min-height: 28px; font-size: 16px; }
    .home-kpi2 .home-bk-today { flex: 1; justify-content: space-between; }
    .home-kpi2 .home-bk-today b { font-size: 42px; line-height: 1.05; margin-block: auto; }
    .home-kpi2 .home-bk-today small { font-size: 14px; }
    .home-kpi2 .home-nc-label { line-height: 28px; margin: 0; font-size: 14px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .home-kpi2 .home-nc-top { align-items: center; }
    .home-kpi2 .home-nc .stat-value2 { font-size: 42px; line-height: 1.05; }
    .home-kpi2 .home-nc .stat-sub2 { font-size: 15px; }
    @media (max-width: 1599.98px) {
        .home-kpi2 .home-nc-label { font-size: 13px; }
        .home-kpi2 .home-bk-title { font-size: 15px; gap: 4px 6px; }
    }
    .home-kpi2 { flex-wrap: nowrap; gap: 12px; }
    .home-kpi2 > .stat-card2 { flex: 1 1 0; }
    .home-kpi2 > .home-rev { flex-basis: 0; }
    .home-kpi2 > .home-brk { flex: 2 1 0; }
    .home-kpi2 > .stat-card2:not(.home-rev):not(.home-brk) { padding: 12px 16px; }
    .home-kpi2 > .home-rev { flex-grow: 1.2; }
    /* Ревью 15.10: до 5 строк (сферы, способы оплаты) — без полосы прокрутки; плашки ряда растут вместе */
    .home-brk-rows { grid-template-columns: minmax(0, 1fr); max-height: 136px; scrollbar-width: thin; }
    .home-kpi2 > .stat-card2 { min-height: 168px; }
    .home-brk-rows.is-wide { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }   /* счета — длинные строки */
    .home-work .book-card.is-arrived { border-color: color-mix(in srgb, var(--wd-warning) 55%, var(--wd-border)); }
}

/* Широкий экран — три колонки рядом */
@media (min-width: 1440px) {
    .home-panels.n-3 { min-height: 460px; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.05fr) minmax(0, 1.25fr);
        grid-template-rows: minmax(0, 1fr); }
    .home-panels.n-3 .home-pos-1 { grid-column: 1; grid-row: 1; }
    .home-panels.n-3 .home-pos-2 { grid-column: 2; grid-row: 1; }
    .home-panels.n-3 .home-pos-3 { grid-column: 3; grid-row: 1; }
}

/* ---------- MODAL (dark): цвета — через --bs-modal-* в components.css ---------- */
body.dark .btn-close { filter: invert(1); }

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--wd-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--wd-text-subtle); }

/* ---------- СТРАНИЦЫ: заголовки, формы, алерты ---------- */
/* Шапка страницы — одна на всё приложение: [Назад] [Заголовок по центру] [действия].
   Боковые колонки равны (1fr), поэтому заголовок всегда строго по центру экрана,
   даже если справа кнопки, а слева пусто. Длинный заголовок обрезается многоточием.
   На корневых вкладках нижнего меню «Назад» нет. */
.page-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-bottom: 16px; min-height: 36px; }
.page-header > * { grid-row: 1; }
.page-header .btn { white-space: nowrap; }
.page-header > :first-child:not(.page-title) { grid-column: 1; justify-self: start; }
.page-header > .page-title ~ * { grid-column: 3; justify-self: end; }
/* 0.12 (Н-41): на телефоне второстепенная кнопка (Excel) — слева от заголовка, если слева пусто (нет «← Назад»),
   а не третьей справа. Разметка: класс ph-start у кнопки в правой группе */
@media (max-width: 991.98px) {
    .page-header:has(> .page-title:first-child) { position: relative; }
    .page-header:has(> .page-title:first-child) .ph-start { position: absolute; left: 0; top: 0; bottom: 0; height: fit-content; margin: auto 0; }
}
.page-title { grid-column: 2; min-width: 0; font-size: 20px; font-weight: 700; margin: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-form-card { background: var(--wd-surface); border: 1px solid var(--wd-border); border-radius: var(--wd-radius); padding: 16px; margin-bottom: 12px; }
.wd-form-title { font-size: 14px; font-weight: 600; color: var(--wd-text-muted); margin-bottom: 12px; }
.wd-alert { padding: 12px 14px; border-radius: 10px; font-size: 14px; margin-bottom: 12px; line-height: 1.5; }
/* Цвета сообщений (тонированное стекло, обе темы) — в glass.css, он подключается везде вместе с site.css */
.wd-alert-danger, .wd-alert-info, .wd-alert-success, .wd-alert-warning { border: 1px solid transparent; }

/* ---------- Bootstrap override ---------- */
.form-label { font-size: 13px; font-weight: 600; color: var(--wd-text); }
.form-control, .form-select { background: var(--wd-bg); border: 1.5px solid var(--wd-border); border-radius: 10px; color: var(--wd-text); padding: 10px 12px; }
.form-control:focus, .form-select:focus { background: var(--wd-surface); border-color: var(--wd-primary); box-shadow: 0 0 0 4px rgba(var(--wd-primary-rgb),.1); color: var(--wd-text); }
body.dark .form-control::placeholder { color: var(--wd-text-subtle); }
.btn-primary { background: var(--wd-primary); border-color: var(--wd-primary); }
.btn-primary:hover, .btn-primary:focus { background: var(--wd-primary-dark); border-color: var(--wd-primary-dark); }
.btn-primary:disabled, .btn-primary.disabled { background: var(--wd-primary); border-color: var(--wd-primary); opacity: .45; }
.btn-outline-primary { color: var(--wd-primary); border-color: var(--wd-primary); }
.btn-outline-primary:hover { background: var(--wd-primary); border-color: var(--wd-primary); }
.btn-outline-secondary { color: var(--wd-text-muted); border-color: var(--wd-border); }
.btn-outline-secondary:hover { background: var(--wd-surface-2); color: var(--wd-text); border-color: var(--wd-border); }
.field-hint { font-size: 11px; color: var(--wd-text-subtle); margin-top: 4px; line-height: 1.4; white-space: pre-line; }
.field-hint.error { color: var(--wd-danger); }

/* ---------- LIVE-SEARCH ---------- */
.search-box { position: relative; margin-bottom: 12px; }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); opacity: .5; font-size: 15px; pointer-events: none; }
.search-input { width: 100%; padding: 13px 44px 13px 40px; font-size: 15px; background: var(--wd-surface); border: 1.5px solid var(--wd-border); border-radius: var(--wd-radius); color: var(--wd-text); outline: none; transition: border-color .15s, box-shadow .15s; }
.search-input:focus { border-color: var(--wd-primary); box-shadow: 0 0 0 4px rgba(var(--wd-primary-rgb),.1); }
.search-spinner { position: absolute; right: 14px; top: calc(50% - 9px); width: 18px; height: 18px; border: 2px solid var(--wd-border); border-top-color: var(--wd-primary); border-radius: 50%; animation: wd-spin .7s linear infinite; display: none; }
.search-spinner.active { display: block; }
@keyframes wd-spin { to { transform: rotate(360deg); } }

/* ---------- КАРТОЧКИ КЛИЕНТОВ ---------- */
.client-card { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--wd-surface); border: 1px solid var(--wd-border); border-radius: var(--wd-radius); margin-bottom: 8px; color: var(--wd-text); text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; }
.client-card:hover { transform: translateY(-1px); box-shadow: var(--wd-shadow); border-color: var(--wd-primary); color: var(--wd-text); }
.client-card-avatar.create { background: linear-gradient(135deg, var(--wd-primary), var(--wd-primary-dark)); color: #fff; font-size: 20px; }
.client-card-body { flex: 1; min-width: 0; }
.client-card-name { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Строки под именем: [номер] [+N] / «12 моек · +7 …». Разделитель «·» ставит CSS — висячих точек нет */
.client-card-plates { display: flex; align-items: center; gap: 6px; margin-top: 4px; --plate-h: 20px; }
.client-card-meta { display: flex; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--wd-text-muted); margin-top: 3px; }
.client-card-meta > * + *::before { content: "·"; margin: 0 6px; }
.plate-more { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--wd-surface-2); color: var(--wd-text-muted); font-size: 12px; font-weight: 600; }
.client-card-arrow { color: var(--wd-text-subtle); font-size: 22px; line-height: 1; }

/* ---------- ПРОФИЛЬ КЛИЕНТА ---------- */
.profile-header { background: var(--wd-surface); border: 1px solid var(--wd-border); border-radius: var(--wd-radius); padding: 16px; display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.profile-info { flex: 1; min-width: 0; }
/* Длинное ФИО — максимум две строки (раньше рядом стоял бейдж и имя ломалось на три) */
.profile-name { font-size: 18px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.profile-phone { color: var(--wd-text-muted); font-size: 14px; margin: 2px 0 8px; }
.profile-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.profile-card-no { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--wd-border); background: transparent; font: inherit; font-size: 12px; font-weight: 600; color: var(--wd-text-muted); font-variant-numeric: tabular-nums; cursor: pointer; }
.profile-card-no:hover { border-color: var(--wd-primary); color: var(--wd-text); }
/* Часы работы: на узком экране «Пн» вместо «Понедельник» — длинные названия наезжали на поле времени */
.day-short { display: none; }
@media (max-width: 480px) { .day-full { display: none; } .day-short { display: inline; } }
/* Модалка «Карта лояльности» */
.card-current { text-align: center; padding: 14px; border-radius: 14px; background: linear-gradient(135deg, var(--wd-primary), var(--wd-primary-dark)); color: #fff; }
.card-current-no { font-size: 24px; font-weight: 800; letter-spacing: 3px; font-variant-numeric: tabular-nums; }
.card-current-meta { font-size: 13px; opacity: .9; }
.card-hint { font-size: 14px; color: var(--wd-text-muted); margin: 0 0 12px; }
.card-contacts { padding: 10px 12px 4px; margin-bottom: 10px; border-radius: 12px; background: var(--wd-surface-2); border: 1px solid var(--wd-border); }
.card-contacts-title { font-size: 13px; font-weight: 600; color: var(--wd-text); margin-bottom: 8px; }
.card-option { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin-bottom: 6px; border: 1.5px solid var(--wd-border); border-radius: 12px; cursor: pointer; }
.card-option:has(input:checked) { border-color: var(--wd-primary); background: var(--wd-primary-light); }
.card-option input { margin-top: 4px; accent-color: var(--wd-primary); }
.card-option b { display: block; font-size: 15px; }
.card-option small { display: block; font-size: 12px; color: var(--wd-text-muted); line-height: 1.35; }
.tier-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .2px; }
.tier-silver { background: #e2e8f0; color: #475569; }
.tier-gold { background: #fef3c7; color: #92400e; }
.tier-platinum { background: #ccfbf1; color: #0f766e; }
body.dark .tier-silver { background: #334155; color: #cbd5e1; }
body.dark .tier-gold { background: #453016; color: #fcd34d; }
body.dark .tier-platinum { background: #134e4a; color: #5eead4; }
.stats-grid-small { gap: 10px; }
.stats-grid-small .stat-card { padding: 12px; }
.stats-grid-small .stat-value { font-size: 18px; }
.stats-grid-small .stat-label { font-size: 11px; }

/* ---------- ОБЯЗАТЕЛЬНЫЕ ПОЛЯ ---------- */
.req { color: var(--wd-danger); font-weight: 700; margin-left: 2px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- КАРТОЧКИ УСЛУГ ---------- */
.service-card { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--wd-surface); border: 1px solid var(--wd-border); border-radius: var(--wd-radius); margin-bottom: 8px; color: var(--wd-text); text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; }
.service-card:hover { transform: translateY(-1px); box-shadow: var(--wd-shadow); border-color: var(--wd-primary); color: var(--wd-text); }
.service-card-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--wd-primary-light); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.service-card-body { flex: 1; min-width: 0; }
.service-card-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.service-card-meta { font-size: 13px; color: var(--wd-text-muted); margin-top: 2px; }
/* Архив каталога: свёрнутая секция внизу, карточки приглушены */
.service-card.is-archived { opacity: .7; }
.catalog-archive > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
.catalog-archive > summary::-webkit-details-marker { display: none; }
.catalog-archive > summary::after { content: "▾"; margin-left: auto; transition: transform .15s; }
.catalog-archive[open] > summary::after { transform: rotate(180deg); }
.catalog-archive-hint { font-size: 12px; color: var(--wd-text-muted); margin: -4px 0 8px; }
.badge-inactive { display: inline-block; padding: 2px 8px; background: var(--wd-surface-2); border: 1px solid var(--wd-border); border-radius: 8px; font-size: 11px; font-weight: 600; color: var(--wd-text-muted); text-transform: uppercase; letter-spacing: .5px; margin-left: 6px; vertical-align: middle; }

/* ---------- ПРАЙС-МАТРИЦА ---------- */
.price-matrix { display: flex; flex-direction: column; gap: 10px; }
.price-matrix-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--wd-border); }
.price-matrix-row:last-child { border-bottom: none; }
.price-matrix-label { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--wd-text); margin: 0; }
/* Прайс-матрица: размер с силуэтом · цена · время */
.price-matrix-head { padding: 0 0 2px; font-size: 12px; font-weight: 600; color: var(--wd-text-muted); }
.price-matrix-head .price-matrix-label { font-size: 12px; font-weight: 600; color: var(--wd-text-muted); }
.price-matrix-col { flex: 0 0 31%; }
.price-matrix-head .price-matrix-col-time { flex: 0 0 23%; }
.price-matrix-row .price-matrix-input-wrap { flex: 0 0 31%; }
.price-matrix-row .price-matrix-col-time { flex: 0 0 23%; }
.price-matrix-sil { width: 32px; height: 14px; flex-shrink: 0; color: var(--wd-text-muted); }
.price-matrix-sil path { fill: currentColor; opacity: .55; }
.price-matrix-label > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.price-matrix-row { gap: 8px; }
.price-matrix-input-wrap { flex: 1; position: relative; display: flex; align-items: center; }
.price-input { padding-right: 32px !important; font-weight: 600; }
.price-currency { position: absolute; right: 12px; color: var(--wd-text-muted); font-size: 13px; pointer-events: none; }
/* В матрице колонки узкие — шрифт и отступы меньше, чтобы цена влезала целиком */
.price-matrix .form-control { font-size: 14px; padding-left: 8px; }
.price-matrix .price-input { padding-right: 20px !important; }
.price-matrix .price-currency { right: 7px; font-size: 11px; }
.price-matrix .price-matrix-col-time .form-control { padding-right: 30px; }
.price-matrix input[type=number] { -moz-appearance: textfield; }
.price-matrix input[type=number]::-webkit-inner-spin-button, .price-matrix input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- ЧАСЫ РАБОТЫ ---------- */
.day-list { display: flex; flex-direction: column; gap: 6px; }
.day-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; min-height: 38px; }
.day-on { display: flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; font-size: 14px; color: var(--wd-text); min-width: 0; }
.day-on .form-check-input { margin: 0; flex-shrink: 0; }
.day-times { display: flex; align-items: center; gap: 4px; }
.day-times .form-control { width: 92px; padding: 4px 6px; }
.day-dash { color: var(--wd-text-muted); }
.day-24-text, .day-off-text { display: none; font-size: 13px; color: var(--wd-text-muted); text-align: center; }
.day-24 { margin: 0; cursor: pointer; }
.day-24 input { display: none; }
.day-24 span { display: inline-flex; align-items: center; height: 28px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--wd-border); font-size: 12px; font-weight: 600; color: var(--wd-text-muted); white-space: nowrap; transition: all .15s ease; }
.day-24 input:checked + span { background: var(--wd-primary); border-color: var(--wd-primary); color: #fff; }
.day-row.is-24 .day-times { display: none; }
.day-row.is-24 .day-24-text { display: block; }
.day-row.is-off .day-times, .day-row.is-off .day-24-text, .day-row.is-off .day-24 { display: none; }
.day-row.is-off .day-off-text { display: block; grid-column: 2 / 4; }
.day-row.is-off .day-on { color: var(--wd-text-muted); }

/* ---------- Checkbox ---------- */
.form-check-input { background-color: var(--wd-bg); border-color: var(--wd-border); }
.form-check-input:checked { background-color: var(--wd-primary); border-color: var(--wd-primary); }
.form-check-label { color: var(--wd-text); font-size: 14px; }
/* «Голая» страница (ViewData["Bare"]): чтение и подписание документов — без меню */
body.is-bare .topbar-menu-btn, body.is-bare .sidebar, body.is-bare .sidebar-overlay, body.is-bare .bottomnav, body.is-bare .fab-overlay, body.is-bare .fab-menu-radial, body.is-bare .fab-btn-wrap { display: none !important; }
body.is-bare .topbar { justify-content: center; }