/*
   MOTUL CRM - стили портала, редизайн 2026-09 (макет «Motul CRM — редизайн»).
   Тёплый серый фон, тёмный сайдбар, красный акцент, Onest для текста и Unbounded для заголовков.
   Всё строится на переменных ниже: тёмная тема - это только другой набор переменных,
   правила компонентов не дублируются.
*/

/* ── Шрифты: свои файлы (static/fonts, лицензия OFL рядом), без Google Fonts - портал работает
      и офлайн, и в сетях, где внешние CDN недоступны. ─────────────────────────────────────── */
@font-face { font-family: 'Onest'; font-weight: 400; font-style: normal; font-display: swap;
    src: url('/fonts/onest/onest-cyrillic-400-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-weight: 400; font-style: normal; font-display: swap;
    src: url('/fonts/onest/onest-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Onest'; font-weight: 500; font-style: normal; font-display: swap;
    src: url('/fonts/onest/onest-cyrillic-500-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-weight: 500; font-style: normal; font-display: swap;
    src: url('/fonts/onest/onest-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Onest'; font-weight: 600; font-style: normal; font-display: swap;
    src: url('/fonts/onest/onest-cyrillic-600-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-weight: 600; font-style: normal; font-display: swap;
    src: url('/fonts/onest/onest-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Onest'; font-weight: 700; font-style: normal; font-display: swap;
    src: url('/fonts/onest/onest-cyrillic-700-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-weight: 700; font-style: normal; font-display: swap;
    src: url('/fonts/onest/onest-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Unbounded'; font-weight: 600; font-style: normal; font-display: swap;
    src: url('/fonts/unbounded/unbounded-cyrillic-600-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-weight: 600; font-style: normal; font-display: swap;
    src: url('/fonts/unbounded/unbounded-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Unbounded'; font-weight: 700; font-style: normal; font-display: swap;
    src: url('/fonts/unbounded/unbounded-cyrillic-700-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-weight: 700; font-style: normal; font-display: swap;
    src: url('/fonts/unbounded/unbounded-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Unbounded'; font-weight: 800; font-style: normal; font-display: swap;
    src: url('/fonts/unbounded/unbounded-cyrillic-800-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-weight: 800; font-style: normal; font-display: swap;
    src: url('/fonts/unbounded/unbounded-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── Переменные ─────────────────────────────────────────────────────────────────────────── */
:root {
    --font-body: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Unbounded', 'Onest', system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    /* старое имя - на него ещё ссылаются стили отдельных страниц */
    --font-brand: var(--font-body);

    --motul-red: #ee3a43;
    --motul-red-rgb: 238, 58, 67;
    --motul-red-dark: #d92d36;
    --motul-red-deeper: #c41e27;
    /* красный для текста и ссылок на светлом - #ee3a43 не добирает контраста 4.5:1 */
    --motul-red-text: #c41e27;
    --motul-red-text-hover: #9f1820;
    --motul-red-light: #fdeeef;
    --motul-red-border: #f5c2c5;
    --motul-red-subtle: #fff6f6;

    --surface-0: #ffffff;
    --surface-1: #f5f4f2;
    --surface-2: #f2f0ed;
    --surface-3: #faf9f7;
    --surface-sunken: #edebe7;
    --border: #e7e5e1;
    --border-strong: #d6d3ce;
    --border-soft: #efede9;
    --border-dashed: #c9c5bf;

    --text-primary: #16161a;
    --text-body: #3f3f46;
    --text-secondary: #6b6b73;
    --text-muted: #8e8e96;

    /* сайдбар тёмный в обеих темах */
    --ink: #18181b;
    --ink-2: #222226;
    --ink-active: #2a2a2f;
    --ink-text: #d4d4d8;
    --ink-muted: #8e8e96;

    --success-bg: #eaf7ee;
    --success-text: #166534;
    --success-dot: #22a04b;
    --warning-bg: #fef3c7;
    --warning-text: #92400e;
    --info-bg: #e0e7ff;
    --info-text: #3730a3;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .06);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .06);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, .08);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, .14);

    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 16px;

    --header-h: 64px;
    --sidebar-w: 248px;
    --t: 150ms ease;

    --bs-body-font-family: var(--font-body);
    --bs-body-bg: var(--surface-1);
    --bs-body-color: var(--text-primary);
    --bs-border-color: var(--border);
    --bs-secondary-color: var(--text-secondary);
    --bs-tertiary-bg: var(--surface-2);
    --bs-link-color: var(--motul-red-text);
    --bs-link-color-rgb: 196, 30, 39;
    --bs-link-hover-color: var(--motul-red-text-hover);
    --bs-link-hover-color-rgb: 159, 24, 32;
    --bs-primary: var(--motul-red);
    --bs-primary-rgb: 238, 58, 67;
}

/* Тёмная тема: data-bs-theme="dark" на <html> (layout.html, applyThemeFromCookie). */
:root[data-bs-theme="dark"] {
    color-scheme: dark;

    --motul-red: #e5484d;
    --motul-red-rgb: 229, 72, 77;
    --motul-red-dark: #d13a40;
    --motul-red-deeper: #b8323a;
    --motul-red-text: #ff7a80;
    --motul-red-text-hover: #ffa1a5;
    --motul-red-light: rgba(229, 72, 77, .16);
    --motul-red-border: rgba(229, 72, 77, .4);
    --motul-red-subtle: rgba(229, 72, 77, .08);

    --surface-0: #1b1b1f;
    --surface-1: #121214;
    --surface-2: #26262b;
    --surface-3: #202024;
    --surface-sunken: #16161a;
    --border: #2c2c32;
    --border-strong: #3a3a42;
    --border-soft: #25252a;
    --border-dashed: #4a4a52;

    --text-primary: #ededef;
    --text-body: #d4d4d8;
    --text-secondary: #a1a1aa;
    --text-muted: #7c7c85;

    --ink: #0e0e10;
    --ink-2: #19191c;
    --ink-active: #232327;

    --success-bg: rgba(34, 160, 75, .16);
    --success-text: #4ade80;
    --warning-bg: rgba(245, 158, 11, .16);
    --warning-text: #fbbf24;
    --info-bg: rgba(129, 140, 248, .16);
    --info-text: #a5b4fc;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .45);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, .5);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, .6);

    --bs-link-color-rgb: 255, 122, 128;
    --bs-link-hover-color-rgb: 255, 161, 165;
}

/* ── Основа ─────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    height: 100%;
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    overflow-x: hidden;
    color: var(--text-primary);
    background: var(--surface-1);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -.01em;
}

/* Заголовок страницы: <h3 class="motul-text-red"> с иконкой - так размечены все списки и формы.
   В новом виде это крупный заголовок Unbounded без иконки и без красного. */
.content-wrapper h3.motul-text-red,
.page-title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--text-primary) !important;
}

.content-wrapper h3.motul-text-red > i:first-child { display: none; }

a { color: var(--motul-red-text); }
a:hover { color: var(--motul-red-text-hover); }

img { max-width: 100%; height: auto; }

.font-display { font-family: var(--font-display); }
.font-mono { font-family: var(--font-mono); }

.motul-red { background-color: var(--motul-red) !important; }
.motul-text-red { color: var(--motul-red-text) !important; }

.text-muted { color: var(--text-muted) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.border { border-color: var(--border) !important; }
.bg-light { background: var(--surface-2) !important; }
.bg-white { background: var(--surface-0) !important; }

[class*="col-"] { max-width: 100%; overflow-wrap: break-word; min-width: 0; }

*:focus-visible {
    outline: 2px solid var(--motul-red) !important;
    outline-offset: 2px !important;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cfccc6; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #b3afa8; }
:root[data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a3a42; }
:root[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4a4a52; }

/* ── Каркас: сайдбар слева на всю высоту, справа шапка + контент ──────────────────────────── */
.app-shell {
    display: flex;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.content-wrapper {
    flex: 1;
    min-width: 0;
    padding: 28px 32px;
    overflow-y: auto;
    overflow-x: hidden;
    overflow-wrap: break-word;
}

/* ── Сайдбар ────────────────────────────────────────────────────────────────────────────── */
.app-sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    height: 100%;
    background: var(--ink);
    color: var(--ink-text);
    display: flex;
    flex-direction: column;
    padding: 20px 14px 14px;
    overflow: hidden;
}

.app-sidebar .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 12px 20px;
    text-decoration: none;
}

.app-sidebar .brand img { height: 26px; width: auto; }

.badge-test {
    font-size: 11px !important;
    font-weight: 700 !important;
    background: #facc15 !important;
    color: #18181b !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
}

.sidebar-menu {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 -4px;
    padding: 0 4px;
}

.sidebar-section {
    padding: 16px 12px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.sidebar-section:first-child { padding-top: 4px; }

.sidebar-menu .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: var(--radius-md);
    color: var(--ink-text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--t), color var(--t);
}

/* иконки меню - контурные SVG из макета (fragments/icons.html), цвет как у текста, у активного - красный */
.ico { width: 18px; height: 18px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.sidebar-menu .nav-link .ico { color: currentColor; transition: color var(--t); }
.sidebar-menu .nav-link.active .ico { color: var(--motul-red); }
.sidebar-menu .nav-link i {
    width: 18px;
    font-size: 16px;
    text-align: center;
    color: var(--ink-muted);
    transition: color var(--t);
}

.sidebar-menu .nav-link span { flex: 1; min-width: 0; }

.sidebar-menu .nav-link:hover {
    background: var(--ink-2);
    color: #fff;
}

.sidebar-menu .nav-link.active {
    background: var(--ink-active);
    color: #fff;
    font-weight: 600;
}

.sidebar-menu .nav-link.active i { color: var(--motul-red); }

.sidebar-menu .nav-link.disabled {
    pointer-events: none;
    opacity: .45;
}

.sidebar-count {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: #3f3f46;
    padding: 1px 8px;
    border-radius: 99px;
}

.sidebar-menu .nav-link.active .sidebar-count { background: var(--motul-red); }

/* карточка пользователя внизу сайдбара - открывает меню (настройки, выход и т.д.) */
.sidebar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 12px;
    padding: 10px 12px;
    border: 0;
    border-radius: 12px;
    background: var(--ink-2);
    color: #fff;
    text-align: left;
    transition: background var(--t);
}

.sidebar-user:hover { background: var(--ink-active); }

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--motul-red);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.avatar-sm { width: 26px; height: 26px; font-size: 11px; }

.sidebar-user .who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sidebar-user .who b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user .who small { font-size: 12px; color: #a1a1aa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Шапка ──────────────────────────────────────────────────────────────────────────────── */
.app-header {
    height: var(--header-h);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 32px;
    background: var(--surface-0);
    border-bottom: 1px solid var(--border);
    position: relative;
    z-index: 1020;
}

.app-header .header-brand { display: none; }
.app-header .header-brand img { height: 22px; }
.app-header .spacer { flex: 1; }

.icon-btn {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-body);
    font-size: 18px;
    position: relative;
    transition: background var(--t), color var(--t);
}

.icon-btn:hover { background: var(--surface-2); color: var(--text-primary); }

/* Аватар пользователя в правом верхнем углу (меню пользователя), бейдж - товары в корзине. */
.header-avatar {
    position: relative;
    padding: 2px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    line-height: 0;
}

.header-avatar:hover .avatar,
.header-avatar[aria-expanded="true"] .avatar { box-shadow: 0 0 0 3px var(--surface-2); }

.header-avatar-count {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--ink);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--surface-0);
}

.app-header .dropdown-menu .dropdown-item { display: flex; align-items: center; gap: 10px; }

/* Геолокация выключена (geo-status.js, #geoBanner под шапкой) */
.geo-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 32px;
    background: var(--warning-bg);
    color: var(--warning-text);
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    line-height: 1.35;
}
.geo-banner.d-none { display: none !important; }
.geo-banner .geo-banner-text { flex: 1; min-width: 0; }
.geo-banner .btn { flex-shrink: 0; }
@media (max-width: 991.98px) {
    .geo-banner { padding: 10px 16px; font-size: 13px; }
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.status-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* Индикатор «нет сети» - виден только при html.is-offline (offline-status.js). */
.header-offline-indicator {
    display: none;
    background: var(--warning-bg);
    color: var(--warning-text);
}

html.is-offline .header-offline-indicator { display: inline-flex; }

/* Статус офлайн-архива (offline-bundle.js) - наоборот, только онлайн. */
.header-bundle-status {
    display: none;
    background: var(--success-bg);
    color: var(--success-text);
}

html:not(.is-offline) .header-bundle-status { display: inline-flex; }
.header-bundle-status { cursor: help; }
/* Подсказка к статусу архива (offline-bundle.js): статус + абзац «что такое архив» */
.bundle-status-tooltip .tooltip-inner {
    max-width: 340px;
    text-align: left;
    white-space: pre-line;
}

.header-bundle-status.status-error {
    background: var(--motul-red-light);
    color: var(--motul-red-text);
}

.header-bundle-status i { font-size: 12px; }

/* ── Мобильная раскладка: шапка с логотипом, снизу панель разделов ──────────────────────── */
.app-bottom-nav { display: none; }

@media (max-width: 991.98px) {
    :root { --header-h: 56px; }

    #sidebar-desktop { display: none !important; }

    .app-header { padding: 0 8px 0 16px; }
    .app-header .header-brand { display: flex; align-items: center; gap: 8px; }

    .content-wrapper {
        padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
    }

    .app-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        height: calc(64px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--surface-0);
        border-top: 1px solid var(--border);
    }

    .app-bottom-nav a,
    .app-bottom-nav button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        border: 0;
        background: transparent;
        color: var(--text-secondary);
        font-size: 11px;
        font-weight: 600;
        text-decoration: none;
        position: relative;
    }

    .app-bottom-nav i { font-size: 20px; }
    .app-bottom-nav .ico { width: 22px; height: 22px; }
    .app-bottom-nav .active { color: var(--motul-red-text); font-weight: 700; }

    .app-bottom-nav .nav-count {
        position: absolute;
        top: 6px;
        left: calc(50% + 6px);
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 99px;
        background: var(--motul-red);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .content-wrapper h3.motul-text-red,
    .page-title { font-size: 24px; }

    /* строка «заголовок страницы + кнопки» (так размечены все списки и формы) - на телефоне
       кнопки уходят под заголовок, а не сжимают его в столбик */
    .content-wrapper .d-flex.justify-content-between.align-items-center.mb-4 {
        flex-wrap: wrap;
        gap: 12px;
    }
}

/* выдвижное меню на телефоне - тот же тёмный сайдбар */
.offcanvas.app-offcanvas {
    width: 300px;
    background: var(--ink);
    color: var(--ink-text);
}

.app-offcanvas .offcanvas-body {
    display: flex;
    flex-direction: column;
    padding: 20px 14px calc(14px + env(safe-area-inset-bottom));
}

/* ── Карточки ───────────────────────────────────────────────────────────────────────────── */
.card {
    background: var(--surface-0) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: none !important;
    max-width: 100%;
    overflow-wrap: break-word;
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border-soft) !important;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
    padding: 16px 22px !important;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.card-header i { color: var(--text-muted); }
.card-body { padding: 22px !important; }
.card-footer { background: transparent !important; border-top: 1px solid var(--border-soft) !important; }

/* KPI-плитка (список точек и др.): число крупно, подпись над ним */
.stat-card {
    text-align: left;
    padding: 18px 20px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface-0);
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color var(--t), box-shadow var(--t);
}

.stat-card:hover { border-color: var(--border-strong); color: var(--text-primary); }
.stat-card .label { font-size: 13px; font-weight: 600; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; }
.stat-card .value { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.stat-card.active { border: 2px solid var(--motul-red); padding: 17px 19px; }
.stat-card.active .label { color: var(--motul-red-text); }

/* ── Формы ──────────────────────────────────────────────────────────────────────────────── */
.form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-body);
    margin-bottom: 6px;
}

.form-control,
.form-select,
textarea {
    max-width: 100%;
    min-height: 44px;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text-primary) !important;
    background-color: var(--surface-0) !important;
    font-size: 14px !important;
    padding: 9px 12px !important;
    box-shadow: none !important;
    transition: border-color var(--t), box-shadow var(--t) !important;
}

.form-control-sm, .form-select-sm { min-height: 36px; padding: 6px 10px !important; font-size: 13px !important; }
.form-control-lg, .form-select-lg { min-height: 52px; font-size: 16px !important; }

.form-control:focus,
.form-select:focus,
textarea:focus {
    border-color: var(--motul-red) !important;
    box-shadow: 0 0 0 3px rgba(var(--motul-red-rgb), .14) !important;
    outline: none !important;
}

.form-control::placeholder,
textarea::placeholder { color: var(--text-muted) !important; }

textarea.form-control { resize: vertical; min-height: 120px; }

.input-group-text {
    background: var(--surface-2) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-secondary) !important;
    border-radius: var(--radius-md);
}

.form-check-input {
    border: 1.5px solid var(--border-strong) !important;
    background-color: var(--surface-0);
}

.form-check-input:checked {
    background-color: var(--motul-red) !important;
    border-color: var(--motul-red) !important;
}

.form-check-input:focus { box-shadow: 0 0 0 3px rgba(var(--motul-red-rgb), .15) !important; }

input[type="checkbox"] { width: 18px !important; height: 18px !important; accent-color: var(--motul-red); }

/* свич шире, чем высота - общее правило для чекбоксов выше делало его квадратом */
.form-switch .form-check-input { width: 2em !important; height: 1.25em !important; }

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--motul-red) !important;
    box-shadow: 0 0 0 3px rgba(var(--motul-red-rgb), .1) !important;
}

.invalid-feedback { font-size: 12px !important; color: var(--motul-red-text) !important; margin-top: 4px !important; }

/* Поиск в стиле макета: иконка слева внутри поля */
.search-field {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-strong);
    background: var(--surface-0);
    color: var(--text-secondary);
}

.search-field input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--text-primary); font-size: 14px; }
.search-field:focus-within { border-color: var(--motul-red); box-shadow: 0 0 0 3px rgba(var(--motul-red-rgb), .14); }
/* рамку и кольцо фокуса рисует сама .search-field - общие правила input:focus не должны давать вторую */
.search-field input:focus, .search-field input:focus-visible { border: 0; box-shadow: none; outline: none !important; }

/* ── Кнопки ─────────────────────────────────────────────────────────────────────────────── */
.btn {
    --bs-btn-padding-y: 9px;
    --bs-btn-padding-x: 16px;
    --bs-btn-font-size: 14px;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--radius-md);
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--radius-md) !important;
    font-weight: 600 !important;
    transition: background var(--t), border-color var(--t), color var(--t), box-shadow var(--t) !important;
}

.btn-sm { --bs-btn-padding-y: 5px; --bs-btn-padding-x: 12px; --bs-btn-font-size: 13px; min-height: 32px; border-radius: var(--radius-sm) !important; }
.btn-lg { --bs-btn-padding-y: 12px; --bs-btn-padding-x: 22px; --bs-btn-font-size: 16px; min-height: 52px; border-radius: 12px !important; }
.btn-link { min-height: 0; }
.btn-close { min-height: 0; }

/* главное действие - сплошной красный */
.btn-motul-red {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--motul-red);
    --bs-btn-border-color: var(--motul-red);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--motul-red-dark);
    --bs-btn-hover-border-color: var(--motul-red-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--motul-red-deeper);
    --bs-btn-active-border-color: var(--motul-red-deeper);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--motul-red);
    --bs-btn-disabled-border-color: var(--motul-red);
    font-weight: 700 !important;
}

.btn-outline-motul-red {
    --bs-btn-color: var(--motul-red-text);
    --bs-btn-border-color: var(--motul-red-border);
    --bs-btn-bg: var(--surface-0);
    --bs-btn-hover-color: var(--motul-red-text-hover);
    --bs-btn-hover-bg: var(--motul-red-light);
    --bs-btn-hover-border-color: var(--motul-red-border);
    --bs-btn-active-color: var(--motul-red-text-hover);
    --bs-btn-active-bg: var(--motul-red-light);
    --bs-btn-active-border-color: var(--motul-red);
    --bs-btn-disabled-color: var(--motul-red-text);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--motul-red-border);
}

/* второстепенные - белые с рамкой */
.btn-secondary, .btn-outline-secondary, .btn-light,
.btn-primary, .btn-outline-primary, .btn-info, .btn-outline-info {
    background: var(--surface-0) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
}

.btn-secondary:hover, .btn-outline-secondary:hover, .btn-light:hover,
.btn-primary:hover, .btn-outline-primary:hover, .btn-info:hover, .btn-outline-info:hover {
    background: var(--surface-2) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-primary) !important;
}

/* тёмная - как «Назначить» в карточке точки */
.btn-dark {
    background: var(--text-primary) !important;
    border: 1px solid var(--text-primary) !important;
    color: var(--surface-0) !important;
}

.btn-dark:hover { opacity: .88; }

.btn-danger, .btn-outline-danger {
    background: var(--surface-0) !important;
    border: 1px solid var(--motul-red-border) !important;
    color: var(--motul-red-text) !important;
    box-shadow: none !important;
}

.btn-danger:hover, .btn-outline-danger:hover {
    background: var(--motul-red-light) !important;
    color: var(--motul-red-text-hover) !important;
}

.btn-success, .btn-outline-success {
    background: var(--success-bg) !important;
    border: 1px solid transparent !important;
    color: var(--success-text) !important;
    box-shadow: none !important;
}

.btn-success:hover, .btn-outline-success:hover { filter: brightness(.96); }

.btn-warning, .btn-outline-warning {
    background: var(--warning-bg) !important;
    border: 1px solid transparent !important;
    color: var(--warning-text) !important;
    box-shadow: none !important;
}

.btn-warning:hover, .btn-outline-warning:hover { filter: brightness(.96); }

/* кнопка-призрак (без рамки) - «История», «Сохранить вид» */
.btn-ghost {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--text-body) !important;
}

.btn-ghost:hover { background: var(--surface-2) !important; color: var(--text-primary) !important; }

/* Action-кнопки в строках таблиц */
.action-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border-radius: var(--radius-sm) !important;
}

.action-btn i { font-size: 13px !important; }

/* ── Фильтры-пилюли (строка фильтров над списками) ──────────────────────────────────────── */
.chip {
    height: 36px;
    padding: 0 14px;
    border-radius: 99px;
    border: 1px solid var(--border-strong);
    background: var(--surface-0);
    color: var(--text-body);
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    text-decoration: none;
    transition: background var(--t), border-color var(--t);
}

.chip:hover { background: var(--surface-2); color: var(--text-primary); }
.chip.active { background: var(--text-primary); border-color: var(--text-primary); color: var(--surface-0); }
.chip.chip-dashed { border-style: dashed; border-color: var(--border-dashed); }
.chip.chip-applied { background: var(--motul-red-light); border-color: var(--motul-red-border); color: var(--motul-red-text-hover); }

/* Строка фильтров над списком (fragments/ui/table.html :: filterPanel) */
.filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.filter-bar .search-field { flex: 0 1 360px; min-width: 220px; }
.filter-bar .search-field .btn-close { font-size: .6rem; flex-shrink: 0; }
.chip .chip-label { color: var(--text-secondary); font-weight: 500; }

.chip .chip-x {
    border: 0;
    background: transparent;
    padding: 0 0 0 4px;
    color: inherit;
    font-size: 16px;
    line-height: 1;
    opacity: .7;
}

.chip .chip-x:hover { opacity: 1; }

@media (max-width: 575.98px) {
    .filter-bar .search-field { flex: 1 1 100%; }
}

/* Панель массовых действий (bulk-action.js): видна только при выбранных строках. */
.bulk-bar { display: none !important; }

.bulk-bar.has-selection {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 12px 8px 16px;
    border-radius: var(--radius-md);
    background: var(--ink);
    color: #fff;
}

.bulk-bar .bulk-count { font-size: 14px; font-weight: 600; margin-right: 8px; }
/* !important - перебивают общие правила .btn-secondary/.btn-primary (белые с рамкой) */
.bulk-bar .btn {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 8px !important;
    border: 1px solid #3f3f46 !important;
    background: #232327 !important;
    color: #fff !important;
    font-size: 13px;
    font-weight: 500;
}

.bulk-bar .btn:hover { background: #2f2f35 !important; }
.bulk-bar .btn.bulk-clear { background: transparent !important; border-color: transparent !important; color: #d4d4d8 !important; }

/* сегментированный переключатель (Доска / Список, Доставка / Самовывоз) */
.segmented {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--surface-sunken);
    border-radius: 12px;
}

.segmented > * {
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-body);
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.segmented > .active {
    background: var(--surface-0);
    color: var(--text-primary);
    font-weight: 700;
    box-shadow: var(--shadow-xs);
}

/* ── Вкладки ────────────────────────────────────────────────────────────────────────────── */
.nav-tabs { border-bottom: 1px solid var(--border) !important; gap: 4px; }

.nav-tabs .nav-link {
    color: var(--text-secondary) !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 14px;
}

.nav-tabs .nav-link:hover { color: var(--text-primary) !important; }

.nav-tabs .nav-link.active {
    color: var(--text-primary) !important;
    font-weight: 700;
    border-bottom-color: var(--motul-red) !important;
}

/* ── Таблицы ────────────────────────────────────────────────────────────────────────────── */
.table-responsive {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: var(--surface-0);
}

table { max-width: 100%; table-layout: auto; }

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    --bs-table-hover-bg: var(--surface-3);
    font-size: 14px;
    margin-bottom: 0 !important;
}

.table th {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    background: var(--surface-3) !important;
    border-bottom: 1px solid var(--border-soft) !important;
    padding: 12px 16px !important;
    white-space: nowrap;
}

.table td {
    padding: 14px 16px !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-soft) !important;
    vertical-align: middle !important;
}

.table tbody tr { transition: background var(--t); }
.table tbody tr:hover { background: var(--surface-3) !important; }
.table tbody tr.selected, .table tbody tr.selected td { background: var(--motul-red-subtle) !important; }
.table tbody tr:last-child td { border-bottom: none !important; }

.col-actions { width: 1%; white-space: nowrap; }

/* bootstrap-table (все списки портала): своя обвязка поверх .table - рамка таблицы целиком,
   а не у каждой ячейки, без «зебры», заголовок колонок - в .th-inner (отступ там, не в th). */
.bootstrap-table .fixed-table-container {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-xl);
    background: var(--surface-0);
    overflow: hidden;
}

.bootstrap-table .table-bordered > :not(caption) > * { border-width: 0 !important; }
.bootstrap-table .table-bordered > :not(caption) > * > * { border-width: 0 0 1px 0 !important; border-color: var(--border-soft) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: transparent !important; }
.bootstrap-table .table th { padding: 0 !important; vertical-align: middle !important; }
.bootstrap-table .fixed-table-container .table thead th .th-inner { padding: 12px 16px; line-height: 1.3; }
.bootstrap-table .fixed-table-container .table .bs-checkbox { width: 48px; text-align: center; }
.bootstrap-table .fixed-table-container .table .bs-checkbox .th-inner { padding: 12px 8px; }
.bootstrap-table .fixed-table-toolbar .search input { min-height: 40px; }
.bootstrap-table .fixed-table-pagination { font-size: 13px; color: var(--text-secondary); }
.bootstrap-table .fixed-table-pagination > .pagination-detail,
.bootstrap-table .fixed-table-pagination > .pagination { margin-top: 12px; margin-bottom: 12px; }
.bootstrap-table .fixed-table-pagination .btn { min-height: 32px; --bs-btn-padding-y: 4px; --bs-btn-padding-x: 10px; }
.bootstrap-table .no-records-found td { color: var(--text-secondary) !important; padding: 28px 16px !important; }
.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading { background: var(--surface-0); color: var(--text-secondary); }

/* ── Пагинация ──────────────────────────────────────────────────────────────────────────── */
.pagination {
    --bs-pagination-color: var(--text-body);
    --bs-pagination-bg: transparent;
    --bs-pagination-border-color: transparent;
    --bs-pagination-hover-color: var(--text-primary);
    --bs-pagination-hover-bg: var(--surface-2);
    --bs-pagination-hover-border-color: transparent;
    --bs-pagination-focus-color: var(--text-primary);
    --bs-pagination-focus-bg: var(--surface-2);
    --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(var(--motul-red-rgb), .14);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--ink);
    --bs-pagination-active-border-color: var(--ink);
    --bs-pagination-disabled-color: var(--text-muted);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-border-color: transparent;
    gap: 4px;
}

.page-link {
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm) !important;
    font-size: 13px !important;
    font-weight: 500;
}

/* ── Бейджи и статусы ───────────────────────────────────────────────────────────────────── */
.badge {
    border-radius: 99px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 3px 9px !important;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    background: var(--surface-2);
    color: var(--text-body);
    white-space: nowrap;
}

.tag-success { background: var(--success-bg); color: var(--success-text); }
.tag-warning { background: var(--warning-bg); color: var(--warning-text); }
.tag-danger { background: var(--motul-red-light); color: var(--motul-red-text-hover); }
.tag-info { background: var(--info-bg); color: var(--info-text); }

/* Сегменты воронки: 9 полосок, пройденные - красные (список точек, карточка) */
.funnel-bar { display: inline-flex; gap: 2px; }
.funnel-bar > span { width: 10px; height: 6px; border-radius: 2px; background: var(--border); }
.funnel-bar > span.done { background: var(--motul-red); }

/* ── Алерты ─────────────────────────────────────────────────────────────────────────────── */
.alert {
    border-radius: 12px !important;
    border: 0 !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
}

.alert-danger { background: var(--motul-red-light) !important; color: var(--motul-red-text-hover) !important; }
.alert-success { background: var(--success-bg) !important; color: var(--success-text) !important; }
.alert-warning { background: var(--warning-bg) !important; color: var(--warning-text) !important; }
.alert-info { background: var(--info-bg) !important; color: var(--info-text) !important; }

/* ── Модальные окна ─────────────────────────────────────────────────────────────────────── */
.modal-content {
    border-radius: var(--radius-xl) !important;
    border: 1px solid var(--border) !important;
    background: var(--surface-0) !important;
    box-shadow: var(--shadow-lg) !important;
    overflow: hidden;
}

.modal-header {
    background: var(--surface-0) !important;
    border-bottom: 1px solid var(--border-soft) !important;
    padding: 18px 22px !important;
}

.modal-title { font-size: 18px !important; font-weight: 700 !important; }
.modal-body { padding: 22px !important; font-size: 14px !important; color: var(--text-body) !important; }
.modal-footer { background: var(--surface-3) !important; border-top: 1px solid var(--border-soft) !important; padding: 14px 22px !important; }

/* ── Выпадающие меню ────────────────────────────────────────────────────────────────────── */
.dropdown-menu {
    --bs-dropdown-bg: var(--surface-0);
    --bs-dropdown-link-color: var(--text-primary);
    border-radius: 12px !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-md) !important;
    padding: 6px !important;
    font-size: 14px !important;
}

.dropdown-item {
    border-radius: var(--radius-sm) !important;
    padding: 8px 12px !important;
    color: var(--text-primary) !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dropdown-item i { width: 16px; text-align: center; color: var(--text-muted); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-2) !important; }
.dropdown-divider { border-color: var(--border-soft) !important; }

/* ── Tom Select ─────────────────────────────────────────────────────────────────────────── */
.ts-wrapper .ts-control {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border-strong) !important;
    background: var(--surface-0) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
    font-size: 14px !important;
    padding: 8px 12px !important;
    min-height: 44px !important;
}

.ts-wrapper.focus .ts-control {
    border-color: var(--motul-red) !important;
    box-shadow: 0 0 0 3px rgba(var(--motul-red-rgb), .14) !important;
}

.ts-dropdown {
    border-radius: 12px !important;
    border: 1px solid var(--border) !important;
    background: var(--surface-0) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-md) !important;
    margin-top: 4px !important;
    overflow: hidden;
}

.ts-dropdown .option { padding: 8px 12px; }
.ts-dropdown .option.active { background: var(--surface-2) !important; color: var(--text-primary) !important; }
.ts-dropdown .option.selected { background: var(--motul-red-light) !important; color: var(--motul-red-text) !important; font-weight: 500; }
.ts-dropdown .option.selected.active { background: var(--motul-red-light) !important; filter: brightness(.97); }

.ts-check {
    width: 16px;
    flex-shrink: 0;
    margin-right: 4px;
    opacity: 0;
    color: var(--motul-red);
    font-weight: 700;
    font-size: 13px;
}

.ts-dropdown .option.selected .ts-check { opacity: 1; }
.ts-group-sep { height: 1px; background: var(--border); margin: 4px 0; }

.ts-opt-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
    margin-right: 8px;
}

.ts-wrapper .ts-control .item {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
    border-radius: 99px !important;
    padding: 1px 8px !important;
}

.ts-overflow-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: default;
    margin: 2px;
    white-space: nowrap;
}

/* ── Тосты ──────────────────────────────────────────────────────────────────────────────── */
.toast {
    border-radius: 12px !important;
    box-shadow: var(--shadow-lg) !important;
    font-size: 14px !important;
    border: 0 !important;
}

/* ── Офлайн-режим ───────────────────────────────────────────────────────────────────────── */

/* Действия с корзиной, требующие живых данных сервера - недоступны офлайн (order/cart.html). */
html.is-offline .needs-online {
    pointer-events: none !important;
    opacity: .5;
}

/* Чекбоксы выбора строк (bootstrap-table .bs-checkbox) нужны только для массовых действий,
   которые бьют по серверу и офлайн не работают - выключаем целиком. */
html.is-offline .bs-checkbox {
    pointer-events: none !important;
    opacity: .5;
}

/* Подсказка «заказ уйдёт в очередь» под кнопкой оформления (order/cart.html) - только офлайн. */
.offline-order-hint { display: none; }
html.is-offline .offline-order-hint { display: block; }

/* ── Отдельные элементы страниц ─────────────────────────────────────────────────────────── */

/* Кнопки +/- у количества - только на мобильном (d-sm-none в разметке). */
@media (max-width: 575.98px) {
    .cart-qty-input,
    .product-qty-input { -moz-appearance: textfield; }

    .cart-qty-input::-webkit-outer-spin-button,
    .cart-qty-input::-webkit-inner-spin-button,
    .product-qty-input::-webkit-outer-spin-button,
    .product-qty-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
}

/* На десктопе соседние +/- скрыты - полю нужно скругление с обеих сторон. */
@media (min-width: 576px) {
    .cart-qty-input,
    .product-qty-input { border-radius: var(--radius-md) !important; }
}

/* Строка пункта/вопроса в редакторе шаблона, перетаскиваемая за ручку (template-form.js). */
.item-row.dragging { opacity: .5; }
.item-row .drag-handle:active { cursor: grabbing; }


/* ── Страница списка (редизайн 2026-09, «Торговые точки») ───────────────────────────────── */
.page-head { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 20px; }
.page-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.page-head .page-title { margin: 0; }
.page-head .btn { min-height: 44px; }
.page-subtitle { font-size: 14px; color: var(--text-secondary); }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi-grid .stat-card { border-radius: var(--radius-lg); }
.stat-card-filter { cursor: pointer; }
.stat-card .label-short { display: none; }
.stat-card .dot { display: none; width: 8px; height: 8px; border-radius: 50%; background: var(--motul-red); }
.stat-card.active .dot { display: inline-block; }

/* Карточка списка: строка фильтров, панель выбранного, таблица и пагинация - одним блоком */
.list-card {
    background: var(--surface-0);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.list-card .filter-bar { margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); }
.list-card .filter-bar .search-field { flex-basis: 320px; background: var(--surface-0); border: 1px solid var(--border-strong); }
.list-card .filter-bar .chip { height: 40px; padding: 0 12px; border-radius: var(--radius-md); }
.list-card .filter-bar .chip i { font-size: 11px; }
.list-card .bulk-bar.has-selection { margin: 0; border-radius: 0; padding: 10px 16px; }

.chip .chip-open { border: 0; background: transparent; padding: 0; color: inherit; font: inherit; display: inline-flex; align-items: center; gap: 6px; }

.list-card .bootstrap-table .fixed-table-container { border: 0 !important; border-radius: 0; }
.list-card .fixed-table-container .table thead th .th-inner { padding: 13px 16px; }
.list-card .table td { padding: 10px 16px !important; height: 60px; }
.list-card .fixed-table-pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0 16px;
    border-top: 1px solid var(--border-soft);
}

.list-card .fixed-table-pagination::after { display: none; }
.list-card .fixed-table-pagination > .pagination-detail,
.list-card .fixed-table-pagination > .pagination { float: none !important; margin: 12px 0; }
.list-card .fixed-table-pagination > .pagination { margin-left: auto; }
.list-card .fixed-table-pagination .pagination-detail { display: flex; align-items: center; gap: 12px; }
.list-card .fixed-table-pagination .page-list { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.list-card .fixed-table-pagination .page-list .btn { min-height: 32px; border-radius: 8px !important; font-size: 13px; }
.list-card .pagination { gap: 4px; margin: 0; }
.list-card .pagination .page-link {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 8px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.list-card .pagination .page-pre .page-link,
.list-card .pagination .page-next .page-link { border: 1px solid var(--border); background: var(--surface-0); }
.list-card .pagination .page-item.active .page-link { font-weight: 600; }

/* ячейки списка точек */
.cell-stack { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cell-title { font-size: 14px; font-weight: 600; color: var(--text-primary); text-decoration: none; }
a.cell-title:hover { color: var(--motul-red-text); }
.cell-sub { font-size: 12px; color: var(--text-secondary); }
.cell-chevron { display: none; }
.cell-title-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.credit-mark:empty { display: none; }
.credit-mark { position: relative; z-index: 1; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%; font-size: 11px; cursor: help; }
.credit-mark.overdue { background: rgba(200, 16, 46, .12); color: var(--motul-red-text, #c8102e); }
.credit-mark.debt { background: rgba(217, 119, 6, .14); color: #b45309; }
[data-theme="dark"] .credit-mark.debt { color: #fbbf24; }
.customers-list td.col-name { min-width: 220px; }
.customers-list td.col-inn { font-size: 13px; color: var(--text-body) !important; white-space: nowrap; }
.customers-list td.col-createdAt { font-size: 13px; color: var(--text-body) !important; white-space: nowrap; }
.next-payment { display: inline-flex; flex-direction: column; gap: 2px; }
.next-payment-date { font-weight: 600; color: var(--text-primary); }

.funnel-cell { display: flex; align-items: center; gap: 10px; }
.funnel-cell .funnel-bar { flex-shrink: 0; }
.funnel-label {
    font-size: 13px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.person-cell { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; max-width: 100%; }
.person-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar.tone-1 { background: #e0e7ff; color: #3730a3; }
.avatar.tone-2 { background: #dcfce7; color: #166534; }
.avatar.tone-3 { background: #fef3c7; color: #92400e; }
.avatar.tone-4 { background: #fce7f3; color: #9d174d; }
.avatar.tone-5 { background: #e0f2fe; color: #075985; }

.link-assign {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--motul-red-text);
    font-size: 13px;
    font-weight: 600;
}

.link-assign:hover { text-decoration: underline; }
.mobile-only { display: none; }

/* круглая кнопка «Новая точка» над нижней панелью (только телефон) */
.fab {
    position: fixed;
    right: 16px;
    bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 1025;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: var(--motul-red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(238, 58, 67, .35);
}

.fab:hover { color: #fff; }

@media (max-width: 1199.98px) {
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .page-head { margin-bottom: 12px; }
    .page-subtitle { font-size: 13px; }

    /* плитки -> лента «пилюль»: «Актуализация · 1 235» */
    .kpi-grid {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        margin: 0 -16px 12px;
        padding: 0 16px;
        scrollbar-width: none;
    }

    .kpi-grid::-webkit-scrollbar { display: none; }
    .kpi-grid .stat-card,
    .kpi-grid .stat-card.active {
        flex-direction: row;
        align-items: center;
        flex-shrink: 0;
        gap: 6px;
        height: 36px;
        padding: 0 12px;
        border-radius: 99px;
        border: 1px solid var(--border-strong);
        white-space: nowrap;
    }

    .kpi-grid .stat-card .label,
    .kpi-grid .stat-card .value { font-size: 13px; font-weight: 600; color: var(--text-body); letter-spacing: 0; }
    .kpi-grid .stat-card .value::before { content: "· "; }
    .kpi-grid .stat-card .dot { display: none !important; }
    .kpi-grid .stat-card .label-full { display: none; }
    .kpi-grid .stat-card .label-short { display: inline; }
    .kpi-grid .stat-card.active { background: var(--motul-red); border-color: var(--motul-red); }
    .kpi-grid .stat-card.active .label,
    .kpi-grid .stat-card.active .value { color: #fff; font-weight: 700; }

    /* карточка списка растворяется: поиск и фильтры сверху, строки - отдельные карточки */
    .list-card { background: transparent; border: 0; border-radius: 0; overflow: visible; }
    .list-card .filter-bar { padding: 0 0 12px; border: 0; }
    .list-card .filter-bar .search-field { flex-basis: 100%; min-height: 44px; border: 0; border-radius: 12px; background: var(--surface-2); }
    .list-card .filter-bar .chip { height: 36px; }

    .customers-list .fixed-table-header,
    .customers-list thead { display: none !important; }
    .customers-list .bootstrap-table .fixed-table-container { background: transparent; overflow: visible; }
    .customers-list table.table,
    .customers-list table.table tbody { display: block; }

    .customers-list table.table tbody tr {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 0;
        margin-bottom: 10px;
        padding: 14px;
        background: var(--surface-0) !important;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
    }

    .customers-list table.table tbody tr td {
        display: block;
        height: auto;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .customers-list td.bs-checkbox,
    .customers-list td.col-inn { display: none !important; }
    .customers-list td.col-name { flex: 0 0 100%; min-width: 0; display: flex !important; align-items: flex-start; gap: 8px; }
    .customers-list td.col-name .cell-stack { flex: 1; }
    .customers-list .cell-title { font-size: 16px; }
    /* вся карточка - ссылка на точку */
    .customers-list a.cell-title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
    .customers-list .cell-chevron { display: block; color: var(--text-muted); font-size: 14px; padding-top: 4px; }
    .customers-list td.col-status { flex: 0 0 100%; }
    .customers-list .funnel-bar > span { width: 12px; }
    .customers-list td.col-managers,
    .customers-list td.col-createdAt { font-size: 13px; color: var(--text-body) !important; }
    .customers-list td.col-managers { order: 1; }
    .customers-list td.col-createdAt { order: 2; }
    .customers-list td.col-createdAt::before { content: "·"; margin: 0 6px; }
    .customers-list { margin-bottom: 72px; } /* пагинация не прячется под круглой кнопкой */
    .customers-list td.col-managers .avatar { display: none; }
    .customers-list .link-assign { display: none; }
    .customers-list .mobile-only { display: inline; }
    .customers-list .no-records-found td { flex: 1; text-align: center; }

    .list-card .fixed-table-pagination { border: 0; padding: 0; justify-content: center; }
    .list-card .fixed-table-pagination > .pagination { margin-left: 0; }
    .list-card .fixed-table-pagination .page-list { display: none !important; }
}

/* кнопка темы: луна в светлой теме, солнце в тёмной */
.theme-icon { display: inline-flex; }
.theme-icon .ico { width: 20px; height: 20px; }
.theme-sun { display: none; }
:root[data-bs-theme="dark"] .theme-moon { display: none; }
:root[data-bs-theme="dark"] .theme-sun { display: inline-flex; }

/* «хлебные крошки» в шапке (fragments/header.html) */
.header-crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; color: var(--text-secondary); }
.header-crumbs a { color: var(--text-secondary); text-decoration: none; white-space: nowrap; }
.header-crumbs a:hover { color: var(--text-primary); }
.header-crumbs .sep { color: var(--text-muted); }
.header-crumbs .current { color: var(--text-primary); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 991.98px) { .header-crumbs { display: none; } }

.header-back { display: none; }
@media (max-width: 991.98px) {
    .app-header:has(.header-back) .header-brand { display: none; }
    .header-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 44px;
        font-size: 16px;
        font-weight: 700;
        color: var(--text-primary);
        text-decoration: none;
    }
    .header-back .ico { width: 22px; height: 22px; }
}

/* счётчик в пункте меню не растягивается (общее правило .nav-link span { flex: 1 }) */
.sidebar-menu .nav-link span.sidebar-count { flex: 0 0 auto; }

/* Белая карточка-блок страницы (карточка точки, оформление заказа) */
.panel {
    background: var(--surface-0);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.panel h2 { margin: 0; font-size: 16px; font-weight: 700; font-family: var(--font-body); letter-spacing: 0; }

/* вкладки раздела «Заказы» в шапке (fragments/order-tabs.html) */
.header-tabs { align-self: stretch; display: flex; }
.header-tabs .nav-tabs { margin: 0 !important; border: 0; gap: 8px; height: 100%; flex-wrap: nowrap; }
.header-tabs .nav-link {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0;
    background: transparent !important;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
}

.header-tabs .nav-link:hover { color: var(--text-primary); }
.header-tabs .nav-link.active { color: var(--text-primary); font-weight: 700; border-bottom-color: var(--motul-red) !important; }
.tab-count {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 99px;
    background: var(--motul-red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 991.98px) { .header-tabs { display: none; } }

/* ── Оформление заказа (order/cart.html) ─────────────────────────────────────────────────── */
.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }
.checkout-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.checkout-main .page-head { margin-bottom: 0; }

.checkout-customer { flex-direction: row; align-items: center; gap: 16px; padding: 18px 22px; }
.checkout-customer-icon {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px;
    background: var(--motul-red-light); color: var(--motul-red-text);
    display: flex; align-items: center; justify-content: center;
}
.checkout-customer-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.checkout-customer-text small { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.checkout-customer-text b { font-size: 16px; font-weight: 700; }
.checkout-customer .btn { min-height: 40px; }

.cart-items { padding: 0; gap: 0; overflow: hidden; }
.cart-items-head { display: flex; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--border-soft); }
.cart-items-head h2 { flex: 1; }
.cart-items-head a { font-size: 14px; font-weight: 600; }

#cartItemsTable td { padding: 16px 12px !important; height: auto; border-bottom: 1px solid var(--border-soft) !important; }
#cartItemsTable td:first-child { padding-left: 22px !important; }
#cartItemsTable td:last-child { padding-right: 16px !important; }
#cartItemsTable tbody tr:hover { background: transparent !important; }
.cart-item-name { display: flex; flex-direction: column; gap: 6px; }
.cart-name { font-size: 14px; font-weight: 600; line-height: 1.35; }
.cart-sub { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; color: var(--text-secondary); }
.cart-sub .tag { font-size: 12px; }
.cart-item-qty { width: 150px; }
.cart-item-price { width: 130px; text-align: right; white-space: nowrap; font-size: 13px; color: var(--text-secondary) !important; }
.cart-item-price .per-unit { display: none; }
.cart-item-sum { width: 130px; text-align: right; white-space: nowrap; font-size: 15px; font-weight: 700; }
.cart-item-remove { width: 56px; }
.cart-item-remove .icon-btn { color: var(--text-muted); }
.cart-item-remove .icon-btn:hover { color: var(--motul-red-text); }
.cart-item-remove .ico { width: 18px; height: 18px; }

/* − кол-во + */
.qty-stepper { flex-wrap: nowrap; height: 40px; border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; width: 132px; }
.qty-stepper .btn {
    width: 40px; min-height: 0; height: 38px; padding: 0; border: 0 !important; border-radius: 0 !important;
    background: var(--surface-3) !important; font-size: 18px; color: var(--text-body) !important;
}
.qty-stepper .btn:hover { background: var(--surface-2) !important; }
.qty-stepper .form-control {
    min-height: 0; height: 38px; border: 0 !important; border-radius: 0 !important; padding: 0;
    text-align: center; font-size: 15px; font-weight: 600; box-shadow: none !important; -moz-appearance: textfield;
}
.qty-stepper .form-control::-webkit-outer-spin-button,
.qty-stepper .form-control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* правая колонка */
.checkout-side { padding: 24px; gap: 18px; position: sticky; top: 0; }
.checkout-side h2 { font-size: 18px; }
.checkout-side .mb-3 { margin-bottom: 0 !important; }
#addressBlock { position: relative; }

.seg-toggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--surface-2); border-radius: 12px; }
.seg-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.seg-toggle label {
    height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 9px;
    font-size: 14px; font-weight: 600; color: var(--text-secondary); cursor: pointer; margin: 0;
}
.seg-toggle input:checked + label { background: var(--surface-0); color: var(--text-primary); font-weight: 700; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.seg-toggle input:focus-visible + label { outline: 2px solid var(--motul-red); }

.checkout-summary { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid var(--border-soft); font-size: 14px; }
.summary-row, .summary-total { display: flex; align-items: baseline; }
.summary-row span:first-child, .summary-total span { flex: 1; }
.summary-row span:first-child { color: var(--text-secondary); }
.summary-total span { font-size: 16px; font-weight: 600; }
.summary-total b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }

.checkout-note { display: flex; gap: 10px; padding: 12px; border-radius: 12px; background: var(--warning-bg); color: var(--warning-text); font-size: 13px; line-height: 1.4; }
.checkout-note .ico { width: 18px; height: 18px; flex-shrink: 0; }
.checkout-note-muted { background: var(--surface-3); color: var(--text-body); }
.checkout-submit { display: flex; flex-direction: column; gap: 12px; }
.checkout-submit-total { display: none; }
.checkout-submit .btn { min-height: 52px; font-size: 16px; }

@media (max-width: 1199.98px) {
    .checkout { grid-template-columns: minmax(0, 1fr); }
    .checkout-side { position: static; }
}

@media (max-width: 767.98px) {
    .checkout { gap: 12px; padding-bottom: 120px; }
    .checkout-main { gap: 12px; }
    .checkout-customer { padding: 12px 14px; gap: 10px; border-radius: var(--radius-lg); }
    .checkout-customer-icon { display: none; }
    .checkout-customer-text b { font-size: 14px; }

    /* строки товаров -> карточки: название, метка остатка, «− кол-во +» и сумма */
    .cart-items { background: transparent; border: 0; border-radius: 0; overflow: visible; }
    .cart-items-head { padding: 0 0 4px; border: 0; }
    #cartItemsTable, #cartItemsTable tbody { display: block; }
    #cartItemsTable tr {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "name name del" "qty price price" "qty sum sum";
        align-items: center;
        column-gap: 10px;
        margin-bottom: 10px;
        padding: 14px;
        background: var(--surface-0);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
    }
    #cartItemsTable td { display: block; padding: 0 !important; border: 0 !important; width: auto; }
    #cartItemsTable td.cart-item-name { grid-area: name; padding-bottom: 10px !important; }
    #cartItemsTable td.cart-item-remove { grid-area: del; align-self: start; margin: -8px -8px 0 0; }
    #cartItemsTable td.cart-item-qty { grid-area: qty; }
    #cartItemsTable td.cart-item-price { grid-area: price; font-size: 12px; align-self: end; }
    #cartItemsTable td.cart-item-sum { grid-area: sum; font-size: 16px; align-self: start; }
    .cart-item-price .per-unit { display: inline; }
    .qty-stepper { height: 44px; width: 128px; }
    .qty-stepper .btn, .qty-stepper .form-control { height: 42px; }
    .qty-stepper .btn { width: 44px; }

    .checkout-side { padding: 14px; border-radius: var(--radius-lg); gap: 14px; }
    .checkout-summary { display: none; }

    /* итог и «Отправить заказ» - закреплены внизу экрана */
    .checkout-submit {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020;
        padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
        padding: 12px 16px; gap: 10px;
        background: var(--surface-0); border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(0, 0, 0, .05);
    }
    .checkout-submit-total { display: flex; align-items: baseline; }
    .checkout-submit-total span { flex: 1; font-size: 14px; color: var(--text-secondary); }
    .checkout-submit-total b { font-size: 22px; font-weight: 700; }
}

/* офлайн-подсказка в оформлении заказа - только без сети (display задаётся тут, после .checkout-note) */
.checkout-note.offline-order-hint { display: none; }
html.is-offline .checkout-note.offline-order-hint { display: flex; }

@media (max-width: 991.98px) {
    /* вкладки раздела «Заказы» в странице - одной прокручиваемой строкой */
    .content-wrapper .nav-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .content-wrapper .nav-tabs::-webkit-scrollbar { display: none; }
    .content-wrapper .nav-tabs .nav-link { white-space: nowrap; }
}

@media (max-width: 767.98px) {
    #cartItemsTable td:first-child, #cartItemsTable td:last-child { padding-left: 0 !important; padding-right: 0 !important; }
}

/* пустые блоки ошибок/результата не дают лишний отступ в колонке */
.checkout-main > #cartResult:empty { display: none; }
#cartItemsTable tbody tr:last-child td { border-bottom: 0 !important; }

/* ── Задачи: доска (task/list.html, task/board.js) ────────────────────────────────────────── */
.seg-toggle-sm { display: grid; grid-template-columns: repeat(2, auto); padding: 4px; background: var(--surface-sunken); }
.seg-toggle-sm label { height: 36px; padding: 0 14px; font-size: 13px; }
.page-head .seg-toggle-sm { align-self: flex-end; }

.tasks-toolbar { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 20px; }
.tasks-toolbar .filter-bar { margin: 0; flex: 1; min-width: 0; }
.quick-chips { display: flex; gap: 8px; flex-shrink: 0; }
.quick-chips .chip { height: 36px; }
.quick-chips .chip.active { background: var(--text-primary); border-color: var(--text-primary); color: var(--surface-0); }

.task-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.board-col {
    background: var(--surface-sunken);
    border-radius: var(--radius-xl);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 200px;
    transition: box-shadow var(--t), background var(--t);
}
.board-col.loading .board-cards { opacity: .5; }
.board-col.drop-over { box-shadow: inset 0 0 0 2px var(--motul-red); }
.board-col-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px; }
.board-col-head h2 { margin: 0; flex: 1; font-size: 14px; font-weight: 700; font-family: var(--font-body); letter-spacing: 0; }
.board-col-head .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted); }
.board-col-head .dot-warning { background: #d97706; }
.board-col-head .dot-success { background: #22a04b; }
.board-count { font-size: 13px; color: var(--text-secondary); }
.board-cards { display: flex; flex-direction: column; gap: 10px; }

.board-card {
    background: var(--surface-0);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--text-primary);
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    cursor: grab;
    transition: box-shadow var(--t), transform var(--t);
}
.board-card:hover { color: var(--text-primary); box-shadow: 0 4px 12px rgba(0, 0, 0, .08); }
.board-card.dragging { opacity: .5; }
.board-card.done { color: var(--text-secondary); }
.board-card.done .board-card-title { color: var(--text-body); }
.board-card-title { font-size: 15px; font-weight: 600; line-height: 1.3; }
.board-card-sub { font-size: 13px; color: var(--text-body); line-height: 1.4; }
.board-card-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); }
.board-card-meta .tag { font-size: 12px; }
.board-empty { border: 1.5px dashed var(--border-dashed); border-radius: 12px; padding: 20px; font-size: 13px; color: var(--text-secondary); text-align: center; }
.board-more { font-size: 12px; color: var(--text-secondary); text-align: center; padding: 4px; }

.board-tabs { display: none; }

@media (max-width: 991.98px) {
    .task-board { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
    .tasks-toolbar { margin-bottom: 12px; }
    .quick-chips { width: 100%; }
    .quick-chips .chip { height: 34px; }

    /* колонки - вкладками «Создано / В работе / Готово» */
    .board-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin: 0 -16px 12px;
        background: var(--surface-0);
        border-bottom: 1px solid var(--border);
    }
    .board-tabs.is-hidden { display: none; }
    .board-tabs button {
        height: 44px; border: 0; border-bottom: 3px solid transparent; background: transparent;
        font-size: 14px; font-weight: 600; color: var(--text-secondary);
    }
    .board-tabs button.active { border-bottom-color: var(--motul-red); font-weight: 700; color: var(--text-primary); }

    .task-board[data-mobile-col] .board-col { display: none; }
    .task-board[data-mobile-col="created"] .board-col[data-col="created"],
    .task-board[data-mobile-col="running"] .board-col[data-col="running"],
    .task-board[data-mobile-col="done"] .board-col[data-col="done"] { display: flex; }
    .board-col { background: transparent; padding: 0; min-height: 0; }
    .board-col-head { display: none; }
    .board-card { border: 1px solid var(--border); box-shadow: none; border-radius: 14px; gap: 8px; }
    .task-board { padding-bottom: 72px; }
}

@media (max-width: 767.98px) {
    /* фильтры по полям над доской задач - одной прокручиваемой строкой */
    .tasks-toolbar .filter-bar { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
    .tasks-toolbar .filter-bar::-webkit-scrollbar { display: none; }
    .tasks-toolbar .filter-bar > * { flex-shrink: 0; }
    .tasks-toolbar .filter-bar .search-field { flex: 0 0 220px; }
}

/* ── Сайдбар: кнопка «свернуть до иконок» (sidebar.js, класс html.sidebar-collapsed) ─────── */
.app-sidebar { transition: width .2s ease; }
.brand-row { display: flex; align-items: flex-start; gap: 4px; }
.brand-row .brand { flex: 1; min-width: 0; }
.sidebar-toggle {
    width: 36px; height: 36px; flex-shrink: 0; margin-top: -2px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink-muted);
    transition: background var(--t), color var(--t);
}
.sidebar-toggle:hover { background: var(--ink-2); color: #fff; }
.sidebar-toggle .arrow { transition: transform .2s ease; transform-origin: 14px 12px; }

@media (min-width: 992px) {
    html.sidebar-collapsed { --sidebar-w: 72px; }
    html.sidebar-collapsed .app-sidebar { padding-left: 12px; padding-right: 12px; }
    html.sidebar-collapsed .brand-row { justify-content: center; }
    html.sidebar-collapsed .brand-row .brand { display: none; }
    html.sidebar-collapsed .sidebar-toggle { margin: 0 0 16px; }
    html.sidebar-collapsed .sidebar-toggle .arrow { transform: scaleX(-1); }

    /* пункты - только иконка по центру, подпись скрыта (есть в подсказке) */
    html.sidebar-collapsed .sidebar-menu .nav-link { justify-content: center; padding: 0; gap: 0; position: relative; }
    html.sidebar-collapsed .sidebar-menu .nav-link > span:not(.sidebar-count) { display: none; }
    html.sidebar-collapsed .sidebar-menu .nav-link .ico { width: 20px; height: 20px; }
    /* счётчик (корзина) - маленький бейдж на иконке */
    html.sidebar-collapsed .sidebar-menu .nav-link span.sidebar-count {
        position: absolute; top: 3px; right: 6px;
        min-width: 16px; height: 16px; padding: 0 4px;
        font-size: 10px; line-height: 16px; text-align: center;
        background: var(--motul-red);
    }
    /* заголовки разделов - тонкий разделитель */
    html.sidebar-collapsed .sidebar-section { font-size: 0; padding: 0; margin: 10px 8px; border-top: 1px solid var(--ink-2); }
    html.sidebar-collapsed .sidebar-section:first-child { display: none; }

    /* карточка пользователя - только аватар */
    html.sidebar-collapsed .sidebar-user { justify-content: center; padding: 8px 0; background: transparent; }
    html.sidebar-collapsed .sidebar-user .who,
    html.sidebar-collapsed .sidebar-user > i { display: none; }
    html.sidebar-collapsed #sidebar-desktop .dropup .dropdown-menu { min-width: 240px; }
}
@media (min-width: 992px) {
    /* выпадающее меню пользователя шире свёрнутого сайдбара - не обрезать */
    html.sidebar-collapsed .app-sidebar { overflow: visible; }
}

/* кнопка бокового меню в шапке - только телефон/планшет (на десктопе сайдбар всегда виден) */
.header-menu-btn { display: none; }
@media (max-width: 991.98px) {
    .header-menu-btn { display: inline-flex; margin-left: -8px; }
    .header-menu-btn .ico { width: 22px; height: 22px; }
}

.checkout-agreement { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.checkout-agreement a { font-weight: 600; }

/* ── Подсказка «установите приложение» для iPhone/iPad (pwa-install-hint.js) ──────────────── */
.pwa-hint {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 1060;
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 12px 14px 14px;
    border-radius: 16px;
    background: var(--surface-0);
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
    animation: pwa-hint-in .25s ease-out;
}
@keyframes pwa-hint-in { from { transform: translateY(16px); opacity: 0; } }
.pwa-hint-icon { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; }
.pwa-hint-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.4; color: var(--text-secondary); }
.pwa-hint-text b { font-size: 14px; color: var(--text-primary); }
.pwa-hint-share { display: inline-flex; vertical-align: -3px; color: #0a84ff; }
.pwa-hint-close { width: 32px; height: 32px; flex-shrink: 0; margin: -6px -2px 0 0; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); font-size: 22px; line-height: 1; }
@media (min-width: 992px) { .pwa-hint { bottom: 24px; } }

/* Нижняя панель навигации на телефоне скрыта (2026-10) - разделы открываются кнопкой меню
   слева от логотипа в шапке (fragments/header.html). Разметка панели оставлена в layout.html,
   отступы плавающих кнопок пересчитаны от низа экрана. */
@media (max-width: 991.98px) {
    .app-bottom-nav { display: none !important; }
}

/* ── Просмотр заказа (order/view.html) ────────────────────────────────────────────────────── */
.order-facts { margin: 0; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px 12px; font-size: 14px; }
.order-facts dt { font-weight: 400; color: var(--text-secondary); }
.order-facts dd { margin: 0; overflow-wrap: anywhere; }
#orderItemsTable td { padding: 14px 12px !important; border-bottom: 1px solid var(--border-soft) !important; }
#orderItemsTable td:first-child { padding-left: 22px !important; }
#orderItemsTable tbody tr:last-child td { border-bottom: 0 !important; }
#orderItemsTable tbody tr:hover { background: transparent !important; }
.order-item-qty { width: 110px; white-space: nowrap; font-size: 14px; text-align: right; }

@media (max-width: 767.98px) {
    #orderItemsTable, #orderItemsTable tbody { display: block; }
    #orderItemsTable tr {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas: "name name" "qty price" "qty sum";
        column-gap: 10px;
        margin-bottom: 10px;
        padding: 14px;
        background: var(--surface-0);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
    }
    #orderItemsTable td { display: block; padding: 0 !important; border: 0 !important; width: auto; }
    #orderItemsTable td.cart-item-name { grid-area: name; padding-bottom: 8px !important; }
    #orderItemsTable td.order-item-qty { grid-area: qty; text-align: left; align-self: center; font-weight: 600; }
    #orderItemsTable td.cart-item-price { grid-area: price; font-size: 12px; }
    #orderItemsTable td.cart-item-sum { grid-area: sum; font-size: 16px; }
    .order-facts { grid-template-columns: 110px minmax(0, 1fr); }
}

/* Заказы на согласовании (approvalsCount) - бейдж янтарным, по аналогии с корзиной; не путать с ней */
.sidebar-count.approvals-count,
.sidebar-menu .nav-link.active .sidebar-count.approvals-count,
.nav-count.approvals-count,
.tab-count.approvals-count { background: #d97706; color: #fff; }
.sidebar-menu .nav-link .sidebar-count + .sidebar-count { margin-left: -6px; }
/* Непрочитанные в чате (chatUnreadCount, обновляет chat.js) - красным, как в мессенджерах */
.sidebar-count.chat-unread-count { background: var(--motul-red); }
@media (min-width: 992px) {
    /* свёрнутое меню: корзина - вверху иконки, согласование - внизу */
    html.sidebar-collapsed .sidebar-menu .nav-link span.sidebar-count.approvals-count {
        top: auto; bottom: 3px; background: #d97706;
    }
}

/* ── Единый поиск (шапка, search.js; страница /search) ──────────────────────────────────── */
.header-search { position: relative; width: min(360px, 32vw); display: flex; align-items: center; }
.header-search input {
    width: 100%; height: 38px; padding: 0 34px 0 36px;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--surface-sunken); color: var(--text-primary); font-size: 14px; outline: none;
}
.header-search input:focus { border-color: var(--border-strong); background: var(--surface-0); }
.header-search input::-webkit-search-cancel-button { display: none; }
.header-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); display: flex; pointer-events: none; }
.header-search-icon svg { width: 18px; height: 18px; }
.header-search-kbd {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    font-size: 11px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border-strong);
    background: var(--surface-0); color: var(--text-muted); pointer-events: none;
}
.header-search input:focus ~ .header-search-kbd { display: none; }
.header-search-dropdown {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 420px;
    max-height: min(70vh, 560px); overflow-y: auto; z-index: 1060;
    background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--radius-md);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .14); padding: 6px 0;
}
.header-search-dropdown.open { display: block; }
.header-search-btn { display: none; }
@media (max-width: 991.98px) {
    .header-search { display: none; }
    .header-search-btn { display: inline-flex; }
}

.search-group-title {
    display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
    padding: 8px 14px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
}
.search-group-title a { text-transform: none; letter-spacing: 0; font-weight: 500; }
.search-hit {
    display: flex; flex-direction: column; gap: 1px; padding: 7px 14px;
    color: var(--text-primary); text-decoration: none; border-left: 3px solid transparent;
}
.search-hit:hover, .search-hit.active { background: var(--surface-sunken); border-left-color: var(--motul-red); color: var(--text-primary); }
.search-hit .t { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-hit .s { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-hit mark { padding: 0; background: rgba(var(--motul-red-rgb), .14); color: inherit; border-radius: 2px; }
.search-empty { padding: 12px 14px; font-size: 13px; color: var(--text-secondary); }
.search-all { display: block; padding: 9px 14px; margin-top: 4px; border-top: 1px solid var(--border-soft); font-size: 13px; }

.search-page { max-width: 880px; margin: 0 auto; padding: 24px 16px 48px; }
.search-page form { display: flex; gap: 8px; margin-bottom: 20px; }
.search-page .search-card { background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 16px; padding: 4px 0; }
.search-page .search-hit .t, .search-page .search-hit .s { white-space: normal; }

/* ── Таблицы с поиском/сортировкой/страницами на клиенте (js/ui/grid.js, <table data-grid>) ────────────── */
.grid-tools { padding: 12px 16px; border-bottom: 1px solid var(--border-soft); }
.grid-tools[hidden] { display: none; }
.grid-tools .search-field { max-width: 360px; }
.list-card > .grid-tools:first-child, .panel > .grid-tools { padding: 0 0 12px; border: 0; }

th.grid-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.grid-sortable:hover { color: var(--text-primary); }
th.grid-sortable:focus-visible { outline: 2px solid var(--motul-red); outline-offset: -2px; }
th.grid-sortable::after {
    content: '\2195'; /* ↕ */
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    color: var(--text-muted);
    opacity: .6;
}
th.grid-sortable[aria-sort="ascending"]::after { content: '\2191'; color: var(--motul-red-text); opacity: 1; }
th.grid-sortable[aria-sort="descending"]::after { content: '\2193'; color: var(--motul-red-text); opacity: 1; }

tr.grid-empty td { padding: 24px 16px !important; text-align: center; color: var(--text-secondary); }

.grid-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-soft);
    font-size: 13px;
}
.grid-pager[hidden] { display: none; }
.grid-pager-info { color: var(--text-secondary); }
.grid-pager-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-left: auto; }
.grid-pg {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-0);
    color: var(--text-body);
    font-size: 13px;
    font-weight: 500;
}
.grid-pg:hover:not(:disabled) { border-color: var(--border-strong); color: var(--text-primary); }
.grid-pg.active { background: var(--motul-red); border-color: var(--motul-red); color: #fff; font-weight: 700; }
.grid-pg:disabled { opacity: .45; cursor: default; }
.grid-pg-gap { padding: 0 4px; color: var(--text-muted); }
.grid-pager-size { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); margin: 0; }
.grid-pager-size .form-select { width: auto; min-width: 76px; height: 34px; padding: 0 30px 0 10px; background-position: right 8px center; }
@media (max-width: 768px) {
    .grid-pager-pages { margin-left: 0; width: 100%; }
}