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

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

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

.profile-sidebar-nav {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(var(--color-ink-rgb), 0.06);
    box-shadow: 0 2px 8px rgba(var(--color-ink-rgb), 0.04);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: var(--gap-1);
}

.profile-sidebar-section {
    padding: 12px 16px 8px;
    font-size: var(--font-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-secondary);
}

.profile-nav-item {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    padding: 12px 12px;
    border-radius: var(--radius-md);
    font-size: var(--font-small);
    font-weight: 500;
    color: var(--color-text-body);
    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: var(--color-subtle);
    color: var(--color-ink);
    text-decoration: none;
}

.profile-nav-item--active {
    background: var(--color-ink);
    color: var(--color-surface);
}

.profile-nav-item--active:hover {
    background: var(--color-hero-end);
    color: var(--color-surface);
}

.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 8px;
    border-radius: var(--radius-md);
    background: var(--color-danger);
    color: var(--color-surface);
    font-size: var(--font-caption);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: var(--lh-control);
}

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

.profile-page-title {
    font-size: var(--font-title);
    font-weight: 700;
    color: var(--color-ink);
    margin: 0 0 24px;
}

/* Cards */
.profile-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(var(--color-ink-rgb), 0.06);
    box-shadow: 0 2px 8px rgba(var(--color-ink-rgb), 0.04);
    padding: 24px;
    margin-bottom: 24px;
}

.profile-card-title {
    font-size: var(--font-body);
    font-weight: 600;
    color: var(--color-ink);
    margin: 0 0 24px;
    display: flex;
    align-items: center;
    gap: var(--gap-2);
}

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

/* ===== Form elements ===== */
.profile-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-4);
}

.profile-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2);
}

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

.profile-label {
    font-size: var(--font-small);
    font-weight: 600;
    color: var(--color-text-secondary);
}

.profile-input {
    width: 100%;
    padding: 12px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-field);
    font-size: var(--font-body);
    color: var(--color-ink);
    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: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.1);
    background: var(--color-surface);
}

.profile-input:disabled,
.profile-input[readonly] {
    background: var(--color-subtle);
    color: var(--color-text-secondary);
    cursor: not-allowed;
}

.profile-input::placeholder {
    color: var(--color-text-secondary);
    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: var(--color-text-secondary);
}

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

/* Select */
.profile-select {
    width: 100%;
    padding: 12px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-field);
    font-size: var(--font-body);
    color: var(--color-ink);
    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: 32px;
}

.profile-select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.1);
}

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

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

/* Textarea */
.profile-textarea {
    width: 100%;
    padding: 12px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-field);
    font-size: var(--font-body);
    color: var(--color-ink);
    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: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.1);
    background: var(--color-surface);
}

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

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

.profile-avatar-img {
    width: 100px;
    height: 100px;
    border-radius: var(--radius-full);
    background: var(--color-subtle);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid rgba(var(--color-ink-rgb), 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: var(--color-accent);
    opacity: 0.9;
}

.profile-avatar-img svg {
    width: 32px;
    height: 32px;
    color: var(--color-text-secondary);
}

.profile-avatar-remove {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--color-surface);
    border: 1px solid rgba(var(--color-ink-rgb), 0.1);
    box-shadow: 0 2px 6px rgba(var(--color-ink-rgb), 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: var(--color-danger-bg);
    border-color: var(--color-danger);
}

.profile-avatar-remove svg {
    width: 14px;
    height: 14px;
    color: var(--color-danger);
}

.profile-avatar-info {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2);
}

.profile-avatar-name {
    font-size: var(--font-body);
    font-weight: 600;
    color: var(--color-ink);
}

.profile-avatar-hint {
    font-size: var(--font-small);
    color: var(--color-text-secondary);
}

.profile-avatar-warning {
    font-size: var(--font-small);
    color: var(--color-danger);
    margin-top: 4px;
}

/* ===== Buttons ===== */
.profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-2);
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-size: var(--font-small);
    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, var(--color-accent) 0%, var(--color-ink) 100%);
    color: var(--color-surface);
    box-shadow: 0 2px 8px rgba(var(--color-ink-rgb), 0.15);
}

.profile-btn--primary:hover {
    color: var(--color-surface);
    box-shadow: 0 4px 12px rgba(var(--color-ink-rgb), 0.25);
}

.profile-btn--secondary {
    background: var(--color-subtle);
    color: var(--color-ink);
}

.profile-btn--secondary:hover {
    background: var(--color-border);
    color: var(--color-ink);
}

.profile-btn--outline {
    background: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-border);
}

.profile-btn--outline:hover {
    background: var(--color-field);
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.profile-btn--danger {
    background: transparent;
    color: var(--color-danger);
    border: 1px solid var(--color-danger-bg);
}

.profile-btn--danger:hover {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

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

.profile-btn--sm {
    padding: 8px 16px;
    font-size: var(--font-small);
    border-radius: var(--radius-sm);
}

.profile-btn--lg {
    padding: 12px 32px;
    font-size: var(--font-body);
}

/* Кнопка, заблокированная на время 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: var(--gap-2);
    cursor: pointer;
}

.profile-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--color-ink);
    cursor: pointer;
    flex-shrink: 0;
}

.profile-check-label {
    font-size: var(--font-small);
    color: var(--color-text-body);
    cursor: pointer;
}

/* ===== Status chips ===== */
.profile-status {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-2);
    padding: 4px 12px;
    border-radius: var(--radius-lg);
    font-size: var(--font-caption);
    font-weight: 600;
}

.profile-status--success {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.profile-status--warning {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.profile-status--neutral {
    background: var(--color-subtle);
    color: var(--color-text-secondary);
}

/* ===== Table ===== */
.profile-table-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(var(--color-ink-rgb), 0.06);
    box-shadow: 0 2px 8px rgba(var(--color-ink-rgb), 0.04);
    overflow: hidden;
    margin-bottom: 24px;
}

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

.profile-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-small);
}

/* Горизонтальный отступ ячеек — 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: var(--font-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-secondary);
    background: var(--color-field);
    border-bottom: 1px solid rgba(var(--color-ink-rgb), 0.06);
    white-space: nowrap;
}

.profile-table td {
    padding: 12px;
    color: var(--color-text-body);
    border-bottom: 1px solid rgba(var(--color-ink-rgb), 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: var(--color-field);
}

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

/* ===== Empty state ===== */
.profile-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--color-text-secondary);
}

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

.profile-empty-text {
    font-size: var(--font-body);
    font-weight: 400;
    margin-bottom: 8px;
    color: var(--color-text-secondary);
}

.profile-empty-hint {
    font-size: var(--font-small);
    color: var(--color-text-secondary);
}

/* ===== Toast ===== */
.profile-toast {
    position: fixed;
    bottom: 32px;
    right: 32px;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-size: var(--font-small);
    font-weight: 600;
    color: var(--color-surface);
    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: var(--color-success);
}

.profile-toast--danger {
    background: var(--color-danger);
}

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

.profile-docs-badge:hover {
    background: var(--color-accent-soft);
    border-color: var(--color-info-bg);
    color: var(--color-accent);
}

/* Подчёркивание при наведении — второй признак кликабельности рядом с цветом. */
.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: var(--color-warning-bg);
    border-color: var(--color-warning-bg);
    color: var(--color-warning);
    font-weight: 600;
}

.profile-role-select--member {
    background: var(--color-info-bg);
    border-color: var(--color-info-bg);
    color: var(--color-info);
    font-weight: 500;
}

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

.profile-stat-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid rgba(var(--color-ink-rgb), 0.06);
    padding: 24px;
    text-align: center;
}

.profile-stat-value {
    font-size: var(--font-title);
    font-weight: 700;
    color: var(--color-ink);
    line-height: var(--lh-heading);
}

.profile-stat-label {
    font-size: var(--font-small);
    color: var(--color-text-secondary);
    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: var(--font-small);
    line-height: var(--lh-ui);
    text-align: center;
    color: var(--color-danger);
}

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

   Текст выровнен по левому краю, а не по центру, как соседний #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: var(--gap-2);
    margin-top: 12px;
    padding: 12px 12px;
    border: 1px solid var(--color-warning-bg);
    border-radius: var(--radius-md);
    background: var(--color-warning-bg);
    font-size: var(--font-small);
    line-height: var(--lh-ui);
    color: var(--color-warning-ink);
}

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

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

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

.profile-table-note > svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--color-accent);
}

.profile-table-note-text {
    margin: 0;
    font-size: var(--font-small);
    line-height: var(--lh-ui);
    color: var(--color-text-secondary);
}

.profile-table-note-text b {
    color: var(--color-ink);
    font-weight: 600;
}

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

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

/* Проценты, а не пиксели: табличный режим живёт только выше 1280px (>=1281px, ниже
   карточный медиа-блок разбирает таблицу), а контентная колонка там — 868px
   (обёртка 1200 минус поля 48, сайдбар 260 и gap 24), и .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(var(--color-ink-rgb), 0.04);
}

/* Пустая строка сообщений не занимает высоты: вертикальных отступов у ячейки
   нет, отступ живёт на самом видимом блоке. Разделитель сотрудников живёт
   здесь — селектор с двумя классами намеренно, одноклассовый проиграл бы
   правилу выше по числу элементов. */
.profile-table--members .profile-table-msg-row td {
    padding: 0 12px;
    border-bottom: 1px solid rgba(var(--color-ink-rgb), 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: var(--color-field);
}

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

.profile-table-member {
    display: flex;
    align-items: center;
    gap: var(--gap-3);
    min-width: 0;
}

.profile-member-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--color-subtle);
    object-fit: cover;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-body);
    font-weight: 600;
    color: var(--color-text-secondary);
}

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

/* Имя в одну строку с многоточием: так высота строки одинакова у всех
   сотрудников. Полное имя остаётся в title и на странице сотрудника. */
.profile-member-name {
    display: block;
    font-size: var(--font-small);
    font-weight: 600;
    color: var(--color-ink);
    line-height: var(--lh-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Телефон под именем. #5a6a7e — 5.53:1 на белом; прежний #8a95a5 давал 3.03:1
   и не проходил AA. */
.profile-member-meta {
    display: block;
    font-size: var(--font-small);
    color: var(--color-text-secondary);
    line-height: var(--lh-ui);
    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 var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-field);
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.profile-docs-limit-group:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.1);
    background: var(--color-surface);
}

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

/* #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 12px;
    background: var(--color-warning-bg);
    color: var(--color-warning-ink);
    border-left: 1px solid var(--color-warning-bg);
    font-size: var(--font-caption);
    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: var(--gap-2);
}

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

/* ===== Request card (phone permissions) ===== */
.profile-request-card {
    display: flex;
    align-items: center;
    gap: var(--gap-4);
    padding: 16px 24px;
    background: var(--color-field);
    border-radius: var(--radius-md);
    border: 1px solid rgba(var(--color-ink-rgb), 0.06);
    margin-bottom: 8px;
}

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

.profile-request-name {
    font-size: var(--font-small);
    font-weight: 600;
    color: var(--color-ink);
}

.profile-request-detail {
    font-size: var(--font-small);
    color: var(--color-text-secondary);
    margin-top: 4px;
}

.profile-request-actions {
    display: flex;
    gap: var(--gap-2);
    flex-shrink: 0;
}

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

.profile-password-rule {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    font-size: var(--font-small);
    color: var(--color-text-secondary);
    transition: color 0.2s;
}

.profile-password-rule--valid {
    color: var(--color-success);
}

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

/* ===== Divider ===== */
.profile-divider {
    height: 1px;
    background: rgba(var(--color-ink-rgb), 0.06);
    margin: 24px 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(var(--color-ink-rgb), 0.04);
}

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

.profile-info-label {
    font-size: var(--font-small);
    color: var(--color-text-secondary);
}

.profile-info-value {
    font-size: var(--font-small);
    font-weight: 600;
    color: var(--color-ink);
}

/* ===== API key item ===== */

.profile-api-key-name {
    font-size: var(--font-small);
    font-weight: 600;
    color: var(--color-ink);
}

.profile-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
    color: var(--color-text-secondary);
}

.profile-icon-btn:hover {
    background: var(--color-subtle);
    color: var(--color-ink);
}

.profile-icon-btn--danger:hover {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

/* Область касания 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(var(--color-ink-rgb), 0.5);
    backdrop-filter: blur(4px);
    z-index: 1050;
    align-items: center;
    justify-content: center;
}

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

.profile-modal {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 48px rgba(var(--color-ink-rgb), 0.15);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px;
    position: relative;
}

.profile-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    border: none;
    background: var(--color-subtle);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    color: var(--color-text-secondary);
}

.profile-modal-close:hover {
    background: var(--color-border);
    color: var(--color-ink);
}

.profile-modal-title {
    font-size: var(--font-body);
    font-weight: 600;
    color: var(--color-ink);
    margin: 0 0 24px;
    padding-right: 48px;
}

.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: var(--gap-2);
    margin-top: 24px;
    justify-content: flex-end;
}
.profile-modal-actions--center { justify-content: center; }
.profile-modal-body { font-size: var(--font-small); color: var(--color-text-body); line-height: var(--lh-text); }

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

.profile-link {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
}

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

.profile-saved-indicator {
    opacity: 0;
    transition: opacity 0.3s;
    font-size: var(--font-caption);
    padding: 4px 8px;
}

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

.profile-field-error {
    font-size: var(--font-small);
    color: var(--color-danger);
    margin-top: 4px;
}

.profile-field-notice {
    padding: 12px 12px;
    border-radius: var(--radius-md);
    font-size: var(--font-small);
    margin-bottom: 16px;
}

.profile-field-notice--info {
    background: var(--color-border);
    color: var(--color-accent);
}

.profile-field-notice--success {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.profile-hint {
    font-size: var(--font-small);
    color: var(--color-text-secondary);
    margin-top: 4px;
}

/* ===== Responsive ===== */
@media (max-width: 1280px) {
    .profile-wrap {
        padding: 32px 16px 64px;
        gap: var(--gap-5);
    }

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

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

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

    .profile-sidebar-nav {
        flex-direction: column;
        gap: var(--gap-1);
        padding: 8px;
    }

    .profile-sidebar-section {
        font-size: var(--font-caption);
        padding: 8px 12px 4px;
    }

    .profile-nav-item {
        padding: 12px 12px;
        font-size: var(--font-small);
    }

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

    .profile-card {
        padding: 24px;
    }

    .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;
    }
}

/* Таблица, которая ниже 1281px разбирается на карточки.
   Порог мерит viewport, но рассчитан от ширины КОНТЕНТНОЙ колонки: рядом с
   сайдбаром таблица получает не viewport, а 868px (>1280px: обёртка 1200 минус
   сайдбар 260, gap 24 и паддинги 48) либо viewport-276px (769-1280px: 220 + 24 + 32).
   Табличному режиму сотрудников нужно ~810px контента: заголовок «Подписано»
   (~97px с паддингами) занимает свои 12% целиком, touch-цели И.О. и удаления
   (44px) — свои 8%-колонки, плюс запас на разброс рендеринга шрифтов. Столько
   контент получает только выше 1280px (шкала переломов Э2) — там колонка
   868px. Прежний порог 575.98px мерил голый viewport: на
   769-1024px контента оставалось ~490-750px, заголовки наезжали друг на
   друга, а правые ячейки резались переполнением (.profile-table-card обрезает
   его через overflow:hidden — прокрутки нет); диапазон 576-768px был тесен
   так же. Карточная раскладка ниже порога — прежний макет, проверенный от
   375px: на 375px под контент остаётся 343px, и колонки приглашений
   (~400px минимум) в таблицу уже не встают. */
@media (max-width: 1280px) {
    .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(var(--color-ink-rgb), 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: var(--gap-3);
        padding: 4px 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: var(--color-text-secondary);
    }

    /* Ячейка действия: подписи нет, кнопка встаёт по правому краю на одну
       вертикаль со значениями, отступ сверху отделяет её от кода */
    .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(var(--color-ink-rgb), 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(var(--color-ink-rgb), 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 12px;
    }

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

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

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

    .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: var(--gap-2);
        padding: 0 14px;
        border-radius: var(--radius-md);
        border: 1px solid var(--color-danger-bg);
        color: var(--color-danger);
        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;
    }
}

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

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

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

/* Фон наведения не темнить: #5a6a7e на #f0f2f7 — 4.94:1, на --color-border
   (#e0e6ee) уже 4.40, ниже нормы AA. */
.profile-abc-link:hover {
    background: var(--color-subtle);
}

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

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

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

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

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

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

    .profile-abc-form {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: var(--gap-3);
        padding: 12px 16px;
        background: var(--color-field);
        border-bottom: 1px solid rgba(var(--color-ink-rgb), 0.06);
    }

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

    /* 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-8 { margin-top: 8px; }
.profile-mt-12 { margin-top: 12px; }
.profile-mt-16 { margin-top: 16px; }
.profile-mt-24 { margin-top: 24px; }
.profile-mb-8 { margin-bottom: 8px; }
.profile-mb-16 { margin-bottom: 16px; }
.profile-gap-8 { gap: var(--gap-2); }
.profile-gap-16 { gap: var(--gap-4); }
.profile-flex { display: flex; }
.profile-flex-col { flex-direction: column; }
.profile-flex-center { align-items: center; }
.profile-flex-between { justify-content: space-between; }
.profile-text-center { text-align: center; }
.profile-text-muted { color: var(--color-text-secondary); font-size: var(--font-small); }
.profile-text-sm { font-size: var(--font-small); color: var(--color-text-body); }
.profile-mono { font-family: monospace; }
/* Код просроченного приглашения: диктовать его больше нельзя. Приглушение —
   не только цветом (#5a6a7e даёт 5.5:1 на белом, WCAG AA проходит):
   зачёркивание читается и без различения оттенков. */
.profile-mono--expired { color: var(--color-text-secondary); text-decoration: line-through; }
.profile-card-title--sm { font-size: var(--font-small); }
.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: var(--gap-2);
    padding: 24px 24px;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-field);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.profile-upload-zone:hover {
    border-color: var(--color-border);
    background: var(--color-accent-soft);
}

.profile-upload-zone--active {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.08);
}

.profile-upload-zone-icon {
    width: 32px;
    height: 32px;
    color: var(--color-text-secondary);
}

.profile-upload-zone:hover .profile-upload-zone-icon,
.profile-upload-zone--active .profile-upload-zone-icon {
    color: var(--color-accent);
}

.profile-upload-zone-text {
    font-size: var(--font-small);
    color: var(--color-text-secondary);
}

.profile-upload-zone-link {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(var(--color-accent-rgb), 0.3);
}

.profile-upload-zone:hover .profile-upload-zone-link {
    text-decoration-color: var(--color-accent);
}

.profile-upload-zone-hint {
    font-size: var(--font-caption);
    color: var(--color-text-secondary);
}

.profile-upload-zone-selected {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-2);
    margin-top: 4px;
    padding: 4px 12px;
    background: var(--color-info-bg);
    border-radius: var(--radius-sm);
    font-size: var(--font-body);
    font-weight: 400;
    color: var(--color-info);
}

/* File item (uploaded) */
.profile-file-item {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    padding: 12px 12px;
    background: var(--color-field);
    border-radius: var(--radius-md);
    border: 1px solid rgba(var(--color-ink-rgb), 0.04);
    transition: background 0.15s;
}

.profile-file-item:hover {
    background: var(--color-subtle);
}

.profile-file-icon {
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.profile-file-name {
    flex: 1;
    font-size: var(--font-small);
    color: var(--color-text-body);
    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;
}

/* ===== Select2 overrides ===== */
.profile-content .select2-container--default .select2-selection--single {
    height: 42px;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-field);
    font-size: var(--font-body);
    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: var(--color-ink);
    line-height: 28px;
    padding-left: 0;
}

.profile-content .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--color-text-secondary);
}

.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: var(--color-text-secondary) 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: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.1);
    background: var(--color-surface);
}

.profile-content .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--color-accent) transparent;
}

.profile-content .select2-container--default .select2-selection--single .select2-selection__clear {
    color: var(--color-text-secondary);
    font-size: var(--font-body);
    margin-right: 4px;
}

.profile-content .select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: var(--color-danger);
}

/* Dropdown */
.select2-container--default .select2-dropdown {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(var(--color-ink-rgb), 0.12);
    overflow: hidden;
    margin-top: 4px;
}

.select2-container--default .select2-search--dropdown {
    padding: 12px 12px;
    background: var(--color-field);
    border-bottom: 1px solid rgba(var(--color-ink-rgb), 0.06);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: var(--font-body);
    font-family: inherit;
    color: var(--color-ink);
    background: var(--color-surface);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.1);
}

.select2-container--default .select2-results__option {
    padding: 12px 12px;
    font-size: var(--font-body);
    color: var(--color-text-body);
    transition: background 0.1s;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--color-ink);
    color: var(--color-surface);
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-weight: 600;
}

.select2-container--default .select2-results__option--highlighted[aria-selected=true] {
    background: var(--color-ink);
    color: var(--color-surface);
}

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

.select2-container--default .select2-results__message {
    padding: 12px 12px;
    font-size: var(--font-body);
    color: var(--color-text-secondary);
}

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

/* ===== Страница группы ===== */

.group-back {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-2);
    min-height: 44px;
    font-size: var(--font-small);
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
}

.group-back:hover {
    text-decoration: underline;
    color: var(--color-accent);
}

.group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--gap-4);
}

.group-head-name {
    flex: 1 1 280px;
    min-width: 0;
    max-width: 420px;
}

.group-head-actions {
    flex: 0 0 auto;
    margin-left: auto;
}

/* Сводка: пункты переносятся по одному, разделитель — отдельный span, чтобы
   на переносе точка не оставалась в начале строки. */
.group-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-1) var(--gap-2);
    margin: 16px 0 0;
    font-size: var(--font-small);
    color: var(--color-text-secondary);
}

.group-summary-sep {
    color: var(--color-text-secondary);
}

/* Одна колонка на всех ширинах — как на остальных страницах профиля. */
.group-cols {
    display: flex;
    flex-direction: column;
    gap: var(--gap-4);
}

.group-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-2) var(--gap-4);
    margin-bottom: 12px;
}

.group-section-head .profile-card-title {
    margin: 0;
}

/* Состав — список, а не таблица: строка короткая (имя, роль, действие), и на
   375px она разбирается переносом, а не горизонтальным скроллом. В списке
   только участники группы: сотрудников компании сотни, участников единицы —
   десятки, и добавление идёт через поиск, а не через общий список. */
.group-member-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-1);
}

/* Строка заявки лежит в своём списке и класса состава не носит: по нему
   скрипт страницы собирает тело сохранения и фильтрует поиск. Раскладка
   у обеих одна, и держат её оба селектора. */
.group-member-row,
.group-join-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-2) var(--gap-3);
    padding: 8px 0;
    border-bottom: 1px solid rgba(var(--color-ink-rgb), 0.06);
}

.group-member-row:last-child,
.group-join-row:last-child {
    border-bottom: none;
}

.group-member-main {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    flex: 1 1 180px;
    min-width: 0;
}

.group-member-name {
    font-size: var(--font-small);
    font-weight: 600;
    color: var(--color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Роль и действие — одной группой: иначе при переносе на вторую строку
   уезжает только кнопка, и строка читается как оборванная. */
.group-member-controls {
    display: flex;
    align-items: center;
    gap: var(--gap-3);
    margin-left: auto;
    flex: 0 0 auto;
}

.group-member-role {
    flex: 0 0 auto;
    width: 150px;
    font-size: var(--font-small);
}

/* Роль в виде «только чтение»: те же два цвета, что у селекта, иначе одна и
   та же роль читалась бы по-разному в своей строке и в чужой. */
.group-member-role-static {
    margin-left: auto;
    flex: 0 0 auto;
    padding: 4px 12px;
    border: 1px solid;
    border-radius: var(--radius-full);
    font-size: var(--font-small);
    white-space: nowrap;
}

.group-member-role-static--leader {
    background-color: var(--color-warning-bg);
    border-color: var(--color-warning-bg);
    color: var(--color-warning-ink);
    font-weight: 600;
}

.group-member-role-static--member {
    background-color: var(--color-info-bg);
    border-color: var(--color-info-bg);
    color: var(--color-info);
    font-weight: 400;
}

/* Собственная строка и.о.: значок «Это Вы» и причина, по которой у неё нет
   контролов. Причина выводится текстом, а не серым селектом: отключённый
   контрол читается как временная неготовность, а запрет здесь постоянный. */
.group-member-self-badge {
    flex: 0 0 auto;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    background: var(--color-accent-soft);
    border: 1px solid var(--color-accent-soft);
    color: var(--color-accent);
    font-size: var(--font-caption);
    font-weight: 600;
    white-space: nowrap;
}

.group-member-self-note {
    flex: 1 1 100%;
    font-size: var(--font-small);
    line-height: var(--lh-ui);
    color: var(--color-text-secondary);
}

/* Убранный участник остаётся в разметке (несохранённое изменение, его
   возвращает «Отменить изменения»), но из списка уходит совсем. */
.group-member-row[data-removed="1"] {
    display: none;
}

.group-member-row--new {
    background: var(--color-field);
}

/* Добавление участника: поле с подсказками по сотрудникам компании. */
.group-ac {
    position: relative;
}

.group-ac-list {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(var(--color-ink-rgb), 0.12);
    max-height: 264px;
    overflow-y: auto;
}

.group-ac-option {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    min-height: 44px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--font-small);
    color: var(--color-text-body);
    cursor: pointer;
}

.group-ac-option:hover,
.group-ac-option--active {
    background: var(--color-subtle);
    color: var(--color-ink);
}

.group-ac-empty {
    padding: 12px 12px;
    font-size: var(--font-small);
    color: var(--color-text-secondary);
}

/* Полоса букв внутри карточки: правила выше рассчитаны на карточку таблицы,
   у которой край уже обрамлён. */
.group-abc-wrap {
    border: 1px solid rgba(var(--color-ink-rgb), 0.06);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 16px;
}

.group-abc-wrap .profile-abc,
.group-abc-wrap .profile-abc-form {
    border-bottom: none;
}

/* Тач-цель 44x44 на весь ярлык: сам чекбокс 18px, пальцем в него не попасть. */
.group-check-tap {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-2);
    min-height: 44px;
    min-width: 44px;
    padding: 0 4px;
    cursor: pointer;
    font-size: var(--font-small);
    color: var(--color-text-body);
    margin: 0;
}

.group-check-tap--cell {
    justify-content: center;
    width: 100%;
}

.group-check-tap--disabled {
    cursor: not-allowed;
    color: var(--color-text-secondary);
}

.profile-checkbox:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.group-tpl-table {
    table-layout: fixed;
}

/* Заголовки переносятся: «Доступен группе» по-казахски длиннее, и nowrap из
   .profile-table увёл бы шапку за край карточки. */
.group-tpl-table th {
    white-space: normal;
    vertical-align: bottom;
}

.group-col-check {
    width: 15%;
}

.group-col-approve {
    width: 16%;
}

.group-col-quorum {
    width: 25%;
}

.group-tpl-name {
    font-size: var(--font-small);
    font-weight: 600;
    color: var(--color-ink);
    overflow-wrap: anywhere;
}

.group-tpl-meta {
    font-size: var(--font-caption);
    color: var(--color-text-secondary);
    margin-top: 4px;
    overflow-wrap: anywhere;
}

.group-tpl-meta-sep {
    color: var(--color-text-secondary);
}

.group-tpl-flags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-2);
    margin-top: 8px;
}

.group-tpl-cell-check {
    text-align: center;
}

/* Шапка колонки: подпись и чекбокс «отметить все найденные» одним столбиком. */
.group-th-check {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--gap-1) var(--gap-2);
}

.group-th-check .group-check-tap {
    font-size: inherit;
    color: inherit;
    letter-spacing: inherit;
    gap: var(--gap-2);
}

.group-th-check .group-th-note {
    flex-basis: 100%;
}

.group-th-note {
    font-size: var(--font-caption);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-warning-ink);
    text-align: center;
}

/* Ниже 1281px шапка таблицы скрыта целиком — чекбоксы колонок переезжают в
   полосу над таблицей. Оба набора живут в разметке, но взаимно скрыты через
   display: none, иначе скрытый остаётся в порядке табуляции. */
.group-bulkbar {
    display: none;
}

.group-bulkbar-title {
    flex: 1 1 100%;
    font-size: var(--font-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-secondary);
}

.group-tpl-row--changed td {
    background: var(--color-field);
}

.group-tpl-row--changed .group-tpl-name::after {
    content: "\2022";
    color: var(--color-accent);
    margin-left: 8px;
}

/* Полоса сохранения. sticky, а не fixed: в потоке она занимает своё место в
   конце страницы и последнюю строку таблицы не перекрывает. */
.group-savebar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-3);
    padding: 12px 16px;
    margin-top: 24px;
    background: var(--color-surface);
    border: 1px solid rgba(var(--color-ink-rgb), 0.08);
    border-radius: var(--radius-lg);
    box-shadow: 0 -4px 16px rgba(var(--color-ink-rgb), 0.08);
}

.group-savebar-note {
    font-size: var(--font-small);
    color: var(--color-text-secondary);
    flex: 1 1 200px;
    min-width: 0;
}

.group-savebar .profile-btn {
    flex: 0 0 auto;
}

/* Предупреждения: состояние несут иконка и текст, не только цвет. */
.group-notice {
    display: flex;
    gap: var(--gap-2);
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: var(--font-small);
    line-height: var(--lh-ui);
    margin-bottom: 12px;
}

.group-notice > svg {
    flex-shrink: 0;
    margin-top: 4px;
}

.group-notice-body {
    min-width: 0;
}

.group-notice-title {
    font-weight: 600;
    margin-bottom: 8px;
}

.group-notice ul {
    margin: 0;
    padding-left: 16px;
}

.group-notice li {
    margin-bottom: 4px;
    overflow-wrap: anywhere;
}

.group-notice li:last-child {
    margin-bottom: 0;
}

.group-notice--warn {
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-bg);
    color: var(--color-warning-ink);
}

.group-notice--info {
    background: var(--color-accent-soft);
    border: 1px solid var(--color-accent-soft);
    color: var(--color-accent);
}

.group-notice--danger {
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger-bg);
    color: var(--color-danger-ink);
}

.group-notice--success {
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-bg);
    color: var(--color-success);
}

.group-modal-list {
    margin: 12px 0 0;
    padding-left: 16px;
    font-size: var(--font-small);
    line-height: var(--lh-ui);
}

.group-modal-list li {
    margin-bottom: 8px;
    overflow-wrap: anywhere;
}

/* Тост поднят над липкой полосой сохранения: на обычном месте (bottom: 32px)
   он закрывал бы кнопку, которую только что нажали. */
.profile-toast--above-savebar {
    bottom: 96px;
}

/* Полоса букв состава — кнопки, а не ссылки: фильтр живёт на странице, без
   перезагрузки. Сброс обрамления кнопки весом 0,1,1 — ниже :hover (0,2,0) и
   .profile-abc-link--active (0,2,0), иначе выбранная кнопка потеряла бы фон. */
button.profile-abc-link {
    border: none;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

@media (max-width: 1280px) {
    .group-tpl-table,
    .group-tpl-table tbody,
    .group-tpl-table tr {
        display: block;
    }

    .group-tpl-table thead,
    .group-tpl-table colgroup {
        display: none;
    }

    .group-tpl-table tr {
        padding: 12px 16px;
        border-bottom: 1px solid rgba(var(--color-ink-rgb), 0.06);
    }

    .group-tpl-table tbody tr:last-child {
        border-bottom: none;
    }

    .group-tpl-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--gap-3);
        padding: 4px 0;
        border-bottom: none;
    }

    .group-tpl-table 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: var(--color-text-secondary);
    }

    /* Селектор с классом ячейки И типом: у общего правила td выше вес (0,1,1),
       одноклассовый модификатор молча проиграл бы ему и оставил название
       шаблона в одной строке с папкой и датой. */
    .group-tpl-table td.group-tpl-cell-name {
        display: block;
        padding: 0 0 8px;
    }

    .group-tpl-table td.group-tpl-cell-check {
        justify-content: space-between;
    }

    .group-check-tap--cell {
        width: auto;
        justify-content: flex-end;
    }

    .group-tpl-table td.group-tpl-cell-quorum {
        display: block;
        padding: 8px 0 0;
    }

    .group-tpl-table td.group-tpl-cell-quorum::before {
        display: block;
        margin-bottom: 8px;
    }

    .group-tpl-table tbody tr:hover td {
        background: transparent;
    }

    .group-tpl-row--changed td {
        background: transparent;
    }

    .group-tpl-row--changed {
        background: var(--color-field);
    }

    .group-bulkbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--gap-1) var(--gap-4);
        padding: 12px 16px;
        background: var(--color-field);
        border-bottom: 1px solid rgba(var(--color-ink-rgb), 0.06);
    }
}

@media (max-width: 768px) {
    .group-head-actions {
        margin-left: 0;
        width: 100%;
    }

    .group-head-actions .profile-btn {
        width: 100%;
    }

    .group-head-name {
        max-width: none;
    }

    /* Повтор модификатора обязателен: у него та же специфичность, что у
       .profile-toast, и без этой строки тост встал бы поверх кнопки
       «Сохранить», которую только что нажали. */
    .profile-toast--above-savebar {
        bottom: 88px;
    }
}

@media (max-width: 640px) {
    .group-member-controls {
        width: 100%;
        margin-left: 0;
    }

    .group-member-role {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Значок роли уходит на вторую строку по той же причине, что и селект с
       кнопкой: рядом с именем он обрезал бы многоточием как раз фамилию. */
    .group-member-main {
        flex: 1 1 100%;
    }

    .group-member-role-static {
        margin-left: 0;
    }

    .group-savebar {
        padding: 12px 12px;
        gap: var(--gap-2);
    }

    .group-savebar-note {
        flex: 1 1 100%;
    }

    .group-savebar .profile-btn {
        flex: 1 1 0;
        min-width: 0;
        padding: 12px 12px;
    }

    /* Подпись полосы сохранения уходит на отдельную строку — тост поднимается
       ещё выше, иначе он ложится на текст «Есть несохранённые изменения». */
    .profile-toast--above-savebar {
        bottom: 116px;
    }
}

/* Флаг «включать новых сотрудников». Ярлык обёрнут вокруг всего блока:
   сам чекбокс 18px, и пальцем в него не попасть. */
.group-flag { display: flex; align-items: flex-start; gap: var(--gap-3); padding: 12px 16px; margin-bottom: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-field); cursor: pointer; }
.group-flag-box { margin-top: 4px; }
.group-flag-body { min-width: 0; }
/* display: block обязателен: внутри ярлыка это span'ы, и без него пояснение
   прилипает к заголовку в одну строку. */
.group-flag-title { display: block; font-size: var(--font-small); font-weight: 600; color: var(--color-ink); }
.group-flag-hint { display: block; font-size: var(--font-small); line-height: var(--lh-ui); color: var(--color-text-secondary); margin-top: 4px; }
.group-flag--on { border-color: var(--color-success-bg); background: var(--color-success-bg); }

/* Каталог групп — вид рядового сотрудника. */
.group-catalog-intro { color: var(--color-text-secondary); margin: 0 0 16px; }
.profile-section-title { font-size: var(--font-body); font-weight: 600; color: var(--color-ink); margin: 0 0 12px; }
.group-catalog-card { margin-bottom: 12px; }
.group-catalog-name { color: var(--color-ink); font-weight: 600; }
.group-catalog-note { color: var(--color-text-secondary); }
.group-catalog-empty { color: var(--color-text-secondary); }
/* Touch-цель ≥ 44px: кнопка подачи и кнопки решения заявки. */
.group-join-btn, .group-join-row .profile-btn { min-height: 44px; }
.group-join-row .group-member-controls { gap: var(--gap-2); }
.group-join-date { font-size: var(--font-small); color: var(--color-text-secondary); }
/* Вид чтения: имя группы вместо поля ввода. */
.group-head-name-static { font-size: var(--font-body); font-weight: 600; color: var(--color-ink); margin-top: 4px; }
/* Э2 Ч2: цель касания 44×44 на телефоне (решение о шкале, «Контролы»). */
@media (max-width: 640px) {
    .profile-btn,
    .profile-nav-item,
    .tg-notif-item button {
        min-height: 44px;
    }
    .profile-check-item .profile-check-label,
    .tg-notif-item .profile-check-label {
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .profile-card-title .profile-link {
        padding-top: 10px;
        padding-bottom: 10px;
        margin-top: -10px;
        margin-bottom: -10px;
    }
    .profile-docs-limit-group .profile-input--docs-limit {
        height: 44px;
        margin-top: -1px;
        margin-bottom: -1px;
    }
    .profile-input-wrap .profile-pass-toggle {
        width: 44px;
        height: 44px;
        padding: 12px;
        margin: -12px;
    }
    .profile-content .select2-container .select2-selection--single {
        height: 44px;
        padding-top: 7px;
        padding-bottom: 7px;
    }
    .profile-content .select2-container .select2-selection--single .select2-selection__arrow {
        height: 42px;
    }
}