/*
 * Header enhancements (additive; loaded after header.css so it wins).
 * Active-tab underline, scroll elevation, colored avatar + role, env badge,
 * global search pill, and the Ctrl/⌘+K command palette. Uses app tokens with
 * light fallbacks so light/dark both work; RTL-safe (logical properties).
 */

/* ---- scroll elevation ------------------------------------------------- */
.app-header {
    transition: box-shadow .18s ease, border-color .18s ease;
}
.app-header.is-scrolled {
    box-shadow: 0 6px 22px rgba(20, 30, 50, .12);
}

/* ---- active-tab underline -------------------------------------------- */
.app-header__nav-item,
.app-header__nav-link {
    position: relative;
}
.app-header__nav-link.is-active::after,
.app-header__nav-item.is-active > .app-header__nav-button::after {
    content: "";
    position: absolute;
    inset-inline: 10px;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg,
        var(--app-primary, #2f6fae),
        color-mix(in srgb, var(--app-primary, #2f6fae) 70%, #1f4e78));
}
.app-header__nav-item.is-active > .app-header__nav-button,
.app-header__nav-link.is-active {
    color: var(--app-primary, #1f4e78);
}

/* ---- global search pill ---------------------------------------------- */
/* It used to be `position:absolute; left:50%; transform:translateX(-50%)`, which
   took it out of flow entirely: .app-header__nav has `flex:1 1 auto` and so laid
   out as though the pill were not there, then ran underneath it on every module
   with a full nav (Contracts, Collections, Financial). It is a flex sibling of
   the nav now — auto inline margins still centre it in whatever space is left,
   but the space is genuinely reserved, so nothing can overlap it. */
.app-header__search {
    /* shrink-3 against the nav's shrink-1: when the header runs out of room the
       pill gives up its width first and the nav keeps its items whole. The nav is
       the primary navigation; the search is a shortcut to a dialog. */
    flex: 0 3 400px;
    margin-inline: auto;
}

.app-header__search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 10px;
    min-width: 300px;
    max-width: 400px;
    border: 1px solid var(--app-border, #e2e7ee);
    border-radius: 10px;
    background: var(--app-surface-muted, #f7f9fc);
    color: var(--app-text-muted, #8492a6);
    cursor: text;
    font: inherit;
    font-size: 12.5px;
}
.app-header__search:hover { border-color: var(--app-primary, #2f6fae); }
.app-header__search svg { width: 15px; height: 15px; flex: 0 0 auto; }
.app-header__search-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-header__search-kbd { margin-inline-start: auto; display: inline-flex; gap: 2px; }
.app-header__search-kbd b {
    background: var(--app-surface, #fff);
    border: 1px solid var(--app-border, #e2e7ee);
    border-radius: 5px;
    padding: 1px 5px;
    font-size: 10px;
    font-weight: 700;
}
/* `flex:1 1 auto` in header.css made the nav swallow all free space, leaving
   the search's auto margins nothing to centre with. It still shrinks and
   scrolls — min-width:0 and overflow-x:auto are unchanged — it just no longer
   grows into the pill's box. */
.app-header__nav { flex: 0 1 auto; }

@media (max-width: 900px) {
    .app-header__search { flex: 0 0 34px; min-width: 34px; max-width: 34px; margin-inline: 0 0 auto; }
    .app-header__search-label, .app-header__search-kbd { display: none; }
}

/* ---- environment badge ----------------------------------------------- */
.app-header__env {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
    background: var(--app-warning-soft, #fdf3e2);
    color: var(--app-warning, #b7791f);
    border: 1px solid color-mix(in srgb, var(--app-warning, #b7791f) 30%, transparent);
    white-space: nowrap;
}
.app-header__env i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .8; }

/* ---- language toggle: globe + label ---------------------------------- */
.app-header__lang-toggle { display: inline-flex; align-items: center; gap: 6px; border: none !important; }
.app-header__lang-toggle svg { width: 15px; height: 15px; }
.app-header__notifications-button,
.app-header__lang-toggle,
.app-user-button {
    border: none !important;
    background: transparent !important;
}

/* ---- user: colored avatar + role ------------------------------------- */
.app-user-button__avatar {
    background: linear-gradient(135deg,
        hsl(var(--av-h, 205) 48% 52%),
        hsl(calc(var(--av-h, 205) - 22) 46% 38%)) !important;
    color: #fff !important;
}
.app-user-button__meta { display: inline-flex; flex-direction: column; line-height: 1.15; text-align: start; }
.app-user-button__role { font-size: 10.5px; font-weight: 600; color: var(--app-text-muted, #8492a6); }

/* ---- command palette (Ctrl/⌘+K) -------------------------------------- */
body.cmdk-open { overflow: hidden; }
.cmdk { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: flex-start; justify-content: center; }
.cmdk[hidden] { display: none; }
.cmdk__backdrop { position: absolute; inset: 0; background: rgba(15, 22, 33, .45); backdrop-filter: blur(2px); }
.cmdk__panel {
    position: relative;
    width: min(92vw, 620px);
    margin-top: 12vh;
    background: var(--app-surface, #fff);
    border: 1px solid var(--app-border, #e2e7ee);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(10, 18, 30, .35);
    overflow: hidden;
    animation: cmdk-in .12s ease;
}
@keyframes cmdk-in { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
.cmdk__in { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--app-border-subtle, #eef1f6); }
.cmdk__in svg { width: 19px; height: 19px; color: var(--app-text-muted, #8492a6); flex: 0 0 auto; }
.cmdk__input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--app-text, #182230); font: inherit; font-size: 15px; }
.cmdk__esc { border: 1px solid var(--app-border, #e2e7ee); background: var(--app-surface-muted, #f7f9fc); color: var(--app-text-muted, #8492a6);
    border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 700; cursor: pointer; }
.cmdk__list { list-style: none; margin: 0; padding: 6px; max-height: 46vh; overflow: auto; }
.cmdk__row { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; cursor: pointer; }
.cmdk__row.on { background: var(--app-primary-soft, #eaf2fb); }
.cmdk__ic { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 13px;
    background: var(--app-surface-muted, #f7f9fc); border: 1px solid var(--app-border, #e2e7ee); flex: 0 0 auto; }
.cmdk__txt { display: flex; flex-direction: column; min-width: 0; }
.cmdk__t { font-weight: 700; font-size: 13px; color: var(--app-text, #182230); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk__s { font-size: 11px; color: var(--app-text-muted, #8492a6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk__k { margin-inline-start: auto; font-size: 12px; color: var(--app-text-muted, #8492a6); }
.cmdk__empty { padding: 22px; text-align: center; color: var(--app-text-muted, #8492a6); font-size: 13px; }
.cmdk__foot { display: flex; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--app-border-subtle, #eef1f6); color: var(--app-text-muted, #8492a6); font-size: 11px; }

/* ---- unified header control system ----------------------------------- */
/* One coherent set: same height, radius, border, resting surface + hover. */
.app-header__search {
    height: 34px;
    min-height: 34px;
    border-radius: 10px;
    border: 1px solid var(--app-border, #e2e7ee);
    background: var(--app-surface, #ffffff);
    box-shadow: none;
    /* Was min-width:300px !important, which stopped the pill shrinking at all and
       forced the collision onto the nav. It may now give ground down to 190px
       before the nav has to start scrolling. */
    min-width: 190px;
    max-width: 400px;
}
.app-header__notifications-button,
.app-header__lang-toggle,
.app-user-button {
    height: 34px;
    min-height: 34px;
    border-radius: 10px;
    border: none;
    background: transparent;
    box-shadow: none;
}
.app-header__notifications-button { width: 34px; padding: 0; }
.app-header__lang-toggle { padding: 0 10px; }
.app-header__search:hover {
    background: var(--app-surface-muted, #f4f7fb);
    border-color: color-mix(in srgb, var(--app-primary, #2f6fae) 50%, var(--app-border, #e2e7ee));
}
.app-header__notifications-button:hover,
.app-header__lang-toggle:hover,
.app-user-button:hover {
    background: var(--app-surface-muted, #f4f7fb);
    border-color: transparent;
}
/* larger, legible avatar inside the user chip */
.app-user-button__avatar {
    width: 26px !important;
    height: 26px !important;
    font-size: 12px !important;
    border-radius: 50% !important;
}
/* the env badge stays a compact status chip, just a touch smaller */
.app-header__env { height: 22px; font-size: 10.5px; }

/* ---- nav item tweaks ------------------------------------------------- */
/* 1) drop the ⌄ caret next to nav words (keep the user-menu caret in tools) */
.app-header__nav .app-dropdown__chevron { display: none; }

/* 2) module label should not be bold */
.app-header__module-back { font-weight: 500; }

/* 3) hovering a header word must NOT recolour the text (base rule turns it
      --app-primary, which is red in the Collections theme). Keep it neutral;
      the active tab stays distinct via its underline. */
.app-header__nav-link:hover:not(.is-active),
.app-header__nav-item:not(.is-active) > .app-header__nav-button:hover {
    color: var(--app-text, #182230);
}
.app-header__module-back:hover,
.app-header__module-back:focus-visible {
    color: var(--app-text, #182230);
}


/* ---- language menu ---------------------------------------------------- */
/* The globe opens a menu of the two languages instead of switching on its own
   click; nothing changes until one is picked.

   Sized to its contents, not to a grid: two rows of a badge and a short word.
   The "Choose language" heading that used to sit on top was both redundant --
   a globe opening two languages explains itself -- and the widest thing in the
   menu, so it was setting the width for everything beneath it. Without it the
   menu is a little over half what it was.

   Every option rule is scoped under .app-header__lang-menu on purpose, and the
   menu itself is matched as .app-dropdown__menu.app-header__lang-menu:
   components/dropdowns.css loads after this file in head.php and hardcodes
   min-width:220px, so a single-class selector here ties on specificity and
   loses on order -- which is why the menu stayed 220px wide however little was
   in it. */

.app-header__lang { position: relative; display: inline-flex; }

.app-header__lang-toggle .app-dropdown__chevron {
    font-size: 10px;
    opacity: .75;
    margin-inline-start: 1px;
}

.app-dropdown__menu.app-header__lang-menu {
    min-width: 0;
    width: max-content;
    padding: 5px;
}

.app-header__lang-menu .app-header__lang-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 32px;
    padding: 5px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--app-text, #1f2937);
    font-size: 13px;
    line-height: 1.2;
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

.app-header__lang-menu .app-header__lang-option + .app-header__lang-option {
    margin-block-start: 2px;
}

.app-header__lang-menu .app-header__lang-option:hover {
    background: var(--app-surface-muted, #f4f7fb);
}

.app-header__lang-menu .app-header__lang-option:focus-visible {
    outline: 2px solid var(--app-primary, #2f6fae);
    outline-offset: -2px;
}

/* The two-letter code is the anchor the eye lands on; the word beside it is
   confirmation, not the thing being scanned. */
.app-header__lang-menu .app-header__lang-option-code {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 19px;
    border: 1px solid var(--app-border, #e2e7ee);
    border-radius: 4px;
    background: var(--app-surface-muted, #f7f9fc);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .03em;
    color: var(--app-text-muted, #8492a6);
}

/* Each language named in its own script -- العربية, not "Arabic" -- because
   that is what someone looking for their language actually scans for. */
.app-header__lang-menu .app-header__lang-option-name {
    flex: 0 1 auto;
    font-weight: 600;
}

.app-header__lang-menu .app-header__lang-option-check {
    flex: 0 0 auto;
    margin-inline-start: auto;
    padding-inline-start: 6px;
    font-size: 11px;
    font-weight: 800;
    color: var(--app-primary, #2f6fae);
}

.app-header__lang-menu .app-header__lang-option.is-active {
    background: var(--app-primary-soft, #eef4fb);
    color: var(--app-primary, #2f6fae);
}

.app-header__lang-menu .app-header__lang-option.is-active .app-header__lang-option-code {
    border-color: transparent;
    background: var(--app-primary, #2f6fae);
    color: #fff;
}

.app-header__lang-menu .app-header__lang-option.is-active:hover {
    background: var(--app-primary-soft, #e6eff9);
}