/* ============================================================================
   Экран «Настройки» (Блок 13) — полка вкладок, карточка, поле, кнопка.
   ============================================================================

   ⚠️ ПОЧЕМУ ЗДЕСЬ ЦВЕТ УКАЗАН НА КАЖДОМ ЭЛЕМЕНТЕ, А НЕ НА РОДИТЕЛЕ.
   В site.css живут две мины:
       *  { color:#0D1017; font-size:14px; font-weight:400 }
       a  { color:#0D1017 !important }
   Первая означает, что НАСЛЕДОВАНИЯ ЦВЕТА И КЕГЛЯ В ЭТОМ ПРОЕКТЕ НЕТ: правило со
   звёздочкой попадает в каждый <span>, <i> и <p> напрямую и перебивает то, что
   пришло бы от родителя. Вторая — что любая ссылка чёрная, чем бы ни была по виду:
   синяя кнопка-ссылка без !important получится с чёрной подписью.
   Отсюда многословность ниже. Это не стилевой мусор, а обход известного дефекта.

   Второе правило: никаких эмодзи — только Bootstrap Icons (<i class="bi …">).
   ========================================================================= */

/* ── Заголовок экрана ───────────────────────────────────────────────────── */
/* Кегль и начертание те же, что у .h1sp в site.css (28/36, 700): заголовки разделов
   кабинета обязаны читаться как один заголовок, а не как пять разных. */
.st-h1 {
    margin: 6px 0 18px;
    color: #0d1017;
    font-size: 28px;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: -0.01em;
}
@media (max-width: 575px) {
    .st-h1 { font-size: 22px; line-height: 29px; margin-bottom: 14px; }
}

/* ── Полка вкладок ──────────────────────────────────────────────────────── */
.st-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 4px 0 20px;
    padding-bottom: 4px;
    overflow-x: auto;              /* на узком экране полка едет вбок, а не рвётся
                                      на две строки и не выдавливает содержимое */
    scrollbar-width: none;
}
.st-tabs::-webkit-scrollbar { display: none; }

.st-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: #f1f3f7;
    color: #6b7480 !important;     /* !important — против a{color !important} */
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.st-tab .bi { color: #98a1ad; font-size: 15px; }
.st-tab__label { color: inherit; font-size: 14px; font-weight: 500; }

.st-tab:hover { background: #e9edf3; color: #45484f !important; }
.st-tab:hover .bi { color: #6b7480; }

.st-tab--on {
    background: #ffffff;
    border-color: #e3e8ef;
    color: #0d1017 !important;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.st-tab--on .bi { color: #0d1017; }
.st-tab--on .st-tab__label { font-weight: 600; }

/* Метка «скоро» стоит на самой вкладке, а не за кликом: человек узнаёт, что раздела
   ещё нет, ДО перехода, а не после. */
.st-tab__soon {
    padding: 1px 6px;
    border-radius: 6px;
    background: #e4e8ee;
    color: #8a929e;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* ── Итог действия ──────────────────────────────────────────────────────── */
.st-flash {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
    padding: 13px 16px;
    border-radius: 12px;
    font-size: 14px;
}
.st-flash span { font-size: 14px; }
.st-flash .bi { font-size: 15px; line-height: 1.35; }
.st-flash--ok      { background: #eefaf1; border: 1px solid #cdecd7; }
.st-flash--ok span { color: #1d6b39; }
.st-flash--ok .bi  { color: #1fa663; }
.st-flash--err      { background: #fef1f3; border: 1px solid #f8d3da; }
.st-flash--err span { color: #97283a; }
.st-flash--err .bi  { color: #f23f5d; }

/* ── Карточка раздела ───────────────────────────────────────────────────── */
.st-card {
    display: block;
    margin-bottom: 20px;
    border: 1px solid #eef1f6;
    border-radius: 16px;
    background: #ffffff;
}
.st-card__head { padding: 22px 24px 0; }
.st-card__title {
    margin: 0 0 4px;
    color: #0d1017;
    font-size: 19px;
    font-weight: 700;
    line-height: 26px;
}
.st-card__sub {
    margin: 0;
    color: #697280;
    font-size: 13.5px;
    line-height: 20px;
    max-width: 720px;
}
.st-card__body { padding: 20px 24px 24px; }
.st-card__foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px 20px;
    border-top: 1px solid #f2f4f7;
}

/* ── Кнопки ─────────────────────────────────────────────────────────────── */
.st-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 42px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.st-btn--primary          { background: #0d6efd; color: #ffffff !important; }
.st-btn--primary .bi      { color: #ffffff; }
.st-btn--primary:hover    { background: #0b5ed7; color: #ffffff !important; }
/* Кнопка неактивна, пока нечего сохранять: активная всегда — предлагает сохранить
   то, чего не меняли, и человек не понимает, применилось что-нибудь или нет. */
.st-btn--primary:disabled,
.st-btn--primary[disabled] {
    background: #eef1f5;
    color: #a8afba !important;
    cursor: default;
}
.st-btn--ghost         { background: #ffffff; border-color: #e3e8ef; color: #45484f !important; }
.st-btn--ghost:hover   { background: #f5f7fa; color: #0d1017 !important; }

/* ── Поля ───────────────────────────────────────────────────────────────── */
.st-grid { display: grid; gap: 16px 20px; margin-top: 18px; }
.st-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.st-field { display: flex; flex-direction: column; min-width: 0; }
.st-label {
    margin-bottom: 6px;
    color: #45484f;
    font-size: 13px;
    font-weight: 500;
}
.st-input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #e7ebf1;
    border-radius: 10px;
    background: #fbfcfd;
    color: #0d1017;
    font-size: 14px;
}
.st-input::placeholder { color: #a4acb8; font-size: 14px; }
.st-input:focus {
    outline: none;
    border-color: #0d6efd;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, .12);
}
.st-input--bad { border-color: #f23f5d; background: #fffafb; }

/* Иконка внутри поля — подсказка о смысле поля, поэтому она приглушена и не кликается */
.st-input-wrap { position: relative; display: block; }
.st-input__icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #a4acb8;
    font-size: 14px;
    pointer-events: none;
}
.st-input--iconed { padding-left: 36px; }

.st-hint { margin: 6px 0 0; color: #8a929e; font-size: 12.5px; line-height: 17px; }
.st-err  { margin: 6px 0 0; color: #d92d4b; font-size: 12.5px; line-height: 17px; }

.st-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 18px 0 0;
    color: #697280;
    font-size: 13px;
    line-height: 19px;
}
.st-note .bi { color: #98a1ad; font-size: 14px; line-height: 19px; }

/* ── Аватар ─────────────────────────────────────────────────────────────── */
.st-avatar-row { display: flex; align-items: center; gap: 20px; }
.st-avatar {
    position: relative;
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.st-avatar__ini {
    color: #ffffff;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: .02em;
}
.st-avatar__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-avatar-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
/* Подпись и ошибка встают на свою строку под кнопками, а не в общий ряд с ними */
.st-avatar-acts .st-hint,
.st-avatar-acts .st-err { flex: 1 0 100%; margin-top: 0; }

/* ── Выбор юрлица ───────────────────────────────────────────────────────── */
.st-orgs { display: flex; flex-wrap: wrap; gap: 12px; }
.st-org {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 232px;
    padding: 13px 40px 13px 16px;
    border: 1px solid #eaeef3;
    border-radius: 12px;
    background: #fbfcfd;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.st-org:hover { border-color: #cfd8e3; background: #ffffff; }
.st-org__name { color: #6b7480; font-size: 14px; font-weight: 600; line-height: 19px; }
.st-org__inn  { color: #a4acb8; font-size: 12.5px; line-height: 17px; }
.st-org--on {
    border-color: #0d6efd;
    background: #f2f7ff;
}
.st-org--on .st-org__name { color: #0d1017; }
.st-org--on .st-org__inn  { color: #697280; }
.st-org__mark {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: #0d6efd;
    font-size: 16px;
}

/* ── Факты только на чтение (реквизиты, условия работы) ─────────────────── */
/* Не форма и не таблица. Форма обещала бы правку, которой здесь быть не может (данные
   в 1С), а таблица из двух колонок на шесть строк — это та же пара «подпись/значение»,
   только с лишними границами. */
.st-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 40px;
}
.st-facts__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    color: #0d1017;
    font-size: 14.5px;
    font-weight: 600;
}
.st-facts__title .bi { color: #98a1ad; font-size: 15px; }

.st-fact {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid #f4f6f9;
}
.st-fact:last-child { border-bottom: none; }
.st-fact__k { color: #8a929e; font-size: 13px; line-height: 20px; }
.st-fact__v { color: #0d1017; font-size: 13.5px; font-weight: 500; line-height: 20px; word-break: break-word; }
/* «Не указано» и «не выбран» — состояние данных, а не ошибка. Приглушены, но подписаны
   словами: пустое место читалось бы как «экран не догрузился». */
.st-fact__none { color: #a4acb8; font-size: 13.5px; font-weight: 400; font-style: italic; }
.st-fact__sub  { display: block; margin-top: 2px; color: #8a929e; font-size: 12.5px; font-weight: 400; line-height: 17px; }
.st-fact__warn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    color: #b54708;
    font-size: 12.5px;
    font-weight: 500;
}
.st-fact__warn .bi { color: #b54708; font-size: 13px; }

/* ── Мелочи форм ────────────────────────────────────────────────────────── */
.st-label__opt { color: #a4acb8; font-size: 12.5px; font-weight: 400; }
/* Ссылка внутри подсказки: без !important её перекрасит `a{color !important}` в site.css */
.st-linkish {
    color: #0d6efd !important;
    font-size: 12.5px;
    border-bottom: 1px solid rgba(13, 110, 253, .35);
}
.st-linkish:hover { color: #0b5ed7 !important; border-color: #0b5ed7; }
/* Разрушающее действие живёт текстом справа, а не третьей кнопкой в ряду: рядом с
   «Сохранить» оно весило бы столько же, сколько сохранение. */
.st-btn--link {
    margin-left: auto;
    padding: 0 4px;
    background: none;
    border: none;
    color: #8a929e !important;
    font-weight: 500;
}
.st-btn--link .bi { color: #8a929e; font-size: 14px; }
.st-btn--link:hover { color: #d92d4b !important; }
.st-btn--link:hover .bi { color: #d92d4b; }

/* ── Пусто / готовится ──────────────────────────────────────────────────── */
.st-empty {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px;
    border: 1px dashed #dfe5ec;
    border-radius: 14px;
    background: #fafbfc;
}
.st-empty__icon { color: #98a1ad; font-size: 22px; line-height: 24px; }
.st-empty__title { margin: 0 0 6px; color: #0d1017; font-size: 15px; font-weight: 600; line-height: 21px; }
.st-empty__text  { margin: 0 0 14px; color: #697280; font-size: 13.5px; line-height: 20px; max-width: 640px; }

/* ── Узкие экраны ───────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .st-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-cols    { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 575px) {
    .st-grid--2,
    .st-grid--3 { grid-template-columns: minmax(0, 1fr); }
    .st-card__head { padding: 18px 16px 0; }
    .st-card__body { padding: 16px; }
    .st-card__foot { padding: 14px 16px 16px; flex-wrap: wrap; }
    .st-card__foot .st-btn { flex: 1 1 100%; }
    .st-org { min-width: 100%; }
    .st-avatar-row { gap: 14px; }
    .st-empty { flex-direction: column; gap: 12px; }
    /* Подпись над значением, а не слева: 168 px под подпись на телефоне не остаётся,
       и значение сжималось бы в колонку по два слова. */
    .st-fact { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .st-btn--link { margin-left: 0; }
}