/*
 * Біржа ↔ дизайн-система ТАТ: шапка кабінету і перемикач «Продукти ТАТ» (SPEC-T81, FR-010…FR-014).
 * Підключається після ds/components.css, перед ds/cabinet.css. Лише токени (`var(--…)`); хардкод — тільки там, де в ДС токена немає
 * (позначено коментарем). Розмітка: templates/parts/header.html.twig, products-menu.html.twig; JS — public/assets/js/ds.js.
 * Довідник: docs/sdd/specs/SPEC-T81-design-system/ds-guide.md, виміри еталона — spec.md §2.
 *
 * Специфічність: стани :hover посилань підсилені префіксом `html.theme-tat`, щоб вигравати в загального `a:hover` з ds/base.css.
 */

/* ==========================================================================================================
   Шапка — TopBar.tsx робочої CRM (spec §2): висота 60px, фон білий, риска 1px --color-border-default знизу на всю ширину.
   Контейнер .ds-header__inner має ту саму ширину, що й вміст сторінки (.container-main): --ds-page-max + поля --ds-page-gutter
   (змінні — у ds/base.css).
   ========================================================================================================== */
html.theme-tat {
  --ds-header-height: var(--size-60);
}

/* Фон шапки — колір плитки сервісу «Біржа заявок» у перемикачі продуктів (tat-birzha.svg, ui-kit illustrations), щоб Біржу
   було видно серед сервісів ТАТ (рішення власника 2026-10-10). Токена в ДС немає — при зміні ілюстрації оновити тут. */
html.theme-tat {
  --ds-product-color: #ffedd5;
  --ds-header-hover: color-mix(in srgb, var(--text-primary) 8%, transparent);
}

html.theme-tat .ds-header {
  position: relative;
  z-index: 50;
  background: var(--ds-product-color);
  border-bottom: var(--size-1) var(--border-solid) color-mix(in srgb, var(--ds-product-color), var(--text-primary) 10%);
}

/* Іконкові кнопки на кольоровому фоні: hover/active — затемнення поверх кольору шапки замість сірого --bg-tertiary */
html.theme-tat .ds-header .ds-icon-btn:not(.ds-icon-btn--accent):hover,
html.theme-tat .ds-header .ds-icon-btn:not(.ds-icon-btn--accent).is-active,
html.theme-tat .ds-header .ds-icon-btn:not(.ds-icon-btn--accent)[aria-expanded="true"] {
  background-color: var(--ds-header-hover);
}

html.theme-tat .ds-header .ds-divider--v {
  background-color: color-mix(in srgb, var(--ds-product-color), var(--text-primary) 15%);
}

html.theme-tat .ds-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-24);
  max-width: calc(var(--ds-page-max) + 2 * var(--ds-page-gutter));
  height: var(--ds-header-height);
  margin: 0 auto;
  padding: 0 var(--ds-page-gutter);
}

/* Зліва — значок сервісу (ілюстрація з перемикача продуктів, 80×60 → висота 40) і назва сторінки (h1) замість логотипу ТАТ;
   рішення власника 2026-10-10. Типографіка — Typography heading (сторі foundation-typography--docs) */
html.theme-tat .ds-header__brand {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: var(--size-12);
  min-width: 0;
  color: var(--text-primary);
  text-decoration: none;
}

html.theme-tat .ds-header__brand:hover,
html.theme-tat .ds-header__brand:focus {
  color: var(--text-primary);
  text-decoration: none;
}

html.theme-tat .ds-header__brand-tile {
  display: block;
  flex: none;
  width: auto;
  height: var(--size-48); /* на 20% більше за кнопки шапки (40px); шапка лишається 60px */
  max-width: none;
  border-radius: var(--radius-md);
}

html.theme-tat .ds-header__title {
  margin: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-700);
  line-height: var(--line-height-1-2);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Права група: gap 12, висота 40 (spec §2) */
html.theme-tat .ds-header__actions {
  display: flex;
  align-items: center;
  gap: var(--size-12);
  height: var(--size-40);
}

html.theme-tat .ds-header__actions .ds-divider--v {
  margin: 0;
}

/* Обгортка тригера й поповера; на мобільному (нижче) позиціонування переходить на всю шапку */
html.theme-tat .ds-header__anchor {
  flex: none;
}

html.theme-tat .ds-header .ds-popover {
  top: calc(100% + var(--size-8));
  text-align: left;
}

/* Гаманець: іконка + сума (від 768px); колір суми від'ємного балансу — --color-danger */
html.theme-tat .ds-header__wallet {
  width: auto;
  min-width: var(--size-40);
  gap: var(--size-8);
  padding: 0 var(--size-12);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-600);
  line-height: var(--line-height-1);
  white-space: nowrap;
}

html.theme-tat .ds-header__wallet.is-negative {
  color: var(--color-danger);
}

/* Підписи й суми в поповерах: «Баланс» 12px tertiary, сума 20/700 */
html.theme-tat .ds-header__caption {
  font-size: var(--font-size-12);
  line-height: var(--line-height-1-33);
  color: var(--color-text-tertiary);
}

html.theme-tat .ds-header__caption--title {
  margin-bottom: var(--size-12);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-700);
  line-height: var(--line-height-1-43);
  color: var(--text-primary);
}

html.theme-tat .ds-header__amount {
  margin: var(--size-4) 0 var(--size-12);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-700);
  line-height: var(--line-height-1-25);
  color: var(--text-primary);
  white-space: nowrap;
}

html.theme-tat .ds-header__amount.is-negative {
  color: var(--color-danger);
}

/* Профіль: ім'я 14/700, e-mail і агенція — tertiary (spec §2: поповер профілю CRM) */
html.theme-tat .ds-header__user {
  padding: 0 var(--size-4);
}

html.theme-tat .ds-header__user-name {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-700);
  line-height: var(--line-height-1-43);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

html.theme-tat .ds-header__user-email,
html.theme-tat .ds-header__user-agency {
  font-size: var(--font-size-14);
  line-height: var(--line-height-1-43);
  color: var(--color-text-tertiary);
  overflow-wrap: anywhere;
}

html.theme-tat .ds-header__user-agency {
  margin-top: var(--size-4);
  color: var(--text-secondary);
}

html.theme-tat .ds-header__hr {
  margin: var(--size-12) 0;
}

/* Список пунктів профілю: рядок 36px, іконка brand + текст (spec §2) */
html.theme-tat .ds-header__menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

html.theme-tat .ds-header__menu li {
  margin: 0;
  padding: 0;
  line-height: normal;
}

html.theme-tat .ds-header__menu-item {
  display: flex;
  align-items: center;
  gap: var(--size-8);
  height: var(--size-36);
  padding: 0 var(--size-8);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  font-size: var(--font-size-14);
  line-height: var(--line-height-1);
  text-decoration: none;
  cursor: pointer;
}

html.theme-tat .ds-header__menu-item svg {
  flex: none;
  width: var(--size-20);
  height: var(--size-20);
  color: var(--ds-brand);
}

html.theme-tat .ds-header__menu-item:hover,
html.theme-tat .ds-header__menu-item:focus {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  text-decoration: none;
}

html.theme-tat .ds-header__menu-item:focus-visible {
  outline: var(--size-2) var(--border-solid) var(--color-main);
  outline-offset: calc(-1 * var(--size-2));
}

/* Вкладки кабінету (parts/menu.html.twig): на всю ширину вмісту, без переносу, горизонтальний скрол на вузькому */
html.theme-tat .ds-cabinet-tabs {
  flex: 1 0 100%;
  width: 100%;
  margin: 0;
  text-align: left;
}

html.theme-tat .ds-cabinet-tabs .ds-tabs__item {
  font-size: var(--font-size-14);
}

html.theme-tat .ds-cabinet-tabs .ds-tabs__item:hover,
html.theme-tat .ds-cabinet-tabs .ds-tabs__item:focus {
  color: var(--color-main);
  text-decoration: none;
}

/* ==========================================================================================================
   Перемикач «Продукти ТАТ» — картка продукту.
   Джерело: ProductCard.tsx / CurrentProductCard.tsx (src/components/layout/TopBar/components/ProductsMenu у репо CRM),
   поповер — DS: Overlays/Popover (https://crm.tat.ua/docs/storybook/?path=/story/overlays-popover--docs).
   Картка: flex, gap 12, padding 6px 12px 6px 6px, рамка 1px, radius 8; ілюстрація 80×60; hover — рамка gray-400 + фон light.
   ========================================================================================================== */
html.theme-tat .ds-product-list {
  display: flex;
  flex-direction: column;
  gap: var(--size-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

html.theme-tat .ds-product-list li {
  margin: 0;
  padding: 0;
  line-height: normal;
}

html.theme-tat .ds-product-card {
  display: flex;
  align-items: center;
  gap: var(--size-12);
  padding: var(--size-6) var(--size-12) var(--size-6) var(--size-6);
  border: var(--size-1) var(--border-solid) var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}

html.theme-tat a.ds-product-card {
  cursor: pointer;
}

html.theme-tat a.ds-product-card:hover,
html.theme-tat a.ds-product-card:focus {
  border-color: var(--color-gray-400);
  background: var(--color-background-light);
  color: var(--text-primary);
  text-decoration: none;
}

html.theme-tat a.ds-product-card:focus-visible {
  outline: var(--size-2) var(--border-solid) var(--color-main);
  outline-offset: var(--size-2);
}

html.theme-tat .ds-product-card__tile {
  display: block;
  flex: none;
  width: 80px; /* розмір ілюстрації 80×60 з CRM (токена --size-80 немає) */
  height: var(--size-60);
  max-width: none;
}

html.theme-tat .ds-product-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

html.theme-tat .ds-product-card__title {
  font-size: var(--font-size-14);
  line-height: var(--line-height-1-43);
  color: var(--text-primary);
}

html.theme-tat .ds-product-card__ext {
  display: inline-flex;
  flex: none;
  color: var(--text-primary);
}

html.theme-tat .ds-product-card__ext svg {
  width: var(--size-16);
  height: var(--size-16);
}

/* Поточний продукт (CurrentProductCard): блакитна картка без посилання, підпис «ви вже тут» */
html.theme-tat .ds-product-card--current {
  border-color: var(--color-blue-300);
  background: var(--color-blue-50);
  cursor: default;
}

html.theme-tat .ds-product-card__hint {
  font-size: var(--font-size-12);
  line-height: var(--line-height-1-33);
  color: var(--color-neutral-400);
}

/* ==========================================================================================================
   Мобільний (≤ 767px), FR-013: шапка 56px, праворуч гаманець (без суми), профіль, дівідер, «9 крапок».
   Поповер прив'язується до всієї шапки (а не до кнопки), щоб не вилазити за екран (права межа — 16px від краю екрана),
   max-width: calc(100vw - 32px) (задано в .ds-popover), без горизонтального скролу.
   ========================================================================================================== */
@media (max-width: 767px) {
  html.theme-tat {
    --ds-header-height: var(--size-56);
  }

  html.theme-tat .ds-header__inner {
    position: relative;
    gap: var(--size-12);
    padding: 0;
  }

  html.theme-tat .ds-header__brand {
    gap: var(--size-8);
  }

  html.theme-tat .ds-header__brand-tile {
    height: calc(var(--size-32) * 1.2); /* 38px: +20%, шапка 56px */
  }

  html.theme-tat .ds-header__title {
    font-size: var(--font-size-16);
  }

  html.theme-tat .ds-header__anchor {
    position: static;
  }

  html.theme-tat .ds-header .ds-popover {
    top: calc(100% + var(--size-4));
    right: var(--size-16); /* край поповера на 16px від краю екрана (.ds-header__inner займає всю ширину екрана) */
    left: auto;
    max-width: calc(100vw - var(--size-32));
  }

  html.theme-tat .ds-header__wallet {
    width: var(--size-40);
    padding: 0;
  }

  html.theme-tat .ds-header__wallet-sum {
    display: none;
  }

}