/* ===== Profile Section ===== */
/* Design tokens: same as docs-page.css / dashboard.css */

/* Layout */
.profile-wrap {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 100px 24px 80px;
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

/* ===== Sidebar ===== */
.profile-sidebar {
    width: 260px;
    flex-shrink: 0;
    position: sticky;
    top: 90px;
}

.profile-sidebar-nav {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(18, 41, 75, 0.06);
    box-shadow: 0 2px 8px rgba(18, 41, 75, 0.04);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.profile-sidebar-section {
    padding: 12px 16px 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8a95a5;
}

.profile-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #3a4a5e;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    position: relative;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.profile-nav-item:hover {
    background: #f0f2f7;
    color: #12294B;
    text-decoration: none;
}

.profile-nav-item--active {
    background: #12294B;
    color: #ffffff;
}

.profile-nav-item--active:hover {
    background: #1a3460;
    color: #ffffff;
}

.profile-nav-item--active svg {
    opacity: 1;
}

.profile-nav-item svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    opacity: 0.5;
}

.profile-nav-item--active svg {
    opacity: 0.9;
}

.profile-nav-badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #e53935;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ===== Content area ===== */
.profile-content {
    flex: 1;
    min-width: 0;
}

.profile-page-title {
    font-size: 24px;
    font-weight: 700;
    color: #12294B;
    margin: 0 0 24px;
}

/* Cards */
.profile-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(18, 41, 75, 0.06);
    box-shadow: 0 2px 8px rgba(18, 41, 75, 0.04);
    padding: 28px;
    margin-bottom: 20px;
}

.profile-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #12294B;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-card-title svg {
    width: 20px;
    height: 20px;
    opacity: 0.5;
}

/* ===== Form elements ===== */
.profile-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.profile-form-row--full {
    grid-template-columns: 1fr;
}

.profile-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-form-group--full {
    grid-column: 1 / -1;
}

.profile-label {
    font-size: 13px;
    font-weight: 600;
    color: #5a6a7e;
}

.profile-input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #e0e6ee;
    background: #f8f9fb;
    font-size: 14px;
    color: #12294B;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    box-sizing: border-box;
    outline: none;
}

.profile-input:focus {
    border-color: #3657CD;
    box-shadow: 0 0 0 3px rgba(54, 87, 205, 0.1);
    background: #ffffff;
}

.profile-input:disabled,
.profile-input[readonly] {
    background: #f0f2f7;
    color: #8a95a5;
    cursor: not-allowed;
}

.profile-input::placeholder {
    color: #a0aab8;
    font-weight: 400;
}

/* Поле лимита договоров в строке сотрудника (страница «Сотрудники»). Рамку,
   фон и высоту 44px несёт общая обёртка .profile-docs-limit-group — поле внутри
   неё прозрачное и без собственной рамки, иначе в ячейке видно два обрамления.
   Блок объявлен ПОСЛЕ .profile-input:focus / :disabled / ::placeholder
   намеренно: вес селекторов равный, выигрывает порядок в файле — поставленный
   выше блок молча проиграл бы по фону и цвету. */
.profile-input--docs-limit {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: 100%;
    padding: 0 12px;
    border: 0;
    background: transparent;
    outline: none;
    font-variant-numeric: tabular-nums;
}

/* Кольцо фокуса рисует обёртка (:focus-within): собственная тень поля попала бы
   под overflow:hidden обёртки и легла бы полосой по её внутреннему краю. */
.profile-input--docs-limit:focus {
    background: transparent;
    box-shadow: none;
}

.profile-input--docs-limit::placeholder {
    /* Подсказка несёт состояние «без лимита», а не украшение, поэтому обязана
       читаться: #5a6a7e даёт 5.25:1 на #f8f9fb и 4.94:1 на #f0f2f7 (фон
       выключенного поля). Базовый #a0aab8 — 2.23:1 и 2.10:1, ниже порога AA. */
    color: #5a6a7e;
}

.profile-input--docs-limit:disabled {
    /* Выключенное поле красит собой всю обёртку, кроме секции маркера: так
       состояние «только чтение» видно и без :has(), которого в проекте нет.
       Цвет текста — #5a6a7e: базовый #8a95a5 на #f0f2f7 давал 2.71:1, а у
       рядового сотрудника само число — единственный носитель состояния. */
    background: #f0f2f7;
    color: #5a6a7e;
    cursor: not-allowed;
}

/* Select */
.profile-select {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #e0e6ee;
    background: #f8f9fb;
    font-size: 14px;
    color: #12294B;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%235a6a7e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.profile-select:focus {
    border-color: #3657CD;
    box-shadow: 0 0 0 3px rgba(54, 87, 205, 0.1);
}

/* background-color, а не сокращение background: сокращение погасило бы
   background-image со стрелкой, и выключенный селект остался бы без неё. */
.profile-select:disabled {
    background-color: #f0f2f7;
    color: #5a6a7e;
    cursor: not-allowed;
}

/* Селект в ячейке таблицы: та же высота 44px, что у поля лимита и счётчика
   «Подписано», — иначе в строке три обрамления разной высоты. Длинное название
   категории обрезается многоточием, а не растягивает колонку. */
.profile-select--cell {
    height: 44px;
    padding-top: 0;
    padding-bottom: 0;
    text-overflow: ellipsis;
}

/* Textarea */
.profile-textarea {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #e0e6ee;
    background: #f8f9fb;
    font-size: 14px;
    color: #12294B;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.profile-textarea:focus {
    border-color: #3657CD;
    box-shadow: 0 0 0 3px rgba(54, 87, 205, 0.1);
    background: #ffffff;
}

/* ===== Avatar ===== */
.profile-avatar-section {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
}

.profile-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.profile-avatar-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #f0f2f7;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid rgba(18, 41, 75, 0.08);
    cursor: pointer;
    transition: border-color 0.2s, opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-avatar-img:hover {
    border-color: #3657CD;
    opacity: 0.9;
}

.profile-avatar-img svg {
    width: 32px;
    height: 32px;
    color: #8a95a5;
}

.profile-avatar-remove {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(18, 41, 75, 0.1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    opacity: 0;
}

.profile-avatar-wrap:hover .profile-avatar-remove {
    opacity: 1;
}

.profile-avatar-remove:hover {
    background: #fce4ec;
    border-color: #e53935;
}

.profile-avatar-remove svg {
    width: 14px;
    height: 14px;
    color: #e53935;
}

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

.profile-avatar-name {
    font-size: 18px;
    font-weight: 700;
    color: #12294B;
}

.profile-avatar-hint {
    font-size: 13px;
    color: #8a95a5;
}

.profile-avatar-warning {
    font-size: 13px;
    color: #e53935;
    margin-top: 4px;
}

/* ===== Buttons ===== */
.profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
    border: none;
    text-decoration: none;
    white-space: nowrap;
}

.profile-btn:hover {
    text-decoration: none;
    opacity: 0.9;
}

.profile-btn:active {
    transform: scale(0.98);
}

.profile-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.profile-btn--primary {
    background: linear-gradient(135deg, #3657CD 0%, #12294B 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(18, 41, 75, 0.15);
}

.profile-btn--primary:hover {
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(18, 41, 75, 0.25);
}

.profile-btn--secondary {
    background: #f0f2f7;
    color: #12294B;
}

.profile-btn--secondary:hover {
    background: #e4e8f0;
    color: #12294B;
}

.profile-btn--outline {
    background: transparent;
    color: #3657CD;
    border: 1px solid #e0e6ee;
}

.profile-btn--outline:hover {
    background: #f8f9fb;
    color: #3657CD;
    border-color: #3657CD;
}

.profile-btn--danger {
    background: transparent;
    color: #e53935;
    border: 1px solid #fce4ec;
}

.profile-btn--danger:hover {
    background: #fce4ec;
    color: #d32f2f;
}

.profile-btn--block {
    width: 100%;
}

.profile-btn--sm {
    padding: 7px 16px;
    font-size: 13px;
    border-radius: 8px;
}

.profile-btn--lg {
    padding: 12px 32px;
    font-size: 15px;
}

/* Кнопка, заблокированная на время AJAX-запроса. Без этого правила disabled
   не менял вид: на экране оставалась обычная активная кнопка, которая молча
   не реагирует на нажатия. Селектор с :hover / :active перебивает
   .profile-btn--primary:hover — иначе наведение возвращало бы вид активной. */
.profile-btn:disabled,
.profile-btn:disabled:hover,
.profile-btn:disabled:active {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* ===== Checkbox ===== */
.profile-check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.profile-checkbox {
    width: 18px;
    height: 18px;
    accent-color: #12294B;
    cursor: pointer;
    flex-shrink: 0;
}

.profile-check-label {
    font-size: 14px;
    color: #3a4a5e;
    cursor: pointer;
}

/* ===== Status chips ===== */
.profile-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.profile-status--success {
    background: #e8f5e9;
    color: #2e7d32;
}

.profile-status--warning {
    background: #fff8e1;
    color: #e65100;
}

.profile-status--danger {
    background: #fce4ec;
    color: #d32f2f;
}

.profile-status--info {
    background: #e3f2fd;
    color: #1565c0;
}

.profile-status--neutral {
    background: #f0f2f7;
    color: #5a6a7e;
}

/* ===== Table ===== */
.profile-table-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(18, 41, 75, 0.06);
    box-shadow: 0 2px 8px rgba(18, 41, 75, 0.04);
    overflow: hidden;
    margin-bottom: 20px;
}

/* Заголовок карточки таблицы (например «Приглашения»). Горизонтальный отступ
   тот же, что у ячеек: иначе заголовок и первая колонка стоят на разных
   вертикалях. */
.profile-table-card-title {
    padding: 16px 12px;
    font-weight: 600;
    color: #12294B;
    font-size: 15px;
}

.profile-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

/* Горизонтальный отступ ячеек — 12px во всех колонках и во всех таблицах
   профиля: на странице сотрудников их две (сотрудники и приглашения), и первые
   колонки обязаны начинаться на одной вертикали.
   Цвет шапки поднят с #8a95a5 (2.9:1 на #f8f9fb) до #5a6a7e (4.94:1): 12px/700
   — не крупный текст, порог AA для него 4.5:1. */
.profile-table th {
    text-align: left;
    padding: 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #5a6a7e;
    background: #f8f9fb;
    border-bottom: 1px solid rgba(18, 41, 75, 0.06);
    white-space: nowrap;
}

.profile-table td {
    padding: 12px;
    color: #3a4a5e;
    border-bottom: 1px solid rgba(18, 41, 75, 0.04);
    vertical-align: middle;
}

/* Граница снимается у последней строки ПОСЛЕДНЕГО tbody: в таблице сотрудников
   каждый сотрудник — собственный tbody, и `tr:last-child` погасил бы
   разделитель после каждого из них. */
.profile-table tbody:last-child tr:last-child td {
    border-bottom: none;
}

.profile-table tbody tr:hover td {
    background: #f8f9fb;
}

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

/* ===== Empty state ===== */
.profile-empty {
    text-align: center;
    padding: 48px 24px;
    color: #8a95a5;
}

.profile-empty svg {
    width: 48px;
    height: 48px;
    opacity: 0.3;
    margin-bottom: 16px;
}

.profile-empty-text {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #5a6a7e;
}

.profile-empty-hint {
    font-size: 13px;
    color: #8a95a5;
}

/* ===== Toast ===== */
.profile-toast {
    position: fixed;
    bottom: 32px;
    right: 32px;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    z-index: 9999;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}

.profile-toast--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.profile-toast--success {
    background: #2e7d32;
}

.profile-toast--danger {
    background: #d32f2f;
}

/* ===== Docs badge ===== */
/* Счётчик подписанных документов — ссылка той же высоты, радиуса и границы,
   что поле лимита и селект категории рядом: контролы строки обязаны стоять на
   одной высоте. */
.profile-docs-badge {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    height: 44px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: #1a56db;
    background: #f8f9fb;
    border: 1px solid #e0e6ee;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.profile-docs-badge:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}

/* Подчёркивание при наведении — второй признак кликабельности рядом с цветом. */
.profile-docs-badge:hover .profile-docs-badge-num {
    text-decoration: underline;
}

/* Цифры моноширинные: числа соседних строк стоят по одной вертикали. */
.profile-docs-badge-num {
    font-variant-numeric: tabular-nums;
}

.profile-docs-badge--cell {
    width: 100%;
}

/* ===== Role select colors ===== */
.profile-role-select--leader {
    background: #fff8e1;
    border-color: #ffe082;
    color: #e65100;
    font-weight: 600;
}

.profile-role-select--member {
    background: #e3f2fd;
    border-color: #90caf9;
    color: #1565c0;
    font-weight: 500;
}

/* ===== Upload area ===== */
.profile-upload {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    border: 2px dashed #e0e6ee;
    border-radius: 12px;
    background: #f8f9fb;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    color: #5a6a7e;
    font-size: 14px;
}

.profile-upload:hover {
    border-color: #3657CD;
    background: #f0f4ff;
    color: #3657CD;
}

.profile-upload svg {
    width: 20px;
    height: 20px;
    opacity: 0.6;
}

/* ===== Stat cards (balance page) ===== */
.profile-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.profile-stat-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(18, 41, 75, 0.06);
    padding: 20px;
    text-align: center;
}

.profile-stat-value {
    font-size: 28px;
    font-weight: 800;
    color: #12294B;
    line-height: 1.2;
}

.profile-stat-label {
    font-size: 13px;
    color: #8a95a5;
    margin-top: 4px;
}

/* ===== Search feedback (страница «Сотрудники») =====
   Два исхода поиска — разного веса, поэтому и оформление разное.

   «Ничего не найдено»: результат состоявшегося запроса, строка текста под
   кнопкой. Красный из палитры страницы (#d32f2f, тот же у .profile-field-error
   и тоста отказа) — прежний #e53935 из инлайн-стиля давал на белой карточке
   4.2:1 при норме 4.5:1 (WCAG AA). */
.profile-search-error {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    color: #d32f2f;
}

/* Поиск не отработал: фильтр не применён. Не отказ пользователю, а состояние
   системы — жёлтая плашка, а не красный текст, и признаков состояния два
   (иконка и текст), потому что цвет один различать не обязан.

   Текст выровнен по левому краю, а не по центру, как соседний #error-field: у
   строки с иконкой центрирование отрывает иконку от первого слова. Оттенок
   текста темнее чипа .profile-status--warning (#e65100 на #fff8e1 — 3.6:1,
   для 13px мало); #8a4b00 на том же фоне даёт 6.4:1. Иконка наследует
   currentColor — отдельного правила цвета ей не нужно. */
.profile-search-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    border: 1px solid #f2d08a;
    border-radius: 10px;
    background: #fff8e1;
    font-size: 13px;
    line-height: 1.5;
    color: #8a4b00;
}

/* Иконка не сжимается и не тянется: во flex-строке она иначе теряет ширину под
   двухстрочный текст (на 375px текст переносится). */
.profile-search-notice > svg {
    flex-shrink: 0;
    margin-top: 2px;
}

/* ===== Members table (страница «Сотрудники») =====
   Раскладка строки сотрудника: та же .profile-table, что у таблицы приглашений
   ниже на этой же странице. Плитка-карточка ушла — контролы разной высоты в
   свободной сетке не выстраивались по вертикали. */

/* Легенда состояний поля «Доступно». Живёт в подвале карточки таблицы
   (модификатор --footer ниже; прежнее место в шапке заняла полоса букв) —
   ровно один раз на страницу. */
.profile-table-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 12px;
    border-bottom: 1px solid rgba(18, 41, 75, 0.06);
}

.profile-table-note > svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: #3657CD;
}

.profile-table-note-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #5a6a7e;
}

.profile-table-note-text b {
    color: #12294B;
    font-weight: 700;
}

/* Легенда в подвале карточки таблицы (страница «Сотрудники»: её место в
   шапке заняла полоса букв). Разделитель переезжает на верхнюю кромку.
   Блок объявлен ПОСЛЕ базового .profile-table-note намеренно: вес селекторов
   равный, выигрывает порядок в файле — поставленный выше модификатор молча
   проиграл бы по границам (прецедент — .profile-input--docs-limit). */
.profile-table-note--footer {
    border-bottom: 0;
    border-top: 1px solid rgba(18, 41, 75, 0.06);
}

/* Ширины берутся только из colgroup: содержимое ячеек на них не влияет, и
   «Подписано: 4» не двигает колонку относительно «Подписано: 26». */
.profile-table--members {
    table-layout: fixed;
}

/* Проценты, а не пиксели: табличный режим живёт только на xl (>=1200px, ниже
   карточный медиа-блок разбирает таблицу), но контентная колонка и там дышит —
   ~843-860px в зависимости от скроллбара и зума, а .profile-table-card режет
   переполнение (overflow: hidden) — фиксированная сумма ширин увела бы правые
   колонки за край карточки без всякой прокрутки. Первая колонка без ширины:
   забирает остаток, поэтому один colgroup обслуживает все наборы колонок. */
.profile-col-category { width: 25%; }
.profile-col-limit    { width: 17%; }
.profile-col-signed   { width: 12%; }
.profile-col-phone    { width: 22%; }
.profile-col-acting   { width: 8%; }
.profile-col-actions  { width: 8%; }
.profile-table--members-plain .profile-col-signed { width: 14%; }

/* Разделитель принадлежит строке сообщений: она идёт вторым <tr> того же
   сотрудника, и линия между ними отрезала бы сообщение от своей строки. */
.profile-table--members tbody td {
    border-bottom: none;
}

/* Без лимита строки сообщений нет вовсе — разделитель возвращается ячейкам.
   Последнюю строку гасит общее правило .profile-table выше. */
.profile-table--members-plain tbody td {
    border-bottom: 1px solid rgba(18, 41, 75, 0.04);
}

/* Пустая строка сообщений не занимает высоты: вертикальных отступов у ячейки
   нет, отступ живёт на самом видимом блоке. Разделитель сотрудников живёт
   здесь — селектор с двумя классами намеренно, одноклассовый проиграл бы
   правилу выше по числу элементов. */
.profile-table--members .profile-table-msg-row td {
    padding: 0 12px;
    border-bottom: 1px solid rgba(18, 41, 75, 0.04);
}

.profile-table--members tbody:last-child .profile-table-msg-row td {
    border-bottom: none;
}

.profile-table-msg-row .profile-field-error,
.profile-table-msg-row .profile-hint {
    margin: 0 0 12px;
}

/* Подсветка — на всём сотруднике: строка контролов и строка сообщений
   принадлежат одному tbody, и подсвеченная половина читалась бы как две
   разные записи. */
.profile-table--members tbody:hover td {
    background: #f8f9fb;
}

.profile-cell-member {
    min-width: 0;
}

.profile-table-member {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.profile-member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f0f2f7;
    object-fit: cover;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    color: #5a6a7e;
}

.profile-member-info {
    flex: 1;
    min-width: 0;
}

/* Имя в одну строку с многоточием: так высота строки одинакова у всех
   сотрудников. Полное имя остаётся в title и на странице сотрудника. */
.profile-member-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #12294B;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Телефон под именем. #5a6a7e — 5.53:1 на белом; прежний #8a95a5 давал 3.03:1
   и не проходил AA. */
.profile-member-meta {
    display: block;
    font-size: 13px;
    color: #5a6a7e;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

.profile-cell-phone {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Поле лимита и маркер состояния — в ОДНОЙ рамке высотой 44px: отдельный чип
   рядом с полем на узкой колонке переносился под него и делал строку
   двухэтажной. */
.profile-docs-limit-group {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 44px;
    border: 1px solid #e0e6ee;
    border-radius: 10px;
    background: #f8f9fb;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.profile-docs-limit-group:focus-within {
    border-color: #3657CD;
    box-shadow: 0 0 0 3px rgba(54, 87, 205, 0.1);
    background: #ffffff;
}

/* Значение 0 — «создание документов закрыто». От пустого поля («без лимита»)
   оно отличается одним символом, поэтому состояние несут сразу три признака:
   слово, отдельная секция рамки и её цвет. */
.profile-docs-limit-group--closed {
    border-color: #e8cf95;
    background: #fffdf6;
}

/* #a03e00 на #fff8e1 — 6.21:1. Не --warning: #e65100 на том же фоне даёт
   3.57:1, ниже порога AA при 12px/600. */
.profile-docs-limit-flag {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 10px;
    background: #fff8e1;
    color: #a03e00;
    border-left: 1px solid #e8cf95;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* Маркер переключает JS без перезагрузки. Правило страхует hidden: авторский
   display:inline-flex перебил бы [hidden]{display:none} из таблицы стилей
   браузера, если бы reboot не объявлял его как !important. */
.profile-docs-limit-flag[hidden] {
    display: none;
}

.profile-cell-signed {
    text-align: right;
}

/* Чекбокс «И.О.»: подпись — в шапке колонки, зона нажатия — 44x44 при видимых
   18px. */
.profile-cell-acting {
    text-align: center;
}

.profile-check-tap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    cursor: pointer;
}

.profile-cell-actions {
    text-align: right;
}

/* inline-flex, а не блочный flex из .profile-icon-btn: блок не подчиняется
   text-align и прижался бы к левому краю колонки. */
.profile-cell-actions .profile-icon-btn {
    display: inline-flex;
}

/* Подпись кнопки видна только на мобильной разборке (правило ниже): на
   десктопе колонка узкая, и слово в неё не помещается. */
.profile-icon-btn-text {
    display: none;
}

/* Причина, по которой контролы строки выключены. Замок — второй признак
   рядом с текстом. */
.profile-lock-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.profile-lock-note > svg {
    flex-shrink: 0;
}

/* ===== Request card (phone permissions) ===== */
.profile-request-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: #f8f9fb;
    border-radius: 12px;
    border: 1px solid rgba(18, 41, 75, 0.06);
    margin-bottom: 10px;
}

.profile-request-info {
    flex: 1;
    min-width: 0;
}

.profile-request-name {
    font-size: 14px;
    font-weight: 600;
    color: #12294B;
}

.profile-request-detail {
    font-size: 13px;
    color: #5a6a7e;
    margin-top: 2px;
}

.profile-request-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* ===== Password validation ===== */
.profile-password-rules {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.profile-password-rule {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #8a95a5;
    transition: color 0.2s;
}

.profile-password-rule--valid {
    color: #2e7d32;
}

.profile-password-rule svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ===== Divider ===== */
.profile-divider {
    height: 1px;
    background: rgba(18, 41, 75, 0.06);
    margin: 20px 0;
    border: none;
}

/* ===== Info row ===== */
.profile-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(18, 41, 75, 0.04);
}

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

.profile-info-label {
    font-size: 14px;
    color: #8a95a5;
}

.profile-info-value {
    font-size: 14px;
    font-weight: 600;
    color: #12294B;
}

/* ===== API key item ===== */
.profile-api-key {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #f8f9fb;
    border-radius: 10px;
    margin-bottom: 8px;
}

.profile-api-key-name {
    font-size: 14px;
    font-weight: 600;
    color: #12294B;
}

.profile-api-key-value {
    font-size: 13px;
    font-family: 'Courier New', monospace;
    color: #5a6a7e;
    background: #e8ecf2;
    padding: 4px 10px;
    border-radius: 6px;
    user-select: all;
}

.profile-api-key-actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.profile-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
    color: #5a6a7e;
}

.profile-icon-btn:hover {
    background: #f0f2f7;
    color: #12294B;
}

.profile-icon-btn--danger:hover {
    background: #fce4ec;
    color: #e53935;
}

/* Область касания 44x44 при видимых 32x32: прозрачный псевдоэлемент добирает
   по 6px с каждой стороны. Честные 44x44 растянули бы строку таблицы
   приглашений (12px паддинга + 44 = 68px вместо 56px) и увеличили бы плашку
   ховера, поэтому расширяем только hit-area. Ближайший интерактив — чекбокс
   «И.О.» — стоит в соседней колонке таблицы сотрудников и отделён паддингами
   двух ячеек (12px + 12px), перекрытия нет. */
.profile-icon-btn--touch {
    position: relative;
}

.profile-icon-btn--touch::after {
    content: '';
    position: absolute;
    top: -6px;
    right: -6px;
    bottom: -6px;
    left: -6px;
}

/* ===== Modal (profile context) ===== */
.profile-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(18, 41, 75, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1050;
    align-items: center;
    justify-content: center;
}

.profile-modal-overlay--visible {
    display: flex;
}

.profile-modal {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 24px 48px rgba(18, 41, 75, 0.15);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 28px;
    position: relative;
}

.profile-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f0f2f7;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    color: #5a6a7e;
}

.profile-modal-close:hover {
    background: #e4e8f0;
    color: #12294B;
}

.profile-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #12294B;
    margin: 0 0 20px;
    padding-right: 40px;
}

.profile-modal--sm { max-width: 400px; }
.profile-modal--md { max-width: 420px; }
.profile-modal--lg { max-width: 520px; }
.profile-modal--xl { max-width: 560px; }
.profile-modal-title--center { text-align: center; padding-right: 0; }
.profile-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: flex-end;
}
.profile-modal-actions--center { justify-content: center; }
.profile-modal-body { font-size: 14px; color: #3a4a5e; line-height: 1.6; }
.profile-user-list { overflow-y: auto; max-height: 300px; display: flex; flex-direction: column; gap: 8px; }
.profile-user-item { display: flex; flex-direction: column; gap: 4px; }
.profile-user-item-row { display: flex; justify-content: space-between; align-items: center; }
.profile-user-name { font-size: 14px; color: #12294B; font-weight: 500; }
.profile-api-key-display { display: block; text-align: center; padding: 10px; font-size: 14px; }

/* Utility */
.profile-m-0 {
    margin: 0;
}

.profile-link {
    color: #3657CD;
    font-weight: 600;
    text-decoration: none;
}

.profile-link:hover {
    text-decoration: underline;
}

.profile-saved-indicator {
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 11px;
    padding: 2px 8px;
}

/* Field helpers */
.profile-field {
    margin-bottom: 16px;
}

.profile-field-error {
    font-size: 13px;
    color: #d32f2f;
    margin-top: 4px;
}

.profile-field-notice {
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 16px;
}

.profile-field-notice--info {
    background: #e8eaf6;
    color: #283593;
}

.profile-field-notice--success {
    background: #e8f5e9;
    color: #2e7d32;
}

.profile-hint {
    font-size: 13px;
    color: #5a6a7e;
    margin-top: 4px;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .profile-wrap {
        padding: 90px 16px 60px;
        gap: 24px;
    }

    .profile-sidebar {
        width: 220px;
    }
}

@media (max-width: 768px) {
    .profile-wrap {
        flex-direction: column;
        padding: 80px 16px 60px;
    }

    .profile-sidebar {
        width: 100%;
        position: static;
    }

    .profile-sidebar-nav {
        flex-direction: column;
        gap: 2px;
        padding: 6px;
    }

    .profile-sidebar-section {
        font-size: 11px;
        padding: 6px 12px 2px;
    }

    .profile-nav-item {
        padding: 10px 14px;
        font-size: 14px;
    }

    .profile-nav-item svg {
        width: 18px;
        height: 18px;
    }

    .profile-card {
        padding: 20px;
    }

    .profile-form-row {
        grid-template-columns: 1fr;
    }

    .profile-avatar-section {
        flex-direction: column;
        text-align: center;
    }

    .profile-stats-row {
        grid-template-columns: 1fr 1fr;
    }

    .profile-request-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .profile-request-actions {
        width: 100%;
    }

    .profile-request-actions .profile-btn {
        flex: 1;
    }
}

@media (max-width: 480px) {
    .profile-stats-row {
        grid-template-columns: 1fr;
    }
}

/* Таблица, которая ниже xl разбирается на карточки.
   Порог мерит viewport, но рассчитан от ширины КОНТЕНТНОЙ колонки: рядом с
   сайдбаром таблица получает не viewport, а viewport-340px (>1024px: сайдбар
   260 + gap 32 + паддинги 48) либо viewport-276px (769-1024px: 220 + 24 + 32).
   Табличному режиму сотрудников нужно ~810px контента: заголовок «Подписано»
   (~97px с паддингами) занимает свои 12% целиком, touch-цели И.О. и удаления
   (44px) — свои 8%-колонки, плюс запас на разброс рендеринга шрифтов. Столько
   контент получает только с xl-границы Bootstrap — там колонка выходит на
   проектные ~843-860px. Прежний порог 575.98px мерил голый viewport: на
   769-1024px контента оставалось ~490-750px, заголовки наезжали друг на
   друга, а правые ячейки резались переполнением (.profile-table-card обрезает
   его через overflow:hidden — прокрутки нет); диапазон 576-768px был тесен
   так же. Карточная раскладка ниже порога — прежний макет, проверенный от
   375px: на 375px под контент остаётся 343px, и колонки приглашений
   (~400px минимум) в таблицу уже не встают. */
@media (max-width: 1199.98px) {
    .profile-table--stacked-narrow,
    .profile-table--stacked-narrow tbody,
    .profile-table--stacked-narrow tr {
        display: block;
    }

    /* Шапка не нужна: подписи колонок переехали в data-label ячеек. colgroup
       тоже прячем: у таблицы-блока колонки порождают анонимные табличные
       боксы, то есть пустую полосу в начале карточки. */
    .profile-table--stacked-narrow thead,
    .profile-table--stacked-narrow colgroup {
        display: none;
    }

    .profile-table--stacked-narrow tr {
        padding: 12px 16px;
        border-bottom: 1px solid rgba(18, 41, 75, 0.06);
    }

    .profile-table--stacked-narrow tbody:last-child tr:last-child {
        border-bottom: none;
    }

    .profile-table--stacked-narrow td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 5px 0;
        border-bottom: none;
    }

    /* Ячейка без содержимого (нет прав на действие, руководителю не назначают
       и.о.) не оставляет в карточке строку с подписью и без значения.
       Шаблон пишет такие ячейки в одну строку — пробел внутри снял бы :empty. */
    .profile-table--stacked-narrow td:empty {
        display: none;
    }

    /* #5a6a7e вместо #8a95a5: 12px/700 — не крупный текст, порог AA 4.5:1. */
    .profile-table--stacked-narrow td[data-label]::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: #5a6a7e;
    }

    /* Ячейка действия: подписи нет, кнопка встаёт по правому краю на одну
       вертикаль со значениями, отступ сверху отделяет её от кода */
    .profile-table--stacked-narrow td:last-child {
        justify-content: flex-end;
        padding-top: 8px;
    }

    /* ---- таблица сотрудников: карточка собирается из двух строк ---- */

    /* Разделитель снят со строки контролов: границей карточки служит строка
       сообщений, идущая следом. */
    .profile-table--members tr {
        border-bottom: none;
    }

    /* Селектор с двумя классами намеренно: одноклассовый проиграл бы правилу
       td:last-child выше и оставил бы сообщению чужой отступ. */
    .profile-table--stacked-narrow .profile-table-msg-row {
        padding: 0 16px 12px;
        border-bottom: 1px solid rgba(18, 41, 75, 0.06);
    }

    .profile-table--stacked-narrow .profile-table-msg-row td {
        display: block;
        padding: 0;
    }

    .profile-table--members tbody:last-child .profile-table-msg-row {
        border-bottom: none;
    }

    /* Без лимита строки сообщений нет — разделитель возвращается строке. */
    .profile-table--members-plain tr {
        border-bottom: 1px solid rgba(18, 41, 75, 0.06);
    }

    .profile-table--members-plain tbody:last-child tr:last-child {
        border-bottom: none;
    }

    /* Первая ячейка — шапка карточки: аватар и ФИО во всю ширину. Имя здесь
       переносится: ширину у него никто не отнимает. */
    .profile-cell-member {
        justify-content: flex-start;
        padding: 0 0 10px;
    }

    .profile-member-name {
        white-space: normal;
        overflow: visible;
    }

    /* Селекту нужна вся ширина карточки, иначе длинная категория обрежется;
       подпись встаёт над ним. */
    .profile-cell-category {
        display: block;
        padding: 6px 0;
    }

    .profile-cell-category::before {
        display: block;
        margin-bottom: 6px;
    }

    .profile-cell-limit .profile-docs-limit-group {
        width: 168px;
        flex: 0 0 auto;
    }

    .profile-docs-badge--cell {
        width: auto;
        min-width: 84px;
    }

    /* Кнопка удаления получает подпись: одинокая иконка отдельной строкой
       карточки не читается как действие. */
    .profile-cell-actions .profile-icon-btn {
        width: auto;
        height: 44px;
        gap: 8px;
        padding: 0 14px;
        border-radius: 10px;
        border: 1px solid #f3d4da;
        color: #d32f2f;
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
    }

    .profile-cell-actions .profile-icon-btn-text {
        display: inline;
    }

    /* Своя высота уже 44px — добор hit-area больше не нужен. */
    .profile-cell-actions .profile-icon-btn--touch::after {
        display: none;
    }
}

/* ===== Полоса букв (страница «Сотрудники») ===== */
/* Секция стоит ПОСЛЕ общего медиа-блока 1199.98px намеренно: у неё
   собственный @media с тем же порогом, и он обязан идти в файле ПОЗЖЕ
   базовых правил секции — вес селекторов равный, каскад решает порядок.
   Базовое правило, попавшее в файл НИЖЕ своего медиа-переопределения,
   молча победило бы его. */

/* Лента в шапке карточки таблицы. Фон и граница те же, что у th: полоса и
   шапка колонок читаются одним блоком. flex-wrap обязателен: карточка режет
   переполнение (overflow: hidden) и прокрутки не даёт — в одну строку 25
   кнопок в колонку ~860px не встают, без переноса последние буквы исчезали
   бы за краем без всякого признака потери. */
.profile-abc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 8px;
    background: #f8f9fb;
    border-bottom: 1px solid rgba(18, 41, 75, 0.06);
}

/* Область нажатия не меньше 44x44 — правило проекта; порог 1199.98px от
   него не спасает, выше живут сенсорные ноутбуки. Расширяется САМА кнопка,
   а не невидимый псевдоэлемент: приём с ::after рассчитан на одиночные
   кнопки, у 25 соседних наложенные области воровали бы нажатия друг у
   друга. Следствие: полоса выше согласованного макета (32px) на четверть. */
.profile-abc-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 6px;
    border-radius: 8px;
    color: #5a6a7e;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

/* Фон наведения не осветлять: #5a6a7e на #e4e8f0 — 4.56:1, светлее уйдёт
   ниже нормы AA. */
.profile-abc-link:hover {
    background: #e4e8f0;
}

/* «Без рамки» не означает «без фокуса»: собственных :focus-правил у ссылок
   в файле нет, и снятое кольцо осталось бы ничем не заменённым. Кольцо
   снаружи: внутреннее слилось бы с заливкой выбранной кнопки. */
.profile-abc-link:focus-visible {
    outline: 2px solid #3657CD;
    outline-offset: 2px;
}

/* Два класса, не один: одноклассовый модификатор (0,1,0) проигрывал бы
   правилу :hover (0,2,0), и выбранная кнопка при наведении получала бы
   светлый фон под белым текстом. */
.profile-abc-link.profile-abc-link--active {
    background: #3657CD;
    color: #ffffff;
}

/* Служебные пункты («Все», «A–Z», «Без ФИО») шире буквенных кнопок. */
.profile-abc-link--wide {
    padding: 0 12px;
}

/* Разделитель декоративный (aria-hidden в разметке): палочку между группами
   кнопок скринридеру озвучивать нечем. */
.profile-abc-sep {
    align-self: stretch;
    width: 1px;
    margin: 8px 6px;
    background: rgba(18, 41, 75, 0.12);
}

/* Мобильный контрол — форма с выпадающим списком; на десктопе скрыта. */
.profile-abc-form {
    display: none;
}

@media (max-width: 1199.98px) {
    /* Переключение контролов — только display: none. visibility или opacity
       оставили бы скрытый контрол в порядке табуляции вторым набором тех же
       букв на каждом экране. */
    .profile-abc {
        display: none;
    }

    .profile-abc-form {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 12px;
        padding: 12px 16px;
        background: #f8f9fb;
        border-bottom: 1px solid rgba(18, 41, 75, 0.06);
    }

    /* Видимая подпись над списком: у ленты роль подписи играет положение в
       карточке таблицы, у выпадающего списка её нет. */
    .profile-abc-form-field {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        flex-direction: column;
        gap: 6px;
    }

    /* 44px селекту даёт модификатор --cell (голый .profile-select — около
       40); кнопке добор высоты задаётся здесь — базовый .profile-btn ниже. */
    .profile-abc-form .profile-btn {
        min-height: 44px;
    }

    /* Горизонтальный отступ легенды в узком режиме — 16px, как у карточек
       таблицы: базовые 12px под таблицей читались бы ступенькой. */
    .profile-table-note--footer {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ===== Utility ===== */
.profile-mt-0 { margin-top: 0; }
.profile-mt-8 { margin-top: 8px; }
.profile-mt-12 { margin-top: 12px; }
.profile-mt-16 { margin-top: 16px; }
.profile-mt-24 { margin-top: 24px; }
.profile-mb-0 { margin-bottom: 0; }
.profile-mb-8 { margin-bottom: 8px; }
.profile-mb-16 { margin-bottom: 16px; }
.profile-gap-8 { gap: 8px; }
.profile-gap-16 { gap: 16px; }
.profile-flex { display: flex; }
.profile-flex-col { flex-direction: column; }
.profile-flex-center { align-items: center; }
.profile-flex-between { justify-content: space-between; }
.profile-flex-end { justify-content: flex-end; }
.profile-text-center { text-align: center; }
.profile-text-muted { color: #8a95a5; font-size: 13px; }
.profile-text-sm { font-size: 14px; color: #3a4a5e; }
.profile-mono { font-family: monospace; }
/* Код просроченного приглашения: диктовать его больше нельзя. Приглушение —
   не только цветом (#5a6a7e даёт 5.5:1 на белом, WCAG AA проходит):
   зачёркивание читается и без различения оттенков. */
.profile-mono--expired { color: #5a6a7e; text-decoration: line-through; }
.profile-card-title--sm { font-size: 14px; }
.profile-input-wrap { position: relative; }
.profile-pass-toggle { position: absolute; right: 14px; top: 11px; cursor: pointer; }
.profile-pass-toggle.hide-pass { display: none; }
.profile-hidden { display: none !important; }

/* ===== File upload zone ===== */
.profile-upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 20px;
    border: 2px dashed #e0e6ee;
    border-radius: 12px;
    background: #f8f9fb;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.profile-upload-zone:hover {
    border-color: #b0bdd0;
    background: #f0f4ff;
}

.profile-upload-zone--active {
    border-color: #3657CD;
    background: #f0f4ff;
    box-shadow: 0 0 0 3px rgba(54, 87, 205, 0.08);
}

.profile-upload-zone-icon {
    width: 32px;
    height: 32px;
    color: #8a95a5;
}

.profile-upload-zone:hover .profile-upload-zone-icon,
.profile-upload-zone--active .profile-upload-zone-icon {
    color: #3657CD;
}

.profile-upload-zone-text {
    font-size: 14px;
    color: #5a6a7e;
}

.profile-upload-zone-link {
    color: #3657CD;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(54, 87, 205, 0.3);
}

.profile-upload-zone:hover .profile-upload-zone-link {
    text-decoration-color: #3657CD;
}

.profile-upload-zone-hint {
    font-size: 12px;
    color: #a0aab8;
}

.profile-upload-zone-selected {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 4px 12px;
    background: #e3f2fd;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #1565c0;
}

/* File item (uploaded) */
.profile-file-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #f8f9fb;
    border-radius: 10px;
    border: 1px solid rgba(18, 41, 75, 0.04);
    transition: background 0.15s;
}

.profile-file-item:hover {
    background: #f0f2f7;
}

.profile-file-icon {
    color: #8a95a5;
    flex-shrink: 0;
}

.profile-file-name {
    flex: 1;
    font-size: 14px;
    color: #3a4a5e;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-file-item .profile-icon-btn {
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}

.profile-file-item:hover .profile-icon-btn {
    opacity: 1;
}

/* ===== Role selector (group edit modal) ===== */
.profile-role-selector {
    position: relative;
    display: inline-block;
    margin-top: 4px;
}

.profile-role-selected {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
}

.profile-role-selected svg {
    color: #8a95a5;
    transition: transform 0.2s;
}

.profile-role-options {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: #ffffff;
    border: 1px solid rgba(18, 41, 75, 0.08);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(18, 41, 75, 0.1);
    z-index: 100;
    min-width: 110px;
    overflow: hidden;
}

.profile-role-option {
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #3a4a5e;
    cursor: pointer;
    transition: background 0.1s;
}

.profile-role-option:hover {
    background: #f0f2f7;
}

.profile-role-option[data-color="warning"]:hover {
    background: #fff8e1;
    color: #e65100;
}

.profile-role-option[data-color="info"]:hover {
    background: #e3f2fd;
    color: #1565c0;
}

/* ===== Select2 overrides ===== */
.profile-content .select2-container--default .select2-selection--single {
    height: 42px;
    padding: 6px 14px;
    border: 1px solid #e0e6ee;
    border-radius: 10px;
    background: #f8f9fb;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.profile-content .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #12294B;
    line-height: 28px;
    padding-left: 0;
}

.profile-content .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #a0aab8;
}

.profile-content .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
    right: 10px;
}

.profile-content .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #8a95a5 transparent transparent transparent;
}

.profile-content .select2-container--default.select2-container--focus .select2-selection--single,
.profile-content .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #3657CD;
    box-shadow: 0 0 0 3px rgba(54, 87, 205, 0.1);
    background: #ffffff;
}

.profile-content .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #3657CD transparent;
}

.profile-content .select2-container--default .select2-selection--single .select2-selection__clear {
    color: #8a95a5;
    font-size: 18px;
    margin-right: 4px;
}

.profile-content .select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: #e53935;
}

/* Dropdown */
.select2-container--default .select2-dropdown {
    border: 1px solid #e0e6ee;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(18, 41, 75, 0.12);
    overflow: hidden;
    margin-top: 4px;
}

.select2-container--default .select2-search--dropdown {
    padding: 10px 12px;
    background: #f8f9fb;
    border-bottom: 1px solid rgba(18, 41, 75, 0.06);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #e0e6ee;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    font-family: inherit;
    color: #12294B;
    background: #ffffff;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #3657CD;
    box-shadow: 0 0 0 3px rgba(54, 87, 205, 0.1);
}

.select2-container--default .select2-results__option {
    padding: 10px 14px;
    font-size: 14px;
    color: #3a4a5e;
    transition: background 0.1s;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #12294B;
    color: #ffffff;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background: #f0f4ff;
    color: #3657CD;
    font-weight: 600;
}

.select2-container--default .select2-results__option--highlighted[aria-selected=true] {
    background: #12294B;
    color: #ffffff;
}

.select2-container--default .select2-results > .select2-results__options {
    max-height: 240px;
}

.select2-container--default .select2-results__message {
    padding: 10px 14px;
    font-size: 13px;
    color: #8a95a5;
}

/* Инпут номера страницы наследует размеры из docs-page.css (padding 8px,
   высота ~39px) — меньше минимальной touch-цели 44px. Override только в
   контексте профильных страниц: docs.html/templates.html вне .profile-content
   и не затрагиваются. */
.profile-content .docs-pagination-input {
    min-height: 44px;
}