/* =========================================================================
   SAMCS account console — brand override поверх keycloak.v3.account (React/PF5).

   Стратегия: РАЗМЕТКУ React-app не трогаем (хрупко к апгрейду KC) — красим
   через (1) PF5 global CSS-переменные в :root (каскадят на большинство
   компонентов сразу) + (2) точечные селекторы для поверхностей, которым
   глобалей мало (masthead, nav, cards, alerts, modal, sessions).
   Шрифт/form-controls — shared из login (fonts.css + _form-controls.css, sync
   platform/access/id/scripts/sync-keycloak-shared.sh). ⚠️ Селекторы .pf-v5-c-* проверять после
   апгрейда KC (см. platform/access/id/anti-patterns.md).
   ========================================================================= */

@import url('tokens.css');
@import url('fonts.css');
@import url('_form-controls.css');

:root {
  /* Override PF5 globals — main brand color.
     primary--100 каскадит на switch/checkbox/radio/tabs-current/progress/
     spinner автоматически (компоненты PF5 ссылаются на эту переменную) —
     отдельные правила для них не нужны. */
  --pf-v5-global--primary-color--100: var(--fpmi-indigo);
  --pf-v5-global--primary-color--200: var(--fpmi-indigo-hover);
  --pf-v5-global--active-color--100:  var(--fpmi-indigo);
  --pf-v5-global--active-color--200:  var(--fpmi-indigo-hover);
  --pf-v5-global--link--Color:        var(--fpmi-blue);
  --pf-v5-global--link--Color--hover: var(--fpmi-blue-dark);

  /* Semantic globals → FPMI (alerts, status badges, иконки) */
  --pf-v5-global--danger-color--100:  var(--fpmi-error);
  --pf-v5-global--warning-color--100: var(--fpmi-warning);
  --pf-v5-global--success-color--100: var(--fpmi-success);
  --pf-v5-global--info-color--100:    var(--fpmi-blue);

  /* Шрифт: fonts.css объявляет @font-face, но PF5 держит свой font-family.
     Применяем Inter ко всему React-приложению через PF5 font-vars
     (mono-брендфейса нет — monospace оставляем дефолтным, брендбук §2). */
  --pf-v5-global--FontFamily--text:    var(--font-sans);
  --pf-v5-global--FontFamily--heading: var(--font-sans);
}

/* Force light background for the whole app (если темная сохранилась где-то) */
html, body, .pf-v5-c-page {
  background: var(--fpmi-bg-1) !important;
  color: var(--fpmi-ink) !important;
  color-scheme: light !important;
}

/* Page header brand — весь header indigo, без dark toolbar islands */
.pf-v5-c-page__header,
.pf-v5-c-masthead {
  background: var(--fpmi-indigo) !important;
  color: #FFFFFF !important;
  border-bottom: none !important;
}

/* Toolbar inside masthead = PF5 default rgb(21,21,21) — делаем transparent чтобы parent indigo bg показался */
.pf-v5-c-masthead .pf-v5-c-toolbar,
.pf-v5-c-masthead__content .pf-v5-c-toolbar,
.pf-v5-c-masthead .pf-v5-c-toolbar__content,
.pf-v5-c-masthead .pf-v5-c-toolbar__content-section {
  background: transparent !important;
  background-color: transparent !important;
}

.pf-v5-c-page__header-brand-text,
.pf-v5-c-masthead__brand {
  color: #FFFFFF !important;
}

/* Logo override — React-app bundle-ит свой default KEYCLOAK logo как asset.
   theme.properties / resources/img не подхватывается React-приложением.
   Решение: скрыть default <img> + положить наш SAMCS logo как pseudo-element
   background на parent <a class="pf-v5-c-masthead__brand">. */
.pf-v5-c-masthead__brand img {
  display: none !important;
}
.pf-v5-c-masthead__brand {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  width: auto !important;
  min-width: 180px !important;
}
.pf-v5-c-masthead__brand::after {
  content: '';
  display: block;
  width: 180px;
  height: 35px;
  background: url('../img/logo.svg') no-repeat left center / contain;
}

/* Hamburger toggle + user dropdown — white в indigo header */
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain,
.pf-v5-c-masthead .pf-v5-c-menu-toggle {
  color: #FFFFFF !important;
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle__text { color: #FFFFFF !important; }
.pf-v5-c-masthead .pf-v5-c-menu-toggle__controls { color: #FFFFFF !important; }

/* Primary buttons — orange CTA */
.pf-v5-c-button.pf-m-primary {
  background-color: var(--fpmi-orange) !important;
  --pf-v5-c-button--m-primary--BackgroundColor: var(--fpmi-orange) !important;
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--fpmi-orange-dark) !important;
  color: #FFFFFF !important;
}

.pf-v5-c-button.pf-m-primary:hover {
  background-color: var(--fpmi-orange-dark) !important;
}

/* Links — FPMI blue */
a, a:visited {
  color: var(--fpmi-blue);
}
a:hover { color: var(--fpmi-blue-dark); }

/* inputs/form-control — стилизуются через _form-controls.css (shared с login) */

/* Sidebar (left nav) — light surface */
.pf-v5-c-page__sidebar,
.pf-v5-c-nav,
.pf-v5-c-nav__list {
  background: #FFFFFF !important;
  color: var(--fpmi-ink) !important;
}

.pf-v5-c-nav__link,
.pf-v5-c-nav__item a {
  color: var(--fpmi-ink-2) !important;
}

/* PF5 рисует у nav__link/nav__item нижнюю линию псевдоэлементом ::before
   (1px #3C3F42 — сепаратор для тёмного сайдбара) + левый акцент ::after
   (4px light-blue на hover/current). На белом сайдбаре это «лишние полоски»
   между всеми пунктами и ДВЕ полосы у активного (2026-08-01). Глушим оба;
   свой индикатор рисуем ::after без сдвига текста. */
.pf-v5-c-nav__link::before,
.pf-v5-c-nav__item::before,
.pf-v5-c-nav__link::after { border: none !important; }

/* Только ТОЧНЫЙ активный пункт: li.pf-m-current у expandable-родителя
   («Безопасность») — НЕ красить его подпункты (раньше descendant-селектор
   заливал blue-50 всю секцию). */
.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__item.pf-m-current:not(.pf-m-expanded) > .pf-v5-c-nav__link {
  background: var(--fpmi-blue-50) !important;
  color: var(--fpmi-indigo) !important;
}
.pf-v5-c-nav__link.pf-m-current::after,
.pf-v5-c-nav__item.pf-m-current:not(.pf-m-expanded) > .pf-v5-c-nav__link::after {
  content: '' !important;
  position: absolute !important;
  inset-block: 0 !important;
  inset-inline-start: 0 !important;
  width: 3px !important;
  background: var(--fpmi-indigo) !important;
  border: none !important;
}

/* Дивайдеры между пунктами («лишние полоски» между Приложения/Группы) —
   account-nav из 5 пунктов в них не нуждается. */
.pf-v5-c-nav .pf-v5-c-divider { display: none !important; }

/* Expandable nav button (Безопасность с раскрывающимся submenu) — это <button>,
   у него PF5 default dark hover. Override на наш light-blue hover. */
button.pf-v5-c-nav__link,
.pf-v5-c-nav__item.pf-m-expandable > button.pf-v5-c-nav__link {
  background: transparent !important;
  color: var(--fpmi-ink-2) !important;
  border: none !important;
  width: 100% !important;
  text-align: left !important;
  cursor: pointer;
}

button.pf-v5-c-nav__link:hover,
.pf-v5-c-nav__item.pf-m-expandable > button.pf-v5-c-nav__link:hover,
button.pf-v5-c-nav__link:focus {
  background: var(--fpmi-blue-50) !important;
  color: var(--fpmi-indigo) !important;
  outline: none !important;
}

/* Раскрытый родитель («Безопасность») — БЕЗ сплошной заливки (раньше на
   aria-expanded вешалась голубая «заплатка» на всю строку, 2026-08-01):
   только indigo-текст, когда внутри есть активный пункт. */
.pf-v5-c-nav__item.pf-m-expandable.pf-m-current > button.pf-v5-c-nav__link {
  color: var(--fpmi-indigo) !important;
}

/* Toggle icon (chevron) внутри expandable */
.pf-v5-c-nav__link .pf-v5-c-nav__toggle,
.pf-v5-c-nav__link .pf-v5-c-nav__toggle-icon { color: inherit !important; }

/* Также hover на обычных <a class="pf-v5-c-nav__link"> — наш light-blue, не PF5 default */
a.pf-v5-c-nav__link:hover {
  background: var(--fpmi-blue-50) !important;
  color: var(--fpmi-indigo) !important;
}

/* Section headings */
.pf-v5-c-title {
  color: var(--fpmi-ink-2) !important;
}

/* =========================================================================
   React-internals: PF5-компоненты страниц (Personal info / Account security /
   Device activity / Applications / Groups). Размётку не трогаем — только бренд.
   Большинство interactive-состояний уже indigo через primary--100 (см. :root).
   Ниже — поверхности, которым глобалей мало.
   ========================================================================= */

/* Content cards — белые поверхности контента */
.pf-v5-c-card {
  background: #FFFFFF !important;
  border-radius: 8px !important;
  border: 1px solid var(--fpmi-line) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06) !important;
}
.pf-v5-c-card__title,
.pf-v5-c-card__title-text { color: var(--fpmi-ink-2) !important; }

/* Tabs — активный таб indigo (подстраховка к active-color--100) */
.pf-v5-c-tabs__link.pf-m-current,
.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link {
  --pf-v5-c-tabs__link--m-current--after--BorderColor: var(--fpmi-indigo);
  color: var(--fpmi-indigo) !important;
}

/* Description list (Personal info, поля профиля) — термины приглушённый ink */
.pf-v5-c-description-list__term,
.pf-v5-c-description-list__text { color: var(--fpmi-ink-2) !important; }

/* Data list (Device activity / Applications — карточки сессий и приложений).
   Каждый item — уже полноценная карточка (border+radius+margin). PF5 из
   ленивого чанка DataListItemRow-*.css (поэтому в статик-харнесе не виден)
   рисует у <ul> border-block-start: 1px #d2d2d2 — линию НАД первой карточкой
   («доп линия над прямоугольниками», 2026-08-01). Глушим. */
.pf-v5-c-data-list { border-block-start: none !important; }
.pf-v5-c-data-list__item {
  border-radius: 8px !important;
  border: 1px solid var(--fpmi-line) !important;
  margin-bottom: 8px !important;
}
.pf-v5-c-data-list__cell .pf-v5-c-title { color: var(--fpmi-ink-2) !important; }

/* Labels / badges (статусы «Включено», «По умолчанию» и т.п.) */
.pf-v5-c-label.pf-m-blue,
.pf-v5-c-label.pf-m-outline {
  --pf-v5-c-label--m-blue--BorderColor: var(--fpmi-indigo);
  color: var(--fpmi-indigo) !important;
}

/* Modal (подтверждения delete/edit) — скругление + брендовый заголовок;
   primary-кнопка в footer уже orange (см. .pf-m-primary выше) */
.pf-v5-c-modal-box { border-radius: 8px !important; }
.pf-v5-c-modal-box__title,
.pf-v5-c-modal-box__title-text { color: var(--fpmi-ink-2) !important; }

/* Accordion (раскрывающиеся секции, если встречаются) — активный заголовок */
.pf-v5-c-accordion__toggle.pf-m-expanded,
.pf-v5-c-accordion__toggle[aria-expanded="true"] {
  color: var(--fpmi-indigo) !important;
}

/* Alert: цвета вариантов идут через semantic globals (см. :root) — здесь только
   скругление, чтобы совпадало с остальными поверхностями */
.pf-v5-c-alert { border-radius: 8px !important; }

/* Helper / hint text под полями */
.pf-v5-c-helper-text__item-text,
.pf-v5-c-form__helper-text { color: var(--fpmi-text-2) !important; }

/* =========================================================================
   Рестайл-аудит 2026-08-01 (мастадж-тоггл, кнопки, search-бар).
   ========================================================================= */

/* --- Кнопка пользователя (ФИО) в masthead --------------------------------
   PF5 menu-toggle: --BorderRadius:0 (квадрат) + рамка ::before (3 стороны,
   black-800 в masthead-контексте) + НИЖНЯЯ ЛИНИЯ ::after (серая полоска на
   indigo — «лишняя полоска»). Скругляем, рамку делаем полупрозрачно-белой
   со всех сторон, нижнюю линию убираем. */
.pf-v5-c-masthead .pf-v5-c-menu-toggle,
.pf-v5-c-masthead .pf-v5-c-menu-toggle::before {
  border-radius: 8px !important;
}
.pf-v5-c-masthead .pf-v5-c-menu-toggle::before {
  border-color: rgba(255, 255, 255, 0.35) !important;
  border-block-end-width: 1px !important;
}
.pf-v5-c-masthead .pf-v5-c-menu-toggle::after {
  display: none !important;
}
.pf-v5-c-masthead .pf-v5-c-menu-toggle:hover::before,
.pf-v5-c-masthead .pf-v5-c-menu-toggle[aria-expanded="true"]::before {
  border-color: rgba(255, 255, 255, 0.6) !important;
}

/* --- Единый радиус кнопок (primary/secondary/plain/link) ------------------
   PF5 default = 3px (почти квадрат). Через var — ::after-рамка кнопки
   наследует тот же радиус. pf-m-control внутри input-group не трогаем —
   он обрезается контейнером (см. search-бар ниже). */
.pf-v5-c-button {
  --pf-v5-c-button--BorderRadius: 8px;
  --pf-v5-c-button--after--BorderRadius: 8px;
}

/* --- Search/Filter-бар (Linked accounts и др. страницы) -------------------
   SearchInput = input-group(text-input-group + control-кнопка «→»).
   Раньше глобальный _form-controls.css рисовал border+radius на самом
   <input> ПОВЕРХ PF5-псевдорамок __text::before/::after — тройная рамка,
   утолщённый шов между полем и кнопкой, «стрелка в крошках». Теперь input
   исключён из _form-controls (:not), а бар стилизуем как единое целое:
   контейнер скруглён и обрезает внутренние квадратные углы, одна линия
   fpmi-line, фокус — indigo + кольцо вокруг всего бара. */
.pf-v5-c-input-group {
  border-radius: 8px !important;
  overflow: hidden !important;
}
/* «Съеденные уголки» (2026-08-01): рамку бара рисуют псевдоэлементы с
   КВАДРАТНЫМИ углами (поле — __text::before, кнопка — ::after), а overflow
   контейнера обрезал их по дуге radius 8 → на самой дуге рамки НЕ было.
   Даём псевдорамкам собственные радиусы: полю — левые, кнопке — правые
   (шов между ними остаётся прямым). Кнопке радиус и на элемент — её
   hover-фон тоже идёт по дуге. */
.pf-v5-c-text-input-group__text::before {
  border-color: var(--fpmi-line) !important;
  border-radius: 8px 0 0 8px !important;
}
.pf-v5-c-text-input-group__text::after {
  border-block-end-color: var(--fpmi-line) !important;
}
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control {
  border-radius: 0 8px 8px 0 !important;
  min-height: 44px !important;
}
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control::after {
  border-color: var(--fpmi-line) !important;
  border-radius: 0 8px 8px 0 !important;
}
.pf-v5-c-text-input-group:focus-within .pf-v5-c-text-input-group__text::before,
.pf-v5-c-input-group:focus-within .pf-v5-c-button.pf-m-control::after {
  border-color: var(--fpmi-indigo) !important;
}
.pf-v5-c-input-group:focus-within {
  box-shadow: var(--focus-ring) !important;
}
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control:hover {
  background: var(--fpmi-blue-50) !important;
  color: var(--fpmi-indigo) !important;
}
/* Высота как у остальных полей account (44px): поле + кнопка «→» ровные
   (высота кнопки объявлена раньше, вместе с её border-radius, чтобы не
   плодить второй селектор — no-duplicate-selectors). */
.pf-v5-c-text-input-group__text-input {
  min-height: 42px !important;
}

/* =========================================================================
   Телефон (≤640px) — аудит 2026-08-12.

   PF5 на узком экране не ломается «сам»: он раскладывает свои компоненты по
   ДЕСКТОПНОЙ схеме (строка = содержимое слева, действие справа) и полагается
   на модификаторы (`pf-m-grid-md` у DataList, `pf-m-display-inline` у
   masthead), которые React-приложение account-консоли не выставляет. Разметку
   мы не трогаем (стратегия файла, см. шапку) — значит те же переносы делаем
   правилами. Порог 640px — общий с витринами сайта
   (docs/design/mobile-top-zone.md).
   ========================================================================= */

@media (max-width: 640px) {
  /* --- 1. Шапка в ОДНУ строку -------------------------------------------
     PF5 кладёт masthead в grid `48px 310px`: бренд и тулбар оба попадают во
     вторую колонку и встают ДВУМЯ строками. На 390pt это 116pt шапки, из
     которых 68 — полоса с кебабом и аватаром, заполненная на четверть
     (замер 2026-08-12). Раскладываем в три колонки одной строкой; логотип
     ужимаем со 180 до 116px — иначе бренд занимает строку целиком и перенос
     возвращается. */
  .pf-v5-c-masthead {
    grid-template-columns: auto auto 1fr !important;
    align-items: center !important;
  }
  .pf-v5-c-masthead__toggle  { grid-column: 1 !important; grid-row: 1 !important; }
  .pf-v5-c-masthead__brand   { grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; }
  .pf-v5-c-masthead__content { grid-column: 3 !important; grid-row: 1 !important; }
  .pf-v5-c-masthead__brand::after { width: 116px; height: 24px; }
  .pf-v5-c-masthead .pf-v5-c-toolbar { padding-block: 0 !important; }
  .pf-v5-c-masthead .pf-v5-c-toolbar__content { justify-content: flex-end !important; }
  .pf-v5-c-masthead .pf-v5-c-toolbar__content-section { gap: 4px !important; }

  /* --- 2. Карточка списка: действие ПОД содержимым ------------------------
     Строка DataList — flex «содержимое | действие». На 390pt содержимому
     оставалось 108pt, действию 201pt, и текст, не влезая в свою колонку,
     уезжал ПОД ссылку действия: на «Связанных учетных записях» подпись
     «Вход через phystech.edu» налезала на «Соединить учетную запись»
     (скриншот владельца 2026-08-12). Переносим действие на свою строку —
     это ровно то, что PF5 делает модификатором `pf-m-grid-md`. */
  .pf-v5-c-data-list__item-row { flex-wrap: wrap !important; }
  .pf-v5-c-data-list__item-content {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .pf-v5-c-data-list__item-action {
    padding-inline-start: 0 !important;
    flex-basis: 100% !important;
    justify-content: flex-start !important;
  }

  /* --- 3. Заголовок раздела и кнопки — в столбик --------------------------
     Split с `pf-m-fill` не переносится: на «Активных устройствах» заголовок
     «Выполнен вход на устройствах» сжимался до 94pt и рвался ПОСРЕДИ СЛОВА
     («Выполне / н вход»), потому что у .pf-v5-c-title стоит
     word-break: break-word. */
  .pf-v5-l-split { flex-wrap: wrap !important; }
  .pf-v5-l-split__item.pf-m-fill { flex-basis: 100% !important; }

  /* --- 4. Шапка колонок списка приложений ---------------------------------
     `#applications-list-header` — строка «Имя / Тип приложения / Статус»:
     на телефоне ячейки встают в столбик, и заголовок колонок превращается в
     карточку из трёх слов, ничего не подписывающих. */
  #applications-list-header { display: none !important; }
}

/* --- 5. «Перейти к разделу» с единственным пунктом ------------------------
   PF5 JumpLinks на «Личной информации» рисует навигацию по разделам формы.
   Раздел там один («Общий»), то есть ссылка ведёт на то же место, где стоит
   — и стоит это 128pt плюс 80pt зазора над ней. Прячем ровно случай
   «пункт один»; при нескольких разделах навигация остаётся.

   ⚠️ Правило НАМЕРЕННО вне media-query, хотя найдено проходом по телефону:
   навигация из одного пункта бессмысленна на любой ширине, а условие уже
   сужено до «пункт единственный» — на десктопе прятать нечего, кроме той же
   ссылки в никуда. Не заворачивать в @media «для единообразия». */
.pf-v5-c-jump-links:has(.pf-v5-c-jump-links__item:only-child) { display: none !important; }