/* Copied unchanged from hris.ifc.ge (origin/main, wwwroot/css/app-header.css), which ported it from gepha-geo/stock,
   commit 5dbcacf3 (WEB-560, the header part only, not its Dense themes) plus the later edits in 90bee0b9 and b35a87a6.
   The "hris:" notes below describe hris's own additions and apply here the same way: the AppifySheets logo moves to
   the foot of the navigation pane, and WhoIsLoggedOn stays a visible button for administrators. Kept identical to
   hris on purpose, so a fix there can be copied over as a whole file. Like hris, this app uses XAF's plain (non-ribbon)
   template with the tabs on top (Program.cs, OnSetupComplete), which is what this file is written against. */

/* The app header bar, folded into the MDI tab row, every theme.

   XAF draws a header bar above the tab strip: the hamburger, the view's caption, a toolbar (the database switcher,
   Diagnostic) and the account / settings buttons. It took 50px (Compact) of every screen for one row of items the
   tab row has room for. This file keeps the header's elements, so every XAF behaviour behind them stays as XAF
   wrote it, and lays the bar over the tab row instead of above it:

     · the hamburger becomes a « / » toggle at the left end of the navigation pane's Filter row, on the same
       pixels as at the top of the icon rail while the pane is collapsed (the rail and the pane's width:
       navigation-pane.css);
     · the view caption is dropped, the active tab already shows it (and a DetailView's object caption);
     · the toolbar, account and settings buttons sit at the tab row's right end, and the tabs stop before them.

   "-> RESTART <-" is not hidden here; HiddenHeaderActionsController switches it off. WhoIsLoggedOn is shown.

   ── Why every height is a variable ──────────────────────────────────────────────────────────────────────
   The bar is absolutely positioned over the tab row, so it must be exactly as tall as the row, or its buttons
   hang into the view's toolbar below (seen in the prototype as the settings gear covering the refresh button).
   The row's natural height differs per theme and size, so it is not measured, it is SET: --app-tab-row-h pins the
   tab row and sizes the bar from the same number. Values are the natural heights read in the running app
   (DevExpress 26.1.5). hris has no Dense themes, so nothing overrides these. The --app-nav-toggle-* pair is the
   navigation pane's Filter box (its height and top), so the toggle lines up with it. After a DevExpress upgrade,
   compare both with the theme's own tab row and Filter box.

   ── State and scope ─────────────────────────────────────────────────────────────────────────────────────
   XAF marks a collapsed navigation pane with .collapse-toggle on .app, the toggle's direction and position key
   off that. Everything is inside min-width: 576px: below Bootstrap's sm breakpoint the pane is an overlay drawer
   (.xaf-sidebar is d-none d-sm-flex) and XAF's own header layout is the right one. */

:root {
    --app-tab-row-h: 42px;
    --app-nav-toggle-size: 24px;
    --app-nav-toggle-top: 4px;
}
:root:has(link[href*="Themes.Fluent"]) {
    --app-tab-row-h: 40px;
    --app-nav-toggle-size: 26px;
    --app-nav-toggle-top: 13px;
}
:root:has(body.xaf-size-m) {
    --app-tab-row-h: 48px;
    --app-nav-toggle-size: 28px;
    --app-nav-toggle-top: 6px;
}
:root:has(body.xaf-size-m):has(link[href*="Themes.Fluent"]) {
    --app-tab-row-h: 52px;
    --app-nav-toggle-size: 34px;
    --app-nav-toggle-top: 13px;
}

@media (min-width: 576px) {
    /* The bar: out of the flow, over the tab row, transparent and click-through except for its own buttons. */
    .app > .header.header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: var(--app-tab-row-h);
        min-height: 0;
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
        z-index: 20;
        pointer-events: none;
    }
    .app > .header .header-left-side,
    .app > .header .header-right-side {
        background: transparent !important;
        height: 100%;
    }
    .app > .header .btn-hamburger,
    .app > .header .header-right-side > * {
        pointer-events: auto;
    }

    /* hris: the AppifySheets logo (.header-logo, 180px wide, drawn by XAF's template inside .header-left-side) has no
       room in the folded bar: the left side is now one rail wide and the bar is click-through, so the logo would
       spill, unclickable, over the Filter box and the tab row. It is hidden here; navigation-pane.js shows the logo at
       the foot of the pane instead (.app-nav-logo, navigation-pane.css). Below 576px this whole block
       does not apply, so the logo and its click handler (_Host.cshtml) still work in XAF's own mobile header. */
    .app > .header .header-logo {
        display: none;
    }

    /* The MDI's own tab row only, the direct child. A descendant selector also matched every tab strip INSIDE a view
       (უწყისები's კონტრაგენტები / არჩეული panel), stealing this right-hand reserve from it and hiding its last tab. */
    .xaf-tabbed-mdi > dxbl-tab-list {
        height: var(--app-tab-row-h);
        min-height: 0;
        /* Room for the right-hand cluster: up to three square buttons (the toolbar's "⋯", account, settings). */
        margin-right: calc(3 * (var(--app-tab-row-h) + 2px) + 16px);
    }

    /* ── The navigation toggle ─────────────────────────────────────────────────────────────────────────── */
    /* In both states the left side is the icon rail's width with the toggle centred in it, so « and » sit on the
       same pixels: the pane opens and closes under a mouse that never has to move. Expanded, the Filter box
       starts after it. */
    .app > .header .header-left-side {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding: 0 !important;
        width: var(--app-nav-rail-w, 36px) !important;
        min-width: 0 !important;
    }
    .app > .header .btn-hamburger.btn-header {
        width: var(--app-nav-toggle-size) !important;
        height: var(--app-nav-toggle-size) !important;
        /* XAF gives .btn-header min-height: 2.25rem, which outranks a plain height. */
        min-height: 0 !important;
        min-width: 0 !important;
        margin: var(--app-nav-toggle-top) 0 0 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 3px !important;
        background: transparent !important;
        opacity: .7;
        display: flex !important;
        align-items: center;
        justify-content: center;
        transition: background-color .15s, opacity .15s;
    }
    .app > .header .btn-hamburger.btn-header:hover {
        opacity: 1;
        background: rgba(127, 127, 127, .22) !important;
    }
    /* XAF's hamburger glyph out; a double chevron in, pointing where the pane will go (Lucide chevrons-left
       expanded, chevrons-right collapsed, ISC licence), drawn in the theme's text colour through a mask. */
    .app > .header .btn-hamburger > * {
        display: none !important;
    }
    .app > .header .btn-hamburger::before {
        content: "";
        width: 16px;
        height: 16px;
        background-color: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17-5-5 5-5'/%3E%3Cpath d='m18 17-5-5 5-5'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17-5-5 5-5'/%3E%3Cpath d='m18 17-5-5 5-5'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    }
    .app.collapse-toggle > .header .btn-hamburger::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 17 5-5-5-5'/%3E%3Cpath d='m13 17 5-5-5-5'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 17 5-5-5-5'/%3E%3Cpath d='m13 17 5-5-5-5'/%3E%3C/svg%3E");
    }
    /* Room for it at the left end of the pane's Filter row: the Filter box starts 4px after the toggle's right edge.
       (Collapsed, the row stays in the rail invisible, so the groups start at the same y.) */
    .dxbl-accordion-filter > .dxbl-group-header {
        padding-left: calc((var(--app-nav-rail-w, 36px) + var(--app-nav-toggle-size)) / 2 + 4px) !important;
    }
    /* The Filter box's magnifier: its placeholder already says what the box is for. */
    .dxbl-accordion-filter .dxbl-navigation-filter > .dxbl-btn-icon {
        display: none !important;
    }

    /* ── The right-hand cluster ────────────────────────────────────────────────────────────────────────── */
    /* The view caption: the active tab already says it. */
    .app > .header .header-right-side > div:has(.view-caption-root) {
        display: none;
    }
    .app > .header .header-right-side {
        justify-content: flex-end;
        align-items: center;
    }
    /* Shrink the toolbar to its content; DxToolbar's adaptivity then folds its items into one "⋯" button. */
    .app > .header .header-right-side > dxbl-toolbar {
        flex: 0 0 auto;
        width: auto;
    }
    /* hris: the WhoIsLoggedOn button stays a visible button instead of folding into "⋯". DxToolbar writes its
       folded width as an inline min-width (43px, just the "⋯"), so only !important widens it. 100px fits the
       button alone, which is production's case; Development also has XAF's Diagnostic action
       (EnableDiagnosticActions in appsettings.Development.json), which folds into "⋯" beside it at 140px. The
       tab row then stops before the wider toolbar: two square buttons (account, settings) plus 140px. The
       button only renders for administrators (HiddenHeaderActionsController), so nobody else loses tab room. */
    .app > .header .header-right-side > dxbl-toolbar:has([data-action-name="WhoIsLoggedOn"]) {
        min-width: 100px !important;
    }
    .app > .header .header-right-side > dxbl-toolbar:has([data-action-name="WhoIsLoggedOn"]):has([data-action-name="Diagnostic"]) {
        min-width: 140px !important;
    }
    .app:has(> .header [data-action-name="WhoIsLoggedOn"]) .xaf-tabbed-mdi > dxbl-tab-list {
        margin-right: calc(2 * (var(--app-tab-row-h) + 2px) + 16px + 140px);
    }
    .app > .header .header-right-side > .ms-auto {
        margin-left: 0 !important;
    }
    .app > .header .header-right-side .btn-header.btn-header {
        height: calc(var(--app-tab-row-h) - 2px);
        min-height: 0;
        width: calc(var(--app-tab-row-h) + 2px);
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .app > .header .header-right-side .btn-header .xaf-image,
    .app > .header .header-right-side .btn-header svg {
        max-height: calc(var(--app-tab-row-h) - 8px);
        max-width: calc(var(--app-tab-row-h) - 8px);
    }
}