/* ============================================================
 * OWLS Brand System v1.0 (April 2026)
 * Базируется на OWLS Brand Book v1.0
 * Палитра: Deep Navy #0B1E35 · Signal Orange #F26336
 *          Paper #F6F4EF · Stone #E9E5DC · Pure White · Graphite #6B7280
 * Шрифт: Manrope (единый для UI и заголовков)
 * ============================================================ */
:root {
    /* ── Surfaces (Paper-warmth по брендбуку) ── */
    --color-bg: #F6F4EF;              /* Paper — основной фон приложения */
    --color-surface: #FFFFFF;         /* Pure White — карточки, панели */
    --color-surface-2: #E9E5DC;       /* Stone — вторичная поверхность */
    --color-surface-offset: #DCD8CB;  /* Stone darker — для контраста */
    --color-divider: #E9E5DC;
    --color-border: #E9E5DC;
    --color-border-hover: #DCD8CB;
    /* ── Text ── */
    --color-text: #0B1E35;            /* Ink */
    --color-text-secondary: #3F4956;
    --color-text-muted: #6B7280;      /* Graphite */
    --color-text-faint: #9CA3AF;
    --color-text-inverse: #F6F4EF;    /* Paper */
    /* ── Primary (Deep Navy) ── */
    --color-primary: #0B1E35;
    --color-primary-rgb: 11, 30, 53;
    --color-primary-light: #1B2C44;
    --color-primary-light-rgb: 27, 44, 68;
    --color-primary-hover: #050E1A;
    --color-primary-surface: #E8EBF0;
    --color-primary-border: rgba(11, 30, 53, 0.18);
    /* ── Accent (Signal Orange — CTA) ── */
    --color-accent: #F26336;
    --color-accent-rgb: 242, 99, 54;
    --color-accent-hover: #DA4F22;
    --color-accent-muted: rgba(242, 99, 54, 0.10);
    --color-accent-surface: #FDEEE7;
    --color-accent-border: rgba(242, 99, 54, 0.25);
    /* ── Sidebar (Stone-based) ── */
    --n1-sb-bg:       #E9E5DC;
    --n1-sb-hover:    #DCD8CB;
    --n1-sb-active:   #FFFFFF;
    --n1-sb-border:   #DCD8CB;
    --n1-sb-text:     #6B7280;
    --n1-sb-text-act: #0B1E35;
    /* ── Status ── */
    --color-success: #2D8A47;
    --color-success-bg: #ECFDF3;
    --color-success-border: rgba(45, 138, 71, 0.38);
    --color-success-light: #34A85B;
    --color-error: #B91C1C;
    --color-error-rgb: 185, 28, 28;
    --color-error-bg: #FEF2F2;
    --color-error-border: rgba(var(--color-error-rgb), 0.45);
    --color-warning: #D97706;
    --color-warning-rgb: 217, 119, 6;
    --color-warning-bg: #FFFBEB;
    --color-warning-light: #F59E0B;
    /* ── Typography (единый Manrope) ── */
    --font-display: 'Manrope', 'Inter', 'petrovsans', system-ui, Helvetica, Arial, sans-serif;
    --font-body: 'Manrope', 'Inter', 'petrovsans', system-ui, Helvetica, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;
    --text-xs: 0.7rem;
    --text-bt: 0.8rem;
    --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem);
    --text-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
    --text-lg: clamp(1rem, 0.9rem + 0.5vw, 1.2rem);
    --text-2xl: clamp(1.5rem, 1.1rem + 2vw, 2.25rem);
    /* ── Shape ── */
    --radius-xs: 3px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 14px;
    --radius-pill: 9999px;
    /* ── Shadows ── */
    --shadow-xs: 0 1px 2px rgba(11, 30, 53, 0.05);
    --shadow-sm: 0 2px 4px rgba(11, 30, 53, 0.07);
    --shadow-md: 0 4px 12px rgba(11, 30, 53, 0.08), 0 1px 3px rgba(11, 30, 53, 0.06);
    --shadow-lg: 0 12px 28px rgba(11, 30, 53, 0.10), 0 4px 8px rgba(11, 30, 53, 0.06);
    /* ── Spacing (4px grid) ── */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    /* ── Motion ── */
    --t-fast: 120ms cubic-bezier(0.16, 1, 0.3, 1);
    --t-base: 180ms cubic-bezier(0.16, 1, 0.3, 1);
    --t-slow: 280ms cubic-bezier(0.16, 1, 0.3, 1);
    /* Высота полосы шапки сайдбара (.nav-top / .logo-holder) — синхрон с rz-tabview-nav */
    --nav-top-toolbar-height: 54px;
    /* Горизонтальные отступы article (синхрон с MainLayout.razor.css + Bootstrap px-4 на узких экранах) */
    --article-pad-x-start: 1.5rem;
    --article-pad-x-end: 1.5rem;
}

/* ============================================================
 * OWLS DARK THEME — Ink-фон + Signal Orange CTA
 * Primary в Dark = Signal Orange (брендбук Dark mode не специфицирует —
 * выбран Orange для максимальной видимости CTA на Ink фоне)
 * ============================================================ */
[data-theme="dark"] {
    /* ── Surfaces (Claude-black — чистый нейтральный чёрный) ── */
    --color-bg: #0A0A0A;              /* Почти чистый чёрный */
    --color-surface: #171717;         /* Карточки, панели, диалоги */
    --color-surface-2: #212121;       /* Вторичные поверхности */
    --color-surface-offset: #2C2C2C;  /* Hover-состояния */
    --color-divider: rgba(255,255,255,0.08);
    --color-border: rgba(255,255,255,0.08);
    --color-border-hover: rgba(255,255,255,0.16);
    /* ── Text ── */
    --color-text: #C3C2A9;
    --color-text-secondary: #A8A796;
    --color-text-muted: #7A7A6A;
    --color-text-faint: #525247;
    --color-text-inverse: #0A0A0A;
    /* ── Primary CTA (тёплый медно-оранжевый — как у Claude) ── */
    --color-primary: #CC785C;
    --color-primary-rgb: 204, 120, 92;
    --color-primary-light: #E08D6F;
    --color-primary-light-rgb: 224, 141, 111;
    --color-primary-hover: #B56347;
    --color-primary-surface: rgba(204, 120, 92, 0.12);
    --color-primary-border: rgba(204, 120, 92, 0.28);
    /* ── Accent (светлый для outline-кнопок) ── */
    --color-accent: #EEEEEE;
    --color-accent-rgb: 238, 238, 238;
    --color-accent-hover: #D0D0D0;
    --color-accent-muted: rgba(238, 238, 238, 0.08);
    --color-accent-surface: rgba(238, 238, 238, 0.05);
    --color-accent-border: rgba(238, 238, 238, 0.14);
    /* ── Sidebar ── */
    --n1-sb-bg: #111111;
    --n1-sb-hover: #1C1C1C;
    --n1-sb-active: #242424;
    --n1-sb-border: rgba(255,255,255,0.06);
    --n1-sb-text: #8A8A8A;
    --n1-sb-text-act: #EEEEEE;
    /* ── Status ── */
    --color-success: #3DBA7D;
    --color-success-bg: rgba(61, 186, 125, 0.12);
    --color-success-border: rgba(61, 186, 125, 0.25);
    --color-success-light: #3DBA7D;
    --color-error: #F47067;
    --color-error-rgb: 244, 112, 103;
    --color-error-bg: rgba(244, 112, 103, 0.12);
    --color-error-border: rgba(244, 112, 103, 0.28);
    --color-warning: #E5A54B;
    --color-warning-rgb: 229, 165, 75;
    --color-warning-bg: rgba(229, 165, 75, 0.12);
    --color-warning-light: #E5A54B;
    /* ── Shadows ── */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.55);
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.60);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.65), 0 1px 3px rgba(0,0,0,0.55);
    --shadow-lg: 0 12px 28px rgba(0,0,0,0.75), 0 4px 8px rgba(0,0,0,0.60);
}

/* ── Dark theme: override hardcoded gradients & whites ── */
[data-theme="dark"] #components-reconnect-modal .components-reconnect-show,
[data-theme="dark"] #components-reconnect-modal .components-reconnect-failed,
[data-theme="dark"] #components-reconnect-modal .components-reconnect-rejected {
    background-color: rgba(10, 10, 10, 0.92) !important;
}

/* Buttons: dark mode — все тулбарные кнопки (на токенах OWLS) */
[data-theme="dark"] .btn-primarywhite,
[data-theme="dark"] .btn-outline-primary,
[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .btn-outline-info,
[data-theme="dark"] .btnsmall,
[data-theme="dark"] .btn-ghost,
[data-theme="dark"] .products-toolbar-btn,
[data-theme="dark"] .products-toolbar-split-btn {
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
    background-color: var(--color-surface-2) !important;
}
[data-theme="dark"] .btn-primarywhite:hover,
[data-theme="dark"] .btn-outline-primary:hover,
[data-theme="dark"] .btn-outline-secondary:hover,
[data-theme="dark"] .btn-outline-info:hover,
[data-theme="dark"] .btnsmall:hover,
[data-theme="dark"] .btn-ghost:hover,
[data-theme="dark"] .products-toolbar-btn:hover:not(:disabled),
[data-theme="dark"] .products-toolbar-split-btn:hover {
    background: var(--color-surface-offset) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border-hover) !important;
}

[data-theme="dark"] .btn-primarygreen {
    background: var(--color-success-bg) !important;
    border-color: var(--color-success-border) !important;
    color: var(--color-success) !important;
}
[data-theme="dark"] .btn-primarygreen:hover {
    background: rgba(61, 186, 125, 0.22) !important;
}

[data-theme="dark"] .btn-primaryred,
[data-theme="dark"] .btn-outline-danger,
[data-theme="dark"] .btn-danger {
    background: var(--color-error-bg) !important;
    border-color: var(--color-error-border) !important;
    color: var(--color-error) !important;
}
[data-theme="dark"] .btn-primaryred:hover,
[data-theme="dark"] .btn-outline-danger:hover,
[data-theme="dark"] .btn-danger:hover {
    background: rgba(244, 112, 103, 0.22) !important;
}

[data-theme="dark"] .btn-success {
    background: var(--color-success-bg) !important;
    border-color: var(--color-success-border) !important;
    color: var(--color-success) !important;
}

/* Dark: .btn-primary использует CTA (Signal Orange), а не accent (= Paper в Dark) */
[data-theme="dark"] .btn-primary {
    background: var(--color-primary) !important;
    color: #FFFFFF !important;
    border-color: var(--color-primary) !important;
}
[data-theme="dark"] .btn-primary:hover:not(:disabled):not(.disabled) {
    background: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
    color: #FFFFFF !important;
}

/* Dark: .btn-accent (Signal Orange CTA из брендбука) — тот же CTA-стиль */
[data-theme="dark"] .btn-accent {
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-hover) 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid var(--color-primary-border) !important;
    box-shadow: 0 1px 3px rgba(var(--color-primary-rgb), 0.30) !important;
}

/* Products toolbar: opaque dark bg instead of white */
[data-theme="dark"] .products-toolbar {
    background: var(--color-surface) !important;
}


/* Glass tabview panels — dark override */
[data-theme="dark"] .rz-tabview.rz-tabview-top {
    background: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
[data-theme="dark"] .rz-tabview.rz-tabview-top > .rz-tabview-nav {
    background: var(--color-surface-offset) !important;
    border-bottom-color: var(--color-border) !important;
}
[data-theme="dark"] .rz-tabview.rz-tabview-top > .rz-tabview-panels {
    background: var(--color-surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
[data-theme="dark"] .rz-tabview.rz-tabview-top > .rz-tabview-nav > li.rz-tabview-selected > :is(a, button) {
    background: var(--color-surface) !important;
}

/* DataGrid dark fixes */
[data-theme="dark"] .rz-datatable-thead > tr > th {
    background: var(--color-surface-offset) !important;
    color: var(--color-text-muted) !important;
    border-color: var(--color-border) !important;
}
[data-theme="dark"] .rz-datatable-data > tr:hover {
    background: var(--color-surface-offset) !important;
}

/* Scrollbar in dark mode */
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--color-border-hover) !important;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--color-bg) !important;
}

/* ── Dark: RadzenChart — оси, подписи, сетка ── */
[data-theme="dark"] .rz-chart svg text {
    fill: var(--color-text-muted) !important;
}
[data-theme="dark"] .rz-chart svg line,
[data-theme="dark"] .rz-chart svg .rz-grid-line {
    stroke: var(--color-border) !important;
}

/* ── Dark: переключение логотипа в сайдбаре ── */
.logo-dark { display: none !important; }
[data-theme="dark"] .logo-light { display: none !important; }
[data-theme="dark"] .logo-dark { display: block !important; }

/* ── Dark: активный пункт меню сайдбара ── */
[data-theme="dark"] .nav-item a.active,
[data-theme="dark"] .nav-item .menu-draggable-link.active {
    background: #2C2C2C !important;
}

[data-theme="dark"] .products-toolbar-meta {
    color: var(--color-text) !important;
}


/* ── Dark: ContextMenu / popup ── */
[data-theme="dark"] .rz-popup {
    background: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    box-shadow: var(--shadow-lg) !important;
}
[data-theme="dark"] .rz-popup ul.rz-menu,
[data-theme="dark"] .rz-popup .rz-menu {
    background: var(--color-surface) !important;
}
[data-theme="dark"] .rz-popup .rz-navigation-item-wrapper .rz-navigation-item-link {
    color: var(--color-text) !important;
}
[data-theme="dark"] .rz-popup .rz-navigation-item-wrapper .rz-navigation-item-link .rz-navigation-item-icon,
[data-theme="dark"] .rz-popup .rz-navigation-item-wrapper .rz-navigation-item-link .material-icons {
    color: var(--color-text-muted) !important;
}
[data-theme="dark"] .rz-popup .rz-navigation-item-wrapper:hover .rz-navigation-item-link {
    background: var(--color-surface-offset) !important;
    color: var(--color-text) !important;
}
[data-theme="dark"] .rz-popup .rz-navigation-item-wrapper:hover .rz-navigation-item-link .rz-navigation-item-icon,
[data-theme="dark"] .rz-popup .rz-navigation-item-wrapper:hover .rz-navigation-item-link .material-icons {
    color: var(--color-text) !important;
}
[data-theme="dark"] .rz-popup .rz-navigation-item-wrapper.rz-disabled .rz-navigation-item-link {
    color: var(--color-text-faint) !important;
    opacity: 0.5;
}

/* ── Dark: RadzenCard (<RadzenCard> = .rz-card.rz-variant-filled) ── */
[data-theme="dark"] .rz-card,
[data-theme="dark"] .rz-card.rz-variant-filled,
[data-theme="dark"] .rz-card.rz-variant-outlined,
[data-theme="dark"] .rz-card.rz-variant-flat,
[data-theme="dark"] .rz-card.rz-variant-text {
    background: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
    box-shadow: var(--shadow-sm) !important;
}
[data-theme="dark"] .rz-card .rz-card-title,
[data-theme="dark"] .rz-card .rz-card-subtitle,
[data-theme="dark"] .rz-card .rz-card-content,
[data-theme="dark"] .rz-card label,
[data-theme="dark"] .rz-card .rz-label {
    color: var(--color-text) !important;
}

/* ── Dark: RadzenCheckBox ── */
/* Переопределяем Radzen CSS-переменные чекбокса */
[data-theme="dark"] {
    --rz-checkbox-checked-background-color: #3b82f6;
    --rz-checkbox-checked-border: 1px solid #3b82f6;
    --rz-checkbox-checked-hover-background-color: #2563eb;
    --rz-checkbox-checked-hover-border: 1px solid #2563eb;
    --rz-checkbox-checked-color: #ffffff;
    --rz-checkbox-checked-icon-background-color: transparent;
}
/* Прямые overrides для надёжности */
[data-theme="dark"] .rz-chkbox-box {
    background-color: #2c2c2c !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
}
[data-theme="dark"] .rz-chkbox-box:hover:not(.rz-state-disabled) {
    background-color: #383838 !important;
    border-color: rgba(255,255,255,0.35) !important;
}
    [data-theme="dark"] .rz-chkbox-box.rz-state-active {
        background-color: #f47067 !important;
        border-color: #ff6a35 !important;
    }
[data-theme="dark"] .rz-chkbox-box.rz-state-active:hover:not(.rz-state-disabled) {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
}
[data-theme="dark"] .rz-chkbox-box .rzi,
[data-theme="dark"] .rz-chkbox-box .rzi-check {
    color: #ffffff !important;
    -webkit-text-stroke: 0 !important;
}

/* ── Dark: RadzenSwitch ── */
[data-theme="dark"] .rz-switch {
    background-color: var(--color-surface-offset) !important;
    border-color: var(--color-border-hover) !important;
}
[data-theme="dark"] .rz-switch.rz-state-active {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}
[data-theme="dark"] .rz-switch .rz-switch-circle:before {
    background: #fff !important;
}

/* ── Dark: org-messages badge ── */
[data-theme="dark"] .org-messages-type-badge {
    background: rgba(99, 130, 246, 0.15) !important;
    color: #93c5fd !important;
}

/*
 * ── site.css: оглавление крупных блоков (порядок в файле) ──
 * 1. :root — дизайн-токены N1-A / Zinc
 * 2. Blazor reconnect, базовые html/body, формы, утилиты
 * 3. LEGACY: см. секцию «Старые лейауты» (.twoblock — в основном Products.razor)
 * 4. Bootstrap .btn / варианты (products-toolbar, Radzen-совместимость)
 * 5. Финансы → бухгалтерия, тулбары товаров, прочие страничные блоки
 * 6. Radzen TabView — «стекло» для диалогов и вложенных табов (не main article.content)
 * 7. PageToolbarCustomizer, N1 GLOBAL OVERRIDES (DataGrid, формы, pager)
 * 8. Radzen Dialog / Notification, metric cards, settings, theme switch
 * 9. N1 Apple Gray — только main article.content: полоса табов, .nav-tabs, уточнения грида/кнопок
 *
 * Ручной чек-лист регрессии (после правок CSS):
 * - /products: грид, тулбар, табы, мобильная ширина
 * - Страница с Radzen TabView в main и типичный диалог с табами
 * - /payment/…: разметка без сайдбара
 * - Узкая ширина: сайдбар, верхняя панель, отступы article
 */

/* ============================================================ */

#components-reconnect-modal {
    position: fixed;
    inset: 0;
    z-index: 20000;
    pointer-events: none;
}

    #components-reconnect-modal > .components-reconnect-show,
    #components-reconnect-modal > .components-reconnect-failed,
    #components-reconnect-modal > .components-reconnect-rejected {
        display: none;
        position: fixed;
        left: 50%;
        bottom: 20px;
        transform: translateX(-50%);
        pointer-events: auto;
        width: 100%;
        height: -webkit-fill-available;
    }

    #components-reconnect-modal.components-reconnect-show > .components-reconnect-show {
        background-color: color-mix(in srgb, var(--color-surface) 86%, transparent);
        display: block;
        width: 100%;
        height: -webkit-fill-available;
    }

    #components-reconnect-modal.components-reconnect-failed > .components-reconnect-failed {
        display: block;
        background-color: color-mix(in srgb, var(--color-surface) 86%, transparent);
        width: 100%;
        height: -webkit-fill-available;
    }

    #components-reconnect-modal.components-reconnect-rejected > .components-reconnect-rejected {
        display: block;
        background-color: color-mix(in srgb, var(--color-surface) 86%, transparent);
        width: 100%;
        height: -webkit-fill-available;
    }

html, body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Topbar buttons (глобально, чтобы дочерние компоненты — AIChatLauncher и др. —
   видели те же стили что и кнопки в AppTopBar). Bootstrap-overrides справа в
   AppTopBar.razor.css только дополняют (профиль, badge-positioning). ── */
.topbar-icon-btn {
    position: relative;
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 120ms ease, border-color 120ms ease;
    font-size: 0;
}
.topbar-icon-btn:hover {
    background: var(--color-surface-2);
    border-color: var(--color-border-hover);
}
.topbar-icon-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Бейдж непрочитанных */
.topbar-badge {
    position: absolute;
    top: -5px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    font-size: 9px;
    font-weight: 700;
    line-height: 16px;
    color: #fff;
    background: var(--color-error);
    border-radius: 999px;
    text-align: center;
    pointer-events: none;
    box-sizing: border-box;
    white-space: nowrap;
}

/* ── Mobile NavMenu top-row buttons (тема / сообщения / профиль / AI-launcher).
   Глобально (а не scoped в NavMenu.razor.css), чтобы дочерние компоненты тоже видели стиль. */
.nav-mobile-topbar-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--n1-sb-text);
    font-size: 0.68rem;
    cursor: pointer;
    transition: background 0.15s;
    line-height: 1.2;
}
.nav-mobile-topbar-btn:hover,
.nav-mobile-topbar-btn:active {
    background: rgba(0, 0, 0, 0.06);
}
.nav-mobile-topbar-btn svg {
    flex-shrink: 0;
}
[data-theme="dark"] .nav-mobile-topbar-btn:hover,
[data-theme="dark"] .nav-mobile-topbar-btn:active {
    background: rgba(255, 255, 255, 0.08);
}

html {
    height: 100%;
    scroll-behavior: smooth;
}
body {
    background-color: var(--color-bg) !important;
    background-image: none !important;
    color: var(--color-text);
    font-family: var(--font-body);
    position: relative;
    min-height: 100%;
    font-size: 0.8rem;
    transition: background var(--t-slow), color var(--t-slow);
}
body.modal-open {
    overflow: hidden;
}
/* Заголовки — Manrope тяжёлых весов (брендбук OWLS) */
h1, h2, h3, h4, h5, h6,
.heading-display {
    font-family: var(--font-display);
    color: var(--color-text);
}
h1 { font-weight: 800; letter-spacing: -0.02em; }
h2 { font-weight: 700; letter-spacing: -0.01em; }
h3, h4, h5, h6 { font-weight: 700; }
@font-face {
    font-family: 'petrovsans';
    src: url('../fonts/petrovsans-trial-bold.woff') format('woff'), url('../fonts/petrovsans-trial-bold.woff2') format('woff2');
    font-weight: bold; /* жирное начертание */
    font-style: normal;
}
@font-face {
    font-family: 'petrovsans';
    src: url('../fonts/petrovsans-trial-regular.woff') format('woff'), url('../fonts/petrovsans-trial-regular.woff2') format('woff2');
    font-weight: normal; /* обычное начертание */
    font-style: normal;
}
@font-face {
    font-family: 'petrovsans';
    src: url('../fonts/petrovsans-trial-semibold.woff') format('woff'), url('../fonts/petrovsans-trial-semibold.woff2') format('woff2');
    font-weight: 300; /* полужирное: в файле указан вес 300 (исторически под light) */
    font-style: normal;
}
h1:focus {
    outline: none;
}
/* Кнопки-ссылки: без подчёркивания, цвет как у родителя */
.btn-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
/* Снятие стандартной обводки фокуса (глобально + Radzen) */
*:focus,
.rz-state-focused,
.rz-focus {
    outline: none !important;
    box-shadow: none !important;
}
label {
    font-size: 0.85rem;
}
.period-links {
    display: flex;
    gap: 12px;
    height: 10px;
    align-items: center;
}
.importexcel {
    display: flex;
    justify-content: start;
    gap: 10px;
}
.fontrem{
   font-size: var(--text-sm);
}
.tooltipp {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: 0px;
}
.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td.rz-frozen-cell.rz-frozen-cell-left:before, .rz-selectable tbody tr.rz-data-row.rz-state-highlight > td.rz-frozen-cell.rz-frozen-cell-left-inner:before {
    background-color: white!important;
}
tr.rz-data-row:hover:not(.rz-state-highlight) > td.rz-frozen-cell.rz-frozen-cell-left-inner:before {
    background-color: unset!important;
}

.headp {
    font-weight: 700;
    margin-bottom: var(--sp-3);
    color: var(--color-primary);
    font-size: var(--text-lg);
    letter-spacing: -0.01em;
}
.whiteblock {
    margin-bottom: var(--sp-3);
    display: flex;
    gap: var(--sp-3);
    flex-direction: column;
    background-color: var(--color-surface);
    padding: var(--sp-3);
    border-radius: var(--radius-xl);
    border: 0.5px solid var(--color-border);
    overflow: auto;
    box-shadow: none;
    transition: background var(--t-slow), border-color var(--t-slow);
}
.rz-fileupload-row {
    font-size: 0.8rem;
}

.procblock {
    background-color: var(--color-bg);
    padding: 6px;
    margin-top: 7px;
    border-radius: var(--radius-md);
    transition: background var(--t-slow);
    font-size: var(--text-sm);
}

.navbar-toggler {
    text-decoration: none;
    color: var(--color-primary);
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-md);
}
.navbar-toggler span {
    font-size: 1rem;
}
/* Блоки графиков на дашборде */
.charts-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin: 20px 0;
}

.chart-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--sp-5);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    transition: background var(--t-slow), border-color var(--t-slow);
}

.chart-header {
    margin-bottom: 15px;
    text-align: left;
}

    .chart-header h5 {
        margin: 0 0 5px 0;
        color: var(--color-text);
    }

    .chart-header small {
        color: var(--color-text-muted);
    }

.chart-stats {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--color-divider);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-weight: 500;
}

.chart-stats small {
    font-size: inherit;
    color: inherit;
}
.innertabs {
    margin: 0 !important;
    padding: 0 !important;
}
.innertabs .rz-tabview-panel {
    padding-top: 0 !important;
    padding-left: 0 !important;
}
.rz-tabview-panel:has(> .innertabs) {
    padding: 0 !important;
}
    /* Адаптив: графики и вкладки на узких экранах */
    @media (max-width: 768px) {
        .charts-container {
            flex-direction: column;
        }

        .chart-card {
            min-width: 100% !important;
        }

        .rz-tabview-nav {
            margin-top: 10px !important;
        }
    }
.procblock small {
    font-size: 12px;
}
.headpblue {
    font-weight: 700;
    margin-bottom: 0px;
    color: var(--color-accent);
    font-size: var(--text-lg);
}
/* Компактная вторичная кнопка */
.btnsmall {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: 600;
    text-decoration: none;
    -moz-user-select: none;
    white-space: nowrap;
    height: 28px;
    background-color: var(--color-surface);
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    transition: background var(--t-base), border-color var(--t-base), color var(--t-base), box-shadow var(--t-base);
    gap: 4px;
}
.barbuttons {
    display: flex;
}
.barconteiner {
    display: flex;
}
.bluebs {
    border-color: rgba(var(--color-primary-light-rgb), 0.25);
    background: transparent;
}
    .bluebs:hover {
        background: var(--color-surface-2);
        border-color: var(--color-border-hover);
    }
.gridblock {
    margin-bottom: 5px;
    text-wrap: nowrap;
    overflow: auto;
    padding: 3px;
    border-bottom: 1px solid var(--color-divider);
    display: flex;
    gap: 7px;
    justify-content: space-between;
    align-items: center;
}
.importexcblock {
    background-color: var(--color-surface-2);
    border-radius: 5px;
    padding: 5px;
}
    .period-link {
    color: var(--color-accent);
    cursor: pointer;
    text-decoration: none;
    font-size: var(--text-sm);
    padding: 2px 4px;
    border-radius: var(--radius-xs);
    font-weight: 600;
}
.tooltipinfo {
    background-color: var(--color-surface-2);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-sm);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-5);
    box-shadow: var(--shadow-xs);
    transition: background var(--t-slow);
}
.price-group {
    background: var(--color-bg);
    margin-bottom: var(--sp-5);
    overflow: hidden;
    padding: 10px;
    border-radius: var(--radius-md);
    transition: background var(--t-slow);
}
.price-group label {
    font-size:0.9rem;
}
.price-group-title {
    color: var(--color-text);
    padding: var(--sp-1) var(--sp-2);
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 700;
}
.price-group-content {
    padding: 7px;
    display: grid;
    gap: 5px;
    display: flex;
    flex-direction: column;
}

.form-group {
    margin-bottom: 0;
}

/* ������������ */
    @media (max-width: 768px) {
        .price-group-content {
            grid-template-columns: 1fr;
        }
    }

    .tooltipinfo p {
        margin: 0;
        color: var(--color-text-muted);
        font-size: 14px;
        line-height: 1.5;
    }

    .period-link:hover {
        text-decoration: underline;
        background-color: var(--color-accent-muted, rgba(25, 118, 210, 0.04));
    }

    .px-4 {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }

    .period-link:active {
        color: var(--color-accent-hover);
    }

    .clickable-stat {
        color: var(--color-accent);
        cursor: pointer;
        text-decoration: underline;
    }

    .wecheck {
        font-size: 0.8rem;
        align-items: center;
    }

.btn {
    font-size: var(--text-sm);
    font-weight: 600;
    height: 34px !important;
    gap: var(--sp-2);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    transition: background var(--t-base), color var(--t-base), border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}

    .icobtn {
        height: 34px;
        font-size: 1rem;
    }

    .clickable-stat:hover {
        color: var(--color-accent-hover);
        text-decoration: none;
    }

    .btn-link:hover {
        text-decoration: underline;
    }

    a, .btn-link {
        color: var(--color-accent);
    }

    .btn.disabled, .btn:disabled, fieldset:disabled .btn {
        opacity: 0.48 !important;
        color: var(--color-text-muted) !important;
        background: linear-gradient(180deg, #f3f4f6 0%, #e8eaef 100%) !important;
        border-color: rgba(var(--color-primary-rgb), 0.12) !important;
        box-shadow: none !important;
        transform: none !important;
        pointer-events: none;
    }
    .btn-primarywhite {
        color: var(--color-primary);
        background: linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
        border: 1px solid var(--color-primary-border);
        box-shadow: var(--shadow-xs);
    }

        .btn-primarywhite:hover:not(:disabled):not(.disabled) {
            background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-2) 100%);
            border-color: var(--color-primary-border);
            color: var(--color-primary-hover);
            box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.08);
        }

    .twograyb {
        background-color: var(--color-surface-2);
        display: flex;
        justify-content: space-between;
        font-size: 0.8rem;
        padding: 10px;
    }

    .backarrowbtn {
        margin-right: 10px;
        color: var(--color-primary);
        cursor: pointer;
    }

.form-control {
    font-size: var(--text-bt) !important;
    line-height: 1.2 !important;
}

    .btn-primarygreen {
        color: #0d5c2e;
        background: linear-gradient(180deg, #f6fff9 0%, #e8f5ee 100%);
        border: 1px solid rgba(13, 92, 46, 0.38);
        display: inline-flex;
        justify-content: center;
        align-items: center;
        gap: 0.45rem;
    }

        .btn-primarygreen:hover:not(:disabled):not(.disabled) {
            background: linear-gradient(180deg, #eefcf3 0%, #d8efe2 100%);
            border-color: rgba(13, 92, 46, 0.55);
            color: #064a24;
            box-shadow: 0 2px 8px rgba(13, 92, 46, 0.12);
        }

    .btn-primaryred {
        color: #b91c1c;
        background: linear-gradient(180deg, #fff8f8 0%, #ffe8e8 100%);
        border: 1px solid rgba(var(--color-error-rgb), 0.45);
        display: inline-flex;
        justify-content: center;
        align-items: center;
        gap: 0.45rem;
    }

        .btn-primaryred:hover:not(:disabled):not(.disabled) {
            background: linear-gradient(180deg, #fff5f5 0%, #ffd9d9 100%);
            border-color: rgba(var(--color-error-rgb), 0.65);
            color: #991b1b;
            box-shadow: 0 2px 8px rgba(var(--color-error-rgb), 0.12);
        }

    /* Нейтральная outline-кнопка в primary-цвете —
       как «Удалить» (red) и «Привязать» (green), только OWLS Navy.
       Используется для action-иконок (Добавить ШК, Копировать ШК/артикул). */
.btn-primaryblue {
    padding: 0 12px;
    border-radius: var(--radius-md);
    font-size: 12.5px;
    font-weight: 500;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    height: 36px;
    line-height: 1.2;
    transition: background 120ms ease, border-color 120ms ease;
}

        .btn-primaryblue:hover:not(:disabled):not(.disabled) {
            background: var(--color-primary-surface);
            border-color: rgba(var(--color-primary-rgb), 0.45);
            color: var(--color-primary-hover);
            box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.12);
        }
    [data-theme="dark"] .btn-primaryblue {
        color: var(--color-primary) !important;
        background: var(--color-primary-surface) !important;
        border: 1px solid var(--color-primary-border) !important;
    }
    [data-theme="dark"] .btn-primaryblue:hover:not(:disabled):not(.disabled) {
        background: rgba(var(--color-primary-rgb), 0.22) !important;
        border-color: rgba(var(--color-primary-rgb), 0.5) !important;
    }

    .disabled {
        pointer-events: none; /* ��������� ����� */
        opacity: 0.2;
        cursor: not-allowed; /* ������ ������ �� "����������" */
    }

    .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
    }

    .content {
        padding-top: 1.1rem;
    }

    .green {
        color: var(--color-success-light);
    }

    .red {
        color: var(--color-error);
    }

    #blazor-error-ui {
        background: lightyellow;
        bottom: 0;
        box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
        display: none;
        left: 0;
        padding: 0.6rem 1.25rem 0.7rem 1.25rem;
        position: fixed;
        width: 100%;
        z-index: 1000;
    }

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

    .form-groupcheck {
        display: flex;
        flex-direction: row-reverse;
        justify-content: left;
        gap: 5px;
        align-items: center;
    }

    .blazor-error-boundary {
        background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
        padding: 1rem 1rem 1rem 3.7rem;
        color: white;
    }

    .gabaritblock {
        background-color: var(--color-surface);
        padding: 5px;
    }

        .gabaritblock p {
            margin: 0px;
            font-size: var(--text-xs);
            color: var(--color-text);
        }

    .twoinfo {
        display: flex;
        gap: 3px;
        flex-direction: column;
    }

        .twoinfo p {
            margin: 0;
        }

        .twoinfo span {
            color: var(--color-warning);
            font-size: 0.8rem;
            padding: 5px;
            border-radius: 3px;
        }

    .form-group {
        display: flex;
        flex-direction: column;
    }

    .dimensions-input {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
.import-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex-direction: column;
}

/* Универсальная «строка-опция» импорта.
   Используется и в «Импорт» на странице Товары, и в диалоге «Импорт остатков»
   на странице склада. Иконка слева, название и подсказка справа выровнены по левому краю. */
.import-menu-item {
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
    width: 100%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.9rem;
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}
.import-menu-item:hover {
    background: var(--color-surface-2);
    border-color: var(--color-primary);
}
.import-menu-item__icon {
    grid-row: 1 / span 2;
    grid-column: 1;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: var(--color-surface-2, #f3f4f6);
}
.import-menu-item__icon i { font-size: 18px; color: var(--color-primary, #3b82f6); }
.import-menu-item__icon img { height: 22px; }
.import-menu-item__title {
    grid-row: 1; grid-column: 2;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text);
}
.import-menu-item__sub {
    grid-row: 2; grid-column: 2;
    color: var(--color-text-muted, #6b7280);
    font-size: 0.8rem;
    line-height: 1.3;
}
   
.form-group li label {
    cursor: pointer;
}

    .form-group:not(:first-child) {
        margin-top: 10px;
    }

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

    .top-row {
        background-color: unset !important;
    }

    /* ======================================================
     * N1-A: Sidebar Navigation — точно по брендбуку
     * Секция «Sidebar Navigation» из sellertech-brandbook.html
     * ====================================================== */
    .nav-item {
        font-size: 0 !important; /* сброс — размер задаётся на .nav-link */
        margin-bottom: 1px;
    }

    .nav-link {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        padding: var(--sp-2) var(--sp-3);
        border-radius: var(--radius-md);
        font-size: var(--text-sm);
        font-weight: 400;
        font-family: var(--font-body);
        color: var(--color-text-muted);
        cursor: pointer;
        transition: background var(--t-fast), color var(--t-fast);
        text-decoration: none !important;
        line-height: 1.4;
    }

        .nav-link .fas,
        .nav-link .fa-light,
        .nav-link .fa-solid,
        .nav-link i {
            margin-right: 0;
            width: 1.05rem;
            text-align: center;
            color: inherit;
            flex-shrink: 0;
            font-size: 1.02em;
            font-weight: 300;
            -webkit-font-smoothing: antialiased;
        }

        .nav-link .nav-menu-icon {
            margin-right: 0;
            width: 22px;
            min-width: 1.1rem;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: inherit;
        }

        .nav-link .nav-menu-icon svg {
            width: 18px;
            height: 18px;
            display: block;
            flex-shrink: 0;
            color: inherit;
        }
        .nav-link .nav-menu-icon-fa {
            font-size: 1.02em;
            line-height: 1;
            font-weight: 300;
            color: #1D1D1F;
        }
.rz-tabview-panel {
    padding: 15px;
}
    /* ����� ��������� (�������) */
    .menu-section {
        position: relative;
        margin: var(--sp-2) 0 var(--sp-1) 0;
        padding: var(--sp-1) 0;
    }
    .menu-section::before,
    .menu-section::after {
        content: "";
        position: absolute;
        left: var(--sp-3);
        right: var(--sp-3);
        height: 1px;
        background: var(--color-divider);
    }
    .menu-section::before {
        top: 0;
    }
    .menu-section::after {
        bottom: 0;
    }
    .menu-section-title {
        padding: 4px var(--sp-3);
        font-size: 0.68rem;
        font-weight: 600;
        color: var(--color-text-faint);
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
    .menu-section-items {
        display: flex;
        flex-direction: column;
    }
    .menu-subitem {
        margin-left: 6px;
        padding-left: 0.9rem !important;
        padding-right: 0.9rem !important;
    }

/* Плотный вертикальный ритм как у .sidebar-nav в брендбуке */
.sidebar .nav-shell nav.flex-column {
    gap: var(--sp-1);
}

/* N1-A: Sidebar nav-link hover/active — точно по брендбуку */
.nav-link:hover {
    background: var(--color-surface-2) !important;
    color: var(--color-text) !important;
}

/* Подпункты — тот же масштаб, что и .nav-item в брендбуке */
.menu-subitem .nav-link {
    font-size: var(--text-sm) !important;
    padding: var(--sp-2) var(--sp-3) !important;
}

    /* LEGACY layout: .twoblock / .twomainblock — Pages/Products.razor */
    .twoblock {
        flex: 3;
        position: relative; /* ����� ��� sticky */
        height: 100vh; /* ��� ����� ������ ������ */
        overflow-y: auto; /* �������� ��������� ������ ���������� */
    }

    .twomainblock {
        display: flex;
        gap: 20px;
    }

    .sidebar {
        background: var(--color-surface);
    }

    .custom-button {
        background-color: var(--color-success-light) !important;
        color: white !important;
        font-size: 1.1rem;
        font-weight: 300;
    }


    .custom-button:hover {
        background-color: var(--color-success) !important;
    }

    .custom-buttonred {
        background-color: var(--color-error) !important;
        color: white !important;
        font-size: 1.1rem;
        font-weight: 300;
    }

        .custom-buttonred:hover {
            background-color: var(--color-error) !important;
        }


    .scanner-container {
        position: relative;
        margin: 20px 0;
    }

.zxing-container div {
    display: flex;
    gap: 10px;
    align-items: start;
    margin-bottom: 15px;
    justify-content: space-between;
}

    #scanner-area, #video {
        background-color: var(--color-surface-2);
        border: 2px dashed var(--color-border);
        margin-bottom: 10px;
    }

    .scanner-container {
        background: var(--color-surface) !important;
    }

    .blockwithheader p {
        margin-bottom: 4px;
        font-size: 0.8rem;
    }

    .blockwithheader div {
        display: flex;
    }
    .blockwithheader:not(:first-child) {
        padding-left: 10px;
        border-left: 1px solid var(--color-divider);
    }


    .blockwithheader {
        display: flex; /* ������������� flex-��������� */
        align-items: start; /* ����������� �������� �� ��������� */
        gap: 10px; /* ������ ����� ���������� */
        flex-direction: column;
        white-space: nowrap; /* ��������� ������� ������ */
    }

/* N1-A: bticon = btn-ghost btn-sm из брендбука */
.bticon {
    font-size: var(--text-xs);
    padding: 4px 8px;
    height: 28px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    line-height: 0;
    vertical-align: middle;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}

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

    .checkbox-group {
        display: flex;
        gap: 5px;
        align-items: center;
    }

        .checkbox-group label {
            margin-left: 8px;
            cursor: pointer;
        }

            .checkbox-group label:hover {
                color: var(--color-accent);
            }

    .gridblist {
        display: flex;
        margin-right: 5px;
        gap: 3px;
        align-items: center;
    }

.settings-section {
    margin: 1rem 0;
    padding: 1rem;
    background-color: var(--color-surface-2);
    border-radius: 10px;
}

.lockblock {
    display: flex;
    align-items: anchor-center;
    gap: 20px;
    width: 350px;
    justify-content: space-evenly;
    font-size: 13px;
    padding: 10px;
    border-radius: 10px;
    margin: 0 auto;
    color: var(--color-error);
    background-color: color-mix(in srgb, var(--color-surface) 93%, transparent);
}

.limit {
    max-width: 720px;
    margin: 0 auto 16px auto;
    padding: 6px 8px;
    border-radius: 5px;
    font-size: 13px;
    color: var(--color-error);
    background-color: var(--color-surface-2);
    /* border: 1px solid #f5c2c7; */
    text-align: center;
}

.tariff-readonly-panel {
    width: 100%;
    max-width: 640px;
    padding: 14px 16px;
    border-radius: 8px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    font-size: 14px;
    text-align: left;
}

.tariff-readonly-title {
    margin: 0 0 12px 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text);
}

.tariff-readonly-subtitle {
    margin: 16px 0 8px 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
}

.tariff-readonly-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.tariff-readonly-table th,
.tariff-readonly-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
}

.tariff-readonly-table th {
    color: var(--color-text-muted);
    font-weight: 600;
    background: var(--color-surface-2);
}

.tariff-readonly-features {
    margin: 0;
    padding-left: 1.2rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

    .toggle-button {
        margin-top: 15px;
        padding: 10px 15px;
        background-color: var(--color-accent-muted);
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    .btn-check:active + .btn-secondary, .btn-check:checked + .btn-secondary, .btn-secondary.active, .btn-secondary:active, .show > .btn-secondary.dropdown-toggle {
        color: var(--color-warning);
        background-color: var(--color-warning-light);
        border-color: #bb7c00;
        font-size: 0.8rem;
    }

    .nav-scrollable {
        overflow-y: auto;
        max-height: calc(100vh - 60px);
        display: flex;
        flex-direction: column;
        gap: var(--sp-1);
        padding: var(--sp-2);
    }

    /* .form-buttons — единый footer диалогов, см. блок ниже (под `.form-buttons`).
       Здесь оставляем только base-flex без layout-specific правил, чтобы единый стиль не дублировался. */

    .toolbar {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
    }

    .cardsblock {
        display: flex;
        gap: 7px;
    }

.rz-radiobutton-label {
    font-size: 0.85rem !important;
}


/* ========== Единый вид Bootstrap .btn (N1 Apple Gray) ========== */
button.btn:not(.btn-link):not(.btn-close),
a.btn:not(.nav-link):not(.btn-link),
input[type="submit"].btn,
input[type="button"].btn,
label.btn {
    height: 32px;
    padding: 0 12px;
    border-radius: var(--radius-md);
    font-size: 12.5px;
    font-weight: 500;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    line-height: 1.2;
    transition: background 120ms ease, border-color 120ms ease;
}
button.btn:not(.btn-link):not(.btn-close):hover:not(:disabled):not(.disabled),
a.btn:not(.nav-link):not(.btn-link):hover:not(:disabled):not(.disabled) {
    background: var(--color-surface-2);
    border-color: var(--color-border-hover);
}

button.btn-sm,
a.btn-sm,
input.btn-sm {
    height: 28px;
    padding: 0 8px;
    font-size: 0.82rem;
    border-radius: var(--radius-md);
}

/* N1 Apple Gray: .btn-primary (accent blue) */
.btn-primary {
    background: var(--color-accent) !important;
    color: #FFFFFF !important;
    border-color: var(--color-accent) !important;
}
.btn-primary:hover:not(:disabled):not(.disabled) {
    background: var(--color-accent-hover) !important;
    border-color: var(--color-accent-hover) !important;
    color: #FFFFFF !important;
}
.btn-primary:active:not(:disabled):not(.disabled) {
    transform: translateY(1px);
}
/* N1-A: btn-outline-primary = secondary style (белый фон, navy текст) */
.btn-outline-primary {
    color: var(--color-primary);
    background: linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
    border: 1px solid var(--color-primary-border);
    box-shadow: var(--shadow-xs);
}

.btn-outline-primary:hover:not(:disabled):not(.disabled) {
    background: linear-gradient(180deg, #f8f9ff 0%, #eceff5 100%);
    border-color: rgba(var(--color-primary-light-rgb), 0.3);
    color: var(--color-primary-hover);
    box-shadow: 0 2px 8px rgba(var(--color-primary-light-rgb), 0.1);
}

.btn-outline-secondary {
    color: var(--color-text-muted);
    background: linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%);
    border: 1px solid rgba(var(--color-primary-rgb), 0.22);
}

.btn-outline-secondary:hover:not(:disabled):not(.disabled) {
    background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-2) 100%);
    border-color: rgba(var(--color-primary-rgb), 0.35);
    color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.06);
}

.btn-outline-danger {
    color: #b91c1c;
    background: linear-gradient(180deg, #ffffff 0%, #fff5f5 100%);
    border: 1px solid rgba(var(--color-error-rgb), 0.42);
}

.btn-outline-danger:hover:not(:disabled):not(.disabled) {
    background: linear-gradient(180deg, #fff5f5 0%, #ffe4e4 100%);
    border-color: rgba(var(--color-error-rgb), 0.6);
    color: #991b1b;
    box-shadow: 0 2px 8px rgba(var(--color-error-rgb), 0.1);
}

.btn-success {
    color: #0d5c2e;
    background: linear-gradient(180deg, #f6fff9 0%, #e8f5ee 100%);
    border: 1px solid rgba(13, 92, 46, 0.38);
}

.btn-success:hover:not(:disabled):not(.disabled) {
    background: linear-gradient(180deg, #eefcf3 0%, #d8efe2 100%);
    border-color: rgba(13, 92, 46, 0.55);
    color: #064a24;
    box-shadow: 0 2px 8px rgba(13, 92, 46, 0.12);
}

.btn-info {
    color: #0a4a5c;
    background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid rgba(14, 116, 144, 0.35);
}

.btn-info:hover:not(:disabled):not(.disabled) {
    background: linear-gradient(180deg, #e0f4ff 0%, #d0eafc 100%);
    border-color: rgba(14, 116, 144, 0.5);
    color: #063542;
    box-shadow: 0 2px 8px rgba(14, 116, 144, 0.12);
}

.btn-danger {
    color: #b91c1c;
    background: linear-gradient(180deg, #fff8f8 0%, #ffe8e8 100%);
    border: 1px solid rgba(var(--color-error-rgb), 0.45);
}

.btn-danger:hover:not(:disabled):not(.disabled) {
    background: linear-gradient(180deg, #fff5f5 0%, #ffd9d9 100%);
    border-color: rgba(var(--color-error-rgb), 0.65);
    color: #991b1b;
    box-shadow: 0 2px 8px rgba(var(--color-error-rgb), 0.12);
}

@media (prefers-reduced-motion: reduce) {
    .btn-primary:active:not(:disabled):not(.disabled),
    .products-toolbar-btn:active:not(:disabled) {
        transform: none;
    }
}

.alert {
    color: var(--color-text-muted);
    background-color: var(--color-surface-2);
    font-size:0.75rem;
    border-radius: var(--radius-md);
    position: relative;
    padding: var(--sp-3);
    border: 1px solid var(--color-divider);
    transition: background var(--t-slow), color var(--t-slow);
}

    .control-block {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
    }

    .search-block {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mainphoto {
        text-align: center;
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: start;
        padding: 10px;
        background-color: var(--color-bg);
        border-radius: 10px;
        align-items: start;
    }

    .search-input {
        width: 200px; /* ����������� ������ ���� ������ */
    height: 36px;
}

    .search-button {
        white-space: nowrap; /* ����� ����� �� ����������� */
    }


/* Заголовки вкладок: тот же ритм, что у неактивного пункта меню (.nav-link) */
.rtabitem {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 400;
    color: inherit;
    text-wrap: nowrap;
}

    .ozoncardmain {
        display: flex;
        gap: 2rem;
    }

    .rtabitem i {
        font-size: 1.125em;
        flex-shrink: 0;
    }
.rz-fileupload-choose .rz-button {
    height: 32px !important;
    width: unset;
}
/* ������ ��������: ��������� (����� �� ������ � ��� ����� ��������� flex � �����������) */
.products-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    overflow: auto;
    margin-bottom: 16px;
    padding: 10px 12px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--color-primary-rgb), 0.1);
    border-radius: 14px;
    font-size: 0.85rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--color-primary-rgb), 0.28) rgba(var(--color-primary-rgb), 0.06);
}

    .products-toolbar::-webkit-scrollbar {
        height: 8px;
    }

    .products-toolbar::-webkit-scrollbar-thumb {
        background: rgba(var(--color-primary-rgb), 0.22);
        border-radius: 8px;
    }

    .products-toolbar::-webkit-scrollbar-track {
        background: rgba(var(--color-primary-rgb), 0.05);
        border-radius: 8px;
    }

    /* Маркетплейс: тулбар с переносом и полями фильтров (как на странице «Товары») */
    .products-toolbar.marketplace-toolbar {
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 10px;
    }

    .products-toolbar.marketplace-toolbar .marketplace-toolbar-field {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }

    .products-toolbar.marketplace-toolbar .marketplace-toolbar-field > label.small {
        margin-bottom: 0;
    }

    .products-toolbar-sep {
        flex-shrink: 0;
        align-self: center;
        width: 1px;
        min-width: 1px;
        height: 28px;
        margin: 0 10px;
        border-radius: 1px;
        background: linear-gradient(
            to bottom,
            rgba(180, 188, 200, 0.2) 0%,
            #b4bcc8 14%,
            #b4bcc8 86%,
            rgba(180, 188, 200, 0.2) 100%
        );
        box-shadow: 1px 0 0 rgba(255, 255, 255, 0.85);
    }

    /* Цветные SVG в тулбарах (ToolbarActionIcon) */
    .toolbar-action-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        line-height: 0;
        vertical-align: middle;
    }

    .toolbar-action-icon svg {
        width: 1.125rem;
        height: 1.125rem;
        display: block;
    }



    .products-toolbar-btn--icon-lg .toolbar-action-icon svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    .toolbar-action-icon--spin {
        animation: toolbar-icon-spin 0.85s linear infinite;
    }

    @keyframes toolbar-icon-spin {
        to { transform: rotate(360deg); }
    }

    .toolbar-layout-label .toolbar-action-icon {
        margin-right: 6px;
    }

    .products-toolbar-search-icon .toolbar-action-icon svg {
        width: 1rem;
        height: 1rem;
    }

.products-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 7px 16px;
    font-size: var(--text-bt);
    line-height: 1.2;
    color: var(--color-primary);
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    cursor: pointer;
    transition: background var(--t-base), border-color var(--t-base), box-shadow var(--t-base), color var(--t-base), transform var(--t-base);
    white-space: nowrap;
}

    .products-toolbar-btn:hover:not(:disabled) {
        background: var(--color-surface-2) !important;
        color: var(--color-primary-hover);
        border-color: rgb(209 209 214);
    }

    .products-toolbar-btn:active:not(:disabled) {
        transform: translateY(1px);
    }

    .products-toolbar-btn:disabled {
        opacity: 0.48;
        cursor: not-allowed;
        box-shadow: none;
    }

    .products-toolbar-btn--icon {
        min-width: 38px;
        padding-left: 0.55rem;
        padding-right: 0.55rem;
    }

/* ── Доп. расходы / Файлы / Комментарии в закупках и приёмках ──
   Размер шрифта согласован с кнопками тулбара (var(--text-bt) = 0.8rem).
   Используется в CreateOrderDialog (Доп.Информация tab) и AcceptSee (Доп. информация tab). */
.po-file-list,
.po-comments-list,
.po-comment {
    font-size: var(--text-bt);
}

/* ── Общий футер кнопок страниц приёмки и закупки ──
   Виден на всех вкладках, разделитель сверху, фон секции. */
.accept-footer {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 14px 16px;
    margin-top: 8px;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

/* ── Заголовок «Доп. расходы» (отделён от таблицы) — общий для закупки и приёмки ── */
.extra-costs-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    margin-bottom: 8px;
}

.extra-costs-header__title {
    flex: 1;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Блок итогов под таблицами позиций (закупка/приёмка) ── */
.order-totals-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    margin-top: 8px;
    padding-right: 5px;
    font-size: 0.8rem;
}

.order-totals-row {
    display: flex;
    gap: 10px;
    align-items: baseline;
}

.order-totals-label {
    color: var(--color-text-muted);
    font-weight: 500;
}

.order-totals-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 90px;
    text-align: right;
}

.order-totals-row--total .order-totals-label,
.order-totals-row--total .order-totals-value {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text);
}

/* ── BlazorBarcodeScanner.ZXing.JS: кнопки сканера (zxing-button start/stop/torch)
   приводим к стилю products-toolbar-btn (тонкая рамка, OWLS-палитра). ── */
.zxing-button,
.zxing-button.start,
.zxing-button.stop,
.zxing-button.torch {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 7px 16px !important;
    min-height: 34px;
    font-size: var(--text-bt);
    line-height: 1.2;
    color: var(--color-primary) !important;
    border: 1px solid var(--color-primary-border) !important;
    border-radius: var(--radius-md) !important;
    background-color: var(--color-surface) !important;
    cursor: pointer;
    transition: background var(--t-base), border-color var(--t-base), box-shadow var(--t-base), color var(--t-base), transform var(--t-base);
    white-space: nowrap;
}
.zxing-button:hover:not(:disabled) {
    background: var(--color-surface-2) !important;
    color: var(--color-primary-hover) !important;
    transform: translateY(-1px);
    border-color: var(--color-border-hover) !important;
}
.zxing-button:active:not(:disabled) {
    transform: translateY(1px);
}
.zxing-button:disabled {
    opacity: 0.48;
    cursor: not-allowed;
    box-shadow: none;
}
[data-theme="dark"] .zxing-button {
    color: var(--color-text) !important;
    background: var(--color-surface-2) !important;
    border-color: var(--color-border) !important;
}
[data-theme="dark"] .zxing-button:hover:not(:disabled) {
    background: var(--color-surface-offset) !important;
    border-color: var(--color-border-hover) !important;
    color: var(--color-text) !important;
}

    .products-toolbar-icon-wrap {
        position: relative;
        display: inline-flex;
    }

    .products-toolbar-search {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-width: 200px;
        max-width: min(340px, 100%);
    }

    .products-toolbar-search-input {
        flex: 1;
        min-width: 0;
        width: auto !important;
        border-radius: 10px !important;
        border: 1px solid rgba(var(--color-primary-rgb), 0.14) !important;
        padding: 0.4rem 0.65rem !important;
        font-size: 0.88rem;
    }

    .products-toolbar-search-spin {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
    }

    .products-toolbar-search-spin img {
        height: 16px;
        width: 16px;
    }

    /* Поле поиска с иконкой слева (как на странице «Товары») */
    .products-toolbar-search--with-icon {
        position: relative;
        align-items: center;
    }

    .products-toolbar-search-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: rgba(var(--color-primary-rgb), 0.45);
        font-size: 0.95rem;
        pointer-events: none;
        z-index: 1;
    }

    
    .products-toolbar-search-input--iconpad {
        padding-left: 2.25rem !important;
    }

    @media (prefers-reduced-motion: reduce) {
        .products-toolbar-btn:active:not(:disabled) {
            transform: none;
        }
    }

    .products-toolbar-btn--active {
        background: var(--color-primary-light);
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

    .products-toolbar-btn--danger {
        color: #b91c1c;
        border-color: rgba(var(--color-error-rgb), 0.45);
    }

/* ── Supply context-menu dropdown ── */
.supply-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 14px;
    border: none;
    background: transparent;
    color: var(--color-text);
    font-size: var(--text-sm);
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
    transition: background 80ms ease;
    white-space: nowrap;
}
.supply-menu-item:hover {
    background: var(--n1-sb-hover);
}
.supply-menu-item--danger {
    color: var(--color-error);
}
.supply-menu-item--danger:hover {
    background: rgba(220, 53, 69, 0.08);
}

    .products-toolbar-btn--danger:hover:not(:disabled) {
        background: linear-gradient(180deg, #fff5f5 0%, #ffe8e8 100%);
        border-color: rgba(var(--color-error-rgb), 0.6);
        color: #991b1b;
    }

    .products-toolbar-btn--icon-lg {
        font-size: 1.12rem;
        min-width: 40px;
    }


    .products-toolbar-cluster {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        flex-shrink: 0;
    }

    /* Кнопка «Столбцы» — отступ слева, если нет разделителя перед ней */
    .products-toolbar .products-toolbar-columns-btn {
        margin-left: 10px;
        flex-shrink: 0;
    }

    .products-toolbar-sep + .products-toolbar-columns-btn {
        margin-left: 0;
    }

    /* Второй ряд на /storage-products: действия по выбору — тот же карточный стиль, что у основного тулбара */
    .storage-products-selection-toolbar {
        margin-top: -6px;
        margin-bottom: 14px;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        row-gap: 10px;
        column-gap: 12px;
    }

    .storage-products-selection-toolbar .storage-selection-actions-wrap {
        flex: 1;
        min-width: 0;
    }

    .storage-products-selection-toolbar .storage-selection-cluster {
        gap: 8px;
        flex-wrap: wrap;
        width: 100%;
    }

    .storage-products-selection-toolbar .reserve-filter-block {
        flex-shrink: 0;
        margin-left: auto;
        padding-left: 8px;
        font-size: 0.88rem;
        color: var(--color-text);
    }

    .storage-selection-reserve-hint {
        font-size: 0.82rem;
        color: var(--color-text-muted);
        white-space: normal;
        max-width: 240px;
        line-height: 1.35;
    }

    .storage-toolbar-split-wrap {
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
    }

.storage-products-selection-toolbar .storage-toolbar-split-wrap .rz-splitbutton {
    display: inline-flex;
    border-radius: var(--radius-md);
    overflow: hidden;
    width: 145px;
    box-shadow: none;
    border: 1px solid var(--color-primary-border);
    background-color: var(--color-surface);
    transition: background var(--t-base), border-color var(--t-base), box-shadow var(--t-base), color var(--t-base);
}

    .storage-products-selection-toolbar .storage-toolbar-split-wrap .rz-splitbutton .rz-button {
        min-height: 34px;
        font-size: var(--text-bt) !important;
        padding: 7px 16px !important;
        line-height: 1.2 !important;
        color: var(--color-primary) !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        white-space: nowrap;
    }

    .storage-products-selection-toolbar .storage-toolbar-split-wrap .rz-splitbutton .rz-button:not(:last-child) {
        border-right: 1px solid var(--color-primary-border) !important;
    }

    .storage-products-selection-toolbar .storage-toolbar-split-wrap .rz-splitbutton:hover {
        background: var(--color-surface-2);
        border-color: var(--color-primary-hover);
    }

    .storage-products-selection-toolbar .storage-toolbar-split-wrap .rz-splitbutton .rz-button:hover:not(:disabled) {
        background: var(--color-surface-2) !important;
        color: var(--color-primary-hover) !important;
    }

    .rz-splitbutton-menu,
    .rz-splitbutton .rz-menu,
    .rz-splitbutton-menu .rz-menu {
        min-width: 140px !important;
    }

    .rz-splitbutton-menu .rz-menuitem,
    .rz-splitbutton-menu .rz-menuitem-link,
    .rz-splitbutton-menu .rz-menuitem-text {
        white-space: nowrap !important;
    }

    /* ������� ����� ������� (���������): ������, �������, ���������� */
    .products-toolbar-cluster--with-period-dropdown {
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    .products-toolbar-cluster--period-dropdown-open {
        position: relative;
        z-index: 2100;
    }

    .toolbar-period-anchor {
        position: relative;
        display: inline-flex;
        align-items: center;
    }

    .toolbar-period-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1990;
        background: transparent;
    }

    .toolbar-period-panel {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        min-width: 11rem;
        padding: var(--sp-2);
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        z-index: 2005;
        display: flex;
        flex-direction: column;
        gap: var(--sp-1);
    }

    .toolbar-period-item {
        width: 100%;
        text-align: left;
        padding: var(--sp-2) var(--sp-3);
        font-size: var(--text-sm);
        font-weight: 500;
        color: var(--color-primary);
        border: none;
        border-radius: var(--radius-md);
        background: var(--color-primary-surface);
        cursor: pointer;
        transition: background var(--t-fast), color var(--t-fast);
    }

        .toolbar-period-item:hover {
            background: var(--color-accent-muted);
        }

        .toolbar-period-item:active {
            background: rgba(var(--color-primary-rgb), 0.18);
        }

    .products-toolbar-meta {
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--color-primary);
        white-space: nowrap;
    }

    .highlighted {
        background-color: var(--color-primary-surface);
        transition: all 0.3s ease;
    }

    /* N1-A: btn-secondary по брендбуку — белый gradient, primary текст */
    .btn-secondary {
        color: var(--color-primary);
        background: linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
        border: 1px solid var(--color-primary-border);
        box-shadow: var(--shadow-xs);
    }

        .btn-secondary:hover:not(:disabled):not(.disabled) {
            background: linear-gradient(180deg, #f8f9ff 0%, #eceff5 100%);
            border-color: rgba(var(--color-primary-light-rgb), 0.3);
            color: var(--color-primary-hover);
            box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.08);
        }

.selection-actions {
    display: flex;
    gap: 10px;
    overflow: auto;
    margin-bottom: 10px;
}

    .statsblock {
        padding-left: 7px;
        padding-right: 15px;
    }

    .skladlist {
        padding: 10px;
        background-color: var(--color-surface-2);
        border-radius: 3px;
    }

/* ── Единый стиль итоговой строки под таблицами ── */
.table-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin-top: 12px;
    padding: 10px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    font-size: 13px;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.table-summary-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.table-summary-item .summary-label {
    color: var(--color-text-muted);
    font-weight: 400;
}

.table-summary-item .summary-value {
    color: var(--color-text);
    font-weight: 600;
}

.table-summary-divider {
    width: 1px;
    height: 16px;
    background: var(--color-border);
    flex-shrink: 0;
}

/* Плитки показателей — как .metric-card в брендбуке (§06) */
.metric-tiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: var(--sp-5);
    margin-top: var(--sp-5);
    margin-bottom: var(--sp-3);
}

.metric-tile {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--sp-5);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--t-base);
}

.metric-tile:hover {
    box-shadow: var(--shadow-md);
}

.metric-tile__label {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: var(--sp-2);
}

.metric-tile__value {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.metric-tile__hint {
    display: block;
    margin-top: var(--sp-2);
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--color-text-muted);
    line-height: 1.35;
}

/* Доп. строки внутри metric-tile (дашборд / заказы) */
.metric-tile__detail {
    margin-top: var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.4;
}

.metric-tile__detail-row {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    align-items: baseline;
}

.metric-tile__dk {
    font-weight: 600;
    color: var(--color-text);
}

.metric-tile__divider {
    height: 1px;
    margin: var(--sp-3) 0 var(--sp-2);
    background: var(--color-divider);
    border: none;
}

.metric-tile__footer {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    font-size: 0.68rem;
    color: var(--color-text-muted);
    line-height: 1.35;
}

.metric-tile__footer-row {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
}

/* (finance-accounting styles extracted to Payments.razor.css) */


    /* wwwroot/css/site.css */
    .page {
        display: flex;
        min-height: 100vh;
        width: 100%;
    }

    .sidebar {
        flex-shrink: 0;
        background-color: var(--color-surface);
        margin: 0px !important;
        border-radius: 0px !important;
        border-right: 1px solid var(--color-border);
        transition: background var(--t-slow), border-color var(--t-slow);
    }

    main {
        flex: 1;
        padding: 0;
        overflow-x: hidden;
    }

    .content {
        padding-top: 0rem;
        max-width: 100vw;
        width: 100%;
        overflow-x: hidden;
    }

@media (min-width: 641px) {
    article.content {
        --article-pad-x-start: 2rem;
        --article-pad-x-end: 1.5rem;
    }
}

    .table-container {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        margin: 0;
        padding: 0;
        background:none;
        border: none;
        transition: background var(--t-slow), border-color var(--t-slow);
    }

    /* ── Orders grid: горизонтальная прокрутка по содержимому ──
       RadzenDataGrid по умолчанию ужимает колонки в width: 100%.
       Принуждаем внутреннюю таблицу занимать сумму ширин колонок (min-content),
       а контейнер — скроллится по горизонтали. */
    .orders-grid-scroll {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .orders-grid-scroll .rz-data-grid,
    .orders-grid-scroll .rz-grid-table {
        width: max-content !important;
        min-width: 100%;
    }
    /* (legacy datatable rules removed — consolidated in main DataGrid block) */

    .skladlist:not(:first-child) {
        margin-top: 10px;
    }

    /* ����� ��� li � role="presentation" */
    li[role="presentation"] {
        text-wrap: nowrap;
        display: flex;
        margin-bottom: 0;
    }

    .infoprodhead {
        display: flex;
        gap: 2rem;
    }

    .faqp {
        background-color: rgba(217, 119, 6, 0.06);
        border-radius: 5px;
        padding: 5px;
        font-size: 0.8rem;
        color: #9d7b2bee;
    }


    @media (max-width: 700px) {
        .logo-holder {
            width: 50% !important;
            min-height: unset !important;
            justify-content: end !important;
            height: 45px;
        }
        .content {
            margin-top: 10px;
        }

            .nav-item {
                width: 100% !important;
            }

                .nav-item a {
                    width: 100%;
                }

            .nav-link {
                width: 100% !important;
                font-size: var(--text-sm) !important;
            }

            .sidebar {
                -webkit-box-shadow: -1px 0px 8px -3px rgba(34, 60, 80, 0.2);
                -moz-box-shadow: -1px 0px 8px -3px rgba(34, 60, 80, 0.2);
                box-shadow: -1px 0px 8px -3px rgba(34, 60, 80, 0.2);
            }

            .ozoncardmain {
                flex-direction: column;
            }

            .product-counter {
                flex-direction: column;
            }

            .text-muted {
                font-size: 0.7rem;
            }

            .logo {
                height: 35px;
            }

            .step-label {
                display: none;
            }

            .importexcel {
                flex-direction: column;
            }

            .barconteiner {
                flex-direction: column;
                gap: 10px;
            }

            .barbuttons button:first-child {
                margin-left: 0px !important;
            }

            .rz-fileupload {
                display: flex;
                flex-direction: column;
            }

            .cardsblock {
                padding: 10px;
                overflow: auto;
                box-shadow: inset 0 4px 6px -2px rgba(0, 0, 0, 0.1), /* ���������� ���� ������ */
                inset 0 -4px 6px -2px rgba(0, 0, 0, 0.1); /* ���������� ���� ����� */
            }

            .infoprodhead {
                flex-direction: column;
            }

            .cardsblock .info-card {
                margin-bottom: 0px;
            }

            .ozontoday .stat-block {
                flex-direction: column;
                align-items: flex-start;
            }

            .twomainblock {
                display: flex;
                gap: 20px;
                flex-direction: column;
            }

            .rz-tabview-top > .rz-tabview-nav {
                overflow: auto;
            }

            .control-block {
                overflow: auto;
                box-shadow: inset 0 0 11px rgb(149 149 149 / 50%);
                padding: 10px;
                border-radius: 3px;
            }

            .products-toolbar {
                flex-wrap: nowrap;
                overflow-x: auto;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;
                margin-bottom: 16px;
                padding-bottom: 8px;
                gap: 0;
            }

                .products-toolbar > * {
                    flex-shrink: 0;
                }

                .products-toolbar .products-toolbar-cluster {
                    flex-wrap: nowrap;
                }

            .storage-products-selection-toolbar {
                flex-wrap: nowrap;
                overflow-x: auto;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;
                justify-content: flex-start;
                padding-bottom: 8px;
            }

                .storage-products-selection-toolbar .storage-selection-cluster {
                    flex-wrap: nowrap;
                    width: max-content;
                    max-width: none;
                }

                .storage-products-selection-toolbar .reserve-filter-block {
                    margin-left: 0;
                }

        }

    .rz-pager-element, .rz-button-md {
        font-weight: 300;
    }

    .barcode-preview {
        margin: 20px 0;
        padding: 15px;
        margin: 0 auto;
        border: 1px solid var(--color-border);
        border-radius: 5px;
        text-align: center;
    }

    .product-name {
        font-weight: bold;
        margin-bottom: 10px;
    }

    .form-group {
        /* margin-bottom: 15px; */
        gap: 3px;
        margin-bottom: 10px;
    }

    .form-control {
        width: 100%;
        padding: 8px;
    }

    /* .form-buttons — единый footer диалогов, основной блок правил под `.form-buttons` ниже. */

/* ========== Radzen TabView: N1 flat — единый стиль для всех контекстов ========== */
.rz-tabview.rz-tabview-top,
.rz-tabview.rz-tabview-top-right {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    background: var(--color-surface);
    overflow: hidden;
}

.rz-tabview.rz-tabview-top > .rz-tabview-nav,
.rz-tabview.rz-tabview-top-right > .rz-tabview-nav {
    width: 100%;
    box-sizing: border-box;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 42px;
    height: 42px;
    gap: 0;
    flex-wrap: nowrap;
    align-items: stretch;
    border-radius: 0;
    box-shadow: none !important;
    background: transparent !important;
    border-bottom: 1px solid var(--color-border) !important;
    flex-shrink: 0;
}

.rz-tabview.rz-tabview-top > .rz-tabview-panels,
.rz-tabview.rz-tabview-top-right > .rz-tabview-panels {
    flex: 1 1 auto;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: hidden;
}
.btnaddtool {
    opacity: 0.4;
}
.btnaddtool:hover {
    opacity: 1;
}
.rz-tabview.rz-tabview-top > .rz-tabview-panels:has(.products-toolbar--dropdown-open),
.rz-tabview.rz-tabview-top-right > .rz-tabview-panels:has(.products-toolbar--dropdown-open) {
    overflow: visible;
}

.rz-tabview.rz-tabview-top > .rz-tabview-panel,
.rz-tabview.rz-tabview-top-right > .rz-tabview-panel {
    padding: 14px 16px 16px;
    box-sizing: border-box;
}

/* Если первый дочерний элемент панели — вложенный rz-tabview, убираем padding,
   чтобы внутренние табы стояли вплотную к границам родителя (без двойного отступа). */
.rz-tabview.rz-tabview-top > .rz-tabview-panels > .rz-tabview-panel:has(> .rz-tabview:first-child),
.rz-tabview.rz-tabview-top-right > .rz-tabview-panels > .rz-tabview-panel:has(> .rz-tabview:first-child),
.rz-tabview.rz-tabview-top > .rz-tabview-panels > .rz-tabview-panel:has(> .marketplace-ozon-tab > .rz-tabview:first-child),
.rz-tabview.rz-tabview-top-right > .rz-tabview-panels > .rz-tabview-panel:has(> .marketplace-ozon-tab > .rz-tabview:first-child) {
    padding: 0 !important;
}

.marketplace-ozon-tab > .rz-tabview.rz-tabview-top,
.marketplace-ozon-tab > .rz-tabview.rz-tabview-top-right {
    margin-top: 0 !important;
}

/* Tab items — flat with separator dividers */
.rz-tabview.rz-tabview-top > .rz-tabview-nav > li,
.rz-tabview.rz-tabview-top-right > .rz-tabview-nav > li {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: background 0.1s;
}

/* Separator between tabs */
.rz-tabview.rz-tabview-top > .rz-tabview-nav > li + li::before,
.rz-tabview.rz-tabview-top-right > .rz-tabview-nav > li + li::before {
    content: '';
    display: block;
    width: 1px;
    height: 16px;
    background: var(--color-border);
    flex-shrink: 0;
    align-self: center;
}


/* Selected tab — underline indicator */
.rz-tabview.rz-tabview-top > .rz-tabview-nav > li.rz-tabview-selected,
.rz-tabview.rz-tabview-top-right > .rz-tabview-nav > li.rz-tabview-selected {
    background: transparent !important;
    box-shadow: none !important;
}

/* Inactive tab text */
.rz-tabview.rz-tabview-top > .rz-tabview-nav > li:not(.rz-tabview-selected):not(.rz-state-disabled) > :is(a, button),
.rz-tabview.rz-tabview-top-right > .rz-tabview-nav > li:not(.rz-tabview-selected):not(.rz-state-disabled) > :is(a, button) {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--color-text-faint) !important;
}

/* Active tab text */
.rz-tabview.rz-tabview-top > .rz-tabview-nav > li.rz-tabview-selected > :is(a, button),
.rz-tabview.rz-tabview-top-right > .rz-tabview-nav > li.rz-tabview-selected > :is(a, button) {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--color-text) !important;
    border-bottom: 2px solid var(--color-accent) !important;
}

/* Tab link/button base */
.rz-tabview.rz-tabview-top > .rz-tabview-nav > li > :is(a, button),
.rz-tabview.rz-tabview-top-right > .rz-tabview-nav > li > :is(a, button) {
    border-radius: 0;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    padding: 0 14px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px;
    box-sizing: border-box;
    color: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
}

.rz-tabview.rz-tabview-top > .rz-tabview-nav > li > :is(a, button):focus-visible,
.rz-tabview.rz-tabview-top-right > .rz-tabview-nav > li > :is(a, button):focus-visible {
    outline: 2px solid var(--color-accent-muted);
    outline-offset: -2px;
}

    .rz-tabview.rz-tabview-top > .rz-tabview-nav > li > :is(a, button) .rtabitem,
    .rz-tabview.rz-tabview-top-right > .rz-tabview-nav > li > :is(a, button) .rtabitem {
        color: inherit;
        font-family: inherit;
        font-size: 0.8rem;
        font-weight: inherit;
    }

.rz-tabview.rz-tabview-top > .rz-tabview-nav > li.rz-tabview-selected > :is(a, button) .rtabitem,
.rz-tabview.rz-tabview-top-right > .rz-tabview-nav > li.rz-tabview-selected > :is(a, button) .rtabitem {
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .rz-tabview.rz-tabview-top > .rz-tabview-nav > li,
    .rz-tabview.rz-tabview-top-right > .rz-tabview-nav > li {
        transition: none;
    }
}

/* ========== Настройка тулбаров (PageToolbarCustomizer) ========== */
.toolbar-layout-modal {
    width: min(520px, 94vw);
}

.toolbar-layout-hint {
    margin: 0 0 12px 0;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.toolbar-layout-list {
    max-height: min(60vh, 420px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.toolbar-layout-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    cursor: grab;
    transition: background var(--t-fast);
}

.toolbar-layout-row--dragging {
    opacity: 0.55;
    cursor: grabbing;
}

.toolbar-layout-grip {
    color: var(--color-text-faint);
    flex-shrink: 0;
    display: inline-flex;
}

.toolbar-layout-label {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-text);
}

.toolbar-layout-label i {
    width: 1.1rem;
    text-align: center;
    color: var(--color-primary);
}

.toolbar-layout-run {
    flex-shrink: 0;
    font-size: var(--text-xs);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-primary-border);
    background: var(--color-surface);
    color: var(--color-primary);
    cursor: pointer;
    transition: background var(--t-base), border-color var(--t-base);
}

.toolbar-layout-run:hover {
    background: var(--color-primary-surface);
    border-color: rgba(var(--color-primary-light-rgb), 0.3);
}

/* Спейсер-распорка между чекбоксом и кнопкой-действием:
   сжимает label-зону до нуля и прижимает кнопку к правому краю строки. */
.toolbar-layout-spacer {
    flex: 1 1 auto;
    min-width: 0;
}

/* Кнопка-действие фикс. ширины (~200px), прижата к правому краю строки.
   Иконка слева, текст справа от иконки, без растяжения. */
.toolbar-layout-action-btn {
    flex: 0 0 auto;
    width: 200px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--sp-2);
    text-align: left;
    /* Согласовано с products-toolbar-btn: размер шрифта var(--text-bt), padding и высота как у тулбара */
    font-size: var(--text-bt);
    font-weight: 600;
    line-height: 1.2;
    padding: 7px 16px;
    min-height: 34px;
    color: var(--color-primary);
    background: var(--color-surface);
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-md);
}

.toolbar-layout-action-btn i {
    width: 1.1rem;
    text-align: center;
    color: var(--color-primary);
    flex-shrink: 0;
}

.toolbar-layout-action-btn > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.toolbar-layout-action-btn:hover {
    background: var(--color-primary-surface);
    border-color: var(--color-primary-border);
    color: var(--color-primary);
}

.toolbar-layout-action-btn:hover i {
    color: var(--color-primary);
}

.toolbar-layout-check {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--color-accent);
}

/* ============================================================
 * N1-A PURE ZINC — GLOBAL OVERRIDES
 * Radzen DataGrid, form-control, metrics, tabular-nums
 * ============================================================ */

/* ── Radzen DataGrid: N1 Apple Gray ── */
.rz-data-grid {
    border: 0.5px solid var(--color-border) !important;
    border-radius: var(--radius-xl) !important;
    overflow: hidden;
    background: var(--color-surface) !important;
    box-shadow: none !important;
}

/* ── Унифицированное поведение всех Data Grid:
      при нехватке места появляется горизонтальный скролл. ── */
.rz-data-grid .rz-data-grid-data,
.rz-data-grid .rz-datatable-scrollable-body,
.rz-data-grid .rz-datatable-scrollable-header,
.rz-data-grid .rz-datatable-wrapper {
    overflow-x: auto !important;
}

/* Никаких жёстких ограничений на ширину колонок — пользователь свободно меняет
   ширину ресайзером в обе стороны. Наследуемая Radzen переменная сбрасывается
   в 0, и никакие min-width правила поверх <th>/<td> не ставятся. */
.rz-data-grid {
    --rz-grid-default-col-min-width: 0;
}

.rz-data-grid,
.rz-datatable,
.rz-grid.dt {
    --rz-grid-cell-color: var(--color-text);
}

.rz-cell-data,
td .rz-cell-data {
    color: var(--color-text) !important;
}

.rz-datatable,
.rz-grid-table {
    /* width: 100% (а не auto!) — это обязательное условие для того,
       чтобы работало table-layout: fixed ниже. Без этого CSS игнорирует
       fixed и таблица всегда считается в auto-режиме, а значит колонки
       не сжимаются ниже intrinsic width контента. */
    width: 100% !important;
    min-width: 100% !important;
    border-collapse: collapse !important;
    font-size: 13px !important;
    table-layout: fixed !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Гриды с «выходом за контейнер»: при drag-resize одной колонки соседние
   НЕ сжимаются — таблица растёт по сумме ширин <col> и выходит за пределы
   контейнера, появляется горизонтальная прокрутка внутри .rz-data-grid-data.

   Список ID соответствует страницам, где это поведение нужно: товары, продажи,
   склад (список и внутри), маркетплейс (заказы и карточки), финансы, задачи,
   веб-сайт. Если потребуется добавить ещё грид — допишите его ID в селектор.

   Парная утилита — wwwroot/js/gridColumnPersist.js (сохраняет/восстанавливает
   inline style.width на <th> через localStorage). ──────────────────────────── */

#grid-products .rz-grid-table,        #grid-products .rz-datatable,
#grid-orders .rz-grid-table,          #grid-orders .rz-datatable,
#grid-storage .rz-grid-table,         #grid-storage .rz-datatable,
#grid-storages .rz-grid-table,        #grid-storages .rz-datatable,
#grid-marketorders .rz-grid-table,    #grid-marketorders .rz-datatable,
#grid-cards-1 .rz-grid-table,         #grid-cards-1 .rz-datatable,
#grid-cards-2 .rz-grid-table,         #grid-cards-2 .rz-datatable,
#grid-cards-3 .rz-grid-table,         #grid-cards-3 .rz-datatable,
#grid-cards-4 .rz-grid-table,         #grid-cards-4 .rz-datatable,
#grid-payments .rz-grid-table,        #grid-payments .rz-datatable,
#grid-tasks .rz-grid-table,           #grid-tasks .rz-datatable,
#grid-website-1 .rz-grid-table,       #grid-website-1 .rz-datatable,
#grid-website-2 .rz-grid-table,       #grid-website-2 .rz-datatable,
#grid-inventories .rz-grid-table,         #grid-inventories .rz-datatable,
#grid-inventory-positions .rz-grid-table, #grid-inventory-positions .rz-datatable,
#grid-wb-feedback .rz-grid-table,      #grid-wb-feedback .rz-datatable,
#grid-ozon-reviews .rz-grid-table,     #grid-ozon-reviews .rz-datatable,
#grid-yandex-feedback .rz-grid-table,  #grid-yandex-feedback .rz-datatable,
#grid-priemki .rz-grid-table,         #grid-priemki .rz-datatable,
#grid-writeoffs .rz-grid-table,       #grid-writeoffs .rz-datatable,
#grid-postings .rz-grid-table,        #grid-postings .rz-datatable,
#grid-quarantine .rz-grid-table,      #grid-quarantine .rz-datatable,
#grid-transfer-history .rz-grid-table, #grid-transfer-history .rz-datatable,
#grid-stocks .rz-grid-table,          #grid-stocks .rz-datatable,
#grid-saleschannels-orders .rz-grid-table,    #grid-saleschannels-orders .rz-datatable,
#grid-saleschannels-customers .rz-grid-table, #grid-saleschannels-customers .rz-datatable,
#grid-task-templates .rz-grid-table,  #grid-task-templates .rz-datatable,
#grid-mm-cards .rz-grid-table,                          #grid-mm-cards .rz-datatable,
#grid-storage-reservations-history .rz-grid-table,      #grid-storage-reservations-history .rz-datatable,
#grid-mm-reports .rz-grid-table,      #grid-mm-reports .rz-datatable,
#grid-analytics-sku .rz-grid-table,       #grid-analytics-sku .rz-datatable,
#grid-analytics-margin .rz-grid-table,    #grid-analytics-margin .rz-datatable,
#grid-analytics-turnover .rz-grid-table,  #grid-analytics-turnover .rz-datatable {
    width: max-content !important;
    min-width: 0 !important;
}

#grid-products .rz-data-grid-data,       #grid-products .rz-datatable-wrapper,
#grid-orders .rz-data-grid-data,         #grid-orders .rz-datatable-wrapper,
#grid-storage .rz-data-grid-data,        #grid-storage .rz-datatable-wrapper,
#grid-storages .rz-data-grid-data,       #grid-storages .rz-datatable-wrapper,
#grid-marketorders .rz-data-grid-data,   #grid-marketorders .rz-datatable-wrapper,
#grid-cards-1 .rz-data-grid-data,        #grid-cards-1 .rz-datatable-wrapper,
#grid-cards-2 .rz-data-grid-data,        #grid-cards-2 .rz-datatable-wrapper,
#grid-cards-3 .rz-data-grid-data,        #grid-cards-3 .rz-datatable-wrapper,
#grid-cards-4 .rz-data-grid-data,        #grid-cards-4 .rz-datatable-wrapper,
#grid-payments .rz-data-grid-data,       #grid-payments .rz-datatable-wrapper,
#grid-tasks .rz-data-grid-data,          #grid-tasks .rz-datatable-wrapper,
#grid-website-1 .rz-data-grid-data,      #grid-website-1 .rz-datatable-wrapper,
#grid-website-2 .rz-data-grid-data,      #grid-website-2 .rz-datatable-wrapper,
#grid-inventories .rz-data-grid-data,         #grid-inventories .rz-datatable-wrapper,
#grid-inventory-positions .rz-data-grid-data, #grid-inventory-positions .rz-datatable-wrapper,
#grid-wb-feedback .rz-data-grid-data,    #grid-wb-feedback .rz-datatable-wrapper,
#grid-ozon-reviews .rz-data-grid-data,   #grid-ozon-reviews .rz-datatable-wrapper,
#grid-yandex-feedback .rz-data-grid-data, #grid-yandex-feedback .rz-datatable-wrapper,
#grid-priemki .rz-data-grid-data,        #grid-priemki .rz-datatable-wrapper,
#grid-writeoffs .rz-data-grid-data,      #grid-writeoffs .rz-datatable-wrapper,
#grid-postings .rz-data-grid-data,       #grid-postings .rz-datatable-wrapper,
#grid-quarantine .rz-data-grid-data,     #grid-quarantine .rz-datatable-wrapper,
#grid-transfer-history .rz-data-grid-data, #grid-transfer-history .rz-datatable-wrapper,
#grid-stocks .rz-data-grid-data,         #grid-stocks .rz-datatable-wrapper,
#grid-saleschannels-orders .rz-data-grid-data,    #grid-saleschannels-orders .rz-datatable-wrapper,
#grid-saleschannels-customers .rz-data-grid-data, #grid-saleschannels-customers .rz-datatable-wrapper,
#grid-task-templates .rz-data-grid-data,  #grid-task-templates .rz-datatable-wrapper,
#grid-mm-cards .rz-data-grid-data,        #grid-mm-cards .rz-datatable-wrapper,
#grid-mm-reports .rz-data-grid-data,      #grid-mm-reports .rz-datatable-wrapper,
#grid-analytics-sku .rz-data-grid-data,       #grid-analytics-sku .rz-datatable-wrapper,
#grid-analytics-margin .rz-data-grid-data,    #grid-analytics-margin .rz-datatable-wrapper,
#grid-analytics-turnover .rz-data-grid-data,  #grid-analytics-turnover .rz-datatable-wrapper {
    overflow-x: auto !important;
    width: 100% !important;
}

/* Radzen на body-таблице ставит display:block — это тоже отключает
   табличный алгоритм, из-за чего table-layout:fixed не действует.
   Возвращаем display:table. */
.rz-data-grid-data > table,
.rz-datatable-reflow .rz-datatable-tablewrapper > table,
.rz-datatable-reflow .rz-datatable-scrollable-header-box > table,
.rz-datatable-reflow .rz-datatable-scrollable-table-wrapper > table {
    display: table !important;
}

.rz-data-grid-data > table > tbody,
.rz-datatable-reflow .rz-datatable-tablewrapper > table > tbody,
.rz-datatable-reflow .rz-datatable-scrollable-header-box > table > tbody,
.rz-datatable-reflow .rz-datatable-scrollable-table-wrapper > table > tbody {
    display: table-row-group !important;
}

/* Заголовок таблицы — N1 Apple Gray */
.rz-datatable-thead th,
.rz-grid-table thead th {
    text-align: left !important;
    padding: 2px 10px !important;
    font-weight: 600 !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    color: var(--color-text-muted) !important;
    background: var(--color-surface-2) !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 1px solid var(--color-border) !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background var(--t-slow);
    vertical-align: middle !important;
}

    .rz-datatable-thead th .rz-column-title,
    .rz-grid-table thead th .rz-column-title {
        line-height: 1.2 !important;
        padding: 0 !important;
        font-size: inherit;
    }

[data-theme="dark"] .rz-column-title,
[data-theme="dark"] .rz-datatable-thead th .rz-column-title,
[data-theme="dark"] .rz-grid-table thead th .rz-column-title {
    color: #afafaf !important;
}

/* Строка фильтров под заголовками — тот же компактный ритм */
.rz-datatable-thead .rz-cell-filter,
.rz-grid-table thead .rz-cell-filter,
.rz-datatable-thead td.rz-cell-filter,
.rz-grid-table thead td.rz-cell-filter {
    padding: 4px var(--sp-3) !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
}

.rz-datatable-thead .rz-cell-filter .rz-cell-filter-content,
.rz-grid-table thead .rz-cell-filter .rz-cell-filter-content {
    padding: 0 !important;
    min-height: 0 !important;
}

.rz-datatable-thead .rz-cell-filter .rz-inputtext,
.rz-grid-table thead .rz-cell-filter .rz-inputtext,
.rz-datatable-thead .rz-cell-filter input.rz-inputtext,
.rz-grid-table thead .rz-cell-filter input.rz-inputtext {
    min-height: 26px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

.rz-datatable-tbody td,
.rz-grid-table tbody td {
    padding: 5px 8px !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 1px solid var(--color-border) !important;
    color: var(--color-text-muted) !important;
    vertical-align: middle !important;
    font-size: 13px !important;
    font-variant-numeric: tabular-nums;
    background: var(--color-surface) !important;
    transition: background var(--t-fast), color var(--t-slow);
}

/* Одна заливка строк (как «Таблица прибыльности» в брендбуке), без вертикальных линий */
tr.rz-datatable-even td,
.rz-datatable-tbody tr.rz-datatable-even td,
.rz-grid-table tbody tr.rz-datatable-even td {
    background: var(--color-surface) !important;
}

.rz-datatable-tbody tr.rz-datatable-even:hover td,
.rz-grid-table tbody tr.rz-datatable-even:hover td {
    background: var(--color-surface-2) !important;
}

/* Вложения в ячейках (шаблоны Blazor) не поднимают размер к base 0.9rem */
/* Вложения в ячейках наследуют размер родительского td (13px) */
.rz-datatable-tbody td *:not(button):not(.btn):not(.badge):not(.mp-badge):not(.status-dot):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.fa-solid):not(.fa-light):not(.fa-regular):not(.fa-brands):not(i):not(.toolbar-action-icon),
.rz-grid-table tbody td *:not(button):not(.btn):not(.badge):not(.mp-badge):not(.status-dot):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.fa-solid):not(.fa-light):not(.fa-regular):not(.fa-brands):not(i):not(.toolbar-action-icon) {
    font-size: inherit !important;
}

/* SVG в кнопках-иконках грида */
.bticon .toolbar-action-icon svg,
.rz-datatable-tbody td .btn .toolbar-action-icon svg,
.rz-grid-table tbody td .btn .toolbar-action-icon svg {
    width: 1rem;
    height: 1rem;
    display: block;
}

/* ── Название товара в гридах ── */
.rz-grid-table tbody td .gridblist,
.rz-datatable-tbody td .gridblist {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 600;
    color: var(--color-text) !important;
    line-height: 1.45;
    /* min-width:0 снимает дефолтный flex min-content — без него длинный
       текст названия товара не даёт колонке сжиматься ресайзером влево. */
    min-width: 0;
    overflow: hidden;
    flex: 1 1 auto;
}

.rz-grid-table tbody td .gridblist > button.bticon,
.rz-datatable-tbody td .gridblist > button.bticon {
    font-weight: 400;
}

.rz-grid-table tbody td .grid-product-title,
.rz-datatable-tbody td .grid-product-title {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 600;
    color: var(--color-text) !important;
    line-height: 1.45;
    flex: 1 1 auto;
    min-width: 0;
}

.rz-grid-table tbody td .grid-cell-product-row,
.rz-datatable-tbody td .grid-cell-product-row {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 600;
    color: var(--color-text) !important;
    line-height: 1.45;
    /* min-width:0 — чтобы flex-контейнер сам мог сжиматься в узкой колонке. */
    min-width: 0;
    overflow: hidden;
}

.rz-grid-table tbody td .grid-cell-product-row--center,
.rz-datatable-tbody td .grid-cell-product-row--center {
    align-items: center;
}

.rz-grid-table tbody td .grid-cell-product-row .bticon,
.rz-datatable-tbody td .grid-cell-product-row .bticon {
    font-weight: 400;
}

/* Property-колонки: задайте CssClass="grid-col-product-name" на RadzenDataGridColumn */
.rz-grid-table tbody td.grid-col-product-name,
.rz-datatable-tbody td.grid-col-product-name {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 600;
    color: var(--color-text) !important;
    line-height: 1.45;
}

/* Ячейки с .product-cell (отчёты Ozon и др.) */
.rz-grid-table tbody td .product-cell .product-name,
.rz-datatable-tbody td .product-cell .product-name {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--color-text) !important;
    line-height: 1.45;
    margin-bottom: var(--sp-1);
}

.rz-grid-table tbody td .product-cell .product-sku,
.rz-datatable-tbody td .product-cell .product-sku {
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--color-text-muted) !important;
    line-height: 1.4;
}

.rz-datatable-tbody tr:last-child td,
.rz-grid-table tbody tr:last-child td {
    border-bottom: none !important;
}

.rz-datatable tr:hover td,
.rz-grid-table tbody tr:hover td {
    background: var(--color-bg) !important;
}


/* ── btn-ghost из брендбука ── */
.btn-ghost {
    background: transparent !important;
    color: var(--color-text-muted) !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: none !important;
}

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

/* ── btn-accent — Signal Orange CTA из брендбука OWLS ── */
.btn-accent {
    background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-hover) 100%) !important;
    color: #fff !important;
    border: 1px solid var(--color-accent-border) !important;
    box-shadow: 0 1px 3px rgba(var(--color-accent-rgb), 0.25) !important;
}

.btn-accent:hover:not(:disabled):not(.disabled) {
    background: linear-gradient(180deg, #3a5ee8 0%, #2248d8 100%) !important;
    box-shadow: 0 4px 12px rgba(var(--color-primary-light-rgb), 0.30) !important;
}

/* Статусы в ячейках Data Grid — N1-A: status-dot + модификатор (брендбук) */
.status-dot {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    max-width: 100%;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text);
    white-space: normal;
    word-break: break-word;
}

.status-dot::before {
    content: "";
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-text-muted);
    box-shadow: 0 0 0 1px var(--color-border);
}

.status-dot.neutral::before {
    background: var(--color-text-muted);
    box-shadow: 0 0 0 1px var(--color-border);
}

.status-dot.active::before {
    background: var(--color-success-light);
    box-shadow: 0 0 0 2px var(--color-success-bg);
}

.status-dot.error::before {
    background: var(--color-error);
    box-shadow: 0 0 0 2px var(--color-error-bg);
}

.status-dot.warning::before {
    background: var(--color-warning);
    box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.15);
}

.status-dot.info::before {
    background: var(--color-accent);
    box-shadow: 0 0 0 2px var(--color-accent-muted);
}


/* Бейджи маркетплейсов — N1-A Badges / статусы (брендбук) */
.mp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    white-space: nowrap;
    box-sizing: border-box;
}

.mp-badge--neutral {
    background: var(--color-surface-2);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

.mp-badge--ozon {
    background: rgba(0, 91, 255, 0.08);
    border-color: rgba(0, 91, 255, 0.22);
    color: #004cbd;
}

.mp-badge--wb {
    background: rgba(139, 47, 201, 0.08);
    border-color: rgba(139, 47, 201, 0.22);
    color: #6b21a8;
}

.mp-badge--yandex {
    background: rgba(232, 131, 10, 0.1);
    border-color: rgba(232, 131, 10, 0.28);
    color: #b45309;
}

.mp-badge--ali {
    background: rgba(227, 66, 52, 0.08);
    border-color: rgba(227, 66, 52, 0.22);
    color: #b91c1c;
}

.mp-badge--sber {
    background: rgba(33, 160, 56, 0.09);
    border-color: rgba(33, 160, 56, 0.25);
    color: #15803d;
}

/* Dark mode: marketplace badges — lighter text colors */
[data-theme="dark"] .mp-badge--ozon  { color: #60a5fa; }
[data-theme="dark"] .mp-badge--wb    { color: #c084fc; }
[data-theme="dark"] .mp-badge--yandex { color: #fbbf24; }
[data-theme="dark"] .mp-badge--ali   { color: #f87171; }
[data-theme="dark"] .mp-badge--sber  { color: #4ade80; }


/* ─── Row-actions overlay (появляются при hover строки таблицы) ─── */
.row-acts {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 5px;
    opacity: 0;
    transition: opacity 0.1s;
    z-index: 2;
}

.rz-data-grid tbody tr { position: relative; }
.rz-data-grid tbody tr:hover .row-acts { opacity: 1; }

.ra-btn {
    height: 26px;
    padding: 0 9px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    font-family: var(--font-body);
    border: 0.5px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: all 0.1s;
    white-space: nowrap;
}

.ra-btn:hover {
    border-color: var(--color-text-muted);
    color: var(--color-text);
}

.ra-btn.danger {
    color: var(--color-error);
    border-color: rgba(255, 59, 48, 0.3);
}

.ra-btn.danger:hover {
    background: var(--color-error-bg, rgba(255, 59, 48, 0.08));
}

.ra-btn svg {
    width: 11px;
    height: 11px;
    stroke-width: 1.8;
}


.mp-badge-cell {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    max-width: 100%;
}

.mp-badge-cell__logo {
    height: 16px;
    width: auto;
    flex-shrink: 0;
    object-fit: contain;
}

/* ── Все кнопки внутри Grid → btn-ghost btn-sm из брендбука ── */
.rz-datatable-tbody button,
.rz-datatable-tbody .btn,
.rz-grid-table tbody button,
.rz-grid-table tbody .btn {
    background: transparent !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text-muted) !important;
    border-radius: var(--radius-sm) !important;
    font-size: var(--text-xs) !important;
    height: 24px !important;
    padding: 4px 4px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}

.rz-datatable-tbody button:hover,
.rz-datatable-tbody .btn:hover,
.rz-grid-table tbody button:hover,
.rz-grid-table tbody .btn:hover {
    background: var(--color-surface-2) !important;
    color: var(--color-text) !important;
    border-color: var(--color-primary-border) !important;
}

/* ── Tabular nums для цен/чисел ── */
.tabular-num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* ── Radzen Pager: стиль пагинации из брендбука ── */
.rz-pager {
    background: var(--color-surface) !important;
    border-top: 1px solid var(--color-divider) !important;
    padding: var(--sp-3) var(--sp-3) !important;
    font-size: 0.75rem !important;
    transition: background var(--t-slow);
}

.rz-pager .rz-paginator-element {
    color: var(--color-text-muted) !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-mono) !important;
    transition: background var(--t-base), color var(--t-base);
}

.rz-pager .rz-paginator-element:hover {
    background: var(--color-surface-2) !important;
    color: var(--color-text) !important;
}

.rz-pager .rz-state-active {
    background: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    border-radius: var(--radius-sm) !important;
}

/* ── Form controls (inputs, selects, textareas) ── */
.form-control,
.rz-textbox,
.rz-inputtext,
.rz-textarea {
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    transition: border-color var(--t-base), box-shadow var(--t-base), background var(--t-slow);
}

.rz-textarea {
    font-family: var(--font-body) !important;
    font-size: 0.88rem !important;
    line-height: 1.45 !important;
    padding: 8px 12px !important;
    box-sizing: border-box;
    resize: vertical;
}

.form-control:focus,
.rz-textbox:focus,
.rz-inputtext:focus,
.rz-textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-primary-border) !important;
    outline: none;
}

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

/* ── Radzen Dropdown / Multiselect / Autocomplete — как поле поиска в тулбаре товаров ── */
.rz-dropdown,
.rz-multiselect,
.rz-autocomplete {
    font-family: var(--font-body) !important;
    font-size: 0.88rem !important;
    line-height: 1.35 !important;
    min-height: 36px !important;
    height: auto !important;
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
    border-block-end: 1px solid var(--color-border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transition: border-color var(--t-base), box-shadow var(--t-base), background var(--t-slow);
}

.rz-dropdown:not(:disabled):not(.rz-state-disabled):hover,
.rz-multiselect:not(:disabled):not(.rz-state-disabled):hover,
.rz-autocomplete:not(:disabled):not(.rz-state-disabled):hover {
    background: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    border-block-end-color: var(--color-border) !important;
    box-shadow: none !important;
}

.rz-dropdown.rz-dropdown-open:not(.rz-state-disabled),
.rz-multiselect.rz-state-focus:not(.rz-state-disabled),
.rz-dropdown:focus:not(.rz-state-disabled),
.rz-multiselect:focus:not(.rz-state-disabled),
.rz-autocomplete:not(.rz-state-disabled):focus-within {
    border-color: var(--color-primary) !important;
    border-block-end-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-primary-border) !important;
    background: var(--color-surface) !important;
}

.rz-dropdown .rz-dropdown-label,
.rz-dropdown .rz-dropdown-label.rz-inputtext,
.rz-multiselect .rz-multiselect-label-container,
.rz-multiselect .rz-multiselect-label-container .rz-inputtext {
    font-family: var(--font-body) !important;
    font-size: inherit !important;
    color: var(--color-text) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.rz-dropdown .rz-placeholder,
.rz-multiselect .rz-placeholder {
    color: var(--color-text-faint) !important;
}

.rz-dropdown-trigger .rzi,
.rz-multiselect-trigger .rzi {
    color: var(--color-text-muted) !important;
}

.rz-dropdown-clear-icon {
    color: var(--color-text-muted) !important;
    opacity: 0.55 !important;
}

.rz-dropdown-clear-icon:hover {
    color: var(--color-text) !important;
    opacity: 1 !important;
}

.rz-dropdown-filter.rz-inputtext {
    font-family: var(--font-body) !important;
    font-size: 0.88rem !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--color-border) !important;
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
}

.rz-dropdown-item,
.rz-multiselect-item {
    font-family: var(--font-body) !important;
    font-size: 0.88rem !important;
    color: var(--color-text) !important;
}

.rz-autocomplete-input {
    font-family: var(--font-body) !important;
    font-size: 0.88rem !important;
    color: var(--color-text) !important;
}

.rz-dropdown-panel,
.rz-multiselect-panel,
.rz-autocomplete-panel {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    font-family: var(--font-body) !important;
    font-size: 0.88rem !important;
}

.rz-popup {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* ── Radzen ContextMenu / выпадающее меню — размер как у гридов (0.75rem) ── */
.rz-popup ul.rz-menu,
.rz-popup .rz-menu {
    font-family: var(--font-body) !important;
    font-size: 0.75rem !important;
}

.rz-popup ul.rz-menu .rz-navigation-item-link,
.rz-popup ul.rz-menu .rz-navigation-item-text,
.rz-popup .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link,
.rz-popup .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-text {
    font-family: var(--font-body) !important;
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
}

.rz-popup ul.rz-menu .rz-navigation-item-wrapper .rz-navigation-item-link,
.rz-popup .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper .rz-navigation-item-link {
    padding: var(--sp-2) var(--sp-3) !important;
    min-height: 0 !important;
    color: var(--color-text) !important;
}

.rz-popup ul.rz-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-link,
.rz-popup .rz-menu:not(.rz-profile-menu) .rz-navigation-item-wrapper:hover .rz-navigation-item-link {
    background: var(--color-surface-2) !important;
    color: var(--color-text) !important;
}

.rz-dropdown-item:hover,
.rz-multiselect-item:hover {
    background: var(--color-primary-surface) !important;
    color: var(--color-primary) !important;
}

/* ── N1 Flat tabs inside app-modal-body ── */
.app-modal-body .rz-tabview.rz-tabview-top {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.app-modal-body .rz-tabview.rz-tabview-top > .rz-tabview-nav {
    padding: 0 !important;
    min-height: 42px;
    height: 42px;
    background: transparent !important;
    border-bottom: 1px solid var(--color-border) !important;
    border-radius: 0 !important;
    align-items: stretch;
    box-shadow: none !important;
    margin: 0 !important;
}

.app-modal-body .rz-tabview.rz-tabview-top > .rz-tabview-nav > li {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.app-modal-body .rz-tabview.rz-tabview-top > .rz-tabview-nav > li + li::before {
    content: '';
    display: block;
    width: 1px;
    height: 16px;
    background: var(--color-border);
    flex-shrink: 0;
    align-self: center;
}

.app-modal-body .rz-tabview.rz-tabview-top > .rz-tabview-nav > li > :is(a, button) {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--color-text-faint) !important;
    padding: 0 14px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-modal-body .rz-tabview.rz-tabview-top > .rz-tabview-nav > li.rz-tabview-selected {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.app-modal-body .rz-tabview.rz-tabview-top > .rz-tabview-nav > li.rz-tabview-selected > :is(a, button) {
    color: var(--color-text) !important;
    font-weight: 600 !important;
    border-bottom: 2px solid var(--color-accent) !important;
    background: transparent !important;
}

.app-modal-body .rz-tabview.rz-tabview-top > .rz-tabview-nav > li:hover:not(.rz-tabview-selected) > :is(a, button) {
    background: color-mix(in srgb, var(--color-text) 3%, transparent) !important;
    color: var(--color-text-secondary) !important;
}

.app-modal-body .rz-tabview.rz-tabview-top > .rz-tabview-panels {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 12px 0 0 !important;
}

/* ── Dialog form layout ── */
.app-modal-body .form-group {
    margin-bottom: 5px;
}

    .app-modal-body .form-group label,
    .app-modal-body .form-group .rz-label {
        font-size: 12px;
        font-weight: 500;
        color: var(--color-text-secondary);
        margin-bottom: 4px;
    }

/* ============================================================
 * Dialog footer — ЕДИНЫЙ стиль для всех всплывающих окон
 * Эталон: StockFiltersDialog (.sfd-footer). Применяется ко всем
 * .form-buttons (~58 диалогов) и явному классу .dialog-footer.
 * ============================================================ */
    .form-buttons,
    .dialog-footer {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        justify-content: flex-start; /* кнопки выровнены справа (как в фильтрах) */
        padding: 12px 1px 16px !important;
        margin-top: 8px !important;
        border-top: 1px solid var(--color-border) !important;
        width: 100% !important;
        box-sizing: border-box;
        text-align: initial;
    }

/* Reset-кнопка слева (Сбросить) — flex-grow на span толкает остальное вправо.
   Если разработчик хочет 3-кнопочный footer — ставит сначала reset-кнопку
   и сразу после неё <span class="dialog-footer-spacer"></span>. */
.dialog-footer-spacer,
.form-buttons > .dialog-footer-spacer {
    flex: 1 1 auto;
}

/* Все кнопки внутри footer — приводим к стилю products-toolbar-btn */
.form-buttons > .btn,
.form-buttons > button:not([class*="products-toolbar-btn"]):not([class*="dialog-footer-btn"]),
.dialog-footer > .btn,
.dialog-footer > button:not([class*="products-toolbar-btn"]):not([class*="dialog-footer-btn"]) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 7px 16px !important;
    min-height: 34px;
    font-size: var(--text-bt);
    line-height: 1.2;
    border-radius: var(--radius-md) !important;
    cursor: pointer;
    transition: background var(--t-base), border-color var(--t-base), color var(--t-base), transform var(--t-base);
    white-space: nowrap;
    margin: 0;
}

/* Cancel / ghost кнопка — без рамки, прозрачный фон (как «Отмена» в фильтрах) */
.form-buttons > .btn-ghost,
.form-buttons > .btn-secondary,
.form-buttons > .btn-outline-secondary,
.form-buttons > .btn-cancel,
.dialog-footer > .btn-ghost,
.dialog-footer > .btn-secondary,
.dialog-footer > .btn-cancel {
    color: var(--color-text-muted) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}
.form-buttons > .btn-ghost:hover:not(:disabled),
.form-buttons > .btn-secondary:hover:not(:disabled),
.form-buttons > .btn-outline-secondary:hover:not(:disabled),
.form-buttons > .btn-cancel:hover:not(:disabled),
.dialog-footer > .btn-ghost:hover:not(:disabled),
.dialog-footer > .btn-secondary:hover:not(:disabled),
.dialog-footer > .btn-cancel:hover:not(:disabled) {
    background: var(--color-surface-2) !important;
    color: var(--color-text) !important;
    border-color: transparent !important;
}

/* «Сбросить» — приглушённая outline-кнопка (между primary и cancel в порядке) */
.form-buttons > .btn-reset,
.form-buttons > .btn-outline-danger,
.dialog-footer > .btn-reset,
.dialog-footer > .btn-outline-danger {
    color: var(--color-text-muted) !important;
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
}
.form-buttons > .btn-reset:hover:not(:disabled),
.form-buttons > .btn-outline-danger:hover:not(:disabled),
.dialog-footer > .btn-reset:hover:not(:disabled),
.dialog-footer > .btn-outline-danger:hover:not(:disabled) {
    background: var(--color-error-bg) !important;
    color: var(--color-error) !important;
    border-color: var(--color-error-border) !important;
}

/* Primary CTA в footer'е — идентичная «Применить» в фильтрах */
.products-toolbar-btn--primary,
.form-buttons > .btn-primary,
.dialog-footer > .btn-primary {
    background: var(--color-primary) !important;
    color: #fff !important;
    border: 1px solid var(--color-primary) !important;
}
.products-toolbar-btn--primary:hover:not(:disabled),
.form-buttons > .btn-primary:hover:not(:disabled),
.dialog-footer > .btn-primary:hover:not(:disabled) {
    background: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
    color: #fff !important;
}

/* Danger в footer'е */
.form-buttons > .btn-danger,
.form-buttons > .btn-primaryred,
.dialog-footer > .btn-danger {
    background: var(--color-error) !important;
    color: #fff !important;
    border: 1px solid var(--color-error) !important;
}
.form-buttons > .btn-danger:hover:not(:disabled),
.form-buttons > .btn-primaryred:hover:not(:disabled),
.dialog-footer > .btn-danger:hover:not(:disabled) {
    filter: brightness(0.92);
}

/* Disabled везде */
.form-buttons > .btn:disabled,
.dialog-footer > .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Radzen-кнопки <RadzenButton/> внутри footer'а — выровнять с обычными */
.form-buttons > .rz-button,
.dialog-footer > .rz-button {
    min-height: 34px !important;
    padding: 7px 16px !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--text-bt) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}
.form-buttons > .rz-button.rz-primary,
.dialog-footer > .rz-button.rz-primary {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}
.form-buttons > .rz-button.rz-primary:hover:not(:disabled):not(.rz-state-disabled),
.dialog-footer > .rz-button.rz-primary:hover:not(:disabled):not(.rz-state-disabled) {
    background: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
}
.form-buttons > .rz-button.rz-base,
.form-buttons > .rz-button.rz-secondary,
.form-buttons > .rz-button.rz-light,
.dialog-footer > .rz-button.rz-base,
.dialog-footer > .rz-button.rz-secondary {
    background: var(--color-surface) !important;
    color: var(--color-text-muted) !important;
    border: 1px solid var(--color-primary-border) !important;
}
.form-buttons > .rz-button.rz-base:hover:not(:disabled),
.form-buttons > .rz-button.rz-secondary:hover:not(:disabled),
.dialog-footer > .rz-button.rz-base:hover:not(:disabled) {
    background: var(--color-surface-2) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border-hover) !important;
}

/* ── Radzen Notification toast ── */
/* z-index должен быть выше .app-modal-overlay (2000), чтобы тосты
   были видны поверх открытых кастомных диалогов */
.rz-notification {
    z-index: 2100 !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    font-size: 0.85rem !important;
    background-color: var(--color-surface-2) !important;
}
.rz-notification-success .rz-notification-item {
    color: var(--color-text) !important;
    background: none!important;
}
.rz-notification-error .rz-notification-item {
    color: var(--color-text) !important;
    background: none !important;
}
.rz-notification-info .rz-notification-item {
    color: var(--color-text) !important;
    background: none !important;
}
.rz-notification-icon.rzi-info-circle {
    color: blue;
}
/* Единый размер текста для всех элементов внутри уведомления */
.rz-notification,
.rz-notification .rz-notification-message,
.rz-notification .rz-notification-title,
.rz-notification .rz-notification-content,
.rz-notification .rz-notification-summary,
.rz-notification .rz-notification-detail {
    font-size: 0.85rem !important;
}
.rz-notification-icon.rzi-check {
    color: limegreen!important;
}
.rz-notification-icon.rzi-times {
    color: orangered;
}
/* ── Settings section ── */
.settings-section {
    background: var(--color-surface-2);
    border-radius: var(--radius-md);
    transition: background var(--t-slow);
}

/* ── Import menu items ── */
.import-menu-item {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: var(--radius-lg);
    transition: background var(--t-base);
}

.import-menu-item:hover {
    background: var(--color-surface-2);
}


/* ── Переключатель темы: свитч солнце / луна (как theme-toggle в брендбуке, но с иконками) ── */
/* (старый toggle .theme-switch удалён — заменён на иконки sun/moon в AppTopBar) */


/* ── Задачи: бейджи статусов и приоритетов (общие для Tasks + TaskDetailsDialog) ── */
.task-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
    color: var(--color-text-muted);
}
.badge-status-new { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.badge-status-inprogress { background: #ede9fe; border-color: #c4b5fd; color: #6d28d9; }
.badge-status-pending { background: #fff7ed; border-color: #fed7aa; color: #c2410c; }
.badge-status-review { background: #fefce8; border-color: #fde68a; color: #92400e; }
.badge-status-done { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.badge-status-cancelled { background: var(--color-surface-2); border-color: var(--color-border); color: var(--color-text-muted); }
.badge-priority-low { background: var(--color-surface-2); border-color: var(--color-border); color: var(--color-text-muted); }
.badge-priority-normal { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }
.badge-priority-high { background: #fff7ed; border-color: #fdba74; color: #b45309; }
.badge-priority-critical { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }

/* Плашка «Ваш тариф не поддерживает данный функционал» (глобальная, не scoped).
   Используется в плитках каналов и вкладках Бухгалтерии при недоступной по тарифу фиче. */
.tariff-locked-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--color-surface-2, #f3f4f6);
    color: var(--color-text-muted, #6b7280);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
}
.tariff-locked-note i { font-size: 12px; opacity: .8; }
.tariff-locked-tab { display: flex; justify-content: center; padding: 32px 16px; }

/* Плитки фото товара (вкладка «Фото» в редакторе) */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 8px;
}
.photo-tile {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.photo-tile__img {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background: var(--color-surface-2);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.photo-tile__img img { width: 100%; height: 100%; object-fit: contain; }
.photo-tile__empty { color: var(--color-text-faint); font-size: 30px; }
.photo-tile__badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
}
.photo-tile__url {
    width: 100%;
    box-sizing: border-box;
    font-size: 11.5px;
    padding: 4px 6px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface-2);
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.photo-tile__actions { display: flex; gap: 4px; justify-content: space-between; }
.photo-tile__actions .bticon { flex: 0 0 auto; }
/* Кнопка «Фотостудия (AI)» в правом верхнем углу плитки фото */
.photo-tile__studio {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 30px;
    height: 30px;
    padding: 4px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, .85);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, transform .15s;
}
.photo-tile__studio:hover { background: #fff; transform: scale(1.06); }
.photo-tile__studio img { width: 100%; height: 100%; }

/* Роли пользователя в задаче */
.badge-role-responsible { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.badge-role-creator { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.badge-role-watcher { background: #f5f3ff; border-color: #ddd6fe; color: #6d28d9; }

/* ── Tasks v2: новые статусы (с дефисом) и типы задач ─────────────────────── */
/* В TaskWorkflow.BadgeClass генерируется .badge-status-in-progress / .badge-status-blocked etc. */
.badge-status-in-progress { background: #ede9fe; border-color: #c4b5fd; color: #6d28d9; }
.badge-status-blocked     { background: #f3f4f6; border-color: #d1d5db; color: #4b5563; border-style: dashed; }
.badge-status-returned    { background: #fdf2f8; border-color: #fbcfe8; color: #be185d; }
.badge-status-closed      { background: #e5e7eb; border-color: #9ca3af; color: #1f2937; }

/* Типы задач (юр/обр/проектная) */
.badge-type-urgent  { background: #fef2f2; border-color: #fecaca; color: #b91c1c; font-weight: 800; }
.badge-type-regular { background: var(--color-surface-2); border-color: var(--color-border); color: var(--color-text-muted); }
.badge-type-project { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }

/* ── Индикаторы-пометки в строке таблицы и шапке деталей ────────────────── */
.task-mark {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.78rem; padding: 1px 6px;
    margin-left: 6px; border-radius: 999px;
    line-height: 1;
}
.task-mark-overdue     { color: #b91c1c; background: #fef2f2; }
.task-mark-sla-warning { color: #b45309; background: #fff7ed; }
.task-mark-frozen      { color: #4b5563; background: #f3f4f6; }

.task-row-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--color-error, #dc3545);
    border-radius: 999px;
    vertical-align: middle;
}

/* Срочные задачи: акцентная полоса слева в строке грида */
.task-row-urgent {
    box-shadow: inset 3px 0 0 0 var(--color-error, #dc3545);
}

/* ── EntityChip — чип привязки задачи к сущности OWLS ──────────────────── */
.entity-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-2);
    color: var(--color-text);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    max-width: 240px;
}
.entity-chip i { font-size: 0.8rem; color: var(--color-text-muted); flex-shrink: 0; }
.entity-chip__label { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.entity-chip--sm { padding: 2px 8px; font-size: 0.75rem; }
.entity-chip--lg { padding: 6px 14px; font-size: 0.9rem; max-width: 380px; }

.entity-chip--clickable {
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    appearance: none; outline: none;
}
.entity-chip--clickable:hover {
    border-color: var(--color-accent, #F26336);
    background: #fff;
}
.entity-chip--clickable:focus-visible {
    box-shadow: 0 0 0 2px rgba(242, 99, 54, 0.25);
}

/* Per-kind акценты — тонкая заливка иконки соответствующим цветом домена. */
.entity-chip--product i         { color: #4338ca; }
.entity-chip--order-po i        { color: #b45309; }
.entity-chip--quarantine i      { color: #b91c1c; }
.entity-chip--storage i         { color: #047857; }
.entity-chip--inventory i       { color: #6d28d9; }
.entity-chip--transfer i        { color: #0e7490; }
.entity-chip--writeoff i        { color: #be185d; }
.entity-chip--provider i        { color: #1d4ed8; }
.entity-chip--marketplace-card i{ color: #c2410c; }
.entity-chip--return-supplier i { color: #6b7280; }
.entity-chip--return-customer i { color: #6b7280; }

/* Заглушки — невозможно перейти, визуально приглушены */
.entity-chip--return-supplier,
.entity-chip--return-customer {
    opacity: 0.85;
    font-style: italic;
}

/* ── Notifications dropdown (колокольчик в TopBar) ──────────────────────── */
.notifications-popup {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 360px;
    max-height: 480px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(11, 30, 53, 0.15);
    z-index: 1000;
    display: none;
    flex-direction: column;
    overflow: hidden;
}
.notifications-popup.open { display: flex; }
.notifications-popup__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
}
.notifications-popup__title {
    font-size: 0.95rem; font-weight: 600; color: var(--color-text);
}
.notifications-popup__mark-all {
    appearance: none; border: none; background: transparent;
    color: var(--color-accent, #F26336);
    font-size: 0.8rem; cursor: pointer; padding: 4px 8px;
    border-radius: 6px;
}
.notifications-popup__mark-all:hover { background: var(--color-surface-2); }
.notifications-popup__list {
    overflow-y: auto;
    flex: 1;
}
.notifications-popup__empty {
    padding: 32px 16px; text-align: center;
    color: var(--color-text-muted); font-size: 0.85rem;
}
.notif-item {
    display: flex; gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    background: var(--color-surface);
    transition: background 0.15s ease;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--color-surface-2); }
.notif-item.unread { background: #fff7ed; }
.notif-item.unread:hover { background: #ffedd5; }
.notif-item__icon {
    width: 32px; height: 32px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-surface-2);
    color: var(--color-accent, #F26336);
    border-radius: 8px;
    font-size: 0.9rem;
}
.notif-item__body { min-width: 0; flex: 1; }
.notif-item__title {
    font-size: 0.85rem; font-weight: 600; color: var(--color-text);
    margin-bottom: 2px;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.notif-item__sub {
    font-size: 0.78rem; color: var(--color-text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notif-item__time {
    font-size: 0.7rem; color: var(--color-text-muted);
    margin-top: 4px;
}
.notifications-popup__footer {
    padding: 8px 16px;
    border-top: 1px solid var(--color-border);
    text-align: center;
}
.notifications-popup__footer a {
    color: var(--color-accent, #F26336);
    text-decoration: none;
    font-size: 0.82rem;
}
.topbar-bell-badge {
    position: absolute;
    top: -2px; right: -2px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    background: var(--color-error, #dc3545);
    color: #fff;
    font-size: 0.65rem; font-weight: 700;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
}

/* ── Dark theme — новые статусы и чипы ──────────────────────────────────── */
[data-theme="dark"] .badge-status-in-progress { background: rgba(109, 40, 217, 0.15); border-color: rgba(109, 40, 217, 0.3); color: #a78bfa; }
[data-theme="dark"] .badge-status-blocked     { background: rgba(75, 85, 99, 0.2);  border-color: rgba(75, 85, 99, 0.4);  color: #d1d5db; }
[data-theme="dark"] .badge-status-returned    { background: rgba(190, 24, 93, 0.15); border-color: rgba(190, 24, 93, 0.3); color: #f9a8d4; }
[data-theme="dark"] .badge-status-closed      { background: rgba(31, 41, 55, 0.5); border-color: rgba(75, 85, 99, 0.4); color: #d1d5db; }
[data-theme="dark"] .badge-type-urgent        { background: rgba(220, 38, 38, 0.15); border-color: rgba(220, 38, 38, 0.3); color: #fca5a5; }
[data-theme="dark"] .badge-type-project       { background: rgba(67, 56, 202, 0.15); border-color: rgba(67, 56, 202, 0.3); color: #818cf8; }

[data-theme="dark"] .task-mark-overdue     { background: rgba(185, 28, 28, 0.18); color: #fca5a5; }
[data-theme="dark"] .task-mark-sla-warning { background: rgba(180, 83, 9, 0.18); color: #fbbf24; }
[data-theme="dark"] .task-mark-frozen      { background: rgba(75, 85, 99, 0.2); color: #d1d5db; }

[data-theme="dark"] .entity-chip--clickable:hover { background: var(--color-surface-3, rgba(255,255,255,0.04)); }
[data-theme="dark"] .notif-item.unread { background: rgba(242, 99, 54, 0.10); }
[data-theme="dark"] .notif-item.unread:hover { background: rgba(242, 99, 54, 0.18); }

/* Tab-bar 5 видов задач — реализован через RadzenTabs (см. Pages/Tasks.razor),
   стили унаследованы от .rz-tabview, как на странице Products. Кастомных правил
   .tasks-view-tabs более не требуется. */

/* ════════════════════════════════════════════════════════════════════════
   Раздел «Каналы продаж» (/sales-channels, Pages/SalesChannels.razor).
   Шапка-фильтр + ChannelChip — единый стиль для гридов всех 9 вкладок.
   ════════════════════════════════════════════════════════════════════════ */

.sales-channels-shell {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sales-channels-filterbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    margin-bottom: 6px;
    position: sticky;
    top: 0;
    z-index: 5;
}

/* ── ChannelChip (Shared/ChannelChip.razor) ──────────────────────────── */
/* По умолчанию — БЕЗ обводки и заливки: чип читается как «лого + название».
   Если в каком-то месте захочется bordered-вариант — добавить класс
   .channel-chip--bordered (правила ниже). */
.channel-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 6px;
    border-radius: 999px;
    background: transparent;
    border: none;
    font-size: 0.82rem;
    color: var(--color-text);
    white-space: nowrap;
    line-height: 1.4;
    max-width: 220px;
}
.channel-chip img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}
.channel-chip__label {
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}
.channel-chip--sm { padding: 1px 4px; font-size: 0.75rem; }
.channel-chip--sm img { width: 14px; height: 14px; }
.channel-chip--lg { padding: 4px 8px; font-size: 0.95rem; max-width: 260px; }
.channel-chip--lg img { width: 22px; height: 22px; }

/* Опциональный bordered-вариант (на случай если потребуется визуально выделить чип). */
.channel-chip--bordered {
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
    padding: 3px 10px 3px 6px;
}
.channel-chip--bordered.channel-chip--wb     { border-color: rgba(203, 17, 171, 0.35); }
.channel-chip--bordered.channel-chip--ozon   { border-color: rgba(0, 103, 243, 0.35); }
.channel-chip--bordered.channel-chip--yandex { border-color: rgba(255, 204, 0, 0.55); }
.channel-chip--bordered.channel-chip--mm     { border-color: rgba(33, 160, 56, 0.35); }
.channel-chip--bordered.channel-chip--ali    { border-color: rgba(255, 71, 71, 0.35); }
.channel-chip--bordered.channel-chip--web    { border-color: rgba(11, 30, 53, 0.30); }

/* ── ChannelConnectionsTab — карточная сетка кабинетов МП и сайта ─────── */
.channel-conn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    padding: 6px 2px;
}
.channel-conn-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.channel-conn-card:hover {
    border-color: var(--color-border-hover, var(--color-accent, #F26336));
    box-shadow: 0 6px 16px rgba(11, 30, 53, 0.06);
}
/* Стиль --error больше не применяется — все плитки одинаково белые.
   Селектор оставлен для обратной совместимости (если где-то ещё используется),
   но фон/рамка такие же как у обычной .channel-conn-card. */
.channel-conn-card--error {
    border-color: var(--color-border);
    background: var(--color-surface);
}
.channel-conn-card--add {
    border: 1.5px dashed var(--color-border);
    background: var(--color-surface-2);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.channel-conn-card--add:hover {
    border-color: var(--color-accent, #F26336);
    background: var(--color-accent-soft, rgba(242, 99, 54, 0.05));
}
.channel-conn-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}
.channel-conn-card__icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--color-surface-2);
}
.channel-conn-card__icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.10));
}
.channel-conn-card__title-block { min-width: 0; flex: 1; }
.channel-conn-card__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.channel-conn-card__status { margin-top: 4px; }
.channel-conn-card__rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    padding-top: 4px;
}
.channel-conn-card__rows > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-top: 1px dashed var(--color-border);
    color: var(--color-text-muted);
}
.channel-conn-card__rows > div:first-child { border-top: none; }
.channel-conn-card__rows b {
    color: var(--color-text);
    font-weight: 500;
    font-feature-settings: "tnum";
}
.channel-conn-card__actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.channel-conn-card__actions .btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    font-size: 0.82rem;
    padding: 6px 10px !important;
}

[data-theme="dark"] .channel-conn-card--error { background: rgba(220, 38, 38, 0.08); }
[data-theme="dark"] .channel-conn-card:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); }

/* ── Дерево категорий МегаМаркета (CreateEditMegaMarketCardDialog) ─────── */
.mm-tree {
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 6px 8px;
    background: var(--color-surface);
}
.mm-tree__row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
}
.mm-tree__label {
    appearance: none;
    background: transparent;
    border: none;
    font-size: 0.85rem;
    color: var(--color-text);
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 6px;
    text-align: left;
    flex: 1;
}
.mm-tree__label:hover { background: var(--color-surface-2); }

/* ── Плитка «Каналы продаж» (saleschannels) на дашборде ─────────────────── */
.dash-w__mp-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0 0;
}
.dash-w__mp-rows > div {
    display: grid;
    grid-template-columns: 28px 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 8px;
    transition: background 0.15s ease;
}
.dash-w__mp-rows > div:hover {
    background: var(--color-surface-2);
}
.dash-w__mp-rows .mp-badge {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-surface-2);
    border-radius: 6px;
    overflow: hidden;
}
.dash-w__mp-rows .mp-badge img {
    width: 18px; height: 18px;
    object-fit: contain;
}
.dash-w__mp-name {
    font-size: 0.9rem;
    color: var(--color-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-w__mp-num {
    font-feature-settings: "tnum";
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text);
}
.dash-w__mp-trend {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.dash-w__mp-trend.up   { color: #047857; background: #ecfdf5; }
.dash-w__mp-trend.down { color: #b91c1c; background: #fef2f2; }

[data-theme="dark"] .dash-w__mp-trend.up   { color: #34d399; background: rgba(4, 120, 87, 0.15); }
[data-theme="dark"] .dash-w__mp-trend.down { color: #f87171; background: rgba(185, 28, 28, 0.18); }
[data-theme="dark"] .dash-w__mp-rows > div:hover { background: rgba(255,255,255,0.04); }

/* ── Подвкладки задач (Мои / Порученные / Наблюдаю / Завершенные) — компактный pill-стиль ── */
.task-subtabs {
    margin: 8px 0 14px;
}
.task-subtabs .rz-tabview {
    background: transparent;
    border: 0;
    box-shadow: none;
}
.task-subtabs .rz-tabview-nav,
.task-subtabs ul.rz-tabview-nav {
    display: inline-flex !important;
    gap: 2px !important;
    padding: 2px !important;
    margin: 0 !important;
    list-style: none !important;
    background: var(--color-surface-2) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    line-height: 1 !important;
    min-height: 0 !important;
    height: auto !important;
}
.task-subtabs .rz-tabview-nav > li {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    line-height: 1 !important;
    min-height: 0 !important;
    height: auto !important;
    top: 0 !important;
}
.task-subtabs .rz-tabview-nav > li > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 0 10px !important;
    min-height: 0 !important;
    height: 22px !important;
    line-height: 1 !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: var(--color-text-muted) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 6px !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
}
.task-subtabs .rz-tabview-nav > li > a * {
    line-height: 1 !important;
}
.task-subtabs .rz-tabview-nav > li:hover > a {
    background: rgba(0,0,0,0.04) !important;
    color: var(--color-text) !important;
}
.task-subtabs .rz-tabview-nav > li.rz-tabview-selected,
.task-subtabs .rz-tabview-nav > li.rz-state-active {
    background: transparent !important;
    border: 0 !important;
}
.task-subtabs .rz-tabview-nav > li.rz-tabview-selected > a,
.task-subtabs .rz-tabview-nav > li.rz-state-active > a {
    background: var(--color-surface) !important;
    color: var(--color-primary) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 1px var(--color-border) !important;
}
.task-subtabs .rz-tabview-panels,
.task-subtabs .rz-tabview-panel {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.task-subtabs .rz-tabview-nav > li.rz-tabview-selected .tab-count-badge,
.task-subtabs .rz-tabview-nav > li.rz-state-active .tab-count-badge {
    background: var(--color-primary) !important;
    color: #fff !important;
    border-color: transparent !important;
}
/* Dark mode адаптация */
[data-theme="dark"] .task-subtabs .rz-tabview-nav,
[data-theme="dark"] .task-subtabs ul.rz-tabview-nav {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.1) !important;
}
[data-theme="dark"] .task-subtabs .rz-tabview-nav > li:hover > a {
    background: rgba(255,255,255,0.06) !important;
}
[data-theme="dark"] .task-subtabs .rz-tabview-nav > li.rz-tabview-selected > a,
[data-theme="dark"] .task-subtabs .rz-tabview-nav > li.rz-state-active > a {
    background: rgba(255,255,255,0.12) !important;
    color: #a5b4fc !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.15) !important;
}
[data-theme="dark"] .task-subtabs .rz-tabview-nav > li.rz-tabview-selected .tab-count-badge,
[data-theme="dark"] .task-subtabs .rz-tabview-nav > li.rz-state-active .tab-count-badge {
    background: #818cf8 !important;
    color: #0b0f1a !important;
}

/* Серый круглый счётчик на вкладках задач */
.tab-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    margin-left: 4px;
    border-radius: 999px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}
[data-theme="dark"] .tab-count-badge { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); color: #cbd5e1; }
[data-theme="dark"] .badge-role-responsible { background: rgba(4,120,87,0.15); border-color: rgba(4,120,87,0.3); color: #34d399; }
[data-theme="dark"] .badge-role-creator { background: rgba(29,78,216,0.15); border-color: rgba(29,78,216,0.3); color: #60a5fa; }
[data-theme="dark"] .badge-role-watcher { background: rgba(109,40,217,0.15); border-color: rgba(109,40,217,0.3); color: #a78bfa; }

/* Dark mode: бейджи статусов — приглушённые фоны */
[data-theme="dark"] .badge-status-new { background: rgba(29, 78, 216, 0.15); border-color: rgba(29, 78, 216, 0.3); color: #60a5fa; }
[data-theme="dark"] .badge-status-inprogress { background: rgba(109, 40, 217, 0.15); border-color: rgba(109, 40, 217, 0.3); color: #a78bfa; }
[data-theme="dark"] .badge-status-pending { background: rgba(194, 65, 12, 0.15); border-color: rgba(194, 65, 12, 0.3); color: #fb923c; }
[data-theme="dark"] .badge-status-review { background: rgba(234, 179, 8, 0.12); border-color: rgba(234, 179, 8, 0.25); color: #fcd34d; }
[data-theme="dark"] .badge-status-done { background: rgba(4, 120, 87, 0.15); border-color: rgba(4, 120, 87, 0.3); color: #34d399; }
[data-theme="dark"] .badge-priority-normal { background: rgba(67, 56, 202, 0.15); border-color: rgba(67, 56, 202, 0.3); color: #818cf8; }
[data-theme="dark"] .badge-priority-high { background: rgba(180, 83, 9, 0.15); border-color: rgba(180, 83, 9, 0.3); color: #fbbf24; }
[data-theme="dark"] .badge-priority-critical { background: rgba(var(--color-error-rgb), 0.15); border-color: rgba(var(--color-error-rgb), 0.3); color: #f87171; }

/* ============================================================
 * N1 Apple Gray Overrides — кнопки, таблицы, табы в стиле Apple macOS
 * ============================================================ */

/* ── Radzen .rz-button: общий стиль ── */
.rz-button {
    height: 32px !important;
    border-radius: var(--radius-md) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    background: var(--color-surface) !important;
    color: var(--color-text-muted) !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px;
    justify-content: center;
    white-space: nowrap;
}
/* Icon-only кнопки внутри DataGrid (pager, sort) */
.rz-pager .rz-button,
.rz-data-grid .rz-button:not(.rz-button-primary):not(.rz-primary) {
    height: 14px!important;
    width: 14px;
    padding: 0 !important;
    justify-content: center;
}
.rz-button:hover:not(:disabled):not(.rz-state-disabled) {
    background: var(--color-surface-2) !important;
}
.rz-button-primary,
.rz-button.rz-primary {
    background: var(--color-accent) !important;
    color: #FFFFFF !important;
    border-color: var(--color-accent) !important;
    font-weight: 600 !important;
}
.rz-button-primary:hover:not(:disabled):not(.rz-state-disabled),
.rz-button.rz-primary:hover:not(:disabled):not(.rz-state-disabled) {
    background: var(--color-accent-hover) !important;
    border-color: var(--color-accent-hover) !important;
}

/* ── RadzenNumeric: стрелки вверх/вниз ── */
.rz-numeric-button {
    width: 24px !important;
    height: 50% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    background: var(--color-surface-2) !important;
    color: var(--color-text-muted) !important;
    border-radius: 0 !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}
.rz-numeric-button:hover {
    background: var(--color-border) !important;
    color: var(--color-text) !important;
}
.rz-numeric-up {
    border-top-right-radius: var(--radius-md) !important;
    border-bottom: 0.5px solid var(--color-border) !important;
}
.rz-numeric-down {
    border-bottom-right-radius: var(--radius-md) !important;
}
.rz-numeric-button .rzi,
.rz-numeric-button .rz-numeric-button-icon {
    font-size: 10px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Dark: Radzen buttons */
[data-theme="dark"] .rz-button:not(.rz-primary):not(.rz-button-primary) {
    color: #e9e9e9 !important;
    border: none !important;
    background-color: #4f4f4f !important;
}
[data-theme="dark"] .rz-button:not(.rz-primary):not(.rz-button-primary):hover:not(:disabled) {
    background: #e5e5e5 !important;
    color: #020202 !important;
}

/* (DataGrid N1 rules consolidated into main block above — ~line 3535) */

/* ── Табы (Radzen) — N1 apple gray: полоса без рамки и скруглений ── */

/* Контейнер — без рамки и скруглений, фон страницы (только в main: не трогаем вкладки в диалогах) */
main article.content .rz-tabview.rz-tabview-top,
main article.content .rz-tabview.rz-tabview-top-right {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-sizing: border-box !important;
    width: calc(100% + var(--article-pad-x-start) + var(--article-pad-x-end)) !important;
    max-width: none !important;
    margin-left: calc(-1 * var(--article-pad-x-start)) !important;
    margin-right: calc(-1 * var(--article-pad-x-end)) !important;
}

/* Вложенные RadzenTabs внутри панели — без full-bleed */
main article.content .rz-tabview .rz-tabview-panels .rz-tabview.rz-tabview-top,
main article.content .rz-tabview .rz-tabview-panels .rz-tabview.rz-tabview-top-right {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
}

/* Полоса табов N1: только main article.content (в диалогах — стили блока «стекло» выше) */
main article.content .rz-tabview.rz-tabview-top > .rz-tabview-nav,
main article.content .rz-tabview.rz-tabview-top-right > .rz-tabview-nav {
    padding: 0 22px !important;
    min-height: var(--nav-top-toolbar-height);
    height: var(--nav-top-toolbar-height);
    width: 100% !important;
    box-sizing: border-box !important;
    background: var(--color-surface) !important;
    border-bottom: 1px solid var(--color-border) !important;
    border-radius: 0 !important;
    align-items: stretch;
    box-shadow: none !important;
}
main article.content .rz-tabview.rz-tabview-top > .rz-tabview-nav > li,
main article.content .rz-tabview.rz-tabview-top-right > .rz-tabview-nav > li {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 0 !important;
    position: relative;
    z-index: auto;
}
/* tsep — вертикальный разделитель между вкладками */
main article.content .rz-tabview.rz-tabview-top > .rz-tabview-nav > li + li::before,
main article.content .rz-tabview.rz-tabview-top-right > .rz-tabview-nav > li + li::before {
    content: '';
    display: block;
    width: 1px;
    height: 16px;
    background: var(--color-border);
    flex-shrink: 0;
    align-self: center;
}
main article.content .rz-tabview.rz-tabview-top > .rz-tabview-nav > li > :is(a, button),
main article.content .rz-tabview.rz-tabview-top-right > .rz-tabview-nav > li > :is(a, button) {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--color-text-faint) !important;
    padding: 0 14px !important;
    min-height: var(--nav-top-toolbar-height) !important;
    height: 100% !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    letter-spacing: -0.01em;
    box-sizing: border-box !important;
    line-height: 1.2;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    font-family: inherit;
    margin: 0;
    border: none;
    border-bottom: 2px solid transparent;
}
main article.content .rz-tabview.rz-tabview-top > .rz-tabview-nav > li.rz-tabview-selected,
main article.content .rz-tabview.rz-tabview-top-right > .rz-tabview-nav > li.rz-tabview-selected {
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}
    main article.content .rz-tabview.rz-tabview-top > .rz-tabview-nav > li.rz-tabview-selected > :is(a, button),
    main article.content .rz-tabview.rz-tabview-top-right > .rz-tabview-nav > li.rz-tabview-selected > :is(a, button) {
        color: var(--color-text) !important;
        font-weight: 600 !important;
        border-bottom: 2px solid var(--color-accent) !important;
        background: transparent !important;
        border-radius: 0px !important;
    }
main article.content .rz-tabview.rz-tabview-top > .rz-tabview-nav > li:hover:not(.rz-tabview-selected) > :is(a, button),
main article.content .rz-tabview.rz-tabview-top-right > .rz-tabview-nav > li:hover:not(.rz-tabview-selected) > :is(a, button) {
    background: rgba(0,0,0,0.03) !important;
    color: var(--color-text-secondary) !important;
}

main article.content .rz-tabview.rz-tabview-top > .rz-tabview-nav > li > :is(a, button) .rtabitem,
main article.content .rz-tabview.rz-tabview-top-right > .rz-tabview-nav > li > :is(a, button) .rtabitem {
    font-size: inherit !important;
}

/* Вкладки: иконки как текст (Radzen 8: .rzi / .rz-tabview-icon в <button>) */
.rz-tabview-nav > li > :is(a, button) .rzi,
.rz-tabview-nav > li > :is(a, button) .rz-tabview-icon {
    font-size: 1.05rem !important;
    line-height: 1 !important;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20 !important;
    color: var(--color-text) !important;
    -webkit-text-fill-color: var(--color-text) !important;
}

.rz-tabview-nav > li:hover:not(.rz-tabview-selected) > :is(a, button) .rzi,
.rz-tabview-nav > li:hover:not(.rz-tabview-selected) > :is(a, button) .rz-tabview-icon,
.rz-tabview-nav > li > :is(a, button) .rtabitem .fa-light,
.rz-tabview-nav > li > :is(a, button) .rtabitem .fa-solid,
.rz-tabview-nav > li > :is(a, button) .rtabitem .fa-regular,
.rz-tabview-nav > li > :is(a, button) .rtabitem i,
.rz-tabview-nav > li > :is(a, button) .rtabitem .nav-menu-icon-fa {
    color: var(--color-text) !important;
}

.rz-tabview-nav > li > :is(a, button) .rtabitem i,
.rz-tabview-nav > li > :is(a, button) .rtabitem .nav-menu-icon-fa {
    font-size: 0.92em !important;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
}

.rz-tabview-nav > li > :is(a, button) .rtabitem svg {
    color: var(--color-text) !important;
}

.rz-tabview-nav > li > :is(a, button) .rtabitem .toolbar-action-icon {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

/* Монохромные иконки в заголовках вкладок — единый чёрный/белый стиль */
.rz-tabview-nav > li > :is(a, button) .rtabitem .toolbar-action-icon svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    filter: brightness(0);
}

/* Все <img> внутри табов — монохром (кроме цветных логотипов МП) */
.rz-tabview-nav > li > :is(a, button) img:not(.mp-color-logo),
.rz-tabview-nav > li > :is(a, button) .rtabitem img:not(.mp-color-logo) {
    filter: brightness(0) !important;
    opacity: 0.7;
    transition: filter 0.2s, opacity 0.2s;
}
.rz-tabview-nav > li.rz-tabview-selected > :is(a, button) img:not(.mp-color-logo),
.rz-tabview-nav > li.rz-tabview-selected > :is(a, button) .rtabitem img:not(.mp-color-logo) {
    opacity: 1;
}

/* Dark mode: инверсия всех иконок в табах → белые */
[data-theme="dark"] .rz-tabview-nav > li > :is(a, button) .rtabitem .toolbar-action-icon svg {
    filter: brightness(0) invert(1);
}
[data-theme="dark"] .rz-tabview-nav > li > :is(a, button) img:not(.mp-color-logo),
[data-theme="dark"] .rz-tabview-nav > li > :is(a, button) .rtabitem img:not(.mp-color-logo) {
    filter: brightness(0) invert(1) !important;
}
/* Неактивная вкладка в dark — иконки чуть приглушённые */
[data-theme="dark"] .rz-tabview-nav > li:not(.rz-tabview-selected) > :is(a, button) .rtabitem .toolbar-action-icon svg {
    opacity: 0.7;
}
[data-theme="dark"] .rz-tabview-nav > li.rz-tabview-selected > :is(a, button) .rtabitem .toolbar-action-icon svg {
    opacity: 1;
}

/* Bootstrap .nav-tabs иконки тоже монохром */
main article.content .nav-tabs .nav-link i,
main article.content .nav-tabs .nav-link .fa-light {
    color: var(--color-text) !important;
    font-size: 0.92em !important;
    font-weight: 300;
}
main article.content .nav-tabs .nav-link img {
    filter: brightness(0);
    opacity: 0.7;
}
main article.content .nav-tabs .nav-link.active img {
    opacity: 1;
}
[data-theme="dark"] main article.content .nav-tabs .nav-link img {
    filter: brightness(0) invert(1);
}

/* Панели контента в main: фон страницы (в диалогах — градиент из блока TabView «стекло») */
main article.content .rz-tabview.rz-tabview-top > .rz-tabview-panels,
main article.content .rz-tabview.rz-tabview-top-right > .rz-tabview-panels {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding:0 !important;
}

/* ── Bootstrap .nav-tabs — N1 стиль: без рамки, без скруглений ── */
main article.content .nav-tabs {
    border: none !important;
    border-bottom: 1px solid var(--color-border) !important;
    border-radius: 0 !important;
    min-height: var(--nav-top-toolbar-height);
    height: var(--nav-top-toolbar-height);
    display: flex !important;
    align-items: stretch;
    background: var(--color-surface) !important;
    box-sizing: border-box !important;
    width: calc(100% + var(--article-pad-x-start) + var(--article-pad-x-end)) !important;
    max-width: none !important;
    margin-left: calc(-1 * var(--article-pad-x-start)) !important;
    margin-right: calc(-1 * var(--article-pad-x-end)) !important;
    margin-top: -1.1rem !important;
    padding: 0 22px !important;
    box-shadow: none !important;
}
main article.content .nav-tabs .nav-item {
    padding: 0 !important;
}
main article.content .nav-tabs .nav-link {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--color-text-faint) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: 0 14px !important;
    min-height: var(--nav-top-toolbar-height);
    height: var(--nav-top-toolbar-height);
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    letter-spacing: -0.01em;
}
main article.content .nav-tabs .nav-link.active,
main article.content .nav-tabs .nav-link:hover.active {
    color: var(--color-text) !important;
    font-weight: 600 !important;
    border-bottom: 2px solid var(--color-accent) !important;
    background: transparent !important;
}
main article.content .nav-tabs .nav-link:hover:not(.active) {
    color: var(--color-text-secondary) !important;
    background: rgba(0,0,0,0.03) !important;
}

/* ── Фото-заглушка (когда нет ссылки на изображение) ── */
.photo-placeholder {
    width: 90px;
    height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-2);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: 0.72rem;
    gap: 5px;
    flex-shrink: 0;
}

.photo-placeholder i {
    font-size: 1.6rem;
    color: var(--color-text-faint);
}

/* ── Textarea описания товара — единый стиль с другими полями ── */
.product-description-area {
    font-family: var(--font-body) !important;
    font-size: var(--text-sm) !important;
    resize: vertical;
}

/* ── Галочки: единый font-size 0.85rem для всего сайта ── */
.procblock .rz-label,
.procblock label,
.form-groupcheck .rz-label,
.form-groupcheck label,
.form-check .form-check-label,
.checkbox-group label {
    font-size: 0.85rem !important;
}
/* ── Глобальный бейдж-кружок (сборочные задания WB) ── */
.fbs-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    margin-left: 4px;
    font-size: 9px;
    font-weight: 700;
    line-height: 16px;
    color: #fff;
    background: var(--color-error);
    border-radius: 999px;
    white-space: nowrap;
    pointer-events: none;
    box-sizing: border-box;
    vertical-align: middle;
}

/* ── Видимые разделители и ручки ресайза в шапке таблиц ── */
.rz-data-grid .rz-column-resizer {
    background: rgb(207 207 207 / 18%) !important;
    width: 3px !important;
    opacity: 1 !important;
    cursor: col-resize !important;
    transition: background 120ms;
}
.rz-data-grid .rz-column-resizer:hover {
    background: var(--color-primary) !important;
}
/* тёмная тема */
[data-theme="dark"] .rz-data-grid .rz-column-resizer {
    background: rgba(255, 255, 255, 0.2) !important;
}
[data-theme="dark"] .rz-data-grid .rz-column-resizer:hover {
    background: var(--color-primary) !important;
}

/* Drag-to-reorder вкладок RadzenTabs */
.rz-tabview-nav li.rz-tab-dragging {
    opacity: 0.45;
    cursor: grabbing !important;
}
.rz-tabview-nav li.rz-tab-drag-over {
    outline: 2px dashed var(--color-primary);
    outline-offset: -2px;
    border-radius: 4px;
}
.rz-tabview-nav li[draggable="true"] {
    cursor: grab;
    user-select: none;
}

/* ── Stock ops: карточки статистики (Списания/Оприходывания) ── */
.stock-stat-card {
    flex: 1 1 220px;
    min-width: 200px;
    padding: 14px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.stock-stat-card .stock-stat-label {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin-bottom: 6px;
}
.stock-stat-card .stock-stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-primary);
}
[data-theme="dark"] .stock-stat-card {
    background: var(--color-surface-2);
    border-color: var(--color-border);
}
.products-toolbar-btn.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* Диалог выбора типа импорта (Excel / FBO Ozon / …) — теперь использует единый
   стиль .import-menu / .import-menu-item (см. выше). Старые .import-type-picker_*
   стили удалены. */

/* ================== Dashboard (Информация → Дашборд) ================== */
.dashboard-page { padding-top: 4px; }

/* Дашборд использует общий .products-toolbar / .products-toolbar-btn.
   Отдельные стили .dashboard-toolbar больше не нужны. */

.dashboard-tiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(312px, 1fr));
    gap: 21px;
}

.dashboard-tile {
    position: relative;
    background: var(--color-surface);
    border-radius: var(--radius-xl, 14px);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-xs, 0 2px 10px rgba(0,0,0,0.04));
    padding: 34px 24px 36px 24px;
    min-height: 182px; /* +30% к прежнему 140px */
    display: flex; flex-direction: column; gap: 8px;
    transition: box-shadow .15s, transform .15s;
}
.dashboard-tile:hover { box-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,0.08)); }
.dashboard-tile.dragging { opacity: .5; }
.dashboard-tile.drop-target { outline: 2px dashed var(--color-primary); outline-offset: -2px; }

.dashboard-tile__grip {
    position: absolute; top: 8px; left: 10px;
    color: #6b7280; cursor: grab; font-size: 1.4rem;
    padding: 4px;
    line-height: 1;
    z-index: 2;
}
.dashboard-tile__grip:hover { color: var(--color-primary); }
.dashboard-tile__grip:active { cursor: grabbing; }

.dashboard-tile__arrow {
    position: absolute; bottom: 8px; right: 13px;
    color: #6b7280; font-size: 1.24rem;
    text-decoration: none;
    line-height: 1;
    padding: 4px;
    z-index: 2;
}
.dashboard-tile__arrow:hover { color: var(--color-primary); }

.dashboard-tile__title {
    margin: 8px 0 0 29px;
    font-size: 1.1rem;
    color: var(--color-text-muted);
    font-weight: 500;
}
.dashboard-tile__value {
    font-size: 2.21rem;
    font-weight: 800;
    color: var(--color-text);
    margin-left: 29px;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.dashboard-tile__hint {
    font-size: 0.98rem;
    color: var(--color-text-muted);
    margin-left: 29px;
    line-height: 1.35;
}

.dashboard-tile--success .dashboard-tile__value { color: var(--color-success); }
.dashboard-tile--info    .dashboard-tile__value { color: var(--color-accent); }
.dashboard-tile--amber   .dashboard-tile__value { color: var(--color-warning); }
.dashboard-tile--danger  .dashboard-tile__value { color: var(--color-error); }

/* Бейдж «тренд к прошлому периоду» — по шаблону N1_apple_gray_v4_clean.html (.kpi-trend). */
.dashboard-tile__trend-slot { margin-left: 29px; margin-top: 6px; }
.dashboard-tile__trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.dashboard-tile__trend--up   { background: #F2FBF4; color: #1D8B3A; }
.dashboard-tile__trend--down { background: #FFF1F0; color: #C0392B; }
.dashboard-tile__trend--flat { background: #F3F4F6; color: #6B7280; }

/* «Широкая» плитка — занимает 2 колонки сетки. На узких экранах сворачивается обратно. */
.dashboard-tile--wide { grid-column: span 2; }
@media (max-width: 768px) {
    .dashboard-tile--wide { grid-column: span 1; }
}

/* Плитка-диаграмма: контейнер для RadzenChart */
.dashboard-tile--chart { min-height: 340px; padding-bottom: 24px; }
.dashboard-tile__chart {
    margin: 8px 8px 0 8px;
    height: 280px;
    position: relative;
}
.dashboard-tile__chart .rz-chart {
    width: 100% !important;
    height: 100% !important;
}

/* Плитка с полностью кастомной разметкой — без типографики value */
.dashboard-tile--custom { padding-bottom: 18px; }
.dashboard-tile__custom {
    margin: 6px 8px 0 29px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ===== «Заказы сегодня» ===== */
.orders-today {
    display: flex;
    flex-direction: column;
    gap: 14px;
}


.orders-today__empty {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--color-text-muted);
    font-size: 1.05rem;
    padding: 12px 0;
}
.orders-today__empty i { font-size: 1.6rem; color: #c0c4cc; }

.orders-today__summary {
    display: flex;
    gap: 36px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.orders-today__metric { display: flex; flex-direction: column; gap: 3px; }
.orders-today__bignum {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-text);
}
.orders-today__label {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.orders-today__markets {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
}
.orders-today__market {
    display: grid;
    grid-template-columns: 130px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 8px 0;
    border-top: 1px solid var(--color-border);
}
.orders-today__market:first-child { border-top: 1px solid var(--color-border); }
.orders-today__market-nums {
    display: flex;
    gap: 8px;
    align-items: baseline;
}
.orders-today__count {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-text);
}
.orders-today__sum {
    color: var(--color-text-muted);
    font-size: 0.95rem;
}
.orders-today__sep { color: #d0d4d9; }
.orders-today__market-split {
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--color-text-muted);
    font-size: 0.88rem;
}
.orders-today__market-split i { margin-right: 4px; opacity: .8; }

.orders-today__footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    margin-top: 2px;
    border-top: 1px dashed var(--color-border);
    color: #dc3545;
    font-size: 0.95rem;
}
.orders-today__footer i { font-size: 1rem; }

@media (max-width: 768px) {
    .orders-today__summary { gap: 20px; }
    .orders-today__bignum { font-size: 1.7rem; }
    .orders-today__market {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 10px 0;
    }
}

.dashboard-add-tile {
    border: 2px dashed var(--color-border);
    background: rgba(255,255,255,0.45);
    border-radius: var(--radius-xl, 14px);
    min-height: 182px;
    display: flex; align-items: center; justify-content: center;
    color: #9ca3af;
    font-size: 3.12rem;
    cursor: pointer;
    transition: all .15s;
}
.dashboard-add-tile:hover {
    background: #fff;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* ── Сообщения задач: поле ввода ──────────────────────────────── */
.chat-textarea {
    width: 100%;
    min-height: 72px;
    max-height: 300px;
    resize: none;
    overflow-y: auto;
    box-sizing: border-box;
    border-radius: 10px !important;
    border: 1px solid rgba(var(--color-primary-rgb), 0.18) !important;
    padding: 0.45rem 0.75rem !important;
    font-size: 0.88rem;
    line-height: 1.55;
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}
.chat-textarea:focus {
    border-color: rgba(var(--color-primary-rgb), 0.45) !important;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.08);
}
.chat-textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.chat-composer {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}
.chat-composer-hint {
    font-size: 0.74rem;
    color: var(--color-text-muted);
}
/* Текст сообщения — сохраняем переносы строк */
.chat-message-body {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.88rem;
    line-height: 1.55;
}

/* ── Вкладка «Сборочные задания» в диалоге Сообщения и поддержка ── */
.fbs-tab {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fbs-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-border);
    border-radius: 8px;
    transition: box-shadow 140ms ease, border-color 140ms ease;
}
.fbs-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

/* Акцентные полосы по маркетплейсу */
.fbs-card--wb   { border-left-color: #CB11AB; }
.fbs-card--ozon { border-left-color: #005BFF; }
.fbs-card--ya   { border-left-color: #FACC15; }

/* Лого + название маркетплейса */
.fbs-card__market {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 84px;
    text-align: center;
}
.fbs-card__logo {
    height: 24px;
    width: auto;
    object-fit: contain;
}
.fbs-card__market-name {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
    letter-spacing: 0.01em;
}

/* Блок с числом и подписью */
.fbs-card__info {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}
.fbs-card__count {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
}
.fbs-card__count-label {
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

/* Чипсы этапов (сборка / отгрузка) */
.fbs-card__stages {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    margin-top: 4px;
}
.fbs-stage-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--color-primary-surface);
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 500;
}

/* Кнопка «Перейти» — прибита к правому краю */
.fbs-card__btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Тёмная тема */
[data-theme="dark"] .fbs-card {
    background: var(--color-surface-2);
}
[data-theme="dark"] .fbs-stage-chip {
    background: rgba(255,255,255,0.06);
    color: var(--color-text-muted);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Модальное окно (общий шаблон): import-modal-overlay + import-modal.
   Используется для диалогов: «Столбцы» (Pages/Products.razor + Shared/ColumnsToggleButton.razor),
   «Импорт/Экспорт», «Настройка тулбара». Перенесено из Pages/Products.razor.css в site.css,
   чтобы стили были доступны во всех страницах и переиспользуемых компонентах.
   ───────────────────────────────────────────────────────────────────────────── */
.import-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.45);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.import-modal {
    width: min(720px, 92vw);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, .18);
    padding: 14px;
}

.import-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.import-modal-title {
    font-weight: 800;
    font-size: 1.05rem;
    color: #111827;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.import-modal-close {
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.column-chooser {
    max-height: 360px;
    overflow: auto;
    padding: 4px 0;
    margin-bottom: 4px;
}

[data-theme="dark"] .import-modal {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}
[data-theme="dark"] .import-modal-title {
    color: var(--color-text);
}

/* ─────────────────────────────────────────────────────────────────────────────
   «Основная информация» документа — единый стиль (приёмка / закупка / перемещение).
   Все простые поля (textbox, dropdown, datepicker) фиксированы по ширине 360px,
   чтобы выровнять правую границу. Поле в паре с кнопкой-действием справа —
   оборачивать в .accept-field-row.
   Эталоны: Pages/AcceptSee.razor, Dialogs/CreateOrderDialog.razor.
   ───────────────────────────────────────────────────────────────────────────── */
.accept-field-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.accept-field-row > .form-control,
.accept-field-row > .rz-dropdown,
.accept-field-row > .rz-textbox,
.accept-field-row > .rz-datepicker {
    flex: 0 0 360px;
    width: 360px;
    max-width: 360px;
}
.accept-main-info > .form-group > .rz-datepicker,
.accept-main-info > .form-group > .rz-textbox,
.accept-main-info > .form-group > .rz-dropdown {
    width: 360px;
    max-width: 360px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   === Analytics ===
   Раздел «Аналитика» (/analytics): шапка фильтров сверху + RadzenTabs с 6 вкладками.
   Стиль табов наследуется от существующих .rtabitem из Pages/SalesChannels.razor.
   Apple Gray: чёрные значения, нейтральные плашки, Signal Orange (--color-accent)
   ТОЛЬКО для алертов. План: C:\Users\Colorfire\.claude\plans\staged-nibbling-sunset.md
   ───────────────────────────────────────────────────────────────────────────── */
.analytics-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Без padding-top — вкладки RadzenTabs прижаты к верху страницы как в Pages/Products.
       Боковые отступы тоже убраны: контент сам выравнивается контейнером MainLayout. */
    padding: 0;
}

/* ── Шапка фильтров ─────────────────────────────────────────────────────── */
.analytics-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px;
    align-items: center;
    padding: 10px 14px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    /* Отступ снизу — чтобы фильтр не «прилипал» к контенту вкладки. */
    margin-bottom: 14px;
}
.analytics-filters__group {
    display: flex;
    gap: 8px;
    align-items: center;
}
.analytics-filters__label {
    font-size: 0.78rem;
    color: var(--color-text-muted, #6b7280);
}
.analytics-filters__period-quick {
    display: flex;
    gap: 4px;
}
.analytics-filters__chip {
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--color-text, #1f2937);
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.analytics-filters__chip:hover {
    border-color: var(--color-text-muted, #9ca3af);
}
.analytics-filters__chip--active {
    background: var(--color-primary, #0B1E35);
    color: #fff;
    border-color: var(--color-primary, #0B1E35);
}
.analytics-filters__select,
.analytics-filters__input {
    padding: 5px 9px;
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 6px;
    font-size: 0.82rem;
    color: var(--color-text, #1f2937);
    min-width: 120px;
}

/* ── Секции внутри вкладки ─────────────────────────────────────────────── */
.analytics-section {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    padding: 14px;
    /* Вертикальный отступ между секциями («Динамика», «Алерты», итд). */
    margin-bottom: 14px;
}
.analytics-section:last-child {
    margin-bottom: 0;
}
.analytics-section__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text, #1f2937);
    margin-bottom: 12px;
}
.analytics-section__charts {
    /* Каждый график на отдельной строке (по запросу — на всю ширину),
       не 2-3 в ряд. Так лучше видна динамика по дням. */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Карточка графика ──────────────────────────────────────────────────── */
.analytics-chart-card {
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 7px;
    padding: 12px 14px;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.analytics-chart-card__title {
    font-size: 0.8rem;
    color: var(--color-text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 600;
}
.analytics-chart-card__body {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px;
}
.analytics-chart-card__body--loading {
    color: var(--color-text-muted, #9ca3af);
    font-size: 0.85rem;
}
.analytics-chart-card__body--empty {
    color: var(--color-text-muted, #9ca3af);
    font-size: 0.78rem;
}

/* ── KPI-плейсхолдер ─────────────────────────────────────────────────────── */
.dashboard-tile__placeholder {
    color: var(--color-text-muted, #9ca3af);
    font-weight: 600;
}

/* ── Алерты (Signal Orange — только тут) ───────────────────────────────── */
.analytics-alerts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.analytics-alerts__empty {
    padding: 14px;
    color: var(--color-text-muted, #6b7280);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.analytics-alerts__empty > i {
    color: var(--color-success, #2D8A47);
    font-size: 1.05rem;
}
.analytics-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-accent, #F26336);
    border-left-width: 3px;
    border-radius: 6px;
}
.analytics-alert__icon {
    color: var(--color-accent, #F26336);
    font-size: 1.05rem;
}
.analytics-alert__body {
    flex: 1 1 auto;
    min-width: 0;
}
.analytics-alert__title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text, #1f2937);
}
.analytics-alert__desc {
    font-size: 0.78rem;
    color: var(--color-text-muted, #6b7280);
    margin-top: 2px;
}
.analytics-alert__actions {
    display: flex;
    gap: 4px;
}

/* ── KPI-сетка плиток дашборда — отступ снизу до следующего блока ───────── */
.analytics-page .dashboard-tiles-grid {
    margin-bottom: 14px;
}
.analytics-page .dashboard-tiles-grid:last-child {
    margin-bottom: 0;
}

/* ── Внутренние RadzenTabs (sub-табы в Продажи/Профит) — отступ снизу ───── */
.analytics-page .rz-tabview {
    margin-bottom: 14px;
}
.analytics-page .rz-tabview:last-child {
    margin-bottom: 0;
}

/* ── Заглушка вкладки (Этапы 1.2-1.4) ───────────────────────────────────── */
.analytics-tab-stub {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    padding: 36px 32px;
    text-align: center;
    color: var(--color-text, #1f2937);
    /* Отделение от соседних секций. */
    margin-bottom: 14px;
}
.analytics-tab-stub:last-child {
    margin-bottom: 0;
}
.analytics-tab-stub__icon {
    font-size: 2.4rem;
    color: var(--color-text-muted, #9ca3af);
    margin-bottom: 12px;
}
.analytics-tab-stub__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 12px 0;
}
.analytics-tab-stub__desc {
    font-size: 0.88rem;
    color: var(--color-text, #374151);
    max-width: 620px;
    margin: 0 auto 12px auto;
    line-height: 1.5;
}
.analytics-tab-stub__hint {
    font-size: 0.78rem;
    color: var(--color-text-muted, #6b7280);
    max-width: 620px;
    margin: 0 auto;
}
.analytics-tab-stub__hint code {
    background: var(--color-bg, #f3f4f6);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.75rem;
}

/* ── Mini-table (топ-10 в Profit, разбивки в Returns) ──────────────────── */
.analytics-mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.analytics-mini-table thead th {
    text-align: left;
    padding: 6px 8px;
    color: var(--color-text-muted, #6b7280);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.analytics-mini-table tbody td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-border-soft, #f3f4f6);
}
.analytics-mini-table tbody tr:hover {
    background: var(--color-hover, rgba(0, 0, 0, .03));
}
.analytics-mini-table__caption {
    font-size: 0.72rem;
    color: var(--color-text-muted, #6b7280);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.analytics-mini-table__empty {
    color: var(--color-text-muted, #9ca3af);
    text-align: center;
    padding: 14px;
}

.analytics-two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 900px) {
    .analytics-two-cols {
        grid-template-columns: 1fr;
    }
}

/* ── ABC × XYZ матрица ────────────────────────────────────────────────── */
.abc-xyz-matrix {
    border-collapse: collapse;
    margin-top: 6px;
}
.abc-xyz-matrix thead th,
.abc-xyz-matrix tbody th {
    padding: 8px 14px;
    text-align: center;
    font-weight: 600;
    color: var(--color-text-muted, #6b7280);
    font-size: 0.85rem;
}
.abc-xyz-matrix__cell {
    width: 120px;
    height: 70px;
    text-align: center;
    border: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-bg, #fff);
    transition: background-color .12s ease;
}
.abc-xyz-matrix__cell:hover {
    background: var(--color-hover, rgba(0, 0, 0, .03));
    cursor: pointer;
}
.abc-xyz-matrix__cell--gold {
    background: rgba(45, 138, 71, .08);
    border-color: var(--color-success, #2D8A47);
}
.abc-xyz-matrix__cell--warn {
    background: rgba(217, 119, 6, .06);
}
.abc-xyz-matrix__cell--muted {
    background: var(--color-bg-muted, #f9fafb);
    color: var(--color-text-muted, #9ca3af);
}
.abc-xyz-matrix__count {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text, #1f2937);
}
.abc-xyz-matrix__cell--muted .abc-xyz-matrix__count {
    color: var(--color-text-muted, #9ca3af);
}
.abc-xyz-matrix__rev {
    font-size: 0.72rem;
    color: var(--color-text-muted, #6b7280);
    margin-top: 2px;
}
.abc-xyz-matrix__legend {
    margin-top: 10px;
    font-size: 0.78rem;
    color: var(--color-text-muted, #6b7280);
}

/* ── Воронка трафика (5 ступеней) ──────────────────────────────────────── */
.funnel {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 0;
}
.funnel-row {
    display: grid;
    grid-template-columns: 110px 1fr 70px;
    gap: 10px;
    align-items: center;
}
.funnel-row__label {
    font-size: 0.82rem;
    color: var(--color-text, #1f2937);
    font-weight: 500;
}
.funnel-row__bar-wrap {
    background: var(--color-bg-muted, #f3f4f6);
    border-radius: 4px;
    height: 28px;
    display: flex;
    align-items: center;
}
.funnel-row__bar {
    background: linear-gradient(90deg, var(--color-primary, #0B1E35) 0%, #1d3a64 100%);
    height: 100%;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 10px;
    min-width: 30px;
    transition: width .25s ease;
}
.funnel-row__value {
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}
.funnel-row__rate {
    font-size: 0.78rem;
    color: var(--color-text-muted, #6b7280);
    text-align: right;
    font-weight: 500;
}

/* ── Статус оборачиваемости (chip) ────────────────────────────────────── */
.turnover-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}
.turnover-status--low {
    background: rgba(217, 119, 6, .12);
    color: var(--color-warning, #D97706);
}
.turnover-status--optimal {
    background: rgba(45, 138, 71, .12);
    color: var(--color-success, #2D8A47);
}
.turnover-status--ok {
    background: var(--color-bg-muted, #f3f4f6);
    color: var(--color-text-muted, #6b7280);
}
.turnover-status--dead {
    background: rgba(185, 28, 28, .10);
    color: var(--color-error, #B91C1C);
}

/* ── Адаптив: мобильно — фильтры в столбик ──────────────────────────────── */
@media (max-width: 900px) {
    .analytics-filters {
        gap: 10px 14px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Settings — блок Тариф: дата окончания + кнопки «Продлить» / «Сменить»
   ═══════════════════════════════════════════════════════════════════════════ */

.tariff-readonly-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--color-border, #e7e7ec);
}

.tariff-readonly-enddate {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.tariff-readonly-enddate-label {
    color: var(--color-text-secondary, #6b7280);
}

.tariff-readonly-enddate-value {
    font-weight: 600;
    color: var(--color-text, #111827);
}

.tariff-enddate-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
}
.tariff-enddate-badge--ok      { background: #dcfce7; color: #166534; }
.tariff-enddate-badge--warn    { background: #fef3c7; color: #92400e; }
.tariff-enddate-badge--expired { background: #fee2e2; color: #991b1b; }

.tariff-readonly-actions {
    display: inline-flex;
    gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ChangeTariffDialog
   ═══════════════════════════════════════════════════════════════════════════ */

.change-tariff-dialog__hint {
    margin: 0 0 16px;
    padding: 10px 14px;
    background: var(--color-bg-soft, #f5f5f7);
    border-radius: 8px;
    font-size: 13px;
    color: var(--color-text-secondary, #6b7280);
}

.change-tariff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.change-tariff-card {
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: white;
    border: 1px solid var(--color-border, #e7e7ec);
    border-radius: 10px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.change-tariff-card:hover {
    border-color: var(--color-accent, #2563eb);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.change-tariff-card--current {
    border-color: var(--color-accent, #2563eb);
    background: linear-gradient(180deg, #eff6ff 0%, white 40%);
}

.change-tariff-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.change-tariff-card__name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.change-tariff-card__badge {
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--color-accent, #2563eb);
    color: white;
    font-size: 11px;
    font-weight: 500;
}

.change-tariff-card__features {
    flex: 1;
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    font-size: 13px;
}
.change-tariff-card__features li {
    padding: 3px 0;
    border-bottom: 1px dashed var(--color-border-soft, #f0f0f3);
    display: flex;
    justify-content: space-between;
}
.change-tariff-card__features li:last-child { border-bottom: none; }

.change-tariff-card__footer {
    display: flex;
    justify-content: flex-start;
}

.dialog-footer.dialog-footer--left {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    padding: 16px 0 0;
    border-top: 1px solid var(--color-border, #e7e7ec);
    margin-top: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   E8-v2: StorageSee — вкладка «История резервов» (стилевые чипы операций)
   ═══════════════════════════════════════════════════════════════════════════ */

.reserve-op {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    text-transform: lowercase;
    font-family: ui-monospace, monospace;
}
.reserve-op--create      { background: #dbeafe; color: #1e40af; }
.reserve-op--consume     { background: #dcfce7; color: #166534; }
.reserve-op--cancel      { background: #fef3c7; color: #92400e; }
.reserve-op--cancel_noop { background: #f3e8ff; color: #6b21a8; }
.reserve-op--expire      { background: #f3f4f6; color: #4b5563; }
.reserve-op--release     { background: #ccfbf1; color: #115e59; }
.reserve-op--delete      { background: #fee2e2; color: #991b1b; }