/* ============================================================================
   mobile-header.css — ONE mobile-only owner for every top-bar / header family
   ----------------------------------------------------------------------------
   DocPilot V6 · created 2026-10-08 (P1 global mobile header fix)

   WHY THIS FILE EXISTS
   --------------------
   There is no shared header component: nav.js only builds the left sidebar and
   every page ships its OWN <header> markup + its OWN inline <style> that loads
   AFTER design-system.css and wins the cascade. The DoBo dock injects a pill +
   two secondary bells (.dobo2mem-bell / .dobo2usage-bell) + the i18n language
   toggle into #navActions on EVERY page, but those secondary bells were only
   hidden on mobile in 6 module pages' inline CSS — nowhere global. On 360px
   Android the right cluster (pill + 2 bells + notification bell + language
   toggle + avatar/search) does not fit, pushes the title/breadcrumb + avatar
   off-screen, and they get clipped by the global overflow-x:hidden guardrail.

   This file normalises ALL 9 header families at once, on mobile only.

   CASCADE GUARANTEE (how this file reliably WINS over per-page inline <style>)
   ---------------------------------------------------------------------------
   Two independent mechanisms, belt-and-suspenders:
     1. The <link> to this file is injected as the LAST stylesheet in each
        page's <head> (after the page's own inline <style> and after
        nav.css / dobo2-*.css), so it wins by source order where possible.
     2. Every rule here lives INSIDE @media (max-width: 767px) and uses
        !important. Because page inline blocks sometimes sit physically after
        this link (body-level <link>s, late <style>), source order alone is not
        enough — the mobile-scoped !important guarantees the win regardless of
        order. This is 100% desktop-safe: at >=768px this file is completely
        inert (not a single rule applies), so desktop renders byte-for-byte
        unchanged.

   SCOPE: strictly @media (max-width: 767px) (+ a <=400px refinement for 360px).
   Nothing here touches the aufmass data-grid, tables, chat/dobo/calendar/
   appointment/inventory logic — header chrome + the DoBo dock cluster only.
   ============================================================================ */

@media (max-width: 767px) {

  /* ── 1. Collapse the two SECONDARY DoBo dock bells GLOBALLY on mobile ──────
     These classes are set by dobo2-memory.js (.dobo2mem-bell) and
     dobo2-usage.js (.dobo2usage-bell) — verified in src/js. They only ever
     render inside the header dock, so hiding them globally is safe. The
     primary "Ask DoBo" pill (.dobo2-navgroup / .dobo2-pill) and the single
     notification bell stay reachable; the memory/usage panels remain
     reachable from the DoBo pill itself. Desktop keeps all icons. */
  #navActions .dobo2mem-bell,
  #navActions .dobo2usage-bell,
  .dobo2-navgroup .dobo2mem-bell,
  .dobo2-navgroup .dobo2usage-bell,
  .dobo2mem-bell,
  .dobo2usage-bell {
    display: none !important;
  }

  /* ── 2. The right-side action cluster (#navActions) ───────────────────────
     Present on every full-nav header as the stable dock hook. Keep it on a
     single non-wrapping row, don't let it GROW to steal the title's space,
     tighten the gaps, and cap its width so it can NEVER push the title/
     breadcrumb off-screen. After the two bells are gone the remaining items
     (pill + notification bell + compact EN + avatar) fit inside this cap at
     360px, so nothing is clipped — we fix by construction, not by overflow
     hiding. */
  #navActions {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin-left: auto !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }
  /* NOTE: we deliberately do NOT cap #navActions width globally. A hard
     max-width makes the (overflow:visible) flex children SPILL past the
     clamped header box and off the right edge. Instead we let the cluster
     size to its natural width and sit flush-right; the left/title column is
     flex:1 min-width:0 (below) so IT yields and the title ellipsizes. After
     the two secondary bells are gone the remaining items fit at 360px on
     every standard header. Pages whose cluster is still intrinsically too
     wide (files/cloud file-ops, planner filter, superlog) get targeted,
     page-scoped rules in section 8. */

  /* Tighten the DoBo pill group gaps so the cluster stays compact. The pill
     label is already hidden <=520px by dobo2-dock.css (icon-only sparkle). */
  #navActions .dobo2-navgroup {
    gap: 2px !important;
  }

  /* ── 3. Compact the language toggle (injected by i18n.js as #langToggle) ──
     Shrink its padding/size so it never competes with the title for row
     space, while keeping it a real, reachable control. */
  #langToggle {
    flex: 0 0 auto !important;
    padding: 4px 6px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    min-width: 0 !important;       /* natural ~26px for the "EN"/"DE" label — it
                                     must never hog the title's row space, esp.
                                     on pages where i18n.js injects it into the
                                     left (title) column (e.g. dashboard). */
    min-height: 40px !important;  /* keep a comfortable tap height */
  }

  /* ── 4. GUARANTEE the title / breadcrumb stays on-screen and readable ─────
     Allow the header's inner flex row and its left (title) group to shrink
     (min-width:0) so the title ellipsizes instead of overflowing, and so the
     capped #navActions above can never amputate it. Covers all families. */
  .topbar-glass > div,
  .app-header,
  .main-topbar,
  .top-header,
  .topbar,
  #topBar,
  #header > div,
  #unifiedTopBar,
  header > div {
    min-width: 0 !important;
  }

  /* The left/title group (direct flex child that is NOT the dock cluster) must
     GROW (flex:1) to claim the remaining row space AND be allowed to shrink
     (min-width:0). Without flex-grow, under justify-between the title column
     keeps NO width and the title collapses to 0 (invisible). We also grow the
     common one-level-nested title wrapper (e.g. dashboard/chat/mms project
     name sits in header > div:first-child > div.flex). */
  .topbar-glass > div > .flex.items-center.min-w-0,
  .topbar-glass > div > div:first-child,
  .topbar-glass > div > div:first-child > .flex,
  .app-header > div:first-child,
  .main-topbar > div:first-child,
  .top-header > div:first-child,
  .top-header > div:first-child > div,
  #header > div > #headerTitle {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* Page title / module label: fill the grown column and ellipsize long text.
     flex:1 1 auto makes the <h1> itself take the remaining space inside its
     (also-growing) wrapper, so it renders a readable width and ellipsizes a
     long project name instead of collapsing to a sliver. */
  .topbar-glass h1,
  .app-header h1,
  .main-topbar h1,
  .top-header h1,
  #header h1,
  #unifiedTopBar h1,
  header h1 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* ── 5. 44px minimum tap targets across every header family ───────────────
     design-system.css only floors .app-header/.top-header/.topbar/#topBar —
     NOT .topbar-glass or #navActions. Extend the floor to the dock cluster and
     the glass header buttons/links. Use min-sizing (not fixed) so layout keeps
     flowing; center the glyphs. */
  .topbar-glass button,
  .topbar-glass a[title],
  #navActions > a,
  #navActions > button,
  #navActions .dobo2-navbtn:not(.dobo2mem-bell):not(.dobo2usage-bell),
  #navActions .dobo2-pill,
  #header button,
  .main-topbar button,
  .main-topbar a[title],
  .top-header button,
  .top-header a[title] {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* The avatar link is intentionally a fixed round 36px chip on several pages;
     keep it visually round but give it a 44px hit area via padding box. */
  #navActions > a[title="Profile"],
  #navActions > a[href="profile.html"] {
    min-width: 40px !important;
    min-height: 40px !important;
  }

  /* ── 6. FILES module — keep the breadcrumb/path readable & un-clipped ──────
     The header fix above frees the left column; here we make sure the
     breadcrumb row never wraps into a tall block or collapses to a sliver, and
     that the current folder name stays visible. The folder affordance (the
     always-visible "Folders" toolbar button + the header menu button that
     opens the tree drawer) stays reachable; we make it an obvious 44px target. */
  #breadcrumb {
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }
  /* The last crumb (current folder) is the most important — let it ellipsize
     rather than disappear. */
  #breadcrumb > span:last-child,
  #breadcrumb > .text-\[\#191c1e\] {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
  }
  /* Make the header "open folder tree" menu button a clear 44px target. */
  .topbar-glass button[onclick="openFolderDrawer()"] {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* ── 8. Page-scoped fixes for headers whose right cluster is intrinsically
     too wide for 360px even after the two bells are hidden. Each is narrowly
     scoped so no other page is affected. ─────────────────────────────────── */

  /* 8a. FILES + CLOUD (file managers — identified by #breadcrumb in the glass
     header). Their right cluster carries file-ops (view toggle, New, Recycle,
     Shares) PLUS the DoBo dock. On a phone that is too many controls for one
     row. We bound the cluster to ~54vw and make it a right-anchored,
     horizontally scrollable action strip: the breadcrumb keeps >=46vw (always
     readable — RK's core Files complaint), the DoBo pill + EN (injected at the
     FRONT of #navActions) stay on-screen, and every file action remains
     reachable by a short horizontal swipe (nothing is amputated). Page never
     scrolls horizontally because the overflow is contained inside the strip.
     (Folder tree stays reachable via the always-visible "Folders" toolbar
     button + the header menu button; upload/new-folder via the mobile FAB.) */
  .topbar-glass:has(#breadcrumb) #navActions {
    max-width: 48vw !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }
  .topbar-glass:has(#breadcrumb) #navActions::-webkit-scrollbar {
    display: none !important;
  }
  /* Let the breadcrumb column take ALL remaining space and shrink to 0 as
     needed (never force a min-width that would, combined with the capped
     cluster, exceed 100vw and re-introduce overflow). The capped, scrollable
     #navActions above guarantees the breadcrumb keeps >=~50vw in practice. */
  .topbar-glass:has(#breadcrumb) > div > .flex.items-center.min-w-0,
  .topbar-glass:has(#breadcrumb) #breadcrumb {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* 8b. PLANNER — the module filter <select> is intrinsically wide and, with
     the DoBo dock, consumes the whole row and collapses the "Planner" title.
     Cap it hard so the title keeps readable width; the select stays usable. */
  #navActions #moduleFilter.filter-select,
  #navActions #moduleFilter {
    max-width: 28vw !important;
    min-width: 0 !important;
  }
  /* Bound planner's whole action cluster to a scrollable strip so the fixed
     "Planner" title keeps readable width; the DoBo pill + EN sit at the front
     (always visible), the module filter remains reachable. */
  .top-header #navActions {
    max-width: 52vw !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
  }
  .top-header #navActions::-webkit-scrollbar { display: none !important; }
  /* Keep the DoBo pill + EN at the FRONT of the strip (always visible); push
     the wide module <select> to the end so IT is the part that scrolls. */
  .top-header #navActions #moduleFilter { order: 5 !important; }
  .top-header #navActions .dobo2-navgroup { order: -2 !important; }
  .top-header #navActions #langToggle { order: -1 !important; }

  /* 8f. CALENDAR — owned by another agent (appointment/grid logic); we only
     normalise the HEADER CHROME with CSS (no logic touched). Its top bar packs
     a month-nav + a fixed 140px month title + Today + an admin view-toggle +
     avatar, plus a second appointment-tab bar — intrinsically wider than
     360px. We (a) drop the month title's fixed 140px min-width and shrink it,
     (b) tighten gaps, and (c) make the control clusters + the appointment-tab
     bar horizontally SCROLLABLE so nothing is amputated and the PAGE never
     scrolls horizontally. A proper mobile calendar header (abbreviated month,
     view-toggle in an overflow menu) is left to the calendar owner. */
  header:has(#monthTitle) #monthTitle {
    min-width: 0 !important;
    font-size: 14px !important;
    text-align: left !important;
  }
  header:has(#monthTitle) > div {
    gap: 4px !important;
    min-width: 0 !important;
  }
  header:has(#monthTitle) > div > div {
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }
  header:has(#monthTitle) > div > div::-webkit-scrollbar { display: none !important; }
  #apptTabs {
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
  }
  #apptTabs::-webkit-scrollbar { display: none !important; }
  /* Bound calendar's right action cluster and keep the avatar pinned first so
     it stays on-screen; the admin view-toggle scrolls within the strip. */
  header:has(#monthTitle) #navActions {
    max-width: 40vw !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
  }
  header:has(#monthTitle) #navActions::-webkit-scrollbar { display: none !important; }
  header:has(#monthTitle) #navActions #headerAvatar { order: -3 !important; }
  header:has(#monthTitle) #navActions .dobo2-navgroup { order: -2 !important; }
  header:has(#monthTitle) #navActions #langToggle { order: -1 !important; }
  header:has(#monthTitle) #navActions #viewToggle { order: 5 !important; }

  /* 8c. PROFILE — its #navActions (email + avatar chip) is desktop-only by
     design (markup: class="hidden md:flex"). Something re-shows it on mobile
     and the long email overflows. Re-assert the original intent: hide the
     desktop-only cluster on phones (the sidebar + mobile title row remain). */
  .main-topbar > #navActions {
    display: none !important;
  }

  /* 8c-bis. PROJECT-TITLE PAGES (dashboard, mms) — the header carries a
     project-name <h1> that must stay visible, but the right cluster also holds
     an ACL "calendar/planner" shortcut (#calendarWidget) on top of the DoBo
     dock + avatar, which eats the whole row and collapses the title to 0 at
     360px. The planner shortcut is redundant on mobile (the sidebar drawer has
     a Planner entry), so hide just this header shortcut on phones. This frees
     ~44px so the (flex-grow) title renders a readable, ellipsized width while
     the DoBo pill + EN + avatar stay on-screen. */
  .topbar-glass #calendarWidget,
  header #calendarWidget {
    display: none !important;
  }
  /* The secondary "project info" popover button is the lowest-priority header
     control on these project pages; hiding it on phones lets the project-name
     title win real, readable width (task: "the title must win space over the
     icon cluster"). Project info stays available on tablet/desktop. */
  .topbar-glass #projectInfoBtn,
  header #projectInfoBtn {
    display: none !important;
  }
  /* On project pages that ALSO expose a hamburger (which opens the nav drawer
     containing a Hub/Projects entry), the dedicated "Back to Hub" button is
     redundant on phones. Hiding it only on those pages (scoped via :has) gives
     the project-name title readable width. Pages WITHOUT a hamburger (e.g.
     mms.html) keep their back button untouched. */
  .topbar-glass > div:has(#mobileMenuBtn) #backToHubBtn {
    display: none !important;
  }

  /* 8d. SUPERLOG (#header) — Pause/Clear/Back buttons carry text labels and sit
     next to a SUPERADMIN badge; together they overflow 360px. Make the action
     buttons icon-only and drop the badge on phones (title stays). */
  #header #navActions {
    gap: 2px !important;
    flex: 0 0 auto !important;
  }
  #header #navActions button {
    padding: 8px !important;
  }
  #header #navActions button > span:not(.material-symbols-outlined) {
    display: none !important;
  }
  #header #headerTitle > span:not(.material-symbols-outlined) {
    display: none !important;
  }
  #header #headerTitle { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; }
  /* "Back to Admin" is redundant on mobile (the sidebar drawer has Admin);
     hiding it on phones frees room so the "System Logs" title stays readable. */
  #header #navActions button[onclick*="admin.html"] { display: none !important; }

  /* 8e. AUFMASS-HUB — bespoke, unconstrained header (no #navActions; DoBo dock
     mounts into the right cluster). Scoped by the id we add to its <header>.
     Constrain it to the viewport and let the breadcrumb truncate. */
  #aufmassHubHeader {
    min-width: 0 !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    gap: 8px !important;
  }
  #aufmassHubHeader > div:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  #aufmassHubHeader > div:last-child {
    flex: 0 0 auto !important;
  }
  #aufmassHubHeader nav { min-width: 0 !important; overflow: hidden !important; }
  #aufmassHubHeader #projName { max-width: 34vw !important; }

}

/* ── 7. 360px-class refinement ──────────────────────────────────────────────
   On the narrowest common Android (360px) give the title column a touch more
   room by letting the action cluster go a little tighter. */
@media (max-width: 400px) {
  #navActions {
    gap: 2px !important;
  }
  #langToggle {
    padding: 4px 5px !important;
  }
}