/* ========================================================================== */
/* ПОДСКАЗКА: --bg-demand = фон панели «Желания»; --bg-offer = фон панели «Предложения». */
/* --card-bg = общий фон карточек объявлений, полей и некоторых окон. */
/* ========================================================================== */
/* ==========================================================================
   1. Базовые настройки
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* */
:root {
    /* ВАЖНО: здесь находятся основные цвета проекта. Меняй значения справа от двоеточия. */
    --bg-body: #f7f9fc;
    --text-color: #2d3748;
    /* ↑ Фон ВСЕЙ панели «Желания» (элемент #demand). */
    --bg-demand: #1ce1d7; /* цвет левой панели*/
    /* ↑ Фон ВСЕЙ панели «Предложения» (элемент #offer). */
    --bg-offer: #36df66; /* цвет правой панели*/
    /* ↑ Общий фон КАРТОЧЕК объявлений (.card-item) в обеих панелях. */
    --card-bg: #ffffff;
    --card-border: #e2e8f0;
    --header-bg: #2b6cb0;
    --header-text: #ffffff;
    --divider-color: #cbd5e0;
    --input-border: #cbd5e0;
    --shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* В тёмной теме эти значения заменяют цвета из :root. */
body.dark-theme {
    --bg-body: #1a202c;
    --text-color: #e2e8f0;
    --bg-demand: #1e2a3a;
    --bg-offer: #1a2a24;
    --card-bg: #2d3748;
    --card-border: #4a5568;
    --header-bg: #1a365d;
    --header-text: #e2e8f0;
    --divider-color: #4a5568;
    --input-border: #4a5568;
    --shadow: 0 1px 4px rgba(0,0,0,0.3);
}

body {
    background-color: var(--bg-body);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    transition: background-color 0.3s, color 0.3s;
}

/* Здесь задаётся фон и общий вид ВЕРХНЕЙ ШАПКИ сайта. */
/* Шапка */
#top-header {
    background-color: var(--header-bg);
    color: var(--header-text);
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10;
}
/* Здесь размер текста «Сайт / Желаний / Предложений». */
/* Уменьшение заголовка и элементов шапки */
#top-header h1 {
    font-size: 0.975rem; /* было 1.3rem */
    font-weight: 600;
}

/* Здесь оформление самих кликабельных слов в шапке. */
/* Стили для слов-кнопок */
.header-ctrl {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    transition: opacity 0.2s;
}
.header-ctrl:hover { opacity: 0.7; }

/* Здесь размер кнопки переключения темы. */
/* Уменьшение кнопки темы */
#theme-toggle {
    font-size: 0.6rem !important; /* было 1.2rem */
    padding: 4px 8px !important; /* уменьшено в 2 раза */
}

/* Здесь размер текста учётной записи и кнопок авторизации. */
/* Уменьшение шрифта в панели авторизации */
#auth-controls, .user-badge {
    font-size: 0.75rem; /* пропорциональное уменьшение */
}
#auth-controls button {
    padding: 4px 8px;
    font-size: 0.75rem;
}
#auth-controls button { margin-left: 8px; }

/* Контейнер, внутри которого находятся обе панели объявления. */
/* Доска */
#board-container {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* Общие размеры и поведение обеих колонок. */
.board-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px;
    overflow-y: auto;
    min-width: 280px;
}

/* Отдельно: здесь задаётся фон каждой панели. */
/* #demand = «Желания»; #offer = «Предложения». */
#demand { background-color: var(--bg-demand); border-right: 1px solid var(--card-border); }
#offer { background-color: var(--bg-offer); }
.board-column h2 {
    font-size: 1.1rem;
    text-align: center;
    margin-bottom: 12px;
    letter-spacing: 1px;
    color: var(--text-color);
    text-transform: uppercase;
}

/* Поисковые поля внутри каждой панели. */
/* Поиск */
.search-box-three {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
    width: 100%;
}
.search-box-three input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    font-size: 0.85rem;
    outline: none;
    background: var(--card-bg);
    color: var(--text-color);
}
.search-box-three input:focus { border-color: #3182ce; }

.autocomplete-wrap {
    position: relative;
    width: 100%;
}

.autocomplete-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: #a0aec0;
    font-size: 1.2rem;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    z-index: 2;
}

#item-nom-wrap .autocomplete-clear {
    top: 19px; /* Фиксируем крестик относительно поля товара, а не высоты списка подсказок */
    transform: translateY(-50%); /* Центрируем крестик по вертикали внутри поля */
}

#char-search-wrap .autocomplete-clear {
    top: 19px; /* Фиксируем крестик относительно поля характеристик */
    transform: translateY(-50%); /* Центрируем крестик по вертикали внутри поля */
}

.autocomplete-clear:hover {
    color: var(--text-color);
}

.input-clear-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.clear-input-btn {
    position: absolute;
    right: 8px;
    cursor: pointer;
    font-size: 1.1rem;
    color: #a0aec0;
    user-select: none;
}
.clear-input-btn:hover { color: var(--text-color); }

/* Цвет карточек объявлений в панели «Желания» */
#demand .card-item {
    background-color: #6eede7;
}

/* Цвет карточек объявлений в панели «Предложения» */
#offer .card-item {
    background-color: #9aefb2;
}

/* Вертикальный разделитель между двумя панелями. */
#divider {
    width: 8px;
    min-width: 8px;
    flex: 0 0 8px;
    background-color: var(--divider-color);
    cursor: col-resize;
    user-select: none;
    touch-action: none;
}
#divider:hover, #divider:active { background-color: #3182ce; }

/* КАРТОЧКИ ОБЪЯВЛЕНИЙ: общий стиль для карточек обеих панелей. */
/* Карточки (строго 3 строки) */
/* Чтобы изменить цвет карточек ТОЛЬКО в «Желаниях», используй отдельный селектор #demand .card-item. */
.card-item {
    background-color: var(--card-bg);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
    box-shadow: var(--shadow);
    border: 1px solid var(--card-border);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.own-item { border: 2px solid #3182ce !important; }
.own-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: #3182ce;
    color: white;
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: bold;
}

/* Первая строка карточки: название товара и примечание. */
/* Строка 1: Название + Примечание */
.card-line-1 {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 22px;
    font-size: 0.95rem;
    font-weight: 600;
    padding-right: 45px;
    gap: 2px;
    overflow: hidden;
}
#demand .card-title-chars { color: #010d1a; } /* цвет названия товара хочу */
#offer .card-title-chars { color: #010c07; } /* цвет названия товара могу */
.card-title-chars {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
}
.own-item .card-title-chars { cursor: pointer; }

/* Вторая строка карточки: статус, количество и цена. */
/* Строка 2: Статус + Остаток (+/-) + Цена */
.card-line-2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    min-height: 28px;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
}
.status-area { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.calendar-icon {
    font-size: 0.8rem;
    background: #feebc8;
    color: #7b341e;
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid #fbd38d;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
body.dark-theme .calendar-icon {
    background: #9c6a1e;
    border-color: #d69e2e;
    color: #feebc8;
}
.quantity-control-inline {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    margin: 0 auto;
}
.qty-btn {
    background: var(--bg-body);
    border: 1px solid var(--input-border);
    border-radius: 4px;
    width: 24px;
    height: 24px;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    color: var(--text-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.qty-btn:hover { background: var(--card-border); }
.qty-input {
    width: 50px;
    text-align: center;
    padding: 2px;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    background: var(--bg-body);
    color: var(--text-color);
    font-size: 0.82rem;
}
#demand .card-price { color: #00070d; font-weight: 700; } /* цена хочу */
#offer .card-price { color: #000804; font-weight: 700; } /* цена могу */
.card-price {
    font-size: 0.95rem;
    white-space: nowrap;
    margin-left: auto;
    flex: 0 0 auto;
}
body.dark-theme .card-price {
    color: #63b3ed;
}

/* Третья строка карточки: продавец/покупатель и дата/время. */
/* Строка 3: Продавец/Покупатель слева, Дата/Время справа */
.card-line-3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    border-top: 1px dashed var(--card-border);
    padding-top: 4px;
    margin-top: 2px;
}

.card-line-4 {
    font-size: 0.9rem;
    font-weight: 600;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-line-5 { /* Пятая строка карточки с будущей поставкой */
    display: flex; /* Элементы располагаются в одну строку */
    align-items: center; /* Выравнивание по вертикальному центру */
    gap: 5px; /* Расстояние между элементами строки */
    min-height: 26px; /* Минимальная высота строки */
    font-size: 0.95rem; /* Размер текста строки */
    font-weight: 600; /* Сделан шрифт выше */
    white-space: nowrap; /* Запрещаем перенос строки */
}

.expected-delivery-label { /* Подпись «Ожидается» */
    color: #7b341e; /* Цвет подписи */
    font-weight: 700; /* Жирный шрифт */
}

.expected-delivery-calendar { /* Пиктограмма календаря без цифры внутри */
    position: relative; /* Основа для декоративных элементов */
    display: inline-block; /* Отдельная пиктограмма */
    width: 15px; /* Ширина календаря */
    height: 13px; /* Высота календаря */
    border: 2px solid #7b341e; /* Контур календаря */
    border-radius: 2px; /* Небольшое скругление */
    box-sizing: border-box; /* Размер включает рамку */
}

.expected-delivery-calendar::before { /* Верхняя линия календаря */
    content: ''; /* Создаём декоративную линию */
    position: absolute; /* Расположение внутри календаря */
    left: -2px; /* Растягиваем до края рамки */
    right: -2px; /* Растягиваем до края рамки */
    top: 2px; /* Расположение линии */
    border-top: 2px solid #7b341e; /* Цвет линии */
}

.expected-delivery-calendar::after { /* Крепления календаря */
    content: '••'; /* Два крепления */
    position: absolute; /* Размещение внутри элемента */
    left: 2px; /* Положение креплений */
    top: -8px; /* Поднимаем над рамкой */
    font-size: 8px; /* Размер креплений */
    letter-spacing: 4px; /* Расстояние между креплениями */
    color: #7b341e; /* Цвет креплений */
}

.expected-delivery-date { /* Число даты поставки */
    color: #7b341e; /* Цвет даты */
    font-weight: 700; /* Жирная дата */
    min-width: 18px; /* Минимальная ширина */
    text-align: center; /* Центрируем число */
}

.expected-delivery-quantity { /* Количество ожидаемой поставки */
    color: #111111; /* Цвет количества */
    font-weight: 600; /* Полужирное количество */
    margin-left: 2px; /* Небольшой отступ после даты */
}

.expected-date-nav-group { /* Группа двух кнопок справа */
    display: flex; /* Кнопки располагаются рядом */
    align-items: center; /* Выравнивание по вертикали */
    gap: 8px; /* Расстояние между минусом и плюсом */
    margin-left: auto; /* Прижимаем пару кнопок к правому краю */
}

.expected-date-nav { /* Синие текстовые кнопки -  + */
    border: none; /* Убираем рамку */
    background: transparent; /* Убираем белый фон */
    padding: 0; /* Убираем лишние отступы */
    margin: 0; /* Убираем внешние отступы */
    color: #3182ce; /* Ярко-синий цвет */
    font-size: 1.5rem; /* Размер символа */
    font-weight: 995; /* Жирный символ */
    line-height: 1; /* Компактная высота */
    cursor: pointer; /* Показываем возможность нажатия */
}

.expected-date-nav:hover { /* Наведение на кнопку */
    color: #1a56a0; /* Более тёмный синий */
    text-decoration: underline; /* Подчёркиваем интерактивность */
}

#demand .card-line-4 {
    color: #000000;
}

#offer .card-line-4 {
    color: #000000;
}

.seller-info {
    font-weight: 600;
    color: #031026; /* цвет шрифта продавец в карточках*/
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.dark-theme .seller-info { color: #a0aec0; }
.timestamp-info {
    font-size: 0.72rem;
    color: #a0aec0;
    white-space: nowrap;
    margin-left: 8px;
}
#demand .timestamp-info { font-size: 0.72rem; color: #010b15; font-weight: 700; } /* цвет шрифта дата и время*/
#offer .timestamp-info { font-size: 0.72rem; color: #011109; font-weight: 700; }/* цвет шрифта дата и время*/

.btn-chat {
    background: none;
    border: none;
    font-size: 0.8rem;
    cursor: pointer;
    color: #3182ce;
    font-weight: 600;
    margin-left: 6px;
}
#demand .btn-chat { color: #01101f; } /* цвет шрифта Написать */
#offer .btn-chat { color: #021c0f; } /* цвет шрифта Написать */

/* Цветовые статусы объявлений. */
/* Статусы */
.status-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
}
/*.status-badge.green { background: #13f003; color: #022b04; }*/
#demand .status-badge.green { background: #57d9ed; color: #001009; }/* Запрос */
#offer .status-badge.green { background: #08f704; color: #01170d; } /* В наличии */
.status-badge.grey { background: #edf2f7; color: #4a5568; }
.status-badge.orange { background: #feebc8; color: #7b341e; }
body.dark-theme .status-badge.green { background: #2f855a; color: #c6f6d5; }
body.dark-theme .status-badge.grey { background: #4a5568; color: #e2e8f0; }
body.dark-theme .status-badge.orange { background: #9c6a1e; color: #feebc8; }

.error-msg { color: #e53e3e; font-size: 0.85rem; margin-top: 4px; }
.success-msg { color: #38a169; font-size: 0.85rem; margin-top: 4px; }

/* Модальные окна. */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: flex; justify-content: center; align-items: center;
    z-index: 1000;
}
.modal-content {
    background: var(--card-bg);
    color: var(--text-color);
    width: 90%;
    max-width: 440px;
    padding: 24px;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}
.modal-large { max-width: 650px; }
/* Чужая карточка предложения: мобильная двухколоночная таблица. */
.details-offer-modal {
    width: min(440px, calc(100vw - 16px)) !important;
    max-width: 440px !important;
    box-sizing: border-box;
    min-width: 0;
}

.details-info-grid {
    display: grid;
    grid-template-columns: 25% minmax(0, 1fr);
    column-gap: 8px;
    row-gap: 6px;
    align-items: start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.details-field-label,
.details-field-value {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.details-field-label {
    font-size: 0.68rem !important;
    line-height: 1.2;
    text-align: left;
    border-right: 1px solid #777;
    padding-right: 7px;
    white-space: normal;
    overflow-wrap: anywhere;
}

.details-field-value {
    font-size: 0.82rem;
    line-height: 1.25;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.details-field-label-strong {
    font-weight: 700;
}

.details-field-value-strong {
    font-weight: 700;
}

.details-field-value-expected {
    color: #d97706;
}
.offer-control-row { /* Общая строка управления в окне предложения */
    display: grid; /* Используем сетку для фиксированного расположения элементов */
    grid-template-columns: 42% 42% 16%; /* Название слева, центральная зона управления, свободное место справа */
    align-items: center; /* Выравниваем содержимое по вертикальному центру */
    width: 100%; /* Строка занимает всю ширину окна */
    min-height: 38px; /* Минимальная высота строки */
}

.offer-control-label { /* Название параметра слева */
    grid-column: 1; /* Название всегда находится в первой колонке */
    font-size: 0.9rem; /* Размер шрифта названия */
    font-weight: 600; /* Небольшое выделение названия */
    color: var(--text-color); /* Цвет названия */
    text-align: left; /* Название выравнивается строго по левому краю */
    padding-right: 8px; /* Небольшой зазор перед центральной зоной */
    white-space: nowrap; /* Название не переносится на вторую строку */
}

.offer-control-center { /* Центральная зона значений и кнопок */
    grid-column: 2; /* Центральная зона всегда находится во второй колонке */
    display: flex; /* Элементы располагаются в одну горизонтальную линию */
    align-items: center; /* Вертикально центрируем элементы */
    justify-content: center; /* Сам блок управления центрируем внутри своей колонки */
    gap: 2px; /* Расстояние между минусом, значением и плюсом */
    min-width: 0; /* Разрешаем сжатие на маленьком экране */
}

.offer-control-value { /* Значение для строки «Хотят купить» */
    min-width: 48px; /* Минимальная ширина значения */
    text-align: center; /* Число находится по центру своей зоны */
    font-size: 0.9rem; /* Размер шрифта значения */
    line-height: 24px; /* Высота строки значения */
}

.offer-control-input { /* Поле ввода значения */
    width: 72px; /* Ширина числового поля */
    min-width: 72px; /* Не даём полю слишком сильно сжаться */
    padding: 2px 4px; /* Внутренние отступы поля */
    text-align: center; /* Число находится по центру поля */
    font-size: 0.9rem; /* Размер шрифта числа */
}

.offer-control-btn { /* Кнопки минус и плюс */
    width: 22px; /* Ширина кнопки */
    min-width: 22px; /* Минимальная ширина кнопки */
    height: 24px; /* Высота кнопки */
    padding: 0; /* Убираем лишние внутренние отступы */
    border: 1px solid var(--input-border); /* Рамка кнопки */
    border-radius: 2px; /* Небольшое скругление */
    background: var(--bg-body); /* Фон кнопки */
    color: var(--text-color); /* Цвет символа кнопки */
    font-size: 0.95rem; /* Размер символа плюс или минус */
    line-height: 22px; /* Вертикальное положение символа */
    text-align: center; /* Символ располагается по центру кнопки */
    cursor: pointer; /* Показываем, что это кнопка */
}

.offer-control-btn:hover { /* Состояние кнопки при наведении */
    background: var(--card-border); /* Меняем фон при наведении */
}

.offer-time-input { /* Поле времени */
    width: 58px; /* Ширина поля времени */
    min-width: 58px; /* Минимальная ширина поля времени */
}

.offer-date-input { /* Поле даты */
    width: 135px; /* Ширина поля даты */
    min-width: 135px; /* Минимальная ширина поля даты */
}

.offer-control-label { /* Подпись слева */
    font-size: 0.9rem; /* Размер текста подписи */
    font-weight: 600; /* Небольшое выделение подписи */
    color: var(--text-color); /* Цвет текста подписи */
    text-align: left; /* Подпись выравнивается по левому краю */
    padding-right: 8px; /* Небольшой промежуток между подписью и управлением */
}

.offer-control-center { /* Центральная зона элементов управления */
    display: flex; /* Элементы управления располагаются в одну линию */
    align-items: center; /* Вертикальное выравнивание элементов */
    justify-content: center; /* Управляющий блок располагается по центру своей зоны */
    gap: 2px; /* Маленькое расстояние между кнопками и полем */
    min-width: 0; /* Разрешаем блоку корректно сжиматься на телефоне */
}

.cabinet-action-buttons { /* Блок нижних кнопок модального окна */
    display: flex; /* Кнопки располагаются через Flexbox */
    flex-direction: column; /* Каждая кнопка располагается на отдельной строке */
    align-items: flex-start; /* Все кнопки выравниваются по левому краю */
    gap: 6px; /* Вертикальное расстояние между кнопками */
    margin-top: 10px; /* Отступ блока кнопок сверху */
    padding-bottom: 10px; /* Нижнее свободное пространство под кнопками */
    width: 100%; /* Блок занимает всю ширину модального окна */
}
.close-btn {
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: 1.5rem;
    cursor: pointer;
    color: #a0aec0;
}
.close-btn:hover { color: var(--text-color); }

/* Формы и их поля. */
form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}
label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: -6px;
}
input, select, textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    font-size: 0.9rem;
    outline: none;
    background: var(--bg-body);
    color: var(--text-color);
}
input:focus, select:focus, textarea:focus { border-color: #3182ce; }

/* Общие кнопки интерфейса. */
.btn-primary, .btn-secondary, .btn-danger {
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}
.btn-primary { background: #3182ce; color: white; }
.btn-primary:hover { background: #2b6cb0; }
.btn-secondary { background: #e2e8f0; color: #4a5568; }
body.dark-theme .btn-secondary { background: #4a5568; color: #e2e8f0; }
.btn-danger { background: #e53e3e; color: white; }
.btn-link {
    background: none;
    border: none;
    color: #3182ce;
    cursor: pointer;
    font-size: 0.85rem;
    text-decoration: underline;
}

.tab-header {
    display: flex;
    border-bottom: 2px solid var(--card-border);
    margin-bottom: 16px;
}
.tab-btn {
    flex: 1;
    padding: 10px;
    background: none;
    border: none;
    font-size: 0.95rem;
    font-weight: 600;
    color: #718096;
    cursor: pointer;
}
.tab-btn.active { color: #3182ce; border-bottom: 2px solid #3182ce; margin-bottom: -2px; }

/* Выпадающий список характеристик. */
/* Мультиселект */
.multiselect-container { position: relative; }

/* ==========================================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ
   ========================================================================== */

@media (max-width: 768px) {
        .details-offer-modal {
        width: calc(100vw - 16px) !important;
        max-width: 440px !important;
        max-height: calc(100dvh - 16px);
        overflow-y: auto;
        overflow-x: hidden;
        padding: 8px !important;
    }

    .details-info-grid {
        grid-template-columns: 25% minmax(0, 1fr) !important;
        column-gap: 6px !important;
        row-gap: 5px !important;
    }

    .details-field-label {
        font-size: 0.64rem !important;
        padding-right: 5px !important;
    }

    .details-field-value {
        font-size: 0.78rem;
    }

    /* Используем всю доступную высоту мобильного браузера. */
    body {
        height: 100dvh;
    }

    /* На телефоне панели по умолчанию располагаются одна над другой. */
    #board-container {
        flex-direction: column;
        min-height: 0;
        width: 100%;
    }

    .board-column {
        flex: 1 1 50%;
        min-width: 0;
        min-height: 0;
        width: 100%;
        overflow-x: hidden;
    }

    /* Разделитель в портретном режиме становится горизонтальным. */
    #divider {
        width: 100%;
        height: 8px;
        min-height: 8px;
        flex: 0 0 8px;
        cursor: row-resize;
        touch-action: none;
    }

    /* Не даём шапке раздуваться на маленьком экране. */
    #top-header {
        padding: 8px 10px;
    }

    #top-header h1 {
        font-size: 0.8rem;
    }

    /* Кнопка справки ? — в два раза меньше. */
    #auth-controls button[title="Справка"] {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        padding: 0 !important;
        margin-left: 4px !important;
        margin-right: 0 !important;
        font-size: 0.65rem !important;
        line-height: 18px !important;
    }

    /*
    * В мобильном режиме поисковые поля панели
    * всегда располагаются в одну строку.
    */
    .search-box-three {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
    }

    .search-box-three > div {
        width: auto !important;
        flex: 1 1 0 !important;
        min-width: 0;
    }
}

/* ==========================================================================
   МОБИЛЬНЫЙ АЛЬБОМНЫЙ РЕЖИМ
   ========================================================================== */

@media (max-width: 768px) and (orientation: landscape) {

    /* В альбомной ориентации возвращаем две панели рядом. */
    #board-container {
        flex-direction: row;
    }

    .board-column {
        flex: 1 1 50%;
        width: auto;
        min-width: 0;
        min-height: 0;
    }

    /* Вертикальный разделитель между панелями. */
    #divider {
        width: 8px;
        min-width: 8px;
        height: 100%;
        min-height: 0;
        flex: 0 0 8px;
        cursor: col-resize;
    }

    /*
     * В альбомном режиме поисковые поля снова могут
     * располагаться в одну строку.
     */
    .search-box-three {
        flex-direction: row;
        align-items: center;
    }

    .search-box-three > div {
        width: auto !important;
        flex: 1 1 0 !important;
    }
}


/* Таблица списка желающих в чужом предложении. */

.product-needers-table-header,
.product-needers-table-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(42px, 0.7fr) minmax(88px, 1fr);
    align-items: center;
    column-gap: 5px;
    width: 100%;
    box-sizing: border-box;
}

.product-needers-table-header {
    min-height: 28px;
    padding: 4px 6px;
    border-bottom: 1px solid var(--card-border);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.15;
}

.product-needers-table-row {
    min-height: 30px;
    padding: 4px 6px;
    border-bottom: 1px solid rgba(122, 138, 153, 0.28);
    font-size: 0.78rem;
    line-height: 1.2;
}

.product-needers-table-row:last-child {
    border-bottom: none;
}

.product-needer-name {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #3182ce;
    font: inherit;
    text-align: left;
    cursor: pointer;
    overflow-wrap: anywhere;
}

.product-needers-table-header > span:not(:first-child),
.product-needers-table-row > span:not(:first-child) {
    text-align: center;
}

.product-needers-table-empty {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    text-align: center;
}

.product-needers-table-empty > span {
    text-align: center !important;
}

#product-needers-list {
    max-height: 145px;
    overflow-y: auto;
    overflow-x: hidden;
}

@media (max-width: 768px) {

    .product-needers-table-header,
    .product-needers-table-row {
        column-gap: 4px;
    }

    .product-needers-table-header {
        font-size: 0.62rem;
    }

    .product-needers-table-row {
        font-size: 0.74rem;
        min-height: 28px;
        padding: 4px;
    }
}


/* ============================================================
   ОТДЕЛЬНЫЕ РАЗМЕРЫ ПОЛЕЙ ОКНА ПРЕДЛОЖЕНИЯ
   ============================================================ */

#item-offer-quantity {
    width: 120px;
    min-width: 120px;
}

#item-incoming-quantity {
    width: 100px;
    min-width: 100px;
}

.offer-date-input {
    width: 155px;
    min-width: 155px;
}

.offer-time-input {
    width: 131px;
    min-width: 131px;
}


/* ============================================================
   АДАПТИВНОСТЬ ОКНА «ДОБАВИТЬ / РЕДАКТИРОВАТЬ»
   Только #cabinet-modal.
   ============================================================ */

#cabinet-modal > .modal-content {
    width: min(650px, calc(100vw - 16px));
    max-width: 650px;
    box-sizing: border-box;
}

#cabinet-modal .offer-control-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
}

#cabinet-modal .offer-control-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    padding-right: 8px;
}

#cabinet-modal .offer-control-center {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    width: auto;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
}

#cabinet-modal .offer-control-input {
    flex: 0 0 auto;
    box-sizing: border-box;
}


/* ============================================================
   МОБИЛЬНЫЙ РЕЖИМ
   ============================================================ */

@media (max-width: 480px) {

    #cabinet-modal > .modal-content {
        width: calc(100vw - 12px);
        max-width: none;
        padding: 12px;
    }

    /*
     * Текст всегда слева.
     * Группа «− / поле / +» всегда справа.
     */
    #cabinet-modal .offer-control-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    #cabinet-modal .offer-control-label {
        flex: 1 1 auto;
        min-width: 0;
        padding-right: 8px;
        font-size: 0.82rem;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #cabinet-modal .offer-control-center {
        flex: 0 0 auto;
        width: auto;
        justify-content: flex-end;
        overflow: visible;
    }

    /* Кнопки минус/плюс. */
    #cabinet-modal .offer-control-btn {
        flex: 0 0 22px;
        width: 22px;
        min-width: 22px;
        height: 24px;
    }

    /* «В наличии» и «Привезу ещё». */
    #cabinet-modal #item-offer-quantity {
        width: 68px;
        min-width: 68px;
    }

    #cabinet-modal #item-incoming-quantity {
        width: 68px;
        min-width: 68px;
    }

    /* Время. */
    #cabinet-modal .offer-time-input {
        width: 80px;
        min-width: 80px;
    }

    /* Дата. */
    #cabinet-modal .offer-date-input {
        width: 125px;
        min-width: 125px;
    }
}