/* ============================================================================
   Top-bar — fully self-contained, own class names (spq-topbar__*, spq-dd*).
   Does NOT rely on any Cuba theme class (.page-header, .header-wrapper,
   .nav-right, .toggle-sidebar, .onhover-dropdown, ...) for structure OR
   styling, so it can never be broken by Cuba's own CSS/JS touching
   #pageWrapper's class list (see PageHeader.razor/sidebar-menu.js history).
   Pairs with the AppNav rail (<aside id="appNav">), same design language.
   ============================================================================ */

/* Hard safety net: whatever the exact internal cause of a too-wide topbar row
   turns out to be on a given page, the PAGE itself must never gain a
   horizontal scrollbar because of it. overflow-x on html/body clips at the
   true viewport edge regardless of what any descendant tries to do — this is
   the backstop, not a substitute for the shrink fixes below. */
html, body { overflow-x: hidden; max-width: 100vw; }

#pageWrapper .page-header {
    background: #ffffff;
    border-bottom: 1px solid #e7ecf3;
    box-shadow: 0 1px 2px rgba(16, 28, 61, .04);
    max-width: 100%;
    /* NOTE: no overflow:hidden here — every .spq-dd__menu dropdown (notifications,
       presence, profile, language, dev-menu) is position:absolute and renders BELOW
       this bar's fixed height, so overflow:hidden here clips every popup invisible.
       The actual horizontal-overflow bug is fixed via left/width on .page-header
       below (position:fixed doesn't auto-shrink with margin-left) — that fix doesn't
       need overflow:hidden as a backstop, and html/body overflow-x:hidden above
       already guards the page level regardless. */
}

.spq-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    max-width: 100%;
    min-height: 56px;
    padding: 0 18px;
}

/* ---- Hamburger ------------------------------------------------------------ */
.spq-topbar__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    width: 40px; height: 40px; border-radius: 10px;
    border: none; background: transparent; cursor: pointer;
    color: #46536b; font-size: 1.05rem;
}
.spq-topbar__toggle:hover { background: #eef2f8; color: #1f2b45; }

/* ---- Title + breadcrumb ----------------------------------------------------
   Two stacked rows: [period picker | divider | page title] on top, breadcrumb
   below — the picker sits inline with the title (same flex row, same
   align-items: center) so they share one baseline instead of the picker being
   vertically centered against the whole title+breadcrumb block. */
.spq-topbar__title {
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}
.spq-topbar__title-row {
    display: flex; align-items: center; gap: 10px;
    min-width: 0;
}
/* Flex items default to min-width:auto (their own content's intrinsic width),
   which blocks shrinking below that no matter what min-width the ROW itself
   has — this is the actual reason the row (and everything above it up to
   .page-header) was being forced wider than the viewport. The period picker
   (FilterStrip's own root div — no class of its own, hence :first-child) and
   the divider keep their natural size; only the title is allowed to actually
   shrink+ellipsis, since it's the one safe thing to truncate. */
.spq-topbar__title-row > :first-child { flex: 0 0 auto; min-width: 0; }
.spq-topbar__title-divider {
    flex: 0 0 auto;
    width: 1px; height: 16px;
    background: #dfe4ec;
}
.spq-topbar__title-text { min-width: 0; }
.spq-topbar__page-title {
    display: block;
    color: #16233d; font-size: 1.02rem; font-weight: 700;
    max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    flex: 1 1 auto; min-width: 0;
}

/* ---- Period picker (FilterStrip: Year/Month/Branch) — sits right before the title.
   Overrides CustomUI.css's .tiny-select (border-top + transparent bg meant for other
   screens' headers) so it reads as flat, borderless pills instead of boxed selects here.
   appearance: none strips the native OS <select> chrome; the background-image below
   redraws a small chevron so it still reads as a dropdown, not inert text. */
.spq-topbar__title-row .tiny-select {
    -webkit-appearance: none; appearance: none;
    border: none !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%2346536b' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 4px center !important;
    background-size: 9px !important;
    padding: 3px 18px 3px 6px !important;
    margin: 0 !important;
    border-radius: 7px;
    font-size: .8rem !important;
    line-height: 1.3;
}
.spq-topbar__title-row .tiny-select:hover { background-color: #eef2f8 !important; }
.spq-topbar__title-row .tiny-select:focus { outline: none; box-shadow: none !important; }
.spq-topbar__breadcrumb .breadcrumb {
    background: transparent;
}
.spq-topbar__breadcrumb .breadcrumb-item,
.spq-topbar__breadcrumb .breadcrumb-item a,
.spq-topbar__breadcrumb .breadcrumb-item i {
    font-size: .75rem; color: #7e8ba4; text-decoration: none;
}
.spq-topbar__breadcrumb .breadcrumb-item a:hover { color: #1f2b45; }
.spq-topbar__breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: #c3cbdb; }

/* ---- Right-side action cluster ---------------------------------------------
   min-width: 0 lets this shrink instead of forcing the whole bar past the
   viewport edge. Horizontal overflow of the icon strip itself is handled by
   <SingleLineButtonScroller> (arrows + fade edges, see PageHeader.razor) —
   see the .spq-dd__menu comment above for why every popover is now
   position:fixed (SLBS's wrapper clips overflow unconditionally). */
.spq-topbar__actions { flex: 0 1 auto; min-width: 0; margin-left: auto; }
.spq-topbar__scroller { min-width: 0; max-width: 100%; }
.spq-topbar__scroller .slbs__track { align-items: center; }
.spq-topbar__action-list {
    display: flex; align-items: center; gap: 2px;
    list-style: none; margin: 0; padding: 0;
}
.spq-topbar__action-item,
.spq-topbar__actions .spq-dd,
.spq-topbar__actions gst-operations-bell-client { flex: 0 0 auto; }
.spq-topbar__action-item { display: flex; align-items: center; }

.spq-topbar__icon-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px;
    border: none; background: transparent; cursor: pointer;
    color: #46536b; text-decoration: none;
}
.spq-topbar__icon-btn:hover { background: #eef2f8; color: #1f2b45; }
.spq-topbar__icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; }

.spq-topbar__badge {
    position: absolute; top: 2px; right: 2px;
    min-width: 16px; height: 16px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: #28a745; color: #fff;
    font-size: .6rem; font-weight: 700; line-height: 1;
}

/* ---- Language switcher ------------------------------------------------------ */
.spq-topbar__lang-btn { width: auto; padding: 0 10px; gap: 6px; }
.spq-topbar__lang-code { font-size: .72rem; font-weight: 700; color: #46536b; }
.spq-topbar__lang-menu { min-width: 190px; padding: 6px; }
.spq-topbar__lang-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 7px; cursor: pointer;
    font-size: .8rem; color: #3a4863;
}
.spq-topbar__lang-item:hover { background: #f5f8fc; }
.spq-topbar__lang-item.is-selected { color: var(--theme-default, #7366ff); font-weight: 600; }

/* ---- Hover dropdown shell (bell / lang / dev-menu / presence / profile) ----
   position:fixed (screen-anchored), not absolute (icon-anchored) — deliberate,
   not a bug: the action list is wrapped in <SingleLineButtonScroller> (see
   PageHeader.razor), whose .slbs/.slbs__track set overflow:hidden /
   overflow-y:hidden unconditionally (not just while actively scrolling) to
   support its fade-edge + arrow-button UI. A position:absolute popover would
   get clipped invisible by that. position:fixed ignores an ancestor's
   overflow entirely, at the cost of every popover appearing in the same
   top-right spot rather than hanging off its own trigger icon — an accepted
   trade for one consistent code path across all screen sizes. */
.spq-dd { position: relative; }
.spq-dd__menu {
    position: fixed; top: 60px; right: 12px; z-index: 1200;
    min-width: 220px;
    background: #ffffff; border: 1px solid #e7ecf3; border-radius: 12px;
    box-shadow: 0 12px 30px rgba(16, 28, 61, .14);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .13s ease, transform .13s ease, visibility .13s;
    list-style: none; margin: 0; padding: 6px;
}
.spq-dd:hover > .spq-dd__menu,
.spq-dd:focus-within > .spq-dd__menu {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.spq-dd__menu li { display: block; }
.spq-dd__menu li a,
.spq-dd__menu li button {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 8px 10px; border: none; background: none;
    border-radius: 8px; color: #3a4863; font-size: .82rem; text-align: left;
    text-decoration: none; cursor: pointer;
}
.spq-dd__menu li a:hover,
.spq-dd__menu li button:hover {
    background: color-mix(in srgb, var(--theme-default, #7366ff) 9%, transparent);
    color: var(--theme-default, #7366ff);
}

/* ---- Profile chip ----------------------------------------------------------- */
.spq-topbar__profile-chip {
    display: flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 6px; border-radius: 10px; cursor: pointer;
}
.spq-topbar__profile-chip:hover { background: #eef2f8; }
.spq-topbar__avatar { width: 30px; height: 30px; border-radius: 10px; object-fit: cover; }
.spq-topbar__profile-text { line-height: 1.15; }
.spq-topbar__profile-text span { color: #16233d; font-weight: 600; font-size: .82rem; }
.spq-topbar__profile-text p { color: #7e8ba4; font-size: .68rem; margin: 0; }
.spq-profile-menu { right: 0; min-width: 200px; }

/* ============================================================================
   Slim top-menu bar (already its own dsk-* classes — unchanged, kept as-is).
   Desktop only; phones use the sidebar drawer as the single nav.
   ============================================================================ */
.dsk-nav-wrapper {
    background: #ffffff;
    border-bottom: 1px solid #e7ecf3;
}
.dsk-slim-navbar { width: 100%; }
.dsk-nav-container {
    display: flex; align-items: stretch;
    padding: 0 12px;
    overflow: visible;
}

.dsk-nav-list {
    display: flex; align-items: stretch; flex-wrap: wrap;
    list-style: none; margin: 0; padding: 0; gap: 2px;
}
.dsk-nav-item { position: relative; display: flex; align-items: stretch; }

.dsk-nav-link {
    position: relative;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px 8px; margin: 0; border-radius: 0;
    color: #5a6a86; font-size: .8rem; font-weight: 500; letter-spacing: .01em;
    white-space: nowrap; cursor: pointer; text-decoration: none; max-width: 210px;
    border-bottom: 2px solid transparent;
    transition: color .13s ease, border-color .13s ease, background .13s ease;
}
.dsk-nav-link.text-ellipsis { overflow: hidden; text-overflow: ellipsis; }
.dsk-nav-link:hover { color: #1f2b45; background: #f5f8fc; }
.dsk-nav-item:hover > .dsk-nav-link {
    color: var(--theme-default, #7366ff);
    border-bottom-color: var(--theme-default, #7366ff);
    background: transparent;
}
.dsk-nav-link .fa-chevron-down { font-size: .58rem; opacity: .55; transition: transform .15s ease; }
.dsk-nav-item:hover > .dsk-nav-link .fa-chevron-down { transform: rotate(180deg); opacity: .9; }

.dsk-dropdown-menu {
    position: absolute; top: calc(100% + 1px); left: 0; z-index: 1200;
    min-width: 216px; max-height: 72vh; overflow-y: auto;
    list-style: none; margin: 0; padding: 6px;
    background: #ffffff; border: 1px solid #e7ecf3; border-radius: 10px;
    box-shadow: 0 12px 30px rgba(16, 28, 61, .14);
    opacity: 0; visibility: hidden; transform: translateY(-5px);
    transition: opacity .13s ease, transform .13s ease, visibility .13s;
}
.dsk-nav-item:hover > .dsk-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dsk-dropdown-menu > li { display: block; }
.dsk-dropdown-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 10px; border-radius: 7px;
    color: #3a4863; font-size: .8rem; text-decoration: none; cursor: pointer;
    white-space: nowrap;
}
.dsk-dropdown-item:hover {
    background: color-mix(in srgb, var(--theme-default, #7366ff) 9%, transparent);
    color: var(--theme-default, #7366ff);
}
.dsk-dropdown-shortcut { font-size: .64rem; color: #a2aec3; font-weight: 600; }
.dsk-dropdown-divider { height: 1px; margin: 5px 6px; background: #eef1f6; }

.dsk-nav-item:last-child > .dsk-dropdown-menu,
.dsk-nav-item:nth-last-child(2) > .dsk-dropdown-menu { left: auto; right: 0; }

/* Phones: the sidebar drawer is the single nav — hide the slim strip. */
@media (max-width: 991.98px) {
    .dsk-nav-wrapper { display: none !important; }
}

/* ---- Dark mode --------------------------------------------------------------- */
body.dark-only #pageWrapper .page-header { background: #0e1c3d; border-bottom-color: rgba(255,255,255,.06); box-shadow: 0 1px 2px rgba(0,0,0,.3); }
body.dark-only .spq-topbar__toggle { color: #c2cde3; }
body.dark-only .spq-topbar__toggle:hover { background: rgba(255,255,255,.08); color: #fff; }
body.dark-only .spq-topbar__page-title { color: #eaf0fb; }
body.dark-only .spq-topbar__title-divider { background: rgba(255,255,255,.12); }
body.dark-only .spq-topbar__title-row .tiny-select {
    color: #c2cde3 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23c2cde3' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") !important;
}
body.dark-only .spq-topbar__title-row .tiny-select:hover { background-color: rgba(255,255,255,.08) !important; }
body.dark-only .spq-topbar__breadcrumb .breadcrumb-item,
body.dark-only .spq-topbar__breadcrumb .breadcrumb-item a { color: #8291ac; }
body.dark-only .spq-topbar__icon-btn { color: #c2cde3; }
body.dark-only .spq-topbar__icon-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
body.dark-only .spq-topbar__profile-chip:hover { background: rgba(255,255,255,.08); }
body.dark-only .spq-topbar__profile-text span { color: #eaf0fb; }
body.dark-only .spq-dd__menu { background: #14213f; border-color: #26365c; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
body.dark-only .spq-dd__menu li a,
body.dark-only .spq-dd__menu li button { color: #d4ddef; }
body.dark-only .spq-topbar__lang-item { color: #d4ddef; }
body.dark-only .spq-topbar__lang-item:hover { background: rgba(255,255,255,.05); }
body.dark-only .dsk-nav-wrapper { background: #101f3f; border-bottom-color: rgba(255,255,255,.07); }
body.dark-only .dsk-nav-link { color: #9fb0cd; }
body.dark-only .dsk-nav-link:hover { color: #fff; background: rgba(255,255,255,.05); }
body.dark-only .dsk-nav-item:hover > .dsk-nav-link { color: #fff; background: transparent; }
body.dark-only .dsk-dropdown-menu { background: #14213f; border-color: #26365c; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
body.dark-only .dsk-dropdown-item { color: #d4ddef; }
body.dark-only .dsk-dropdown-divider { background: #26365c; }

/* ---- Mobile header ------------------------------------------------------- */
@media (max-width: 767.98px) {
    .spq-topbar { padding: 6px 12px; gap: 8px; min-height: 48px; }
    .spq-topbar__lang,
    li.spq-topbar__action-item:has(#maximize-screen) { display: none !important; }
    .spq-topbar__breadcrumb { display: none !important; }
    .spq-topbar__page-title { font-size: .92rem; }

    /* Horizontal scrolling of the icon strip itself is handled by
       <SingleLineButtonScroller> (see PageHeader.razor) on every screen size now —
       just re-anchor the (already-fixed, see .spq-dd__menu above) popover to a
       tighter, near-full-width band on phones instead of the desktop's small
       top-right card. */
    .spq-dd__menu {
        top: 54px !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}