/* ============================================================================
   header-nav.css — єдиний хедер порталу МОНІ (бренд + дії + меню з випадайками)
   Самодостатній компонент: працює і поверх app.css (успадковує токени теми),
   і в standalone-хабі (усі var() мають фолбеки світлої теми; темна — через
   [data-theme="dark"] з фолбеками espresso-палітри).
   Підключати ПІСЛЯ app.css. Розмітка: app/Views/partials/header.php.
   ========================================================================== */

/* --- База шапки (дубль app.css з фолбеками — для standalone-хаба) --------- */
.app-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: color-mix(in srgb, var(--surface, #fffdf9) 86%, transparent);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--border, #e8dfd1);
    font-family: "Golos Text", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.app-header__inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
/* Широкий режим — операційний контур (/requests, /operations) */
.app-header--wide .app-header__inner { max-width: none; padding: 10px 22px; }

.app-header .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text, #2c2420); font-weight: 700; text-decoration: none; }
.app-header .brand:hover { text-decoration: none; }
.app-header .brand__mark {
    display: inline-grid; place-items: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--primary, #c2410c); color: var(--primary-ct, #fff);
    font-weight: 800;
}
.app-header .brand__text { letter-spacing: .2px; }
.app-header__actions { display: flex; align-items: center; gap: 10px; }

/* Дії в шапці (дубль app.css з фолбеками — щоб шапка була повна і в хабі без app.css) */
.app-header .theme-toggle {
    border: 1px solid var(--border, #e8dfd1);
    background: var(--surface-2, #f1e9dd);
    color: var(--text, #2c2420);
    width: 38px; height: 38px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 18px; line-height: 1;
    transition: transform .12s ease, background .2s ease;
}
.app-header .theme-toggle:hover { transform: translateY(-1px); }
.app-header .bell {
    position: relative;
    display: inline-grid; place-items: center;
    width: 38px; height: 38px;
    border: 1px solid var(--border, #e8dfd1); border-radius: 10px;
    background: var(--surface-2, #f1e9dd); color: var(--text, #2c2420);
    text-decoration: none;
}
.app-header .bell:hover { text-decoration: none; }
.app-header .bell__count {
    position: absolute; top: -6px; right: -6px;
    min-width: 18px; height: 18px; padding: 0 5px;
    display: grid; place-items: center;
    background: #e5484d; color: #fff;
    font-size: .7rem; font-weight: 700;
    border-radius: 999px; border: 2px solid var(--surface, #fffdf9);
}
.app-header .user-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 42vw; }
.app-header .user-chip__avatar {
    display: inline-grid; place-items: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--surface-2, #f1e9dd); border: 1px solid var(--border, #e8dfd1);
    font-weight: 700; font-size: .85rem;
}
.app-header .user-chip__name {
    font-size: .9rem; color: var(--text-mut, #7c6d60);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-header .logout-form { margin: 0; }
.app-header .btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    border-radius: var(--radius-sm, 11px);
    background: var(--primary, #c2410c); color: var(--primary-ct, #fff);
    border: 1px solid transparent;
    font-weight: 600; cursor: pointer; font-family: inherit;
    text-decoration: none;
}
.app-header .btn:hover { text-decoration: none; filter: brightness(1.05); }
.app-header .btn--ghost { background: var(--surface-2, #f1e9dd); color: var(--text, #2c2420); border-color: var(--border, #e8dfd1); }
.app-header .btn--sm { padding: 6px 12px; font-size: .85rem; }
@media (max-width: 560px) { .app-header .user-chip__name { display: none; } }

/* Банер «перегляд як користувач» (дубль з фолбеками) */
.impersonation-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap;
    padding: 8px 16px;
    background: color-mix(in srgb, #f5a623 26%, var(--surface, #fffdf9));
    color: #8a5a12;
    border-bottom: 1px solid color-mix(in srgb, #f5a623 45%, transparent);
    font-size: .9rem;
    font-family: "Golos Text", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.impersonation-bar b { font-weight: 600; }
.impersonation-bar form { margin: 0; }
.impersonation-bar .btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; font-size: .85rem;
    border-radius: var(--radius-sm, 11px);
    background: var(--primary, #c2410c); color: var(--primary-ct, #fff);
    border: 1px solid transparent; font-weight: 600; cursor: pointer; font-family: inherit;
}

/* --- Навігація: контейнер ------------------------------------------------- */
.app-nav {
    position: relative;
    z-index: 55;
    background: var(--surface, #fffdf9);
    border-bottom: 1px solid var(--border, #e8dfd1);
    font-family: "Golos Text", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.app-nav__inner {
    max-width: 1080px; margin: 0 auto; padding: 0 16px;
    display: flex; gap: 4px; align-items: stretch;
    overflow-x: auto;
    scrollbar-width: none;
}
.app-nav__inner::-webkit-scrollbar { display: none; }
.app-nav--wide .app-nav__inner { max-width: none; padding: 0 22px; }
@media (min-width: 900px) { .app-nav__inner { overflow: visible; } }

/* --- Верхній рівень: посилання і кнопки груп ------------------------------ */
.app-nav__inner .app-nav__link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 12px 14px;
    color: var(--text-mut, #7c6d60);
    font-size: .92rem; font-weight: 600; line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    border: 0; border-bottom: 2px solid transparent;
    background: none; cursor: pointer;
    font-family: inherit;
    transition: color .15s ease, border-color .15s ease;
}
.app-nav__inner .app-nav__link:hover,
.nav-dd.is-open > .nav-dd__btn {
    color: var(--text, #2c2420);
    text-decoration: none;
    border-bottom-color: var(--border, #e8dfd1);
}
.app-nav__inner .app-nav__link--active,
.app-nav__inner .app-nav__link--active:hover {
    color: var(--primary, #c2410c);
    border-bottom-color: var(--primary, #c2410c);
}
.nav-dd__caret { flex: 0 0 auto; opacity: .7; transition: transform .18s ease; }
.nav-dd.is-open > .nav-dd__btn .nav-dd__caret { transform: rotate(180deg); }

/* --- Випадайка ------------------------------------------------------------ */
.nav-dd { position: relative; display: inline-flex; }
.nav-dd__menu {
    position: absolute;
    top: calc(100% + 2px); left: 0;
    min-width: 236px;
    padding: 6px;
    background: var(--surface, #fffdf9);
    border: 1px solid var(--border, #e8dfd1);
    border-radius: var(--radius-sm, 11px);
    box-shadow: var(--shadow-lg, 0 14px 34px rgba(80, 55, 30, .16));
    display: grid; gap: 1px;
    animation: navDdPop .16s ease;
    z-index: 70;
}
.nav-dd__menu[hidden] { display: none; }
/* Останні групи не повинні вилазити за екран */
.nav-dd:nth-last-child(-n+2) .nav-dd__menu { left: auto; right: 0; }

.nav-dd__item {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--text, #2c2420);
    font-size: .9rem; font-weight: 500; line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
}
.nav-dd__item:hover {
    background: var(--primary-soft, rgba(194, 65, 12, .12));
    color: var(--text, #2c2420);
    text-decoration: none;
}
.nav-dd__item--active,
.nav-dd__item--active:hover {
    background: var(--primary-soft, rgba(194, 65, 12, .12));
    color: var(--primary, #c2410c);
    font-weight: 600;
}
.nav-dd__sep { height: 1px; margin: 5px 4px; background: var(--border, #e8dfd1); }

/* --- Мобайл: випадайка як повношира «полиця» під навігацією --------------- */
@media (max-width: 899.98px) {
    .nav-dd { position: static; }
    .nav-dd__menu {
        position: fixed;           /* top виставляє header-nav.js */
        left: 8px; right: 8px; top: 96px;
        max-height: min(60vh, 420px);
        overflow-y: auto;
        min-width: 0;
    }
    .nav-dd:nth-last-child(-n+2) .nav-dd__menu { left: 8px; right: 8px; }
    .nav-dd__item { white-space: normal; padding: 11px 12px; }
}

/* --- Темна тема (espresso) — фолбеки для standalone-хаба ------------------ */
[data-theme="dark"] .app-header {
    background: color-mix(in srgb, var(--surface, #251d16) 86%, transparent);
    border-bottom-color: var(--border, #392e23);
}
[data-theme="dark"] .app-header .brand { color: var(--text, #f3ece0); }
[data-theme="dark"] .app-header .brand__mark { background: var(--primary, #e2622a); }
[data-theme="dark"] .app-header .theme-toggle,
[data-theme="dark"] .app-header .bell {
    border-color: var(--border, #392e23);
    background: var(--surface-2, #2a2119);
    color: var(--text, #f3ece0);
}
[data-theme="dark"] .app-header .bell__count { border-color: var(--surface, #251d16); }
[data-theme="dark"] .app-header .user-chip__avatar { background: var(--surface-2, #2a2119); border-color: var(--border, #392e23); }
[data-theme="dark"] .app-header .user-chip__name { color: var(--text-mut, #a99b8a); }
[data-theme="dark"] .app-header .btn--ghost { background: var(--surface-2, #2a2119); color: var(--text, #f3ece0); border-color: var(--border, #392e23); }
[data-theme="dark"] .impersonation-bar { color: #f0c274; background: color-mix(in srgb, #f5a623 26%, var(--surface, #251d16)); }
[data-theme="dark"] .app-nav { background: var(--surface, #251d16); border-bottom-color: var(--border, #392e23); }
[data-theme="dark"] .app-nav__inner .app-nav__link { color: var(--text-mut, #a99b8a); }
[data-theme="dark"] .app-nav__inner .app-nav__link:hover,
[data-theme="dark"] .nav-dd.is-open > .nav-dd__btn { color: var(--text, #f3ece0); border-bottom-color: var(--border, #392e23); }
[data-theme="dark"] .app-nav__inner .app-nav__link--active,
[data-theme="dark"] .app-nav__inner .app-nav__link--active:hover { color: var(--primary, #e2622a); border-bottom-color: var(--primary, #e2622a); }
[data-theme="dark"] .nav-dd__menu {
    background: var(--surface, #251d16);
    border-color: var(--border, #392e23);
    box-shadow: var(--shadow-lg, 0 12px 30px rgba(0, 0, 0, .5));
}
[data-theme="dark"] .nav-dd__item { color: var(--text, #f3ece0); }
[data-theme="dark"] .nav-dd__item:hover { background: var(--primary-soft, rgba(226, 98, 42, .2)); color: var(--text, #f3ece0); }
[data-theme="dark"] .nav-dd__item--active,
[data-theme="dark"] .nav-dd__item--active:hover { background: var(--primary-soft, rgba(226, 98, 42, .2)); color: var(--primary, #e2622a); }
[data-theme="dark"] .nav-dd__sep { background: var(--border, #392e23); }

/* --- Анімації ------------------------------------------------------------- */
@keyframes navDdPop {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .nav-dd__menu { animation: none; }
    .nav-dd__caret, .app-nav__inner .app-nav__link { transition: none; }
}

/* ═══ FH-SEARCHACTIVE (2026-07-30) ═════════════════════════════════════════
   Поле пошуку підсвічується, коли в ньому є текст — щоб було видно, що
   список звужений саме пошуком, а не фільтрами. Стан «нічого не знайдено»
   (видимий блок .req-noresult) — бурштиновий.
   Клас .search--has-count вішає рушій хаба; :has(...) — запасний варіант
   для сторінок, де цього класу немає. Тільки CSS, JS не потрібен. */
.search__input { transition: border-color .15s, background-color .15s, box-shadow .15s, color .15s; }
.search__icon { transition: color .15s; }
/* власне кільце фокуса замість системної чорної обводки */
.search__input:focus,
.search__input:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

/* — є текст: акцентний стан — */
.search--has-count .search__input,
.search:has(.search__input:not(:placeholder-shown)) .search__input {
    border-color: color-mix(in srgb, var(--primary) 62%, var(--field-border));
    background: color-mix(in srgb, var(--primary) 6%, var(--surface));
    box-shadow: 0 0 0 3px var(--primary-soft);
    color: var(--text);
    font-weight: 600;
}
.search--has-count .search__input:focus,
.search:has(.search__input:not(:placeholder-shown)) .search__input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 24%, transparent);
}
.search--has-count .search__icon,
.search:has(.search__input:not(:placeholder-shown)) .search__icon { color: var(--primary); }
/* лічильник «N з M» — компактна плашка в акценті */
.search--has-count .search__count {
    background: var(--primary-soft); color: var(--primary); font-weight: 700;
    padding: 2px 7px; border-radius: 999px; line-height: 1.3;
}
.search--has-count .search__clear { background: var(--primary-soft); color: var(--primary); }
.search--has-count .search__clear:hover { background: color-mix(in srgb, var(--primary) 26%, var(--surface-2)); color: var(--primary); }

/* — пошук нічого не знайшов: бурштиновий стан — */
:is(#v-req, #v-op):has(.req-noresult:not([hidden])) .search--has-count .search__input,
:is(#v-req, #v-op):has(.req-noresult:not([hidden])) .search--has-count .search__input:focus {
    border-color: color-mix(in srgb, var(--warn) 70%, var(--field-border));
    background: color-mix(in srgb, var(--warn) 9%, var(--surface));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 22%, transparent);
}
:is(#v-req, #v-op):has(.req-noresult:not([hidden])) .search--has-count .search__icon { color: var(--warn); }
:is(#v-req, #v-op):has(.req-noresult:not([hidden])) .search--has-count .search__count,
:is(#v-req, #v-op):has(.req-noresult:not([hidden])) .search--has-count .search__clear {
    background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn);
}

/* SVG-буква заповнює марку в тих самих пропорціях, що у favicon (viewBox 64). */
.app-header .brand__mark svg { display: block; width: 100%; height: 100%; }

/* ═══════════════ FH-MOB · 25.08.2026 · шапка порталу на телефоні ═══════════════
   Було: .app-header__actions не вміщався у 393 px (виходив на 568) — сторінка
   їхала вбік на КОЖНІЙ звичайній сторінці порталу, зокрема на формі заявки.
   Компактний варіант шапки існував, але жив усередині hub.html і на решту
   сторінок не поширювався. Тепер він тут — там, де шапка й описана. */
@media (max-width: 640px) {
    .app-header__inner { padding: 8px 12px; gap: 8px; }
    .app-header .brand__text { display: none; }
    .app-header__actions { gap: 6px; margin-left: auto; }
    .app-header .user-chip__name { display: none; }
    .app-header .user-chip { max-width: none; }
    .app-header .bell, .app-header .theme-toggle { min-width: 40px; min-height: 40px; }
    .app-header .logout-form .btn { padding: 9px 11px; }
    .app-nav__inner { padding: 0 6px; }
    .app-nav__inner .app-nav__link { padding: 12px 10px; font-size: .9rem; }
    .impersonation-bar { font-size: .82rem; padding: 8px 12px; }
}