/* =========================================================================
   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
   scripts/sync-keycloak-shared.sh). ⚠️ Селекторы .pf-v5-c-* проверять после
   апгрейда KC (см. infra/keycloak/anti-patterns.md).
   ========================================================================= */

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

:root {
  /* FPMI tokens */
  --fpmi-orange:        #FF7500;
  --fpmi-orange-dark:   #DE5D14;
  --fpmi-indigo:        #10069F;
  --fpmi-indigo-hover:  #2B17C0;
  --fpmi-blue:          #2B91FD;
  --fpmi-blue-dark:     #0B539E;
  --fpmi-blue-50:       #E7F1FD;
  --fpmi-ink:           #101828;
  --fpmi-ink-2:         #292C34;
  --fpmi-text-2:        #575D68;
  --fpmi-line:          #B8B9C0;
  --fpmi-bg-1:          #F3F3F4;

  /* Semantic (alerts / labels / status icons) */
  --fpmi-error:    #D92D20;
  --fpmi-warning:  #DC6803;
  --fpmi-success:  #12B76A;

  /* 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:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pf-v5-global--FontFamily--heading: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 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;
}

.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__item.pf-m-current a {
  background: var(--fpmi-blue-50) !important;
  color: var(--fpmi-indigo) !important;
  border-left: 3px solid var(--fpmi-indigo) !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,
.pf-v5-c-nav__item.pf-m-expandable > button.pf-v5-c-nav__link[aria-expanded="true"] {
  background: var(--fpmi-blue-50) !important;
  color: var(--fpmi-indigo) !important;
  outline: none !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 — карточки сессий и приложений) */
.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; }