/* ═══════════════════════════════════════════════════════════
   Наш склад — Система управления складом
   Цветовая палитра: белый + графит
   ═══════════════════════════════════════════════════════════ */

:root {
    --white: #ffffff;
    --bg: #f5f6f8;
    --graphite-50: #f8f8f9;
    --graphite-100: #ededf0;
    --graphite-200: #d5d5db;
    --graphite-300: #a0a0ab;
    --graphite-400: #6e6e7a;
    --graphite-500: #51515c;
    --graphite-600: #3e3e47;
    --graphite-700: #2c2c34;
    --graphite-800: #1c1c23;
    --graphite-900: #111116;

    --accent: #3e3e47;
    --accent-hover: #2c2c34;
    --danger: #dc2626;
    --danger-hover: #b91c1c;
    --danger-bg: #fef2f2;
    --success: #16a34a;
    --success-bg: #f0fdf4;

    --radius: 12px;
    --radius-sm: 8px;
    --radius-xs: 6px;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.03);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
    --shadow: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);

    --sidebar-width: 264px;
    --sidebar-collapsed: 64px;
    --sidebar-duration: 0.28s;
    --sidebar-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --topbar-height: 64px;

    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { font-size: 14px; }

body {
    font-family: var(--font);
    color: var(--graphite-800);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.55;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

a { color: inherit; text-decoration: none; }

/* ═══ AUTH PAGES ═════════════════════════════════════════════ */

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
}

.auth-container {
    width: 100%;
    max-width: 420px;
    padding: 20px;
    text-align: center;
}

.auth-card {
    background: var(--white);
    border-radius: 20px;
    padding: 48px 40px 40px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--graphite-100);
}

.auth-logo {
    margin-bottom: 32px;
}

.logo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--graphite-800);
    color: var(--white);
    border-radius: 12px;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.5px;
}

.logo-icon.large {
    width: 56px;
    height: 56px;
    font-size: 26px;
    border-radius: 16px;
    margin-bottom: 16px;
}

/* Иконка-логотип: только иконка, без фона */
.logo-icon.logo-icon-svg {
    background: transparent;
    padding: 8px;
    color: var(--graphite-800);
}
.logo .logo-icon.logo-icon-svg {
    background: transparent;
    color: inherit;
}
.logo-icon.logo-icon-svg.large {
    padding: 10px;
    margin-bottom: 16px;
    color: var(--graphite-800);
}
.logo-icon.logo-icon-svg svg {
    width: 100%;
    height: 100%;
    display: block;
}

.auth-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--graphite-900);
    margin-bottom: 6px;
    letter-spacing: -0.5px;
}

.auth-subtitle {
    color: var(--graphite-400);
    font-size: 14px;
    line-height: 1.6;
}

.auth-form {
    text-align: left;
}

.auth-back {
    margin-top: 20px;
}

.link-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--graphite-400);
    font-size: 13px;
    transition: color var(--transition);
}

.link-back:hover {
    color: var(--graphite-700);
}

.auth-footer {
    margin-top: 24px;
    color: var(--graphite-300);
    font-size: 12px;
}

/* Code inputs */
.code-inputs {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 24px;
}

.code-input {
    width: 48px;
    height: 56px;
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    font-family: var(--font);
    border: 1.5px solid var(--graphite-200);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--graphite-800);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.code-input:focus {
    border-color: var(--graphite-500);
    box-shadow: 0 0 0 3px rgba(63,63,70,0.08);
}

/* ═══ LAYOUT ════════════════════════════════════════════════ */

.app {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--graphite-900);
    color: var(--graphite-300);
    display: flex;
    flex-direction: column;
    z-index: 100;
    overflow: hidden;
    transition:
        width var(--sidebar-duration) var(--sidebar-ease),
        box-shadow var(--sidebar-duration) var(--sidebar-ease);
}

.sidebar-header {
    padding: 15px 12px;
    flex-shrink: 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--white);
    white-space: nowrap;
    min-width: 0;
    transition: justify-content var(--sidebar-duration) var(--sidebar-ease);
}

.logo .logo-icon {
    background: var(--white);
    color: var(--graphite-900);
    flex-shrink: 0;
}

.logo-group {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    max-width: 220px;
    overflow: hidden;
    opacity: 1;
    transition:
        opacity 0.2s var(--sidebar-ease),
        max-width var(--sidebar-duration) var(--sidebar-ease),
        visibility 0s linear 0s;
}

.logo-text {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.logo-desc {
    font-size: 11px;
    color: var(--graphite-400);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.35;
    white-space: normal;
}

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

.sidebar-nav::-webkit-scrollbar { width: 0; }

.nav-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--graphite-300);
    font-size: 14px;
    font-weight: 400;
    transition:
        background-color 0.18s var(--sidebar-ease),
        color 0.18s var(--sidebar-ease),
        justify-content var(--sidebar-duration) var(--sidebar-ease),
        padding 0.2s var(--sidebar-ease),
        gap 0.2s var(--sidebar-ease),
        width var(--sidebar-duration) var(--sidebar-ease),
        margin 0.2s var(--sidebar-ease);
    white-space: nowrap;
    flex-shrink: 0;
    overflow: hidden;
}

.nav-item span {
    max-width: 200px;
    overflow: hidden;
    opacity: 1;
    flex: 1 1 auto;
    min-width: 0;
    transition:
        opacity 0.18s var(--sidebar-ease),
        max-width var(--sidebar-duration) var(--sidebar-ease),
        visibility 0s linear 0s;
}

.nav-item svg {
    flex-shrink: 0;
}

/* Подсветка: неактивный пункт / активный / активный + hover — без «провала» яркости */
.nav-item:not(.active):hover {
    background: rgba(255,255,255,0.07);
    color: var(--white);
}

.nav-item.active {
    background: rgba(255,255,255,0.12);
    color: var(--white);
    font-weight: 500;
}

.nav-item.active:hover {
    background: rgba(255,255,255,0.16);
    color: var(--white);
}

.sidebar-footer {
    padding: 12px 12px 16px;
    border-top: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
    overflow: hidden;
}

.user-block {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    transition: justify-content var(--sidebar-duration) var(--sidebar-ease);
}

.user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--graphite-600);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    flex-shrink: 0;
}

.user-info {
    overflow: hidden;
    opacity: 1;
    max-width: 200px;
    transition:
        opacity 0.2s var(--sidebar-ease),
        max-width var(--sidebar-duration) var(--sidebar-ease),
        visibility 0s linear 0s;
}

.user-name {
    font-size: 13px;
    color: var(--graphite-100);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-email {
    font-size: 11px;
    color: var(--graphite-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.logout-link {
    color: var(--graphite-400) !important;
    font-size: 13px;
    white-space: nowrap;
    transition:
        background-color 0.18s var(--sidebar-ease),
        color 0.18s var(--sidebar-ease),
        justify-content var(--sidebar-duration) var(--sidebar-ease);
}

.logout-link:not(.active):hover {
    color: var(--white) !important;
    background: rgba(255,255,255,0.06);
}

.logout-link span {
    transition:
        opacity 0.18s var(--sidebar-ease),
        max-width var(--sidebar-duration) var(--sidebar-ease),
        visibility 0s linear 0s;
}

/* ═══ MAIN CONTENT ══════════════════════════════════════════ */

.main-content {
    margin-left: var(--sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left var(--sidebar-duration) var(--sidebar-ease);
}

/* ── Узкий сайдбар (иконки): десктоп с точным hover; контент расширяется ── */
/* Без (pointer: fine): часть окружений отдаёт coarse — тогда сайдбар оставался полным */
@media (min-width: 769px) and (hover: hover) {
    .sidebar {
        width: var(--sidebar-collapsed);
        box-shadow: none;
    }

    .sidebar:hover {
        width: var(--sidebar-width);
        box-shadow: 6px 0 28px rgba(0, 0, 0, 0.2);
    }

    .main-content {
        margin-left: var(--sidebar-collapsed);
    }

    .sidebar:hover ~ .main-content {
        margin-left: var(--sidebar-width);
    }

    .logo {
        justify-content: center;
        gap: 0;
        width: fit-content;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .sidebar:hover .logo {
        justify-content: flex-start;
        gap: 12px;
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }

    .logo-group {
        max-width: 0;
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition:
            opacity 0.14s var(--sidebar-ease),
            max-width var(--sidebar-duration) var(--sidebar-ease),
            visibility 0s linear var(--sidebar-duration);
    }

    .sidebar:hover .logo-group {
        max-width: 220px;
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transition:
            opacity 0.22s var(--sidebar-ease) 0.04s,
            max-width var(--sidebar-duration) var(--sidebar-ease),
            visibility 0s linear 0s;
    }

    .sidebar-header {
        padding-left: 10px;
        padding-right: 10px;
    }

    .sidebar:hover .sidebar-header {
        padding-left: 12px;
        padding-right: 12px;
    }

    .sidebar-nav {
        padding-left: 8px;
        padding-right: 8px;
    }

    .sidebar:hover .sidebar-nav {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Свёрнуто: без gap до скрытого span — иначе иконка уезжает влево внутри широкой подсветки */
    .nav-item {
        justify-content: center;
        gap: 0;
        padding-left: 11px;
        padding-right: 11px;
        width: fit-content;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    .sidebar:hover .nav-item {
        justify-content: flex-start;
        gap: 12px;
        padding-left: 12px;
        padding-right: 12px;
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }

    .nav-item span {
        max-width: 0;
        min-width: 0;
        opacity: 0;
        flex: 0 0 0;
        width: 0;
        overflow: hidden;
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity 0.14s var(--sidebar-ease),
            max-width var(--sidebar-duration) var(--sidebar-ease),
            visibility 0s linear var(--sidebar-duration);
    }

    .sidebar:hover .nav-item span {
        max-width: 200px;
        opacity: 1;
        flex: 1 1 auto;
        visibility: visible;
        pointer-events: auto;
        transition:
            opacity 0.2s var(--sidebar-ease) 0.05s,
            max-width var(--sidebar-duration) var(--sidebar-ease),
            visibility 0s linear 0s;
    }

    .user-block {
        justify-content: center;
        gap: 0;
        padding-left: 8px;
        padding-right: 8px;
        width: fit-content;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    .sidebar:hover .user-block {
        justify-content: flex-start;
        gap: 10px;
        padding-left: 12px;
        padding-right: 12px;
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }

    .user-info {
        max-width: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity 0.14s var(--sidebar-ease),
            max-width var(--sidebar-duration) var(--sidebar-ease),
            visibility 0s linear var(--sidebar-duration);
    }

    .sidebar:hover .user-info {
        max-width: 200px;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition:
            opacity 0.2s var(--sidebar-ease) 0.05s,
            max-width var(--sidebar-duration) var(--sidebar-ease),
            visibility 0s linear 0s;
    }

    .logout-link {
        justify-content: center;
        gap: 0;
        padding-left: 11px;
        padding-right: 11px;
        width: fit-content;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    .sidebar:hover .logout-link {
        justify-content: flex-start;
        gap: 12px;
        padding-left: 12px;
        padding-right: 12px;
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }

    .logout-link span {
        max-width: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity 0.14s var(--sidebar-ease),
            max-width var(--sidebar-duration) var(--sidebar-ease),
            visibility 0s linear var(--sidebar-duration);
    }

    .sidebar:hover .logout-link span {
        max-width: 140px;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition:
            opacity 0.2s var(--sidebar-ease) 0.05s,
            max-width var(--sidebar-duration) var(--sidebar-ease),
            visibility 0s linear 0s;
    }

    /* Свёрнуто: nav-group-toggle ведёт себя как nav-item */
    .nav-group-toggle {
        justify-content: center;
        gap: 0;
        padding-left: 11px;
        padding-right: 11px;
        width: fit-content;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    .sidebar:hover .nav-group-toggle {
        justify-content: flex-start;
        gap: 12px;
        padding-left: 12px;
        padding-right: 12px;
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }

    .nav-group-toggle span {
        max-width: 0;
        min-width: 0;
        opacity: 0;
        flex: 0 0 0;
        width: 0;
        overflow: hidden;
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity 0.14s var(--sidebar-ease),
            max-width var(--sidebar-duration) var(--sidebar-ease),
            visibility 0s linear var(--sidebar-duration);
    }

    .sidebar:hover .nav-group-toggle span {
        max-width: 200px;
        opacity: 1;
        flex: 1 1 auto;
        visibility: visible;
        pointer-events: auto;
        transition:
            opacity 0.2s var(--sidebar-ease) 0.05s,
            max-width var(--sidebar-duration) var(--sidebar-ease),
            visibility 0s linear 0s;
    }

    /* Chevron и подменю скрыты пока сайдбар свёрнут */
    .nav-group-chevron {
        display: none;
    }

    .sidebar:hover .nav-group-chevron {
        display: block;
    }

    .nav-group.open .nav-subitems {
        display: none;
    }

    .sidebar:hover .nav-group.open .nav-subitems {
        display: flex;
    }
}

/* Только отключаем анимации; узкий сайдбар сохраняем (иначе «ничего не меняется» при включённом reduce motion) */
@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .main-content,
    .logo-group,
    .nav-item span,
    .user-info,
    .logout-link span,
    .logo,
    .nav-item,
    .user-block,
    .logout-link {
        transition: none !important;
    }
}

.top-bar {
    height: var(--topbar-height);
    background: var(--white);
    border-bottom: 1px solid var(--graphite-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    flex-shrink: 0;
}

.top-bar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.page-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--graphite-800);
    letter-spacing: -0.3px;
}

.content {
    padding: 28px 32px;
    flex: 1;
}

/* ═══ CARDS ═════════════════════════════════════════════════ */

.card {
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--graphite-100);
    box-shadow: var(--shadow-sm);
}

.card-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--graphite-100);
}

.card-body {
    padding: 32px;
}

/* ═══ TABLE ═════════════════════════════════════════════════ */

.table-wrap {
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th {
    text-align: left;
    padding: 10px 24px;
    font-size: 11px;
    font-weight: 600;
    color: var(--graphite-400);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    background: var(--graphite-50);
    border-bottom: 1px solid var(--graphite-100);
}

.table th:first-child { border-radius: 0; }
.table th:last-child { border-radius: 0; }

.table td {
    padding: 14px 24px;
    font-size: 14px;
    border-bottom: 1px solid var(--graphite-100);
    color: var(--graphite-700);
}

.table tbody tr {
    transition: background var(--transition);
}

.table tbody tr:hover {
    background: var(--graphite-50);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

.table .actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

/* ═══ BUTTONS ═══════════════════════════════════════════════ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font);
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: all var(--transition);
    line-height: 1;
    white-space: nowrap;
}

.btn-primary {
    background: var(--graphite-800);
    color: var(--white);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.btn-primary:hover {
    background: var(--graphite-700);
    box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}

.btn-secondary {
    background: var(--white);
    color: var(--graphite-700);
    border: 1px solid var(--graphite-200);
}

.btn-secondary:hover {
    background: var(--graphite-50);
    border-color: var(--graphite-300);
}

.btn-danger {
    background: var(--danger);
    color: var(--white);
    box-shadow: 0 1px 2px rgba(220,38,38,0.2);
}

.btn-danger:hover {
    background: var(--danger-hover);
    box-shadow: 0 2px 4px rgba(220,38,38,0.25);
}

.btn-block {
    width: 100%;
    padding: 12px 20px;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    color: var(--graphite-400);
    transition: all var(--transition);
}

.btn-icon:hover {
    background: var(--graphite-100);
    color: var(--graphite-700);
}

/* ═══ FORMS ═════════════════════════════════════════════════ */

.form-group {
    margin-bottom: 22px;
}

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--graphite-600);
    margin-bottom: 8px;
}

.form-input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="url"],
textarea {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    font-family: var(--font);
    border: 1.5px solid var(--graphite-200);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--graphite-800);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
textarea:focus {
    border-color: var(--graphite-500);
    box-shadow: 0 0 0 3px rgba(63,63,70,0.07);
}

.form-input::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--graphite-300);
}

textarea.form-input,
textarea {
    min-height: 100px;
    resize: vertical;
}

/* Custom select styling */
select,
select.form-input {
    width: 100%;
    padding: 10px 40px 10px 14px;
    font-size: 14px;
    font-family: var(--font);
    border: 1.5px solid var(--graphite-200);
    border-radius: var(--radius-sm);
    background-color: var(--white);
    color: var(--graphite-800);
    outline: none;
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%236e6e7a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
}

select:focus,
select.form-input:focus {
    border-color: var(--graphite-500);
    box-shadow: 0 0 0 3px rgba(63,63,70,0.07);
}

select:hover,
select.form-input:hover {
    border-color: var(--graphite-300);
}

select option {
    padding: 8px;
}

.form-error {
    margin-top: 6px;
    font-size: 12px;
    color: var(--danger);
    display: flex;
    align-items: center;
    gap: 4px;
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--graphite-100);
}

.user-form-actions,
.user-detail-actions {
    justify-content: flex-end;
    align-items: center;
}

.user-detail-actions form {
    margin: 0;
}

.user-form-btn {
    min-height: 44px;
    min-width: 148px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
}

/* ═══ SEARCH ════════════════════════════════════════════════ */

.search-form { width: 100%; }

.search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--graphite-300);
}

.search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    font-family: var(--font);
    background: transparent;
    color: var(--graphite-700);
}

.search-input::placeholder {
    color: var(--graphite-300);
}

/* ═══ DETAIL ════════════════════════════════════════════════ */

.detail-row {
    display: flex;
    padding: 16px 0;
    border-bottom: 1px solid var(--graphite-100);
    align-items: baseline;
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    width: 200px;
    flex-shrink: 0;
    font-size: 13px;
    color: var(--graphite-400);
    font-weight: 500;
}

.detail-value {
    font-size: 14px;
    color: var(--graphite-800);
}

/* ═══ BADGES ════════════════════════════════════════════════ */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 20px;
}

.badge-success {
    background: var(--success-bg);
    color: var(--success);
}

.badge-muted {
    background: var(--graphite-100);
    color: var(--graphite-400);
}

.badge-danger {
    background: var(--danger-bg);
    color: var(--danger);
}

.badge-warning {
    background: #fffbeb;
    color: #d97706;
}

/* ═══ ALERTS ════════════════════════════════════════════════ */

.messages-container {
    padding: 0 32px;
    padding-top: 16px;
}

.auth-card .messages-container {
    padding: 0;
    padding-bottom: 8px;
}

.alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    margin-bottom: 8px;
    font-weight: 450;
}

.alert-error {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid #fecaca;
}

.alert-success {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid #bbf7d0;
}

.alert-close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    line-height: 1;
    transition: opacity var(--transition);
}

.alert-close:hover {
    opacity: 1;
}

/* ═══ EMPTY STATE ═══════════════════════════════════════════ */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.empty-state.small {
    padding: 48px 20px;
}

.empty-icon {
    color: var(--graphite-200);
    margin-bottom: 20px;
}

.empty-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--graphite-700);
    margin-bottom: 8px;
    letter-spacing: -0.3px;
}

.empty-text {
    color: var(--graphite-400);
    font-size: 14px;
}

/* ═══ MOBILE NAV ════════════════════════════════════════════ */

.mobile-nav-toggle,
.mobile-nav-overlay {
    display: none;
}

.mobile-nav-toggle {
    position: relative;
    z-index: 2;
    height: 44px;
    width: 44px;
    border: 1px solid var(--graphite-200);
    background: var(--white);
    color: var(--graphite-800);
    border-radius: 12px;
    padding: 0;
    box-shadow: var(--shadow-sm);
    align-items: center;
    justify-content: center;
    font-family: var(--font);
    cursor: pointer;
    flex-shrink: 0;
}

.mobile-nav-toggle-icon {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
}

.mobile-nav-toggle-icon span {
    width: 14px;
    height: 1.5px;
    border-radius: 2px;
    background: var(--graphite-700);
    transition: transform var(--transition), opacity var(--transition);
}

.mobile-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 190;
    background: rgba(0,0,0,0.36);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
}

body.mobile-nav-open {
    overflow: hidden;
}

body.mobile-nav-open .mobile-nav-overlay {
    opacity: 1;
    pointer-events: auto;
}

body.mobile-nav-open .mobile-nav-toggle-icon span:nth-child(1) {
    transform: translateY(4.5px) rotate(45deg);
}

body.mobile-nav-open .mobile-nav-toggle-icon span:nth-child(2) {
    opacity: 0;
}

body.mobile-nav-open .mobile-nav-toggle-icon span:nth-child(3) {
    transform: translateY(-4.5px) rotate(-45deg);
}

/* ═══ USERS CARDS ═══════════════════════════════════════════ */

.users-cards {
    display: none;
}

.user-card {
    background: var(--white);
    border: 1px solid var(--graphite-100);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.user-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-card-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--graphite-700);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    flex-shrink: 0;
}

.user-card-title h3 {
    font-size: 14px;
    color: var(--graphite-800);
    line-height: 1.3;
}

.user-card-title p {
    font-size: 12px;
    color: var(--graphite-400);
    margin-top: 2px;
}

.user-card-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.user-card-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-card-field > span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--graphite-400);
}

.user-card-field a,
.user-card-field .muted {
    font-size: 13px;
    color: var(--graphite-700);
    word-break: break-word;
}

.user-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.user-action-btn {
    min-height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--graphite-200);
    color: var(--graphite-700);
    background: var(--white);
    transition: all var(--transition);
}

.user-action-btn svg {
    flex-shrink: 0;
}

.user-action-view:hover {
    border-color: var(--graphite-500);
    color: var(--graphite-900);
    background: var(--graphite-50);
}

.user-action-edit {
    background: var(--graphite-800);
    color: var(--white);
    border-color: var(--graphite-800);
}

.user-action-edit:hover {
    background: var(--graphite-700);
    border-color: var(--graphite-700);
}

/* ═══ CATALOG ADAPTIVE ═════════════════════════════════════ */

.catalog-layout {
    display: flex;
    gap: 16px;
    min-height: calc(100vh - 130px);
    align-items: flex-start;
}

.catalog-sections {
    width: 200px;
    min-width: 200px;
    flex-shrink: 0;
}

.catalog-main {
    flex: 1;
    min-width: 0;
}

.catalog-sections-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.catalog-section-btn {
    min-height: 40px;
}

#section-groups .tree-node {
    min-height: 46px;
}

#section-groups .node-name {
    font-size: 15px;
}

#section-units .group,
#section-types .group,
#section-warehouses .group,
#section-suppliers .group {
    display: flex;
    width: calc(100% - 16px);
    box-sizing: border-box;
    border-radius: 10px;
    margin: 6px 8px;
    border: 1px solid var(--graphite-100);
}

#section-units .group .btn-icon,
#section-types .group .btn-icon,
#section-warehouses .group .btn-icon,
#section-suppliers .group .btn-icon {
    opacity: 1;
}

/* ═══ RESPONSIVE ════════════════════════════════════════════ */

@media (max-width: 768px) {
    .mobile-nav-toggle,
    .mobile-nav-overlay {
        display: flex;
    }

    .mobile-nav-overlay {
        display: block;
    }

    .sidebar {
        width: min(86vw, 296px);
        transform: translateX(-100%);
        transition: transform 0.24s var(--sidebar-ease);
        box-shadow: 8px 0 30px rgba(0,0,0,0.24);
        z-index: 200;
    }

    body.mobile-nav-open .sidebar {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
    }

    .top-bar {
        min-height: 64px;
        height: auto;
        padding: 10px 12px;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
    }

    .page-title {
        font-size: 17px;
        line-height: 1.25;
        margin: 0;
        padding-left: 2px;
    }

    .top-bar-actions {
        margin-left: 0;
        justify-self: end;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        max-width: 100%;
    }

    .content {
        padding: 20px 16px;
    }

    .catalog-layout {
        flex-direction: column;
        gap: 10px;
        min-height: 0;
        /* flex-start с десктопа оставляет cross-size по контенту; в колонке main без width:100% сужался */
        align-items: stretch;
    }

    .catalog-sections {
        width: 100%;
        min-width: 0;
    }

    .catalog-main {
        width: 100%;
        max-width: 100%;
        align-self: stretch;
    }

    .catalog-main > .ref-section {
        width: 100%;
        max-width: 100%;
        align-self: stretch;
    }

    .catalog-sections-nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        padding: 8px;
    }

    .catalog-section-btn {
        min-height: 42px;
        border-radius: 10px;
        font-size: 13px;
        line-height: 1.25;
        white-space: normal;
    }

    .catalog-main .ref-section {
        border-radius: 14px;
    }

    #section-groups .tree-node {
        min-height: 50px;
        padding-right: 12px;
    }

    #section-groups .node-name {
        font-size: 14px;
    }

    #section-units .group,
    #section-types .group,
    #section-warehouses .group,
    #section-suppliers .group {
        display: flex;
        width: calc(100% - 16px);
        max-width: none;
        margin: 8px;
        border-radius: 12px;
        padding: 12px 12px;
    }

    #section-units .group .btn-icon,
    #section-types .group .btn-icon,
    #section-warehouses .group .btn-icon,
    #section-suppliers .group .btn-icon {
        width: 38px;
        height: 38px;
        background: var(--graphite-50);
    }

    /*
     * Кнопки в шапке: иконка + подпись. На мобилке подпись скрыта (font-size:0),
     * но gap у .btn оставлял «воздух» справа от SVG — плюс выглядел смещённым.
     * SVG выводим из потока и центрируем в квадрате.
     */
    .top-bar-actions .btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        padding: 0;
        gap: 0;
        border-radius: 10px;
        font-size: 0;
        line-height: 0;
        letter-spacing: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        flex-shrink: 0;
    }

    .top-bar-actions .btn svg {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 18px;
        height: 18px;
        margin: 0;
        display: block;
        flex-shrink: 0;
    }

    .table th, .table td {
        padding: 10px 12px;
    }

    .auth-card {
        padding: 32px 24px 28px;
    }

    .code-input {
        width: 42px;
        height: 48px;
        font-size: 18px;
    }

    .card-body {
        padding: 20px;
    }

    .detail-row {
        flex-direction: column;
        gap: 4px;
    }

    .detail-label {
        width: auto;
    }

    .user-form-actions,
    .user-detail-actions {
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 10px;
    }

    .user-form-btn {
        min-height: 46px;
        min-width: 140px;
        padding: 12px 18px;
        font-size: 15px;
    }

    .users-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 12px;
    }

    .table-wrap {
        display: none;
    }

    /* Скрыть шеврон и label в кнопке шапки — только иконка + */
    .top-bar-actions .doc-create-wrap .df-chevron { display: none !important; }
    .top-bar-actions .doc-create-wrap .doc-create-label { display: none !important; }

    /* Фильтр дропдауны: открываться влево от правого края кнопки — не выходит за экран */
    .doc-fms-dd { left: auto !important; right: 0 !important; }
}

@media (min-width: 769px) and (max-width: 1100px) {
    .users-cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding: 14px;
    }

    .table-wrap {
        display: none;
    }

    .catalog-layout {
        gap: 12px;
    }

    .catalog-sections {
        width: 210px;
        min-width: 210px;
    }

    .catalog-section-btn {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .user-action-btn {
        min-height: 48px;
        font-size: 14px;
    }

    .user-form-actions,
    .user-detail-actions {
        flex-direction: row;
    }

    .user-form-btn {
        flex: 1;
        min-width: 0;
    }
}

@media (min-width: 1101px) {
    .users-cards {
        display: none;
    }
}

/* ═══ TREE ══════════════════════════════════════════════════ */

.tree-page { width: 100%; }

.tree-card {
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--graphite-100);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.tree-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--graphite-100);
    background: var(--graphite-50);
}

.tree-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--graphite-400);
}

.save-status {
    font-size: 12px;
    font-weight: 500;
    transition: color 0.2s;
}
.save-status.saving { color: var(--graphite-400); }
.save-status.saved { color: var(--success); }

.tree-wrap { padding: 8px 0; }

/* Сброс стандартных стилей списка */
.tree-root,
.tree-children {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tree-children {
    overflow: hidden;
    transition: none;
}
.tree-children.collapsed { display: none; }

/* Одна строка дерева */
.tree-item { position: relative; }

.tree-node {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 16px 0 calc(16px + var(--depth, 0) * 28px);
    height: 44px;
    transition: background var(--transition);
    cursor: default;
    border-bottom: 1px solid var(--graphite-50);
}

.tree-item:last-child > .tree-node {
    border-bottom: none;
}

.tree-node:hover {
    background: var(--graphite-50);
}

/* Drag handle */
.drag-handle {
    color: var(--graphite-200);
    cursor: grab;
    border-radius: var(--radius-xs);
    padding: 3px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: color var(--transition);
    user-select: none;
}
.drag-handle:hover { color: var(--graphite-400); }
.drag-handle:active { cursor: grabbing; }

/* Кнопка expand/collapse */
.toggle-btn {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--graphite-400);
    border-radius: var(--radius-xs);
    flex-shrink: 0;
    transition: background var(--transition), color var(--transition);
    padding: 0;
}
.toggle-btn:hover {
    background: var(--graphite-100);
    color: var(--graphite-700);
}
.toggle-btn svg {
    transition: transform 0.2s;
    transform: rotate(-90deg);
}
.toggle-btn.rotated svg {
    transform: rotate(0deg);
}

.toggle-placeholder { width: 24px; height: 24px; flex-shrink: 0; }

/* Иконка папки */
.node-icon {
    color: var(--graphite-300);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* Название */
.node-name {
    flex: 1;
    font-size: 14px;
    color: var(--graphite-800);
    font-weight: 450;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    cursor: default;
}

/* Количество дочерних */
.node-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--graphite-100);
    color: var(--graphite-400);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    flex-shrink: 0;
}

.node-children-count { display: none; }

/* Кнопки действий — скрыты, показываются при hover */
.node-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity var(--transition);
    flex-shrink: 0;
}

.tree-node:hover .node-actions { opacity: 1; }

.btn-icon-danger:hover {
    background: var(--danger-bg);
    color: var(--danger);
}

/* Drag-and-Drop ghostClass */
.tree-ghost { opacity: 0.35; background: var(--graphite-100) !important; }
.tree-chosen { background: var(--graphite-50); }

/* Форма */
.form-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--graphite-400);
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.form-breadcrumb a {
    color: var(--graphite-500);
    transition: color var(--transition);
}
.form-breadcrumb a:hover { color: var(--graphite-800); text-decoration: underline; }
.bc-sep { color: var(--graphite-300); }
.bc-current { color: var(--graphite-700); font-weight: 500; }

.form-hint {
    margin-top: 6px;
    font-size: 12px;
    color: var(--graphite-400);
}

/* ═══ DJANGO FORM WIDGET OVERRIDES ══════════════════════════ */

.user-form input[type="text"],
.user-form input[type="email"],
.user-form input[type="tel"],
.user-form input[type="password"],
.user-form input[type="number"],
.user-form input[type="url"],
.user-form textarea,
.user-form select {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    font-family: var(--font);
    border: 1.5px solid var(--graphite-200);
    border-radius: var(--radius-sm);
    background-color: var(--white);
    color: var(--graphite-800);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.user-form select {
    padding-right: 40px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%236e6e7a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
    cursor: pointer;
}

.user-form input:focus,
.user-form textarea:focus,
.user-form select:focus {
    border-color: var(--graphite-500);
    box-shadow: 0 0 0 3px rgba(63,63,70,0.07);
}

/* ═══ MODAL ═════════════════════════════════════════════════ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.modal-overlay.open {
    opacity: 1;
    visibility: visible;
}

.modal,
.modal-panel {
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.08);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(12px) scale(0.97);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-overlay.open .modal,
.modal-overlay.open .modal-panel {
    transform: translateY(0) scale(1);
}

.modal-sm {
    max-width: 420px;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px 0;
}

.modal-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--graphite-800);
    letter-spacing: -0.3px;
}

.modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    border: none;
    background: none;
    color: var(--graphite-400);
    cursor: pointer;
    transition: all var(--transition);
}

.modal-close:hover {
    background: var(--graphite-100);
    color: var(--graphite-700);
}

.modal-body {
    padding: 24px 28px;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px 24px;
    gap: 12px;
}

.modal-footer-left {
    display: flex;
    gap: 8px;
}

.modal-footer-right {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 13px;
}

/* ── Справочники: 3-column grid ──────────────────────────── */

.catalogs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start;
}

.catalog-panel {
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--graphite-100);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.catalog-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--graphite-100);
    background: var(--graphite-50);
}

.catalog-panel-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--graphite-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.panel-tree-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--graphite-400);
    padding: 8px 16px;
    border-bottom: 1px solid var(--graphite-100);
    background: var(--graphite-50);
}

.simple-item {
    display: flex;
    align-items: center;
    padding: 11px 16px;
    border-bottom: 1px solid var(--graphite-50);
    gap: 8px;
    transition: background var(--transition);
}

.simple-item:last-child {
    border-bottom: none;
}

.simple-item:hover {
    background: var(--graphite-50);
}

.simple-item-name {
    flex: 1;
    font-size: 14px;
    color: var(--graphite-800);
}

.simple-item-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--graphite-400);
    background: var(--graphite-100);
    padding: 2px 8px;
    border-radius: 12px;
    flex-shrink: 0;
}

.simple-item-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity var(--transition);
    flex-shrink: 0;
}

.simple-item:hover .simple-item-actions {
    opacity: 1;
}

.panel-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--graphite-300);
    font-size: 13px;
}

.panel-save-status {
    font-size: 12px;
    font-weight: 500;
    transition: color 0.2s;
    color: transparent;
}

.panel-save-status.saving { color: var(--graphite-400); }
.panel-save-status.saved  { color: var(--success, #22c55e); }

.modal-sm { max-width: 440px !important; }

/* ── Склад: layout (sidebar + main) ──────────────────────── */

.wh-layout {
    display: flex;
    gap: 16px;
    min-height: calc(100vh - 130px);
    align-items: flex-start;
}

/* ── Sidebar: группы ─────────────────────────────────────── */

.wh-sidebar {
    width: 280px;
    min-width: 280px;
    background: var(--white);
    border: 1px solid var(--graphite-100);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: width 0.25s ease, min-width 0.25s ease, opacity 0.25s ease, margin 0.25s ease;
    overflow: hidden;
    max-height: calc(100vh - 160px);
}

.wh-sidebar.hidden {
    width: 0;
    min-width: 0;
    border: none;
    box-shadow: none;
    opacity: 0;
    pointer-events: none;
    margin-right: -4px;
}

.wh-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--graphite-100);
    flex-shrink: 0;
}

.wh-sidebar-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--graphite-500);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.wh-sidebar-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.wh-sidebar-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.wh-sidebar-switch-ui {
    width: 34px;
    height: 18px;
    background: var(--graphite-300);
    border-radius: 999px;
    position: relative;
    transition: background .2s ease;
}

.wh-sidebar-switch-ui::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: 14px;
    height: 14px;
    background: var(--white);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,.18);
    transition: transform .2s ease;
}

.wh-sidebar-switch input:checked + .wh-sidebar-switch-ui {
    background: var(--graphite-700);
}

.wh-sidebar-switch input:checked + .wh-sidebar-switch-ui::after {
    transform: translateX(16px);
}

.wh-sidebar-switch-label {
    font-size: 12px;
    color: var(--graphite-600);
    font-weight: 600;
}

.wh-sidebar-toggle-btn {
    display: none;
}
.wh-sidebar-toggle-btn:hover {
    background: var(--graphite-50);
    border-color: var(--graphite-300);
}

.wh-sidebar-show {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-top: 2px;
    background: var(--white);
    border: 1px solid var(--graphite-200);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    color: var(--graphite-600);
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--transition);
}
.wh-sidebar-show:hover {
    background: var(--graphite-50);
    border-color: var(--graphite-300);
}
.wh-sidebar-show.visible {
    display: flex;
}

.wh-sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

/* Group items */
.wh-group-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--graphite-700);
    cursor: pointer;
    transition: background var(--transition);
    white-space: nowrap;
    user-select: none;
    position: relative;
    border-radius: 10px;
}
.wh-group-item:hover {
    background: var(--graphite-50);
}
.wh-group-item.selected {
    background: rgba(99,102,241,.1);
    color: var(--primary);
    font-weight: 500;
}

.wh-group-icon {
    color: var(--graphite-400);
    flex-shrink: 0;
}

.wh-group-root {
    padding: 9px 10px;
    font-weight: 600;
    font-size: 13px;
    color: var(--graphite-800);
    margin-bottom: 6px;
}

.wh-group-nogroup {
    margin-top: 8px;
    border: 1px dashed var(--graphite-200);
    background: #fafafa;
}

.wh-group-empty-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--graphite-300);
    flex-shrink: 0;
}

.wh-group-nogroup.selected .wh-group-empty-dot {
    background: var(--primary);
}

.wh-group-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--graphite-400);
    border-radius: 4px;
    padding: 0;
    flex-shrink: 0;
    transition: transform 0.2s, color var(--transition);
}
.wh-group-toggle:hover { color: var(--graphite-700); }
.wh-group-toggle svg {
    transition: transform 0.2s;
    transform: rotate(-90deg);
}
.wh-group-toggle.rotated svg {
    transform: rotate(0deg);
}

.wh-group-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wh-group-count {
    font-size: 11px;
    color: var(--graphite-400);
    background: var(--graphite-100);
    border-radius: 10px;
    padding: 2px 7px;
    flex-shrink: 0;
    font-weight: 600;
    min-width: 22px;
    text-align: center;
}

/* Кнопка видимости группы в каталоге */
.wh-group-vis-btn {
    flex-shrink: 0;
    display: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    color: var(--graphite-300);
    transition: background 0.15s, color 0.15s, opacity 0.15s;
    opacity: 0;
}
.wh-group-item:hover .wh-group-vis-btn {
    display: inline-flex;
    opacity: 1;
}
.wh-group-vis-btn:hover {
    background: var(--graphite-100);
    color: var(--graphite-600);
}
.wh-group-vis-btn.is-hidden {
    display: inline-flex;
    opacity: 1;
    color: #ef4444;
}
.wh-group-vis-btn.is-hidden:hover {
    background: #fee2e2;
    color: #dc2626;
}
/* Группа скрыта — приглушённый вид */
.wh-group-item.group-hidden > .wh-group-name {
    opacity: 0.45;
    text-decoration: line-through;
    text-decoration-color: var(--graphite-300);
}

.wh-group-children {
    transition: max-height 0.25s ease;
}
.wh-group-children.collapsed {
    display: none;
}

/* ── Main section ────────────────────────────────────────── */

.wh-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wh-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    background: var(--white);
    border: 1px solid var(--graphite-100);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    padding: 10px 12px;
}

.wh-search-wrap {
    position: relative;
    flex: 1;
    min-width: 220px;
    max-width: 420px;
}

.wh-search-icon {
    display: none;
}

.wh-search-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--graphite-200);
    border-radius: var(--radius);
    font-size: 13px;
    background: var(--graphite-50);
    color: var(--graphite-800);
    transition: border-color var(--transition), box-shadow var(--transition);
    box-sizing: border-box;
}

.wh-search-input::placeholder {
    color: var(--graphite-400);
}

.wh-search-input:focus {
    outline: none;
    background: var(--white);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}

.wh-status-toggle {
    display: inline-flex;
    border: 1px solid var(--graphite-200);
    border-radius: 10px;
    overflow: hidden;
    background: var(--graphite-50);
    flex-shrink: 0;
}

.wh-status-btn {
    border: none;
    background: transparent;
    color: var(--graphite-600);
    font-size: 12px;
    font-weight: 600;
    padding: 8px 12px;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
    white-space: nowrap;
}

.wh-status-btn + .wh-status-btn {
    border-left: 1px solid var(--graphite-200);
}

.wh-status-btn.active {
    background: var(--graphite-700);
    color: var(--white);
}

.wh-status-btn.active:hover,
.wh-status-btn.active:focus,
.wh-status-btn.active:active {
    color: var(--white);
    background: var(--graphite-700);
}

.wh-status-btn:hover {
    color: var(--graphite-800);
}

.wh-results-count {
    font-size: 13px;
    color: var(--graphite-500);
    white-space: nowrap;
    margin-left: auto;
}
.wh-results-count strong { color: var(--graphite-800); }

.wh-table-wrap {
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--graphite-100);
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
    overflow-y: visible;
    flex: 1;
    min-width: 0;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

.wh-table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    table-layout: auto;
    font-size: 12px;
}

.wh-table th {
    padding: 6px 10px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--graphite-500);
    background: var(--graphite-50);
    border-bottom: 1px solid var(--graphite-100);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

.wh-th-barcode { width: 44px; min-width: 44px; padding: 6px 8px !important; text-align: center; }
.wh-td-barcode { width: 44px; min-width: 44px; padding: 6px 8px !important; text-align: center; vertical-align: middle; }
.wh-barcode-btn .wh-barcode-icon-svg { width: 20px; height: 20px; display: block; }
.wh-th-photo { width: 52px; min-width: 52px; padding: 4px 6px !important; text-align: center; }
.wh-td-photo { width: 52px; min-width: 52px; padding: 4px 6px !important; text-align: center; vertical-align: middle; }
.wh-thumb-wrap { position: relative; width: 40px; height: 40px; margin: 0 auto; display: inline-block; }
.wh-row-thumb { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; border: 1px solid #e2e8f0; background: #f8fafc; cursor: pointer; display: block; margin: 0 auto; }
.wh-row-thumb-empty { width: 40px; height: 40px; border-radius: 6px; border: 1px dashed #e2e8f0; background: #f8fafc; display: block; margin: 0 auto; }
.wh-photo-badge {
    position: absolute;
    right: -5px;
    bottom: -5px;
    width: 15px;
    height: 15px;
    border-radius: 999px;
    background: #1f2937;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.wh-th-name { min-width: 140px; }

.wh-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--graphite-50);
    color: var(--graphite-700);
    vertical-align: middle;
    white-space: nowrap;
}

.wh-table th + th,
.wh-table td + td {
    border-left: 1px solid var(--graphite-100);
}

.wh-table tbody tr:last-child td { border-bottom: none; }

.wh-table tbody tr:hover td { background: var(--graphite-50); }

.wh-row-inactive td { opacity: 0.55; }
.wh-table:not(.wh-table-delete-mode) .wh-row-inactive td:nth-child(5),
.wh-table.wh-table-delete-mode .wh-row-inactive td:nth-child(6) { opacity: 1; }

.wh-name-link {
    font-weight: 500;
    color: var(--graphite-800);
    text-decoration: none;
    transition: color var(--transition);
    white-space: normal;
}
.wh-name-link:hover { color: var(--primary); }

.wh-barcode-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--graphite-500);
    border-radius: 6px;
    transition: color var(--transition), background var(--transition);
}
.wh-barcode-btn:hover {
    color: var(--graphite-800);
    background: var(--graphite-100);
}
.wh-price-purchase { color: var(--danger); font-weight: 500; }
.wh-price-sale { color: var(--success); font-weight: 500; }
.wh-th-check, .wh-td-check { vertical-align: middle; }
.wh-no-barcode { color: var(--graphite-300); font-size: 13px; }

/* ── Адаптивные колонки таблицы товаров ─────────────────────────────── */
/* Приоритет: Фото, Наименование, В продаже, Цена прод., Действия — всегда.
   Остальные скрываются по мере сужения экрана. */

/* < 1800px: убрать Тип */
@media (max-width: 1799px) {
    .wh-col-p5 { display: none !important; }
}
/* < 1600px: + Группа, Мин. ост. */
@media (max-width: 1599px) {
    .wh-col-p4 { display: none !important; }
}
/* < 1400px: + Код, Конкурент */
@media (max-width: 1399px) {
    .wh-col-p3 { display: none !important; }
}
/* < 1200px: + Цена закуп., Склад */
@media (max-width: 1199px) {
    .wh-col-p2 { display: none !important; }
}
/* < 1050px: + Артикул, ШК, Остаток */
@media (max-width: 1049px) {
    .wh-col-p1 { display: none !important; }
}

@media (max-width: 1024px) {
    .wh-table-wrap { margin: 0; border-radius: 12px; }
    .wh-table { font-size: 11px; }
    .wh-table th, .wh-table td { padding: 5px 8px; }
}
.wh-row-check-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.wh-row-check { width: 16px; height: 16px; cursor: pointer; }
#wh-delete-actions.hidden { display: none !important; }
#wh-delete-actions:not(.hidden) { display: flex; }
#wh-delete-mode-btn.active { background: var(--graphite-200); color: var(--graphite-800); }

.wh-cell-muted { color: var(--graphite-500); }
.wh-stock-low { color: var(--danger); font-weight: 500; }

.wh-row-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 1;
    justify-content: center;
}

/* Режим отображения: таблица / карточки */
.wh-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--graphite-200);
    border-radius: 10px;
    background: var(--graphite-50);
}
.wh-view-btn {
    border: 0;
    background: transparent;
    color: var(--graphite-600);
    min-height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
}
.wh-view-btn:hover { color: var(--graphite-800); }
.wh-view-btn.active {
    background: var(--white);
    color: var(--graphite-800);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.wh-view-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.wh-products-host.view-table .wh-table-wrap { display: block; }
.wh-products-host.view-table .wh-cards { display: none !important; }
.wh-products-host.view-cards .wh-table-wrap { display: none !important; }
.wh-products-host.view-cards .wh-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
@media (min-width: 900px) {
    .wh-products-host.view-cards .wh-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}
@media (min-width: 1600px) {
    .wh-products-host.view-cards .wh-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Sticky Фото+Наименование при горизонтальном скролле (средние экраны) */
#wh-table:not(.wh-table-delete-mode) .wh-th-photo,
#wh-table:not(.wh-table-delete-mode) .wh-td-photo {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--white);
}
#wh-table:not(.wh-table-delete-mode) .wh-th-name,
#wh-table:not(.wh-table-delete-mode) .wh-td-name {
    position: sticky;
    left: 52px;
    z-index: 3;
    background: var(--white);
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
}
#wh-table thead th { position: sticky; top: 0; z-index: 4; background: var(--graphite-50); }

.wh-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    text-align: center;
    color: var(--graphite-400);
    gap: 12px;
}

.text-right { text-align: right; }
.text-center { text-align: center; }

/* ── Modal: товар (расширенный) ──────────────────────────── */

.wh-modal {
    max-width: 780px;
    width: 100%;
}

.wh-modal-body {
    max-height: 75vh;
    overflow-y: auto;
    padding: 24px;
}

.wh-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.wh-modal-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wh-form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 720px) {
    .wh-modal-grid {
        grid-template-columns: 1fr;
    }
    .wh-layout {
        flex-direction: column;
        gap: 10px;
    }
    .wh-sidebar {
        width: 100% !important;
        min-width: 100% !important;
        max-height: 300px;
    }
    .wh-toolbar {
        flex-wrap: wrap;
    }
    .wh-results-count {
        width: 100%;
        margin-left: 0;
    }
}

/* ── Тумблер (toggle switch) ─────────────────────────────── */

.ts-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    position: relative;
}

.ts-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ts-slider {
    display: block;
    width: 36px;
    height: 20px;
    background: #d7dbe4;
    border: 1px solid #c6cbd6;
    border-radius: 20px;
    position: relative;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s;
    box-sizing: border-box;
}

.ts-slider::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 2px;
    width: 14px;
    height: 14px;
    background: var(--white);
    border-radius: 50%;
    transform: translateY(-50%);
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.ts-input:checked + .ts-slider {
    background: var(--graphite-700);
    border-color: var(--graphite-700);
}

.wh-table .ts-slider {
    width: 28px;
    height: 16px;
    background: #d3d7e0;
    border: 1px solid #c2c7d2;
}

.wh-table .ts-slider::after {
    width: 10px;
    height: 10px;
}

.wh-table .ts-input:checked + .ts-slider {
    background: var(--graphite-700);
    border-color: var(--graphite-700);
}

.wh-table .ts-input:checked + .ts-slider::after {
    transform: translate(12px, -50%);
}

.ts-input:checked + .ts-slider::after {
    transform: translate(16px, -50%);
}

.ts-large .ts-slider {
    width: 44px;
    height: 24px;
}
.ts-large .ts-slider::after {
    width: 16px;
    height: 16px;
    left: 3px;
}
.ts-input:checked + .ts-large .ts-slider::after,
.ts-large .ts-input:checked + .ts-slider::after {
    transform: translate(20px, -50%);
}

/* ── Формы ────────────────────────────────────────────────── */

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-textarea {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
    line-height: 1.5;
}

.ts-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
}

/* ── Tree-select (группа товара) ─────────────────────────── */

.tree-select {
    position: relative;
}

.tree-select-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border: 1px solid var(--graphite-200);
    border-radius: var(--radius);
    background: var(--white);
    font-size: 14px;
    color: var(--graphite-700);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--transition), box-shadow var(--transition);
    gap: 8px;
}

.tree-select-trigger:hover {
    border-color: var(--graphite-400);
}

.tree-select-trigger:focus, .tree-select.open .tree-select-trigger {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}

.tree-select-trigger span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tree-select-trigger svg {
    flex-shrink: 0;
    color: var(--graphite-400);
    transition: transform 0.2s;
}

.tree-select-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--white);
    border: 1px solid var(--graphite-200);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 200;
    display: none;
    overflow: hidden;
}

.tree-select-dropdown.open {
    display: block;
}

.ts-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--graphite-100);
    color: var(--graphite-400);
}

.ts-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 13px;
    color: var(--graphite-800);
    background: transparent;
}

.ts-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 260px;
    overflow-y: auto;
}

.ts-item {
    padding: 8px 12px;
    font-size: 14px;
    color: var(--graphite-700);
    cursor: pointer;
    transition: background var(--transition);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ts-item:hover { background: var(--graphite-50); }

.ts-item.selected {
    background: rgba(99,102,241,.08);
    color: var(--primary);
    font-weight: 500;
}

.ts-indent {
    color: var(--graphite-300);
    margin-right: 2px;
}

.req { color: var(--danger); }

/* ═══ DOCUMENTS CARDS ══════════════════════════════════════ */

.doc-avatar-receipt     { background: #3b82f6; }
.doc-avatar-write_off   { background: var(--danger); }
.doc-avatar-transfer    { background: #6366f1; }
.doc-avatar-return      { background: #f59e0b; }
.doc-avatar-sale        { background: var(--success); }

.doc-avatar-receipt,
.doc-avatar-write_off,
.doc-avatar-transfer,
.doc-avatar-return,
.doc-avatar-sale { border-radius: 10px; }

.doc-status-posted { color: var(--success); font-weight: 600; }

.doc-card-amount { color: var(--graphite-800); font-weight: 600; }

/* ── Document "Создать" dropdown ─────────────────────────── */

.doc-create-wrap { position: relative; }

.doc-create-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: var(--white);
    border: 1px solid var(--graphite-100);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    padding: 4px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}

.doc-create-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.doc-create-dropdown button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    font: inherit;
    font-size: 13px;
    color: var(--graphite-700);
    cursor: pointer;
    text-align: left;
    transition: background var(--transition);
}

.doc-create-dropdown button:hover {
    background: var(--graphite-50);
}

.doc-create-dropdown button svg {
    flex-shrink: 0;
    color: var(--graphite-400);
}

/* ═══ DOCUMENTS FILTER BAR ════════════════════════════════ */

.doc-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 12px 16px;
    margin-bottom: 8px;
    background: var(--white);
    border: 1px solid var(--graphite-100);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.doc-filter-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 180px;
    max-width: 300px;
}

.doc-filter-search-icon {
    position: absolute;
    left: 10px;
    color: var(--graphite-300);
    pointer-events: none;
    flex-shrink: 0;
}

.doc-filter-search-input {
    width: 100%;
    padding: 8px 30px 8px 32px;
    border: 1.5px solid var(--graphite-200);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 13px;
    color: var(--graphite-800);
    background: var(--white);
    outline: none;
    transition: border-color var(--transition);
    line-height: 1.4;
}

.doc-filter-search-input:focus { border-color: var(--graphite-500); }
.doc-filter-search-input::placeholder { color: var(--graphite-300); }

.doc-filter-search-clear {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--graphite-400);
    padding: 2px 3px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    transition: color var(--transition);
}
.doc-filter-search-clear:hover { color: var(--graphite-700); }

/* Filter multi-select */
.doc-fms { position: relative; flex-shrink: 0; }

.doc-fms-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 11px;
    background: var(--white);
    border: 1.5px solid var(--graphite-200);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 13px;
    color: var(--graphite-600);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--transition), color var(--transition);
    line-height: 1.4;
}
.doc-fms-btn:hover, .doc-fms-btn.active {
    border-color: var(--graphite-500);
    color: var(--graphite-800);
}
.doc-fms-btn .df-chevron { color: var(--graphite-400); transition: transform 0.18s; }
.doc-fms-btn.active .df-chevron { transform: rotate(180deg); }

.doc-fms-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--graphite-800);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    padding: 1px 5px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    line-height: 1;
}

.doc-fms-dd {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 210px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--white);
    border: 1px solid var(--graphite-100);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    z-index: 300;
    padding: 4px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.doc-fms-dd.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.doc-fms-dd-wide { min-width: 260px; }

.df-opt {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    cursor: pointer;
    font-size: 13px;
    color: var(--graphite-700);
    transition: background var(--transition);
    user-select: none;
}
.df-opt:hover { background: var(--graphite-50); }
.df-opt input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--graphite-800);
    cursor: pointer;
    flex-shrink: 0;
}
.df-type-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.df-empty { padding: 10px 14px; font-size: 13px; color: var(--graphite-400); }

/* Date range */
.doc-filter-dates {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--graphite-200);
    border-radius: var(--radius-sm);
    background: var(--white);
    overflow: hidden;
    flex-shrink: 0;
    transition: border-color var(--transition);
}
.doc-filter-dates:focus-within { border-color: var(--graphite-500); }

.doc-filter-date-wrap {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 10px;
}
.doc-filter-dates .doc-filter-date-wrap + .doc-filter-date-wrap {
    border-left: 1px solid var(--graphite-100);
}

.doc-filter-date-lbl {
    font-size: 11px;
    font-weight: 600;
    color: var(--graphite-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    flex-shrink: 0;
}

.doc-filter-date-in {
    border: none;
    background: transparent;
    font: inherit;
    font-size: 13px;
    color: var(--graphite-700);
    width: 102px;
    outline: none;
    cursor: pointer;
    padding: 0;
    line-height: 1.4;
}
.doc-filter-date-in::-webkit-calendar-picker-indicator { opacity: 0.5; cursor: pointer; }

/* Reset button */
.doc-filter-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    background: none;
    border: 1.5px solid var(--graphite-200);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 13px;
    color: var(--graphite-400);
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
}
.doc-filter-reset-btn:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: var(--danger-bg);
}

/* No results from filter */
.doc-filter-no-results {
    text-align: center;
    padding: 32px 16px;
    color: var(--graphite-400);
    font-size: 13px;
}

@media (max-width: 768px) {
    .doc-filter-bar {
        padding: 10px 12px;
        gap: 8px;
    }
    .doc-filter-search-wrap {
        max-width: 100%;
        width: 100%;
    }
    .doc-filter-dates {
        width: 100%;
    }
    .doc-filter-date-in {
        flex: 1;
        min-width: 80px;
    }
}

/* ═══ DOC PAGE WRAP — респонсив документов ════════════════════ */

/* На любых экранах до 1279px — всегда карточки, без таблицы */
.doc-page-wrap .table-wrap   { display: none !important; }
.doc-page-wrap .users-cards  {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
}

@media (min-width: 600px) {
    .doc-page-wrap .users-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 14px; }
}

/* На широких экранах (≥ 1280px) — показываем таблицу */
@media (min-width: 1280px) {
    .doc-page-wrap .table-wrap  { display: block !important; }
    .doc-page-wrap .users-cards { display: none !important; }
}

/* Фильтр-бар: на средних экранах (769–1279px) дропдауны влево от правого края */
@media (min-width: 769px) and (max-width: 1279px) {
    .doc-fms-dd { left: auto !important; right: 0 !important; }
}

/* ── Document modal: mobile full-screen ──────────────────── */

/* Документ modal: пропорционально большой  */
.doc-modal-panel {
    max-width: min(1260px, 92vw) !important;
    max-height: 92vh !important;
    width: 92vw;
    overflow: hidden;
    overflow-x: hidden;
}

/* ── Auto-save indicator ── */
.doc-autosave-icon {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    color: var(--graphite-400);
    margin-right: 8px;
    white-space: nowrap;
    transition: opacity 0.2s;
    user-select: none;
}
.doc-autosave-icon svg { flex-shrink: 0; }
.doc-autosave-icon.saving { color: #f59e0b; }
.doc-autosave-icon.saved { color: #16a34a; }
.doc-autosave-icon.error { color: #dc2626; }

/* Строка кнопки Шапки: показываем label только на десктопе */
.doc-create-label { display: inline; }

/* readonly режим — визуальное затемнение формы */
.doc-modal-readonly .form-input,
.doc-modal-readonly select.form-input,
.doc-modal-readonly textarea.form-input {
    background: var(--graphite-50) !important;
    border-color: var(--graphite-100) !important;
    color: var(--graphite-600) !important;
    pointer-events: none;
    cursor: default;
}
.doc-modal-readonly #rec-product-search,
.doc-modal-readonly #rec-client-search {
    background: var(--graphite-50) !important;
    pointer-events: none;
}
.doc-modal-readonly .btn-icon-danger { display: none !important; }
.doc-modal-readonly #rec-lines-tbody input { pointer-events: none; background: transparent !important; border: none !important; }
.doc-modal-readonly #rec-lines-tbody td:last-child { display: none; }
.doc-modal-readonly .doc-modal-body::before {
    content: 'Документ проведён — редактирование недоступно';
    display: block;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    margin-bottom: 16px;
}

/* Фильтр поставщика: дропдаун привязываем к правому краю кнопки чтобы не выходилза экран */
#df-sup-dd { right: 0; left: auto; }

@media (max-width: 768px) {
    #receipt-modal-overlay .doc-modal-panel {
        max-width: 100vw !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        height: 100vh;
        height: 100dvh;
        width: 100vw;
        border-radius: 0 !important;
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
    }

    #receipt-modal-overlay .doc-modal-body {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 12px;
        max-width: 100%;
        box-sizing: border-box;
    }

    #receipt-modal-overlay .doc-modal-body > * {
        max-width: 100%;
        box-sizing: border-box;
    }

    #receipt-modal-overlay .doc-modal-footer {
        border-top: 1px solid var(--graphite-100);
        padding: 12px 16px;
        background: var(--white);
        flex-shrink: 0;
    }

    #receipt-modal-overlay #rec-header-fields {
        grid-template-columns: 1fr;
    }

    #receipt-modal-overlay .col-span-2 {
        grid-column: span 1;
    }

    /* Product search row - prevent overflow */
    #receipt-modal-overlay .flex.flex-wrap {
        max-width: 100%;
    }

    #receipt-modal-overlay .flex.flex-wrap > .relative.flex-1 {
        max-width: calc(100% - 90px);
        min-width: 0;
    }

    /* Save indicator — smaller on mobile */
    .doc-autosave-icon span { display: none; }
    .doc-autosave-icon { margin-right: 4px; }
}

/* ═══ PRODUCT CARDS (wh-cards) ═════════════════════════════ */

.wh-cards { display: none; }

.wh-card {
    background: var(--white);
    border: 1px solid var(--graphite-100);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.15s;
}
.wh-card.wh-card-inactive { opacity: 0.6; }
.wh-card.wh-card-selected { border-color: var(--primary); background: rgba(99,102,241,.04); }

.wh-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wh-card-check {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: var(--primary);
}

.wh-card-avatar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--graphite-700);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    text-transform: uppercase;
}
.wh-card-photo {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    object-fit: contain;
    border: 1px solid var(--graphite-100);
    background: #f8fafc;
    flex-shrink: 0;
}
.wh-card-photo-wrap {
    position: relative;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

.wh-card-title {
    flex: 1;
    min-width: 0;
}
.wh-card-title h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--graphite-800);
    line-height: 1.3;
    word-break: break-word;
}
.wh-card-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 20px;
    margin-top: 2px;
}
.wh-card-badge-active  { background: var(--success-bg); color: var(--success); }
.wh-card-badge-inactive { background: var(--graphite-100); color: var(--graphite-400); }

.wh-card-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.wh-card-field {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.wh-card-field.full { grid-column: 1 / -1; }

.wh-card-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.35px;
    color: var(--graphite-400);
    font-weight: 600;
}
.wh-card-value {
    font-size: 12px;
    color: var(--graphite-700);
    word-break: break-word;
    line-height: 1.35;
}
.wh-card-value.wh-cv-muted    { color: var(--graphite-400); }
.wh-card-value.wh-cv-purchase { color: var(--danger); font-weight: 600; }
.wh-card-value.wh-cv-sale     { color: var(--success); font-weight: 600; }
.wh-card-value.wh-cv-low      { color: var(--danger); font-weight: 600; }

.wh-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.wh-card-action-btn {
    min-height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font);
    border: 1px solid var(--graphite-200);
    color: var(--graphite-700);
    background: var(--white);
    cursor: pointer;
    transition: all var(--transition);
}
.wh-card-action-btn:hover { border-color: var(--graphite-400); background: var(--graphite-50); }

.wh-card-action-edit {
    background: var(--graphite-800);
    color: var(--white);
    border-color: var(--graphite-800);
}
.wh-card-action-edit:hover { background: var(--graphite-700); border-color: var(--graphite-700); }

/* ── Кнопка «Группы» (мобильная/планшет) ────────────────── */

.wh-groups-toggle-btn {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: var(--white);
    border: 1.5px solid var(--graphite-200);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    color: var(--graphite-700);
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--transition);
}
.wh-groups-toggle-btn.active {
    background: var(--graphite-800);
    color: var(--white);
    border-color: var(--graphite-800);
}
.wh-groups-toggle-chevron {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.wh-groups-toggle-btn.active .wh-groups-toggle-chevron {
    transform: rotate(180deg);
}

/* ── Inline-группы (аккордеон внутри тулбара) ────────────── */

.wh-inline-groups {
    border-top: 1px solid var(--graphite-100);
    max-height: 280px;
    overflow-y: auto;
    padding: 6px 4px;
}
.wh-inline-groups.hidden { display: none; }

.wh-inline-groups .wh-group-item {
    font-size: 13px;
    padding: 7px 10px;
}

/* ── Warehouse: адаптив ──────────────────────────────────── */

/* Мобильные/планшеты: <1200px — принудительно карточки */
@media (max-width: 1199px) {
    .wh-groups-toggle-btn { display: inline-flex; }
    .wh-view-toggle { order: 1; }

    /* Таблица скрыта, карточки показаны — CSS-гарантия */
    .wh-table-wrap { display: none !important; }
    .wh-cards {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 10px;
    }
    /* Планшет: 2 колонки карточек */
    @media (min-width: 700px) {
        .wh-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    }

    /* Десктопный сайдбар — скрыт */
    #wh-sidebar { display: none !important; }
    #wh-sidebar-show { display: none !important; }

    #wh-search-wrap {
        order: 0;
        flex: 1 1 100%;
        min-width: 0 !important;
        max-width: none !important;
        width: 100%;
    }

    #wh-warehouse-filter { width: 100%; order: 2; }

    #wh-status-filter { order: 3; width: 100%; }
    #wh-status-filter .wh-status-btn { flex: 1; text-align: center; }

    #wh-delete-mode-btn { order: 4; }
    #wh-delete-actions { order: 5; width: 100%; }

    #wh-count-wrap { width: 100%; margin-left: 0; order: 6; }

    /* Модалка товара — полный экран */
    #product-modal-overlay .modal-panel {
        max-width: 100% !important;
        max-height: 100vh !important;
        height: 100vh;
        width: 100vw;
        border-radius: 0 !important;
        display: flex;
        flex-direction: column;
    }

    #product-modal-overlay .pm-body {
        flex: 1;
        overflow-y: auto;
        max-height: none;
        padding: 16px;
    }

    #product-modal-overlay .pm-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    #product-modal-overlay .pm-footer {
        border-top: 1px solid var(--graphite-100);
        padding: 12px 16px;
        background: var(--white);
        flex-shrink: 0;
    }
}

/* Ноутбуки: 1200-1400px */
@media (min-width: 1200px) and (max-width: 1400px) {
    .wh-inline-groups { display: none !important; }
}

/* Десктоп: >1400px */
@media (min-width: 1401px) {
    .wh-inline-groups { display: none !important; }
}

/* ═══ BARCODE SCANNER ══════════════════════════════════════════════════════ */

/* Кнопка камеры — скрыта на десктопе */
.doc-scan-btn {
    display: none;
}
@media (max-width: 1100px) {
    .doc-scan-btn {
        display: inline-flex;
    }
}

/* Оверлей сканера */
.barcode-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
}
.barcode-overlay.hidden {
    display: none;
}
.barcode-overlay-inner {
    background: var(--graphite-800, #1e2530);
    border-radius: 16px;
    padding: 20px;
    width: min(440px, 96vw);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}
.barcode-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.barcode-overlay-title {
    font-size: 15px;
    font-weight: 600;
    color: #e2e8f0;
}
.barcode-close-btn {
    color: #94a3b8;
}
.barcode-close-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #e2e8f0;
}
.barcode-reader-box {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    min-height: 220px;
}
/* Override html5-qrcode inline styles */
.barcode-reader-box video {
    width: 100% !important;
    border-radius: 10px;
}
.barcode-reader-box > div {
    border-radius: 10px;
}
.barcode-hint {
    font-size: 13px;
    color: #94a3b8;
    text-align: center;
}
.barcode-result-msg {
    font-size: 13px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 8px;
    text-align: center;
}
.barcode-result-msg.hidden {
    display: none;
}
.barcode-msg-info {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}
.barcode-msg-success {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
}
.barcode-msg-error {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

/* ═══ PWA INSTALL BUTTON ═══════════════════════════════════════════ */

.pwa-install-btn {
    color: var(--graphite-300) !important;
    font-size: 13px;
    white-space: nowrap;
    margin-bottom: 6px;
    border: 1px dashed rgba(255,255,255,0.12);
    border-radius: var(--radius-sm);
    transition:
        background-color 0.18s var(--sidebar-ease),
        color 0.18s var(--sidebar-ease),
        justify-content var(--sidebar-duration) var(--sidebar-ease);
}

.pwa-install-btn:not(.active):hover {
    color: var(--white) !important;
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
}

.pwa-install-btn span {
    transition:
        opacity 0.18s var(--sidebar-ease),
        max-width var(--sidebar-duration) var(--sidebar-ease),
        visibility 0s linear 0s;
}

/* Свёрнутая боковая панель (десктоп) */
@media (min-width: 769px) and (hover: hover) {
    .pwa-install-btn {
        justify-content: center;
        gap: 0;
        padding-left: 11px;
        padding-right: 11px;
        width: fit-content;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
        border-color: transparent;
    }

    .sidebar:hover .pwa-install-btn {
        justify-content: flex-start;
        gap: 12px;
        padding-left: 12px;
        padding-right: 12px;
        width: auto;
        margin-left: 0;
        margin-right: 0;
        border-color: rgba(255,255,255,0.12);
    }

    .pwa-install-btn span {
        max-width: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity 0.14s var(--sidebar-ease),
            max-width var(--sidebar-duration) var(--sidebar-ease),
            visibility 0s linear var(--sidebar-duration);
    }

    .sidebar:hover .pwa-install-btn span {
        max-width: 140px;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition:
            opacity 0.2s var(--sidebar-ease) 0.05s,
            max-width var(--sidebar-duration) var(--sidebar-ease),
            visibility 0s linear 0s;
    }
}

/* iOS PWA подсказка */
.pwa-ios-hint-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 20px;
}
.pwa-ios-hint {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    max-width: 360px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    margin-bottom: env(safe-area-inset-bottom, 0);
}
.pwa-ios-hint-title {
    font-size: 17px;
    font-weight: 700;
    color: #1c1c23;
    margin-bottom: 12px;
}
.pwa-ios-hint p {
    font-size: 14px;
    color: #51515c;
    line-height: 1.6;
    margin-bottom: 18px;
}
.pwa-ios-hint-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 28px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: #1c1c23;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

/* ═══ PWA STANDALONE: убираем лишний хром ══════════════════════════ */
@media (display-mode: standalone) {
    .auth-footer { display: none; }
}

/* ═══ MOBILE STABILITY FIXES ══════════════════════════════════════ */

/* Глобальный overflow-x: hidden для предотвращения горизонтальной прокрутки */
html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Safe area padding для устройств с вырезом (notch) */
.main-content {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.top-bar {
    padding-top: env(safe-area-inset-top, 0);
}

/* Стабилизация .content — не выходит за ширину экрана */
.content {
    max-width: 100%;
}
/* Горизонтальный скролл страницы запрещён, но не мешает дочерним scroll-контейнерам */
body { overflow-x: hidden; }

/* auth-page стабилизация */
.auth-page {
    overflow-x: hidden;
    min-height: 100vh;
    min-height: 100dvh;
}

.auth-container {
    padding-left: env(safe-area-inset-left, 20px);
    padding-right: env(safe-area-inset-right, 20px);
}

/* Таблицы внутри карточек — не выходят за границы */
.card { max-width: 100%; overflow: hidden; }
.table-wrap { max-width: 100%; }

/* ── 768px Mobile ────────────────────────────────── */
@media (max-width: 768px) {
    /* Sidebar safe area */
    .sidebar {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .sidebar-footer {
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
    }

    /* Контент не гуляет */
    .main-content {
        max-width: 100vw;
    }

    .content {
        padding: 16px 12px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0));
    }

    /* Card headers — не выходят за экран */
    .card-header {
        padding: 12px 14px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .card-body {
        padding: 14px;
    }

    /* Фильтры — стабильная ширина */
    .doc-filter-bar {
        overflow: hidden;
        max-width: 100%;
    }

    /* Модальные окна — стабильный полный экран */
    .modal-panel {
        max-width: 100vw !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        border-radius: 0 !important;
        margin: 0;
    }

    .modal-overlay {
        align-items: stretch;
        padding: 0;
    }

    /* Строки таблицы документа в модалке — скролл внутри */
    .rec-lines-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    .rec-lines-scroll table {
        min-width: 580px;
    }

    /* auth page — стабильный центр */
    .auth-container {
        padding: 16px;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .auth-card {
        max-width: 100%;
        width: 100%;
    }

    .code-inputs {
        gap: 6px;
        justify-content: center;
    }

    .code-input {
        width: 40px;
        height: 46px;
        font-size: 17px;
        flex-shrink: 1;
    }
}

/* ── 480px Very small phones ──────────────────── */
@media (max-width: 480px) {
    .content {
        padding: 12px 10px;
    }

    .top-bar {
        padding: 8px 10px;
        gap: 8px;
    }

    .page-title {
        font-size: 15px;
    }

    .code-input {
        width: 36px;
        height: 42px;
        font-size: 16px;
    }

    .code-inputs {
        gap: 4px;
    }

    /* Sidebar уже на маленьких телефонах */
    .sidebar {
        width: min(80vw, 264px);
    }

    .catalog-sections-nav {
        grid-template-columns: 1fr;
    }
}

/* ── 360px Minimal phones ─────────────────────── */
@media (max-width: 360px) {
    .sidebar {
        width: min(85vw, 260px);
    }

    .code-input {
        width: 32px;
        height: 40px;
        font-size: 15px;
        border-radius: 6px;
    }

    .top-bar-actions .btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
    }
}

/* ═══ STANDALONE APP TOUCH OPTIMIZATIONS ══════════════════════════ */
@media (display-mode: standalone) {
    /* Выключаем pull-to-refresh (нативное поведение) */
    body {
        overscroll-behavior-y: contain;
    }

    /* Safe area для standalone на iOS */
    .top-bar {
        padding-top: max(env(safe-area-inset-top, 0px), 8px);
    }

    .sidebar-header {
        padding-top: max(env(safe-area-inset-top, 0px), 12px);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Таблица товаров — UX: zebra + улучшенная читаемость
   ═══════════════════════════════════════════════════════════════════════════ */
.wh-table tbody tr:nth-child(even) td { background: #fafafa; }
.wh-table tbody tr:hover td { background: #f0f1f3; }
.wh-table td { font-size: 12.5px; line-height: 1.4; }
.wh-cell-muted { color: var(--graphite-500); font-size: 11.5px; }

/* ── Кнопка конкурентов ─────────────────────────────────────────────────── */
.wh-competitor-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--graphite-400);
    border-radius: 8px;
    transition: color .15s, background .15s, transform .1s;
}
.wh-competitor-btn:hover {
    color: #2563eb;
    background: rgba(37, 99, 235, .08);
    transform: scale(1.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Modal: Конкуренты
   ═══════════════════════════════════════════════════════════════════════════ */
.comp-modal-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 0;
    color: var(--graphite-500);
    font-size: 13px;
}

.comp-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--graphite-200);
    border-top-color: var(--graphite-600);
    border-radius: 50%;
    animation: comp-spin .7s linear infinite;
}
@keyframes comp-spin { to { transform: rotate(360deg); } }

.comp-our-price {
    font-size: 14px;
    color: var(--graphite-700);
    margin-bottom: 16px;
    padding: 10px 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
}
.comp-our-price strong {
    color: #15803d;
    font-size: 15px;
}

.comp-group {
    margin-bottom: 16px;
    border: 1px solid var(--graphite-100);
    border-radius: 10px;
    overflow: hidden;
}

.comp-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--graphite-50);
    border-bottom: 1px solid var(--graphite-100);
}

.comp-group-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--graphite-800);
}

.comp-group-site {
    font-size: 11px;
    color: #2563eb;
    text-decoration: none;
    margin-left: auto;
}
.comp-group-site:hover { text-decoration: underline; }

.comp-products {
    display: flex;
    flex-direction: column;
}

.comp-product-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--graphite-50);
    transition: background .12s;
}
.comp-product-row:last-child { border-bottom: none; }
.comp-product-row:hover { background: #f9fafb; }

.comp-product-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

a.comp-product-name {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--graphite-800);
    text-decoration: none;
    white-space: normal;
    word-break: break-word;
}
a.comp-product-name:hover { color: #2563eb; }

span.comp-product-name {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--graphite-800);
    white-space: normal;
    word-break: break-word;
}

.comp-product-sku {
    font-size: 11px;
    color: var(--graphite-400);
}

.comp-product-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.comp-stock {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 7px;
    border-radius: 6px;
    white-space: nowrap;
}
.comp-stock-yes { color: #15803d; background: #dcfce7; }
.comp-stock-no  { color: #991b1b; background: #fee2e2; }

.comp-product-price {
    font-size: 13px;
    font-weight: 600;
    color: var(--graphite-800);
    white-space: nowrap;
    min-width: 72px;
    text-align: right;
}
.comp-no-price { color: var(--graphite-300); }

.comp-diff {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
    white-space: nowrap;
    min-width: 42px;
    text-align: center;
}
.comp-diff-higher { color: #b91c1c; background: #fee2e2; }
.comp-diff-lower  { color: #15803d; background: #dcfce7; }
.comp-diff-same   { color: var(--graphite-500); background: var(--graphite-100); }

/* ── Раскрываемая группа навигации ──────────────────────────── */
.nav-group {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.nav-group-toggle {
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    width: 100%;
    justify-content: flex-start;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--graphite-300);
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    transition: background-color 0.18s, color 0.18s;
}

.nav-group-toggle:hover {
    background: rgba(255,255,255,0.07);
    color: var(--white);
}

.nav-group.open .nav-group-toggle {
    color: var(--white);
}

.nav-group-chevron {
    margin-left: auto;
    flex-shrink: 0;
    transition: transform 0.22s ease;
}

.nav-group.open .nav-group-chevron {
    transform: rotate(180deg);
}

.nav-subitems {
    display: none;
    flex-direction: column;
    gap: 1px;
    padding: 2px 0 2px 20px;
}

.nav-group.open .nav-subitems {
    display: flex;
}

.nav-subitem {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--graphite-300);
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.18s, color 0.18s;
    border-left: none;
}

.nav-subitem:hover {
    background: rgba(255,255,255,0.07);
    color: var(--white);
}

.nav-subitem.active {
    background: rgba(255,255,255,0.12);
    color: var(--white);
    font-weight: 500;
}

.nav-subitem span {
    max-width: 180px;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.18s var(--sidebar-ease), max-width var(--sidebar-duration) var(--sidebar-ease), visibility 0s linear 0s;
}

/* Баннер-карточки (список баннеров) */
.banner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
    padding: 4px 0;
}

.banner-card {
    background: var(--white);
    border: 1px solid var(--graphite-200);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.18s;
}

.banner-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.banner-card-img {
    width: 100%;
    aspect-ratio: 16/6;
    object-fit: cover;
    background: var(--graphite-100);
    display: block;
}

.banner-card-img-placeholder {
    width: 100%;
    aspect-ratio: 16/6;
    background: var(--graphite-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--graphite-400);
    font-size: 13px;
}

.banner-card-body {
    padding: 12px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.banner-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--graphite-800);
    line-height: 1.3;
}

.banner-card-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--graphite-500);
}

.banner-card-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.banner-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.banner-badge-active   { background: #dcfce7; color: #15803d; }
.banner-badge-inactive { background: var(--graphite-100); color: var(--graphite-500); }
.banner-badge-show-title { background: #dbeafe; color: #1d4ed8; }
.banner-badge-hide-title { background: #fef3c7; color: #92400e; }

.banner-card-actions {
    padding: 10px 12px;
    border-top: 1px solid var(--graphite-200);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: center;
}

.banner-action-form {
    margin: 0;
}

.banner-action-btn {
    width: 100%;
    min-height: 36px;
    padding: 7px 10px;
    justify-content: center;
    font-size: 13px;
    gap: 6px;
}

@media (max-width: 980px) {
    .banner-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .banner-card-actions {
        grid-template-columns: 1fr;
    }
}

/* Форма баннера */
.banner-form-img-preview {
    width: 100%;
    max-width: 480px;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-sm);
    border: 1px solid var(--graphite-200);
    display: block;
    margin-top: 8px;
}

.banner-form-img-preview-mobile {
    max-width: 360px;
}

.banner-size-note {
    margin: 8px 0 10px;
    padding: 10px 12px;
    border: 1px solid var(--graphite-200);
    border-radius: var(--radius-sm);
    background: #fafafa;
}

.banner-size-note p {
    margin: 0 0 6px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--graphite-600);
}

.banner-size-note p:last-child {
    margin-bottom: 0;
}

/* ── Range slider ── */
.form-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 4px;
    background: #d1d5db;
    outline: none;
    cursor: pointer;
    accent-color: var(--graphite-700, #374151);
}
.form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--graphite-700, #374151);
    cursor: pointer;
}

/* ── Radio pill buttons ── */
.radio-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.radio-pill {
    display: flex;
    cursor: pointer;
}
.radio-pill input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.radio-pill span {
    display: block;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1.5px solid #d1d5db;
    font-size: 13px;
    line-height: 1.4;
    color: #374151;
    background: #f9fafb;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    white-space: nowrap;
}
.radio-pill input[type="radio"]:checked + span {
    border-color: var(--graphite-700, #374151);
    background: var(--graphite-700, #374151);
    color: #fff;
}

/* ── Image position grid ── */
.img-pos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    max-width: 200px;
}
.img-pos-btn {
    display: flex;
    cursor: pointer;
    justify-content: center;
}
.img-pos-btn input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.img-pos-btn span {
    display: block;
    width: 100%;
    text-align: center;
    padding: 5px 8px;
    border-radius: 6px;
    border: 1.5px solid #d1d5db;
    font-size: 12px;
    color: #374151;
    background: #f9fafb;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.img-pos-btn input[type="radio"]:checked + span {
    border-color: var(--graphite-700, #374151);
    background: var(--graphite-700, #374151);
    color: #fff;
}

@media (min-width: 769px) and (hover: hover) {
    .sidebar:not(:hover) .nav-group.open .nav-subitems {
        display: none !important;
    }

    .sidebar:not(:hover) .nav-subitem {
        justify-content: center;
        gap: 0;
        width: fit-content;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .sidebar:not(:hover) .nav-subitem span {
        max-width: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .sidebar:hover .nav-subitem {
        justify-content: flex-start;
        gap: 8px;
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }
}