/* nastr-panel.css — вкладка «Настройки». Заскоуплен под #tab-settings.
 *
 * ⚠️ ЗДЕСЬ ТОЛЬКО СВОЁ, А НЕ ВИД САМИХ НАСТРОЕК. Правила .user-settings__*, .section-head, .section-desc
 *    живут в app.css, панель разделов — в settings-nav.css, и оба БЕЗ скоупа: settings-nav.css делит вид
 *    панели разделов со standalone-страницами партнёрского кабинета, а app.css одевает те же контролы в чате
 *    и на форме заявки. Затащить их сюда значило бы либо порвать партнёрские страницы, либо завести вторую
 *    копию тех же значений. Переезд их не задел — сверено замером: расхождений ноль.
 *
 * ⚠️ КОЛОНКИ ЗДЕСЬ БОЛЬШЕ НЕТ, И ЭТО ИСПРАВЛЕНИЕ. Заводя раздел, я написал ему свою .wrap на 720px — и
 *    получил скачок ширины при переходе из «Клиентов» и «Заявок», где она 960. Довода у 720 не было:
 *    я взял число у «Уведомлений», где оно само приехало из инлайн-стиля их отдельной страницы. Колонка
 *    теперь одна на все разделы и лежит в wrap.css; повторить ошибку негде.
 */

/* Заглушка до первой отрисовки: настройки приезжают запросом, и пустой экран в это время выглядел бы
   поломкой. Тот же .empty-state, что в чате, — класс общий (app.css), здесь только отступ. */
#tab-settings #nastrRoot > .empty-state { padding: 24px 2px; }

/* Персональные настройки сотрудника занимают доступную ширину рабочей области shell. */
#tab-settings .wrap--employee-settings { max-width: none; }

/* Общая панель канала становится самостоятельным экраном: её карточки не вкладываются в белую карточку раздела. */
#tab-settings .user-settings__panel[data-settings-panel="notifications"] {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
#tab-settings .user-settings__panel[data-settings-panel="notifications"] > .section-head { margin-bottom: 12px; }

/* Экран каналов следует виду рабочих списков «Заявки» и «Клиенты»: общий фон, заголовок раздела и
   самостоятельные белые карточки. Убираем внешний слой .user-settings__panel, чтобы карточки не
   оказывались вложены в ещё одну большую карточку. */
#tab-settings .employee-notification-settings {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
#tab-settings .employee-notification-settings__header { margin: 8px 0 14px; }
#tab-settings .employee-notification-settings__header .section-head { margin: 0; font-size: 18px; font-weight: 500; }
#tab-settings .employee-notification-settings__header .section-desc { max-width: 760px; margin: 2px 0 0; font-size: 13px; }
#tab-settings .notification-channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#tab-settings .notification-channel,
#tab-settings .notification-preference {
    min-width: 0;
    padding: 16px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(15,23,42,.10), 0 1px 2px rgba(15,23,42,.06);
}
#tab-settings .notification-channel { display: flex; flex-direction: column; }
#tab-settings .notification-channel__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
#tab-settings .notification-channel__icon { display: inline-flex; flex: 0 0 36px; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 10px; background: #eef2ff; color: var(--primary); font-size: 12px; font-weight: 800; }
#tab-settings .notification-channel__heading { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 2px; }
#tab-settings .notification-channel__heading h4 { margin: 0; color: var(--text); font-size: 15px; font-weight: 600; }
#tab-settings .notification-channel__state { color: var(--muted); font-size: 12px; line-height: 1.4; }
#tab-settings .notification-channel__state.is-connected { color: #15803d; font-weight: 600; }
#tab-settings .notification-channel__state.is-warning { color: #a16207; }
#tab-settings .notification-channel__select { display: flex !important; align-items: flex-start; gap: 9px !important; margin: 0 !important; color: var(--text) !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.45; }
#tab-settings .notification-channel__select input[type="checkbox"],
#tab-settings .notification-preference__select input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--primary); }
#tab-settings .notification-channel__help { margin: 8px 0 0 27px; color: var(--muted); font-size: 13px; line-height: 1.5; }
#tab-settings .notification-channel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: auto 0 0 27px; padding-top: 14px; }
#tab-settings .notification-channel__actions .btn--secondary,
#tab-settings .notification-channel__actions .notification-link { min-height: 38px; }
#tab-settings .notification-link { display: inline-flex; align-items: center; color: var(--primary); font-size: 13px; font-weight: 600; }
#tab-settings .notification-channel__status { margin: 8px 0 0 27px; color: var(--muted); font-size: 12px; line-height: 1.5; }
#tab-settings .notification-preference { margin-top: 10px; }
#tab-settings .notification-preference__title { margin: 0 0 4px; color: var(--text); font-size: 15px; font-weight: 600; }
#tab-settings .notification-preference__desc { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.5; }
#tab-settings .notification-preference__select { display: flex !important; align-items: flex-start; gap: 9px !important; margin: 0 !important; color: var(--text) !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.45; }
#tab-settings .notification-preference__fallback { margin: 8px 0 0 27px; color: var(--muted); font-size: 13px; line-height: 1.5; }
#tab-settings .employee-notification-settings__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
#tab-settings .employee-notification-settings__footer .user-settings__buttons { margin: 0; }
#tab-settings .employee-notification-settings__footer #userSettingsStatus { flex: 1 1 240px; margin: 0; }
#tab-settings .notification-channel__actions .btn { padding: 8px 12px; font-size: 13px; }
#tab-settings .notification-window { margin: 10px 0 14px; }
#tab-settings .notification-window .user-settings__grid { margin-top: 8px; }
#tab-settings .notification-channel-settings { margin-top: 14px; }
#tab-settings .notification-channel-settings > .notification-preference__desc { max-width: 900px; }
#tab-settings .notification-channel-settings .notification-channels { margin-top: 10px; }
#tab-settings .notification-channel__icon--max { background: #ecfdf3; color: #15803d; }
#tab-settings .notification-channel-settings .notification-channel__state { min-height: 17px; }
#tab-settings .notification-channel-settings .notification-channel__actions button:disabled { opacity: .55; cursor: not-allowed; }

/* Пункт меню «Настройки» открывает тот же правый drawer-паттерн, что и карточка клиента.
   Сам tab остаётся поверх прежнего раздела, поэтому закрытие возвращает человека туда же. */
#tab-settings.settings-modal-open {
    --settings-side-offset: 0px;
    position: fixed;
    z-index: 9500;
    inset: 0;
    display: flex !important;
    justify-content: flex-end;
    overflow: hidden;
    background: transparent;
    transition: background-color .22s ease-in;
}
#tab-settings.settings-modal-open .wrap {
    box-sizing: border-box;
    width: calc(100% - var(--settings-side-offset) - clamp(24px, 3vw, 48px));
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 24px clamp(18px, 4vw, 56px) 36px;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--bg, #f4f6fb);
    box-shadow: -12px 0 32px rgba(15, 23, 42, .16);
    transform: translateX(100%);
    transition: transform .22s ease-in;
    -webkit-overflow-scrolling: touch;
}
#tab-settings.settings-modal-open.settings-modal-entered { background-color: rgba(15, 23, 42, .18); }
#tab-settings.settings-modal-open.settings-modal-entered .wrap { transform: translateX(0); }
#tab-settings.settings-modal-open.settings-modal-closing { pointer-events: none; background-color: transparent; transition: background-color .22s ease-in; }
#tab-settings.settings-modal-open.settings-modal-closing .wrap { transform: translateX(100%); transition: transform .22s ease-in; }
#tab-settings .settings-modal-close {
    display: none;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--btn-radius, 10px);
    background: #fff;
    color: var(--muted);
    cursor: pointer;
}
#tab-settings .settings-modal-close:hover { border-color: var(--primary); color: var(--primary); }
#tab-settings.settings-modal-open .settings-modal-close { display: inline-flex; }
#tab-settings.settings-modal-open .navback { display: none !important; }
@media (min-width: 1024px) {
    body.side-nav-active #tab-settings.settings-modal-open { --settings-side-offset: 248px; }
    html.side-collapsed body.side-nav-active #tab-settings.settings-modal-open { --settings-side-offset: 88px; }
}
@media (max-width: 1023px) {
    #tab-settings.settings-modal-open .wrap { width: calc(100% - 18px); padding: 16px 14px 28px; }
    #tab-settings.settings-modal-open .sec-head { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
    #tab-settings.settings-modal-open,
    #tab-settings.settings-modal-open .wrap,
    #tab-settings.settings-modal-closing,
    #tab-settings.settings-modal-closing .wrap { transition: none !important; }
}

@media (max-width: 760px) {
    #tab-settings .notification-channels { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
    #tab-settings .employee-notification-settings__header { margin-top: 4px; }
    #tab-settings .notification-channel, #tab-settings .notification-preference { padding: 14px; }
    #tab-settings .notification-channel__help, #tab-settings .notification-channel__actions,
    #tab-settings .notification-channel__status, #tab-settings .notification-preference__fallback { margin-left: 0; }
}

/* ══════════════════════ КОРЗИНА (раздел настроек) ══════════════════════
   Оформление заскоуплено под #tab-settings, как и весь файл: те же классы вне настроек ничего не значат.
   Значения берутся токенами (--border, --muted, --primary, --danger) — своих цветов раздел не заводит. */
#tab-settings .trash-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 10px; }
/* ⚠️ РАДИУС ТОКЕНОМ, А НЕ ПИЛЮЛЕЙ. Соблазн сделать чип-фильтр круглым велик, но чип НАЖИМАЕТСЯ и меняет
   экран — то есть кнопка с текстом, и радиус у неё кнопочный. Пилюля в этом проекте — язык бейджей-меток,
   которые ничего не делают (довод в radius-check.js). Поймано сторожем радиусов на первом же прогоне. */
#tab-settings .trash-tab { border: 1px solid var(--border); background: var(--card, #fff); border-radius: var(--btn-radius);
                           padding: 6px 12px; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; }
#tab-settings .trash-tab:hover { border-color: var(--primary); color: var(--primary-ink, var(--primary)); }
#tab-settings .trash-tab.is-active { border-color: var(--primary); color: var(--primary-ink, var(--primary)); background: var(--primary-soft, #eef2ff); }
#tab-settings .trash-tab__n { font-weight: 600; }

/* Панель выбора: появляется только когда выбрано хоть что-то — пустая полоса занимала бы место молча. */
#tab-settings .trash-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
                           background: var(--primary-soft, #eef2ff); border: 1px solid var(--primary); border-radius: 10px;
                           padding: 8px 12px; margin-bottom: 10px; font-size: 13px; }
#tab-settings .trash-bar__btn { margin-left: auto; }
#tab-settings .trash-bar__link { border: 0; background: none; padding: 0; font: inherit; font-size: 13px;
                                 color: var(--muted); cursor: pointer; text-decoration: underline; }

#tab-settings .trash-list { display: flex; flex-direction: column; gap: 6px; }
#tab-settings .trash-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border);
                           border-radius: 10px; padding: 10px 12px; cursor: pointer; }
#tab-settings .trash-row:hover { border-color: var(--primary); }
/* Срок вышел — запись ждёт ближайшей очистки. Отмечаем полосой слева, а не красным текстом: это состояние,
   а не ошибка человека, и кричать на него незачем. */
#tab-settings .trash-row--due { border-left: 3px solid var(--danger); }
/* ⚠️ ГАЛОЧКА — СВОЙ ЭЛЕМЕНТ, А НЕ ПОЛЕ ФОРМЫ. Пока здесь стоял <input type=checkbox>, он попадал под общее
   правило раздела (app.css: .user-settings input { width: 100% }) и на широком экране вырастал до 757 px,
   съедая строку целиком. Свой класс чужих правил не наследует; вид и размер те же, что у галочек в списках
   заявок и справочника — приём в проекте один. */
#tab-settings .trash-selbox { flex: 0 0 auto; width: 20px; height: 20px; border: 1.5px solid var(--border);
                              border-radius: 6px; display: inline-flex; align-items: center;
                              justify-content: center; font-size: 13px; line-height: 1;
                              color: #fff; background: var(--card, #fff); cursor: pointer; }
#tab-settings .trash-selbox:hover { border-color: var(--primary); }
#tab-settings .trash-selbox.is-on { background: var(--primary); border-color: var(--primary); }
#tab-settings .trash-row__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
#tab-settings .trash-row__title { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tab-settings .trash-row__meta { font-size: 12px; color: var(--muted); }
#tab-settings .trash-row__act { border: 1px solid var(--border); background: var(--card, #fff); border-radius: var(--btn-radius);
                                padding: 5px 10px; font: inherit; font-size: 13px; color: var(--primary-ink, var(--primary)); cursor: pointer; }
#tab-settings .trash-row__act:hover { border-color: var(--primary); }
#tab-settings .trash-empty { padding: 22px 2px; color: var(--muted); font-size: 13px; }

/* «Очистить корзину» — сверху и отдельно от строк: действие про всю корзину, а не про выбранное. */
#tab-settings .trash-top { display: flex; justify-content: flex-end; margin: 4px 0 10px; }
/* ⚠️ ОПАСНЫЕ КНОПКИ КОРЗИНЫ КРАСИМ БУКВАМИ, А НЕ ЗАЛИВКОЙ. Заливка притягивает взгляд и нажимается
   первой; здесь же оба действия необратимы, и выделять их зазывно — ровно наоборот тому, что нужно.
   Цвет — токен --danger, тот же, что у «Отбросить» в очереди. */
#tab-settings .trash-top__empty { color: var(--danger-ink); }
#tab-settings .trash-row__act--danger { color: var(--danger-ink); }
#tab-settings .trash-row__act--danger:hover { border-color: var(--danger); }
/* Две кнопки в строке — им нужен зазор, иначе «Вернуть» и «Удалить» слипаются в одно пятно. */
#tab-settings .trash-row { gap: 10px; }