@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-size-base: 14px;
    --font-size-field: 15px;
    --font-size-secondary: 12px;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;
    --color-text: #1d1d1f;
    --color-muted: #86868b;
    --primary: #40503D;
    --primary-hover: #252e23;
    --btn-text: #ffffff;
    --gradient-card: linear-gradient(135deg, #40503D 0%, #40503D 100%);
    --bg-color: #ffffff;
    --card-bg: #ffffff;
    --text-main: #0f172a;
    --text-muted: #152A64;
    --border: #e2e8f0;
    --success: #40503D;
    --warning: #f59e0b;
    --danger: #B02418;
    --radius: 12px;
}

/* Магическое правило: запрещает любым блокам растягивать экран */
*, *::before, *::after {
    box-sizing: border-box;
}

/* На всякий случай жестко отрезаем пустоту справа у всего сайта */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    color: var(--color-text);
    margin: 0;
    padding: 0;
    -webkit-text-stroke: 0.2px rgba(0, 0, 0, 0.15);
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.04);
    }

button, input, select, textarea { font-family: inherit; }
strong, b { font-weight: var(--font-weight-bold); }

svg.ui-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    max-width: 16px;
    max-height: 16px;
    flex: 0 0 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.login-box { background: var(--card-bg); padding: 40px; border-radius: var(--radius); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.05); width: 100%; max-width: 420px; border-top: 5px solid var(--primary); border: 1px solid var(--border); }
.login-input { width: 100%; padding: 8px 16px; margin-bottom: 16px; border: 1px solid var(--border); border-radius: 8px; font-size: 15px; transition: all 0.2s ease; background: #f8fafc; color: var(--text-main); }
.login-input:focus { outline: none; border-color: var(--primary); background: #fff; box-shadow: 0 0 0 4px rgba(52, 65, 50, 0.15); }

.nav-tabs { display: flex; gap: 12px; margin-bottom: 25px; border-bottom: 2px solid var(--border); padding-bottom: 15px; overflow-x: auto; }
.nav-btn { background: transparent; border: none; padding: 6px 16px; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; border-radius: 6px; transition: all 0.2s; white-space: nowrap; height: 32px; display: inline-flex; align-items: center; justify-content: center; }
.nav-btn:hover { background: #e2e8f0; color: var(--text-main); }
.nav-btn.active { background: var(--text-main); color: #fff; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.nav-btn.active-preorder { background: var(--primary); color: var(--btn-text); box-shadow: 0 4px 6px -1px rgba(52, 65, 50, 0.2); }
.logout-btn { background: transparent; color: var(--danger); border: 1px solid var(--danger); padding: 6px 16px; border-radius: 6px; font-weight: 600; font-size: 13px; cursor: pointer; margin-left: auto; transition: 0.2s; height: 32px; display: inline-flex; align-items: center; justify-content: center; }
.logout-btn:hover { background: var(--danger); color: #ffffff; box-shadow: 0 4px 10px rgba(176, 36, 24, 0.2); }

/* 1. Общий контейнер каталога */
.catalog-layout { 
    display: flex; 
    gap: 14px; 
    align-items: stretch; /* Растягивает обе колонки на одинаковую высоту */
    height: calc(100vh - 200px); /* Вычитаем шапку и подвал, чтобы не было общего скролла */
    margin-bottom: 0;
}

/* 2. Боковая панель */
.sidebar { 
    width: 260px; 
    background: #fff; 
    border: 0; 
    border-radius: 12px; 
    padding: 10px; 
    box-shadow: 0 6px 20px rgba(30, 55, 90, 0.08); 
    flex-shrink: 0; 
    
    /* Делаем независимый скролл */
    display: flex;
    flex-direction: column;
    overflow-y: auto; 
}

/* 3. Основная часть (поиск + таблица) */
.main-content { 
    flex: 1; 
    min-width: 0; /* Критично: не дает таблице разорвать экран в ширину */
    display: flex;
    flex-direction: column;
    margin-left: 0 !important; /* Убиваем фантомные отступы */
}

/* 4. Контейнер самой таблицы */
.table-responsive { 
    background: #fff; 
    border-radius: 12px; 
    box-shadow: 0 6px 20px rgba(30, 55, 90, 0.08); 
    border: 0; 
    width: 100%; 
    
    flex: 1; /* Заставляет таблицу занять всё оставшееся место под поиском */
    overflow-x: auto; /* Скролл вправо-влево */
    overflow-y: auto; /* Скролл вверх-вниз */
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 4px; }
.cat-item { 
    display: flex;
    align-items: center;
    gap: 9px;
    flex: none;
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    cursor: pointer; 
    font-size: 14px;
    color: var(--text-main); 
    transition: background 0.2s ease, color 0.2s ease;
    border: 0;
    border-radius: 8px;
    background: transparent;
    white-space: nowrap;
    font-weight: 500;
    text-align: left;
}
.cat-item:hover { background: #eef4fa; }
.cat-item.active { background: #e0ebf7; color: #081e5c; font-weight: 600; }
.cat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cat-chevron { width: 14px; height: 14px; }
.cat-chevron.expanded { transform: rotate(90deg); }
.cat-counter { padding: 3px 7px; border-radius: 7px; background: #081e5c; color: #fff; font-size: 12px; }
.search-box { width: 100%; padding: 12px 20px 12px 45px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; margin-bottom: 20px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%2394a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>'); background-repeat: no-repeat; background-position: 15px center; transition: 0.2s; }
.search-box:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(52, 65, 50, 0.15); }
.catalog-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 12px; margin-bottom: 12px; }
.search-card, .cart-card { background: #fff; border: 0; border-radius: 12px; box-shadow: 0 6px 20px rgba(30, 55, 90, 0.08); }
.search-card { display: flex; align-items: center; min-width: 0; padding: 8px 12px; }
.search-control { display: flex; align-items: center; gap: 9px; width: 100%; min-width: 0; padding: 0 12px; border: 1px solid #dce5ed; border-radius: 9px; background: #fff; }
.search-control:focus-within { border-color: #081e5c; }
.search-control #searchInput { flex: 1; min-width: 0; height: 38px; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; background-image: none; box-shadow: none; font-size: 14px; }
.search-control #searchInput:focus { outline: none; border: 0; box-shadow: none; }
.cart-card { justify-self: end; width: max-content; max-width: 100%; padding: 8px 10px; }

table { width: 100%; border-collapse: collapse; table-layout: auto; }
/* Размер и шрифт каталога */
th { padding: 10px 12px;   font-size: 14px; font-weight: 600; color: #152A64; border-bottom: 1px solid #cbd5e1; background: #f8fafc; text-align: left; position: sticky; top: 0; z-index: 10; white-space: nowrap; }
td { padding: 10px 12px;   font-size: 14px; border-bottom: 1px solid #e2e8f0; vertical-align: middle; }
tbody tr:hover { background-color: #f8fafc; }

/* Жестко фиксируем служебные колонки, чтобы они не сжимались */
.th-cat-chk { width: 40px; text-align: center; }
.col-code { width: 80px; text-align: center; color: #152A64; white-space: nowrap; }
.col-art { width: 130px; text-align: left; color: #0f172a; font-weight: 600; white-space: nowrap; }
.col-price { width: 100px; text-align: right; font-weight: 700; white-space: nowrap; }
.col-guarantee { width: 80px; text-align: center; white-space: nowrap; }
.col-stock { width: 110px; text-align: center; white-space: nowrap; }
.col-qty { width: 120px; text-align: center; white-space: nowrap; }

/* Наименование забирает всё свободное место и переносит текст */
.col-name { 
    width: auto; 
    min-width: 250px;
    font-weight: 500; 
    color: #0f172a; 
    line-height: 1.4; 
    white-space: normal; 
    word-break: break-word; 
}
.col-price { text-align: right; font-weight: 600; padding-right: 15px; width: 130px; white-space: nowrap; }
.col-guarantee { text-align: center; font-size: 11px; color: #152A64; width: 80px; white-space: nowrap; }
.col-stock { text-align: center; width: 100px; white-space: nowrap; }
.col-qty { text-align: center; width: 120px; white-space: nowrap; }

.qty-wrapper { 
    display: inline-flex; 
    border: 1px solid #cbd5e1; 
    border-radius: 4px; 
    height: 26px; 
    background: #fff; 
    align-items: stretch; /* Позволяет кнопкам и инпуту идеально заполнить высоту */
    justify-content: center; 
    overflow: hidden; /* Отрезает вылезающие острые углы кнопок */
}

.qty-btn { 
    background: #f8fafc; 
    border: none; 
    width: 24px; 
    font-size: 14px; 
    color: #475569; 
    cursor: pointer; 
    padding: 0; 
    /* Делаем сами кнопки флексами, чтобы + и - стояли ровно по центру */
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.qty-btn:hover { 
    background: #e2e8f0; 
}

.qty-input { 
    width: 36px; 
    border: none; 
    border-left: 1px solid #cbd5e1; 
    border-right: 1px solid #cbd5e1; 
    text-align: center; 
    font-size: 12px; 
    font-weight: 500; 
    outline: none; 
    color: #0f172a; 
    padding: 0; 
    appearance: textfield; /* Современный стандарт (редактор будет доволен) */
    -moz-appearance: textfield; /* Оставляем для старых версий Firefox */
}

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

.qty-input:focus { 
    outline: none; 
    background: #f0fdf4; 
}

.stock-badge { padding: 3px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; display: inline-block; white-space: nowrap; line-height: 1.2; }
.badge-instock { background-color: #dcfce7 !important; color: #166534 !important; border: 1px solid #40503D !important; }
.badge-preorder { background-color: #fef3c7 !important; color: #d97706 !important; border: 1px solid #fde68a !important; }

.btn { background: var(--primary); color: var(--btn-text); border: none; padding: 14px 24px; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; transition: all 0.2s ease; width: 100%; text-decoration: none; display: inline-block; text-align: center; box-sizing: border-box; }
.btn:hover { background: var(--primary-hover); transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(52, 65, 50, 0.3); }
.btn:active { transform: translateY(0); }
.btn:disabled { background: #e2e8f0; color: #94a3b8; cursor: not-allowed; transform: none; box-shadow: none; }
.modal { display: none; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(15, 23, 42, 0.6); backdrop-filter: blur(8px); }
.modal-content { background-color: var(--card-bg); margin: 4% auto; padding: 30px; border-radius: 12px; width: 90%; max-width: 900px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); max-height: 90vh; overflow-y: auto; }
.close { color: var(--text-muted); float: right; font-size: 28px; font-weight: bold; cursor: pointer; line-height: 1; transition: 0.2s; }
.close:hover { color: var(--danger); }
.delete-btn { background: transparent; border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--danger); transition: 0.2s; }
.delete-btn:hover { background: var(--danger); color: white; }
.status-badge { padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;}
#authError, #regError, #forgotError { color: #B64400; background: #fafafa; padding: 15px; border-radius: 12px; font-size: 16px; margin-bottom: 15px; display: none; font-weight: 500; border: 1px solid rgba(176, 36, 24, 0.3); }

/* Идеальная плоская B2B-панель */
.micro-bar { display: flex; flex-direction: row; align-items: center; padding: 8px 15px; background: #fff; border-bottom: 1px solid #e2e8f0; margin-bottom: 15px; gap: 15px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); overflow-x: auto; }
.micro-bar::-webkit-scrollbar { height: 4px; }
.micro-bar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }
.mb-section { display: flex; flex-direction: row; align-items: center; gap: 6px; font-size: 12px; color: #0f172a; white-space: nowrap; }
.mb-legend { color: #152A64; gap: 5px !important; font-size: 11px; }
.mb-badge { background: #f8fafc; padding: 2px 5px; border-radius: 4px; border: 1px solid #e2e8f0; font-weight: 600; }
.mb-btn { display: inline-flex; align-items: center; padding: 4px 10px; background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; border-radius: 6px; text-decoration: none; cursor: pointer; font-weight: 600; font-size: 12px; transition: all 0.15s; outline: none; }
.mb-btn:hover { background: #e2e8f0; }
.tg-btn { color: #f8fafc; background: #152A64; border-color: #152A64; }
.tg-btn:hover { background: #152A64; }
.order-btn { color: #166534; background: #dcfce7; border-color: #40503D; padding: 5px 12px; margin-left: 8px; }
.order-btn:hover { background: #40503D; }
/* --- СТИЛИ ДЛЯ БЕГУЩЕЙ СТРОКИ --- */
/* --- БЕГУЩАЯ СТРОКА --- */
.top-marquee-container {
    width: 100%;
    background-color: #152A64; 
    color: #ffffff;
    overflow: hidden;
    padding: 10px 0;
    font-size: 14px;
     
    font-weight: 500;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    position: relative;
    z-index: 1000;
}

.top-marquee-content {
    display: inline-block;
    white-space: nowrap;
    animation: marquee 30s linear infinite;
}

.top-marquee-content span {
    padding-right: 80px; 
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
}
/* --- НОВЫЙ ДИЗАЙН ЭКРАНА ВХОДА --- */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

/* --- ЭКРАН ВХОДА (ИСПРАВЛЕНО ЦЕНТРИРОВАНИЕ) --- */
.login-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh; /* СТРОГО 100% высоты экрана (убрали min-height) */
    width: 100vw; /* СТРОГО 100% ширины экрана */
    background: url('bg.jpg') center/cover no-repeat;
    position: relative;
    overflow: hidden; /* ГЛАВНАЯ МАГИЯ: отрезает всё лишнее и убивает скролл */
    margin: 0; /* На всякий случай обнуляем внешние отступы */
    padding: 0; /* Убираем все внутренние отступы, чтобы не растягивать экран */
}
.login-screen::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(10px);
    z-index: 1;
}

/* --- КАРТОЧКА ВХОДА --- */
.modern-login {
    position: relative;
    z-index: 2;
    margin: auto; /* Дополнительная страховка центрирования */
    background: #ffffff;
    border-radius: 18px;
    padding: 48px 48px;
    width: 100%;
    max-width: 570px;
    box-shadow: 
        0 40px 80px -15px rgba(0, 0, 0, 0.3),   /* Огромная рассеянная тень для левитации */
        0 15px 35px -5px rgba(0, 0, 0, 0.15),   /* Средняя мягкая тень для плавного перехода */
        0 0 0 1px rgba(0, 0, 0, 0.03);          /* Микро-тень для резкости контура */
    text-align: center;
     
    border: 1px solid rgba(255, 255, 255, 0.9); /* Белый блик по краям карточки (создает эффект толщины стекла/пластика) */
}

/* ЗАГОЛОВОК И ПОДЗАГОЛОВОК */
/* --- ЗАГОЛОВОК --- */
/* Делаем блок умным контейнером для резинового шрифта */
/* Контейнер шапки занимает 100% ширины (ровно как и кнопка "Войти") */
.modern-header {
    width: 100%;
    margin-bottom: 48px;
     
}

/* Подзаголовок */
.apple-subheader {
    width: 100%;
    font-size: 16px;
     
    font-weight: 550;
    color: #86868b;
    margin: 0;
    text-align: justify; 
    text-align-last: justify; /* Растягивает текст от края до края */
    text-transform: uppercase;
}

/* Страховка для совсем мелких экранов телефонов */
@media (max-width: 480px) {
    .apple-subheader { font-size: 10px; }
}

.apple-b2b { 
     
    width: 100%;
    font-size: 18px; /* Выровнял размер с текстом внутри, чтобы не было конфликтов */
    font-weight: 600;
    text-align: justify; /* Растягивает основные строки */
    text-align-last: justify; /* Растягивает последнюю строку */
    line-height: 1.3;
    margin: 0 0 35px 0;
    color: #1d1d1f;
}

/* --- ФОРМА ВВОДА --- */
.modern-form {
    text-align: left;
}
.modern-form label {
    display: block;
     
    font-size: 15px;
    font-weight: 400;
    color: #86868b;
    margin-bottom: 8px;
}
.modern-form .input-group {
    margin-bottom: 15px;
    font-weight: 400;
     
}
.modern-form .input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.modern-form .input-icon {
    position: absolute;
    left: 14px;
    width: 18px;
    height: 18px;
    color: #86868b;
    pointer-events: none;
}
.modern-form .input-icon-right {
    position: absolute;
    right: 14px;
    width: 18px;
    height: 18px;
    color: #86868b;
    cursor: pointer;
}
.modern-form input {
     
    font-size: 17px;
    color: #86868b;
    width: 100%;
    padding: 14px 40px;
    font-weight: 400;
    border: 1px solid #d2d2d7;
    border-radius: 12px;
    background: #fbfbfd;
    outline: none;
    transition: all 0.2s;
    box-sizing: border-box;
}
.modern-form input:focus {
    border-color: #86868b;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(134, 134, 139, 0.1);
}
/* --- ВЕКТОРНЫЙ ЗНАЧОК BYN --- */
.byn-icon {
    display: inline-block;
    width: 0.9em; /* Делаем чуть меньше цифр для аккуратности */
    height: 0.9em;
    vertical-align: -0.1em; /* Выравниваем по базовой линии цифр */
    margin-left: 4px;
    color: #86868b; /* Серый цвет, как у остального текста */
}

/* --- КНОПКА ВОЙТИ --- */
.btn-modern {
     
    width: 100%;
    padding: 16px;
    background: #1d1d1f;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 18px;
    transition: 0.2s;
}
.btn-modern:hover {
    background: #1d1e1fec;
}

/* --- ССЫЛКИ ВНИЗУ --- */
.login-links {
    margin-top: 18px;
    margin-bottom: 18px;
     
    text-align: center;
}
.login-links a,
.login-register-block {
     
    font-size: 16px;
    color: #86868b;
    text-decoration: none;
    transition: 0.2s;
}
.login-links a:hover {
    color: #86868b;
     
}
.login-register-block a {
    display: block;
     
    margin-top: 5px;
    font-weight: 600;
    color: #1d1d1f;
}
.login-register-block a:hover {
    color: #1d1d1f;
     
}

/* --- ФИНАЛЬНЫЙ БЛОК (ФУТЕР) --- */
.login-footer-static {
    position: absolute;
    bottom: 32px;
    left: 0;
    right: 0;
    border-top: 1px solid #d2d2d7;
    padding-top: 17px;
    padding-left: 50px;
    padding-right: 50px;
     
    font-size: 12px;
    font-weight: 400;
    color: #6e6e73;
    display: flex;
    justify-content: space-between;
    z-index: 2;
}

/* --- БЕГУЩАЯ СТРОКА (ВОЗВРАЩЕНА) --- */
.bottom-marquee-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: transparent;
    color: #6e6e73 ;
    overflow: hidden;
    padding: 17px 0;
    font-size: 16px;
     
    font-weight: 500;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
    z-index: 1000;
}
.bottom-marquee-content {
    display: inline-block;
    white-space: nowrap;
    animation: marquee 30s linear infinite;
}
.bottom-marquee-content span {
    padding-right: 80px;    
}
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
}
/* =======================================================
   📱 АДАПТАЦИЯ ПОД МОБИЛЬНЫЕ ЭКРАНЫ (ТЕЛЕФОНЫ И ПЛАНШЕТЫ)
   ======================================================= */
@media (max-width: 768px) {
    /* 1. Верхняя панель (micro-bar): выстраиваем в колонку */
    .micro-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px;
        padding: 12px;
    }
    
    /* Убиваем стандартную горизонтальную прокрутку */
    .table-responsive {
        overflow-x: hidden !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* Заставляем таблицу вести себя как блоки */
    #catalogTable, #catalogTable thead, #catalogTable tbody, #catalogTable th, #catalogTable td, #catalogTable tr {
        display: block;
        width: 100%;
    }

    /* Прячем шапку */
    #catalogTable thead tr {
        display: none;
    }

    /* Карточка товара */
    #catalogTable tbody tr {
        margin-bottom: 16px;
        border: 1px solid #cbd5e1;
        border-radius: 12px;
        padding: 15px;
        background: #ffffff;
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    }

    /* Прячем колонку с чекбоксом менеджера (чтобы она не ломала мобильный вид) */
    #catalogTable tbody td:first-child:not(.col-code):not(.col-art) {
        display: none !important;
    }

    /* Базовый стиль ячеек */
    #catalogTable tbody td {
        border: none;
        padding: 6px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        text-align: right;
    }

    /* Сбрасываем старые подписи (если остались от прошлого кода) */
    #catalogTable tbody td::before { content: none; }

    /* --- ПОДПИСИ ЧЕРЕЗ КЛАССЫ (не зависят от порядка колонок) --- */
    #catalogTable tbody td.col-code::before { content: "Код:"; font-weight: 600; color: #64748b; }
    #catalogTable tbody td.col-art::before { content: "Артикул:"; font-weight: 600; color: #64748b; }
    #catalogTable tbody td.col-guarantee::before { content: "Гарантия:"; font-weight: 600; color: #64748b; }
    #catalogTable tbody td.col-price::before { content: "Цена:"; font-weight: 600; color: #64748b; }
    #catalogTable tbody td.col-stock::before { content: "Наличие:"; font-weight: 600; color: #64748b; }

    /* Наименование товара (Оформляем как заголовок карточки) */
    #catalogTable tbody td.col-name {
        font-size: 15px;
        font-weight: 700;
        color: #0f172a;
        text-align: left;
        margin-bottom: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid #e2e8f0;
        display: block; /* Убираем flex, чтобы текст переносился свободно */
    }
    #catalogTable tbody td.col-name::before { content: none !important; }

    /* Блок заказа (Опускаем вниз и выделяем) */
    #catalogTable tbody td.col-qty {
        margin-top: 12px;
        padding-top: 15px;
        border-top: 1px dashed #cbd5e1;
        background: #f8fafc;
        border-radius: 8px;
        padding: 12px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    #catalogTable tbody td.col-qty::before { 
        content: "Добавить в резерв:"; 
        font-weight: 700; 
        color: #1d1d1f; 
    }
    

    /* Увеличиваем кнопки для удобного нажатия пальцем */
    .qty-wrapper { height: 38px; border-color: #94a3b8; }
    .qty-btn { width: 38px; font-size: 18px; }
    .qty-input { width: 50px; font-size: 15px; }
    /* Растягиваем внутренние блоки и убираем отступы слева */
    /* 1. Разрешаем блоку с менеджером переносить элементы на новые строки */
    .micro-bar .mb-section {
        flex-wrap: wrap !important;
        width: 100%;
        margin-left: 0 !important;
    }

    /* 2. Возвращаем кнопкам нормальный горизонтальный вид */
    .mb-btn, .nav-btn, .logout-btn, .tg-btn {
        white-space: nowrap !important; /* Запрещаем перенос текста внутри самой кнопки */
        word-break: normal !important;  /* Отменяем перенос по буквам */
    }

    /* 3. Даем кнопке Telegram отступ, чтобы она красиво смотрелась, когда спрыгнет вниз */
    .tg-btn {
        margin-top: 8px;
        margin-bottom: 4px;
    }

    /* 2. Панель вкладок и корзина: разрешаем перенос на новые строки */
    .nav-tabs {
        flex-wrap: wrap;
        border-bottom: none;
        gap: 8px;
    }
    
    /* Кнопки меню тянутся по ширине экрана */
    .nav-btn {
        flex: 1 1 calc(50% - 10px); /* По 2 кнопки в ряд */
        text-align: center;
        padding: 8px 5px;
    }
    
    /* Блок с Корзиной, Обновлением и Выходом спускаем вниз */
    .nav-tabs > div {
        margin-left: 0 !important;
        width: 100%;
        display: flex;
        flex-direction: column; /* Ставим друг под другом */
        gap: 10px !important;
        margin-top: 10px;
    }
    
    /* Корзину растягиваем на всю ширину для удобного нажатия пальцем */
    .mb-cart {
        width: 100%;
        justify-content: space-between !important;
        padding: 10px !important;
    }
    
    .logout-btn {
        width: 100%;
        margin-top: 5px;
    }

    /* 3. Модальные окна (Кабинет, Корзина) делаем на весь экран */
    .modal-content {
        width: 95% !important;
        padding: 20px !important;
        margin: 10% auto !important;
    }
    
    /* 4. Поиск делаем компактнее */
    .search-box {
        padding: 10px 15px 10px 35px;
        background-position: 10px center;
    }
    /* =======================================================
       ЖЕСТКИЙ КОНТРОЛЬ ШИРИНЫ И ПЕРЕНОСОВ (ВОЗВРАЩАЕМ!)
       ======================================================= */
    
    /* 1. Запрещаем длинным названиям и ссылкам раздвигать экран */
    #catalogTable tbody td,
    #catalogTable tbody td.col-name,
    #catalogTable tbody td a {
        white-space: normal !important;      /* Разрешаем перенос текста на новые строки */
        word-break: break-word !important;   /* Переносим длинные слова по слогам/буквам */
        overflow-wrap: break-word !important;
        max-width: 100%;
    }

    /* 2. Запрещаем карточке товара быть шире экрана телефона */
    #catalogTable tbody tr {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden; /* Отрезает любые пиксели, которые пытаются вылезти */
    }

    /* 3. Фикс для строк с Артикулом и Ценой (если текст справа слишком длинный) */
    #catalogTable tbody td {
        flex-wrap: wrap; 
        gap: 5px; 
    }

    /* 4. Защита для самого контейнера с карточками */
    .main-content {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
}

/* =======================================================
   МОДУЛЬ "РЕГИСТРАЦИЯ" И "ВОССТАНОВЛЕНИЕ"
   ======================================================= */

/* 1. Сама карточка */
.module-auth-box {
    max-width: 560px;
    padding: 20px 45px;
    border-radius: 20px;
    background: #ffffff;
    transform: translateY(-25px);
}

/* 2. Заголовок (слово "Регистрация" или "Восстановление") */
.module-auth-box h2 {
     
    font-size: 39px;
    font-weight: 620;
    color: #333336; /* Твой цвет работает! */
    margin: 0 0 20px 0;
}

/* 3. Обертка формы (убираем отступы) */
.module-auth-box .auth-form {
    margin: 0;
    padding: 0;
}

/* 4. Поля ввода (когда клиент пишет текст) */
.module-auth-box .login-input {
     
    font-size: 17px;         /* <-- Точный размер шрифта с экрана входа */
    font-weight: 400;
    color: #86868b;          /* <-- Цвет текста с экрана входа */
    padding: 14px 16px;      /* <-- 14px дает точно такую же толщину (высоту) поля. Слева 16px, так как тут нет иконок */
    border: 1px solid #d2d2d7;
    border-radius: 12px;     /* <-- Точное скругление углов с экрана входа */
    background: #fbfbfd;
    margin-bottom: 20px;
    outline: none;
    box-sizing: border-box;
}

/* Эффект свечения при клике (копируем с экрана входа) */
.module-auth-box .login-input:focus {
    border-color: #86868b;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(134, 134, 139, 0.1);
}

/* =======================================================
   УНИВЕРСАЛЬНЫЙ СТИЛЬ ДЛЯ ВСЕХ ПОДСКАЗОК ВО ВСЕХ ОКНАХ
   ======================================================= */
.modern-form input::placeholder,
.module-auth-box .login-input::placeholder {
    font-size: 18px !important;   /* <-- Размер шрифта подсказки (можешь поменять на 16px, если нужно крупнее) */
    font-weight: 400 !important;  /* <-- Толщина букв (400 - обычная, 500 - чуть жирнее) */
    color: #86868b !important;    /* <-- Серый цвет */
    opacity: 1 !important;        /* <-- Жестко отключаем браузерную полупрозрачность */
}

/* 6. Кнопки "СОЗДАТЬ АККАУНТ" и "Отправить запрос" */
.module-auth-box .btn-modern,
.module-auth-box .btn {
      /* Точный шрифт с экрана входа */
    font-size: 16px;      /* Тот же размер текста */
    font-weight: 500;     /* Сделали буквы чуть тоньше (было 600), как на кнопке Войти */
    color: #ffffff;
    background: #1d1d1f;
    padding: 16px;        /* Сделали саму кнопку такой же по высоте (было 14px) */
    border-radius: 12px;  /* Точное скругление (было 10px) */
    width: 100%;
    margin-top: 10px;
    border: none;
    cursor: pointer;
    transition: 0.2s;
}

.module-auth-box .btn-modern:hover,
.module-auth-box .btn:hover {
    background: #1d1e1fec; /* Тот же эффект при наведении, что и на главном экране */
}

/* 7. Нижний текст ("УЖЕ ЕСТЬ АККАУНТ?") */
.module-auth-box .auth-footer-text {
     
    font-size: 16px;
    color: #86868b; /* Серый цвет обычного текста */
    text-align: center;
    margin-top: 18px;
    margin-bottom: 28px;
}

/* 8. Ссылка ("ВОЙТИ") в нижнем тексте */
.module-auth-box .auth-footer-text a {
     
    color: #86868b; /* Цвет ссылки */
    font-weight: 400;
    text-decoration: none; /* Убирает подчеркивание */
}
/* 9. Текст-описание в окне восстановления пароля */
.module-auth-box .auth-description {
     
    font-size: 15px;              /* Если между словами будут слишком большие дырки, уменьши до 12px или 13px */
    color: #86868b;
    font-weight: 600;
    margin: 0 0 20px 0;
    padding-top: 25px;
    line-height: 1.4;
    text-align: justify;          /* Растягивает текст по ширине */
    text-align-last: justify;     /* Заставляет единственную строку растянуться от края до края */
    width: 100%;
}
#registerBox .modern-header, 
#forgotBox .modern-header {
    margin-bottom: 50px;
    padding-top: 10px;
}

@media (min-width: 901px) {
    /* 1. Жестко блокируем прокрутку страницы браузером */
    body, html {
        overflow: hidden !important;
        height: 100vh !important;
        margin: 0 !important;
    }

    /* 2. ПЕРЕБИВАЕМ скрипт: заставляем портал быть Flex-колонкой на высоту окна */
    #portalSection {
        display: flex !important; 
        flex-direction: column;
        height: 100vh !important;
    }

    /* 3. Каталог занимает ровно оставшееся место и СТРОГО обрезает выпирающее */
    .catalog-layout { 
        flex: 1; 
        min-height: 0; 
        height: 100% !important; 
        overflow: hidden !important; 
        display: flex; 
        gap: 20px; 
        align-items: stretch !important;
    }

    /* 4. Боковая панель: 100% высоты оставшегося места, скролл только внутри */
    .sidebar { 
        height: 100% !important; 
        overflow-y: auto;
    }

    /* 5. Правая часть (поиск + таблица) */
    .main-content { 
        flex: 1; 
        min-width: 0; 
        height: 100% !important; 
        display: flex !important;
        flex-direction: column;
    }

    /* 6. Таблица скроллится внутри себя по обеим осям */
    .table-responsive { 
        flex: 1; 
        min-height: 0;
        max-height: 75vh; /* Высота видимой части (подстрой под свой дизайн) */
        overflow-y: auto;
        position: relative;
        overflow: auto !important; 
    }
    
    /* Фиксируем шапку таблицы */
    .table-responsive thead th {
        position: sticky;
        top: 0;
        z-index: 10;
        background: #f8fafc; /* Цвет фона шапки, чтобы текст не просвечивал */
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
    /* 7. Защищаем футер от сжатия и прибиваем к низу */
    #portalSection > div:last-child {
        flex-shrink: 0 !important; 
        padding: 8px 10px !important;
        margin: 0 !important;
        border-top: 1px solid #e2e8f0; /* Легкая полоска над футером для красоты */
    }
    /* --- ДЕЛАЕМ ТАБЛИЦУ СТРОГО ПО ШИРИНЕ ЭКРАНА --- */
    
    /* 1. Заставляем таблицу слушаться ширины контейнера */
    #catalogTable {
        table-layout: fixed !important;
        width: 100% !important;
    }

    /* 2. Разрешаем длинному тексту (кодам, артикулам) переноситься на новые строки */
    #catalogTable th, 
    #catalogTable td {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    /* 3. Убиваем старое ограничение, которое распирало колонку с названием */
    .col-name { 
        min-width: 0 !important; 
    }

    /* 4. Идеальные пропорции колонок в процентах */
    #th-code { width: 9% !important; }
    #th-art { width: 13% !important; }
    #th-name { width: 35% !important; }   /* Забирает максимум места */
    #th-war { width: 7% !important; }
    #th-price { width: 11% !important; }
    #th-stock { width: 10% !important; }
    #th-qty { width: 15% !important; }    /* Нужно место под кнопки + и - */

    /* 5. Учитываем узкую колонку с галочками (если зашел руководитель) */
    .th-cat-chk { width: 40px !important; }
}
/* ========================================= */
/* НОВАЯ ШАПКА B2B ПОРТАЛА                   */
/* ========================================= */
.b2b-app-header {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px -2px rgba(0,0,0,0.05), 0 0 3px rgba(0,0,0,0.02);
    padding: 5px 10px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
    max-width: 100%; 
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
}

.brand-section { display: flex; flex: 0 0 auto; min-width: max-content; align-items: center; gap: 10px; }
.brand-logo { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; }
.nav-tabs-left { display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; min-width: 0; }

.logo-placeholder {
    width: 40px; height: 40px;
    background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    color: white; font-weight: bold; font-size: 18px;
}

.brand-info { display: flex; flex-direction: column; gap: 6px; }

/* Стилизуем текст, который вставляет app.js */
#dealerWelcome { font-size: 14px; font-weight: 500; color: #64748b; }
#dealerWelcome span[style*="#0f172a"] { font-size: 18px !important; color: #0f172a !important; }

.user-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500;}
.discount-badge { color: #080808; padding: 3px 8px; border-radius: 6px; font-weight: 600; font-size: 12px; }

.utils-section { display: flex; flex: 1 1 auto; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; min-width: 0; }

.manager-card {
    display: flex; align-items: center; gap: 10px;
    background: #f1f5f9; padding: 6px 12px; border-radius: 10px; font-size: 13px;
    min-width: 0; overflow: hidden; white-space: nowrap;
}
.manager-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: #1e293b; }
.manager-phone { color: #64748b; text-decoration: none; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.modern-tg-btn {
    background: #0088CC; color: white; border: none; border-radius: 6px;
    width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none;
}
.modern-tg-btn:hover { background: #0284c7; }

.btn-outline {
    background: white; border: 1px solid #cbd5e1; color: #334155;
    padding: 6px 10px; border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer; transition: 0.2s; font-family: inherit;
}
.btn-outline:hover { background: #f8fafc; border-color: #94a3b8; }

.header-bottom { display: flex; justify-content: space-between; align-items: center; }

.modern-nav-tabs { display: flex; gap: 20px; }
.modern-tab {
    font-size: 13px; font-weight: 600; color: #64748b; cursor: pointer;
    padding: 6px 10px; position: relative; transition: 0.2s; border: none; background: transparent; font-family: inherit;
}
.modern-tab:hover { color: #0f172a; }
.modern-tab.active { 
    color: #0f172a !important; /* Жестко задаем цвет текста */
    background: transparent !important; /* Убиваем старый темный фон! */
    box-shadow: none !important; /* Убираем старую тень */
}
.modern-tab.active::after {
    content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 3px;
    background: #1e293b; border-radius: 3px;
}

.stock-legend { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #64748b; font-weight: 500; }
.stock-pill { background: #f1f5f9; padding: 4px 8px; border-radius: 6px; color: #334155; font-weight: 600;}

.action-section { display: flex; align-items: center; gap: 15px; }

.cart-block {
    display: flex; align-items: center; gap: 10px; width: auto; background: transparent; padding: 0; border: 0; cursor: pointer;
}
.cart-block:hover { background: transparent; }
.cart-label { display: flex; flex-direction: column; white-space: nowrap; }
.cart-label small { color: #7b8795; font-size: 11px; font-weight: 400; }
.cart-sum { font-weight: 700; font-size: 14px; color: #2a6419; white-space: nowrap; }
.cart-block .btn-primary { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; background: #2a6419; font-size: 13px; white-space: nowrap; }
.btn-primary {
    background: #283226; color: white; border: none; padding: 4px 10px; border-radius: 8px;
    font-weight: 700; font-size: 14px; cursor: pointer; transition: 0.2s; font-family: inherit;
}
.btn-primary:hover { background: #15803d; box-shadow: 0 4px 10px rgba(22, 163, 74, 0.2); }

.btn-ghost-danger {
    background: transparent; color: #ef4444; border: none; font-weight: 600; font-size: 13px; cursor: pointer; padding: 6px 10px; font-family: inherit; transition: 0.2s;
}
.btn-ghost-danger:hover { background: #fef2f2; border-radius: 8px; }

/* Мобильная адаптация шапки */
@media (max-width: 1280px) {
    .nav-tabs-left { order: 3; flex: 1 1 100%; }
}
@media (max-width: 900px) {
    .header-top, .header-bottom { flex-direction: column; align-items: flex-start; gap: 15px; }
    .nav-tabs-left { width: 100%; justify-content: flex-start; }
    .utils-section { flex-wrap: wrap; width: 100%; }
    .modern-nav-tabs { flex-wrap: wrap; overflow-x: auto; width: 100%; gap: 10px; }
    .action-section { width: 100%; flex-wrap: wrap; }
    .cart-block { width: auto; }
    .stock-legend { display: none; /* Прячем легенду звездочек на мобилках, чтобы экономить место */ }
}
@media (max-width: 720px) {
    .cart-label { display: none; }
    .cart-block .btn-primary { justify-content: center; width: 36px; min-width: 36px; padding: 0; font-size: 0; }
}
/* ========================================= */
/* ПЛАВНОЕ ПОЯВЛЕНИЕ ВКЛАДОК                 */
/* ========================================= */
@keyframes fadeInStatic {
    from { opacity: 0; }
    to { opacity: 1; }
}

#viewCatalog, 
#viewOrders, 
#viewConfigurator {
    animation: fadeInStatic 0.3s ease-in-out forwards;
    min-height: 60vh; /* Держим "распорку", чтобы интерфейс не прыгал при загрузке */
}
/* СТИЛИ ДЛЯ ПЕЧАТИ ДОКУМЕНТОВ */
@media print {
    body > *:not(#printArea) { display: none !important; }
    #printArea { display: block !important; width: 100%; }
    @page { margin: 1.5cm; }
}
/* Настройки для браузеров на базе WebKit (Chrome, Edge, Opera, Safari) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.4);
}

/* Настройки для браузера Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
#catalogTable {
    table-layout: auto !important;
    width: 100%;
}