/* =====================================================================
   worker-nav.css -- Paczka 183
   =====================================================================

   Wyciete BAJT W BAJT z staff-nav.css -- wspolny arkusz menu starego chrome'u.

   Portal Workera byl ostatnim miejscem, ktore trzymalo ten wspolny
   arkusz przy zyciu. Zamiast wozic caly plik dla garstki regul, portal
   dostaje wlasna kopie DOKLADNIE tego, czego uzywa -- reszta wspolnego
   arkusza nie dotyczy go w ogole.

   Zakres wyciecia nie jest zgadywany: w przegladarce zmierzone zostalo,
   ktore reguly tego pliku trafiaja w jakikolwiek element portalu
   (95 regul). Przeniesiony zostal NADZBIOR tego pomiaru -- caly
   rodzinny prefiks tych nazw -- zeby zlapac takze stany, ktorych akurat
   nie ma na ekranie (offline, blad, zamkniety panel, inny jezyk).
   Kolejnosc regul i pozycja pliku w <head> sa te same, co poprzednio,
   wiec kaskada nie zmienia sie ani o jeden krok.
   ===================================================================== */

/*
 * Staff navigation (Admin / PM / Supervisor / Site Manager) — single source of
 * truth for the sidebar menu built by core/Navigation.php.
 *
 * Replaces 7 files that used to fight over this same markup (shared-role-menu.css,
 * menu-role-hotfix.css [only its 3 nav rules], approved-role-menu.css,
 * management-menu-isolation-7.10.css, management-menu-worker-parity.css,
 * menu-label-stability.css, pro-navigation.css). See core/Navigation.php's doc
 * comment for the history. Deliberate redesign (not a byte-for-byte port): light,
 * flat, modern look instead of the dark-navy theme that used to win the old
 * cascade, agreed with the client together with the SiteOS rebrand.
 *
 * Structure this file styles (all classes already baked into the static markup
 * by core/Navigation.php, unchanged by this file):
 *   nav.staffDrawer > .staffDrawerHead > .proBrand > img + .proBrandText
 *                    > .proNavSearchWrap > input.proNavSearch
 *                    > .proNavScroll > .proDirectDashboard (button/a)
 *                                    > details.proNavGroup > summary + .proNavItems > a/button.tab
 *                    > .staffDrawerLogout
 *                    > .approvedMenuPowered (footer credit)
 */

:root{
  --nav-width:270px;
  --nav-bg:#ffffff;
  --nav-head-bg:#f8fafc;
  --nav-border:#e5eaf1;
  --nav-ink:#1e293b;
  --nav-muted:#64748b;
  --nav-accent:#2563eb;
  --nav-accent-soft:#eaf1ff;
  --nav-danger:#b91c1c;
  --nav-danger-bg:#fef2f2;
  --nav-danger-border:#fecaca;
  --nav-warning:#b45309;
  --nav-warning-bg:#fffbeb;
  --nav-warning-border:#fde68a;
}

/* Audit follow-up: the same "hidden-but-still-visible" bug already found and fixed
   once in assets/unified-portal.css (the JS-built fallback nav's search box) turned
   out to have a second, more consequential instance right here in the REAL,
   server-rendered menu. supervisor/app.js's applyRoleNavigation() (and equivalents
   for Admin/PM) sets the native `hidden` attribute on individual menu items/groups
   the current account lacks permission for, but every rule below for
   .proDirectDashboard/.proNavItems>.tab/a.unifiedNavLink sets `display:flex!important`
   with no `[hidden]` exception -- author styles always beat the browser's default
   `[hidden]{display:none}`, so an item hidden for lacking permission still rendered,
   fully clickable (StaffGate still correctly blocked the destination page itself --
   this was a confusing UI leak, not an access-control hole). Fix mirrors each
   conflicting selector exactly (plus `[hidden]`) so its specificity is guaranteed to
   exceed the original -- a generic descendant rule like `nav.staffDrawer.sharedRoleMenu [hidden]`
   looked simpler but is LESS specific than `nav.staffDrawer.sharedRoleMenu .proNavItems>.tab`
   and would have silently lost the cascade. */
nav.staffDrawer.sharedRoleMenu .proDirectDashboard[hidden],nav.staffDrawer.sharedRoleMenu .proDirectItem[hidden],nav.staffDrawer.sharedRoleMenu .proNavItems>.tab[hidden],nav.staffDrawer.sharedRoleMenu a.unifiedNavLink[hidden]{display:none!important}
nav.staffDrawer.sharedRoleMenu .staffDrawerHead .proBrand{display:flex!important;flex-direction:row!important;align-items:center!important;gap:9px!important;width:100%!important;min-width:0!important}
/* aot-brand.css's older ".proBrand img" rule (still used by the login screen and
   Worker portal) gives every such image a white card/border/shadow treatment;
   explicitly reset that here so the SiteOS wordmark sits flat and compact. */
nav.staffDrawer.sharedRoleMenu .staffDrawerHead .proBrand>img{display:block!important;flex:0 0 auto!important;width:auto!important;height:30px!important;max-width:72px!important;max-height:none!important;object-fit:contain!important;object-position:left center!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0!important}
nav.staffDrawer.sharedRoleMenu .staffDrawerHead .proBrandText{display:flex!important;flex:1 1 auto!important;flex-direction:column!important;gap:3px!important;min-width:0!important}
/* name (top) */
nav.staffDrawer.sharedRoleMenu .staffDrawerHead .proBrandText strong{display:block!important;overflow:hidden!important;width:100%!important;margin:0!important;padding:0!important;color:var(--nav-ink)!important;font-size:12.5px!important;font-weight:800!important;letter-spacing:-.005em!important;text-overflow:ellipsis!important;white-space:nowrap!important} /* pre-existing duplicate role label (e.g. #drawerManagementRole / a plain "Supervisor" span) sitting next to .proBrand -- redundant with .headerAccountRole below, just crowded the light header */
/* account type / role (right under the name) */
nav.staffDrawer.sharedRoleMenu .headerAccountRole{display:block!important;overflow:hidden!important;width:100%!important;margin:0!important;padding:0!important;color:var(--nav-muted)!important;font-size:9.5px!important;font-weight:700!important;letter-spacing:.04em!important;text-transform:uppercase!important;text-overflow:ellipsis!important;white-space:nowrap!important}
/* current project + switcher (below name/role) */
nav.staffDrawer.sharedRoleMenu .headerProjectSwitcher{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:center!important;gap:5px!important;width:100%!important;max-width:100%!important;margin:3px 0 0!important;padding:0!important;background:transparent!important;border:0!important}
nav.staffDrawer.sharedRoleMenu .headerProjectSwitcher>span,nav.staffDrawer.sharedRoleMenu .headerProjectSwitcher>small{display:block!important;margin:0!important;padding:0!important;color:var(--nav-muted)!important;font-size:9px!important;font-weight:600!important;line-height:1.2!important;white-space:nowrap!important}
nav.staffDrawer.sharedRoleMenu .headerProjectSwitcher select{display:block!important;width:100%!important;min-width:0!important;height:22px!important;min-height:22px!important;max-height:22px!important;margin:0!important;padding:1px 16px 1px 6px!important;border:1px solid var(--nav-border)!important;border-radius:6px!important;background:#fff!important;color:var(--nav-ink)!important;font-size:9.5px!important;font-weight:600!important;line-height:18px!important;transition:border-color .15s ease,box-shadow .15s ease!important}
nav.staffDrawer.sharedRoleMenu .headerProjectSwitcher select:focus{outline:none!important;border-color:var(--nav-accent)!important;box-shadow:0 0 0 3px var(--nav-accent-soft)!important}

/* ---- search ---- */
nav.staffDrawer.sharedRoleMenu .proNavSearchWrap{position:relative!important;inset:auto!important;display:block!important;flex:0 0 auto!important;width:100%!important;margin:0!important;padding:10px 12px 8px!important;background:transparent!important}
nav.staffDrawer.sharedRoleMenu .proNavSearchWrap::before{content:""!important;position:absolute!important;left:22px!important;top:50%!important;width:14px!important;height:14px!important;margin-top:-6px!important;background-color:#94a3b8!important;-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><circle cx=%2211%22 cy=%2211%22 r=%227%22/><line x1=%2221%22 y1=%2221%22 x2=%2216.65%22 y2=%2216.65%22/></svg>') center/contain no-repeat!important;mask:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><circle cx=%2211%22 cy=%2211%22 r=%227%22/><line x1=%2221%22 y1=%2221%22 x2=%2216.65%22 y2=%2216.65%22/></svg>') center/contain no-repeat!important;pointer-events:none!important}
nav.staffDrawer.sharedRoleMenu .proNavSearch{display:block!important;width:100%!important;height:38px!important;min-height:38px!important;max-height:38px!important;margin:0!important;padding:8px 12px 8px 32px!important;border:1px solid var(--nav-border)!important;border-radius:9px!important;background:#f5f7fa!important;color:var(--nav-ink)!important;font-size:12px!important;line-height:20px!important;box-sizing:border-box!important;transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease!important}
nav.staffDrawer.sharedRoleMenu .proNavSearch::placeholder{color:#94a3b8!important}
nav.staffDrawer.sharedRoleMenu .proNavSearch:focus{outline:none!important;border-color:var(--nav-accent)!important;background:#fff!important;box-shadow:0 0 0 3px var(--nav-accent-soft)!important}
/* assets/pro-navigation-safe.js's search filter toggles these two classes/elements on
   input -- it used to inject this same display:none rule itself via a runtime
   document.createElement('style'), which silently failed once core/StaffGate.php's
   pages (and, independently, core/PortalShell.php/SupervisorShell.php's own long-
   standing CSP) started sending style-src 'self' with no 'unsafe-inline': the browser
   drops any <style> tag inserted by script under that policy. Moved here as a static
   rule (this file is a normal <link>, always allowed) so the search box actually hides
   non-matching items again instead of only collapsing empty groups. */
nav.staffDrawer.sharedRoleMenu .proNavSearchHidden{display:none!important}
nav.staffDrawer.sharedRoleMenu .proNavEmpty{margin:4px 12px!important;padding:10px 12px!important;border:1px dashed var(--nav-border)!important;border-radius:9px!important;color:var(--nav-muted)!important;font-size:11px!important;text-align:center!important}

/* ---- scroll area ---- */
nav.staffDrawer.sharedRoleMenu .proNavScroll{display:block!important;flex:1 1 auto!important;min-height:0!important;width:100%!important;margin:0!important;padding:0 8px 8px 8px!important;padding-right:9px!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:thin!important;scrollbar-color:#cbd5e1 transparent!important}

/* ---- dashboard direct link + nav items (shared look) ---- */
nav.staffDrawer.sharedRoleMenu .proDirectDashboard,nav.staffDrawer.sharedRoleMenu .proDirectItem,nav.staffDrawer.sharedRoleMenu .proNavItems>.tab,nav.staffDrawer.sharedRoleMenu a.unifiedNavLink{position:relative!important;inset:auto!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;width:100%!important;min-height:42px!important;margin:0 0 2px!important;padding:8px 9px!important;border:1px solid transparent!important;border-radius:10px!important;background:transparent!important;color:var(--nav-ink)!important;font-size:12px!important;font-weight:600!important;line-height:1.2!important;text-align:left!important;text-decoration:none!important;transform:none!important;transition:background-color .15s ease,color .15s ease,border-color .15s ease!important}
/* .proDirectItem (Patch88): second direct item, right after Dashboard --
   Supervisor/SM's Messages (render_supervisor_staff_nav()'s
   $messagesDirect) and, since Patch98, Admin/PM's own Messages
   (render_admin_pm_staff_nav()'s $messagesDirect) too. Used to get an
   extra 8px/10px outer margin here so both direct items read as a
   visually separate "quick access" row group, narrower than the groups
   below. Patch140: Robert -- "dashboard i messages powinny być na
   takiej samej linii jak inne rzeczy z menu" -- he wants them flush
   with every other item instead, not inset. Removed; .proDirectDashboard/
   .proDirectItem now fall through to the exact same margin/width as
   .proNavItems>.tab from the shared rule above (no separate rule needed
   for that -- they already matched it before this narrower override was
   added). */
/* Patch97 bug fix -- THE REAL CAUSE of every "icons off-center" report
   since Patch92 (see the long, and largely mistaken, history in the
   comment block right below this one). This rule's job is to make the
   LAST span inside a menu item (a trailing text/badge label) truncate
   with an ellipsis instead of wrapping. But most items' only <span> child
   is .proItemIcon itself (the label after it is a plain text node, not a
   span) -- so `span:last-child` matches .proItemIcon too, on every item
   that doesn't happen to carry a second trailing badge span. That
   incorrectly hands `display:block!important` to .proItemIcon, which
   overrides the `display:grid!important` this file sets on it a few
   lines below (confirmed with getComputedStyle() against the real
   rendered page: `.proItemIcon` computed to `display:block` on every
   item without a badge span, `display:grid` on the few that have one --
   e.g. Supervisor's "Messages" item, which has a trailing
   .messageNavBadge span and was the one item that was NEVER reported as
   off-center). `display:block` makes `place-items:center` inert, so the
   icon (emoji before Patch96, SVG since) just stacks at the natural top
   of the box instead of centering -- exactly the "sits in the top
   corner" look reported every single time, on every portal that uses
   .proItemIcon (Admin/PM too, though nobody happened to flag it there).
   None of Patch92/93/95/96 could ever have fixed this: none of them
   touched `display`, only font-size or icon content, neither of which
   matters when the centering container itself isn't actually a grid.
   This explains why Worker's own drawer never showed this bug at all --
   it uses a different icon class (.workerItemIcon) that this selector
   was never written to match, so its `display:grid` was never at risk.
   Fixed here by excluding .proItemIcon from this selector with
   :not(.proItemIcon), so the ellipsis rule still applies to any real
   trailing label/badge span, and .proItemIcon's own `display:grid` rule
   is finally free to apply everywhere, unconditionally. */
nav.staffDrawer.sharedRoleMenu .proDirectDashboard>span:last-child:not(.proItemIcon),nav.staffDrawer.sharedRoleMenu .proDirectItem>span:last-child:not(.proItemIcon),nav.staffDrawer.sharedRoleMenu .proNavItems>.tab>span:last-child:not(.proItemIcon),nav.staffDrawer.sharedRoleMenu a.unifiedNavLink>span:last-child:not(.proItemIcon){display:block!important;overflow:hidden!important;min-width:0!important;text-overflow:ellipsis!important;white-space:nowrap!important}
nav.staffDrawer.sharedRoleMenu .proDirectDashboard:hover,nav.staffDrawer.sharedRoleMenu .proDirectItem:hover,nav.staffDrawer.sharedRoleMenu .proNavItems>.tab:hover{background:#f4f7fb!important}
nav.staffDrawer.sharedRoleMenu .proDirectDashboard.active,nav.staffDrawer.sharedRoleMenu .proNavItems>.tab.active{border-color:var(--nav-accent-soft)!important;background:var(--nav-accent-soft)!important;color:#173d8c!important;box-shadow:inset 3px 0 var(--nav-accent)!important}

/* icons
   Patch97 correction: everything below this line, through Patch95's
   comment, chased the wrong cause. "place-items:center here was already
   correctly centering the icon's own box" (next line) was never actually
   verified with getComputedStyle() -- it was an assumption from reading
   this rule in isolation. It was wrong: a different rule (the
   `span:last-child` one right above this section) was silently handing
   .proItemIcon `display:block!important`, which makes place-items:center
   a no-op. See that rule's own Patch97 comment for the real mechanism and
   how it was found. None of the font-size changes below this comment
   (Patch92/93/95) or the emoji-to-SVG changes (Patch94/96) touched
   `display` at all, so none of them could have fixed the actual bug --
   any apparent improvement any of them seemed to show was, at best,
   partial (font-size still doesn't matter once display:block breaks
   centering; it only changed how much of the already-mispositioned
   glyph was visible). Left in place, unedited, as the record of that
   investigation -- the numbers it changed (14px/12px item/group
   font-size, matching Worker's own values) are harmless and stay as the
   current values; only the mistaken diagnosis is what Patch97 corrects.
   Bug fix (Robert's feedback, round 4, "ikony dalej poprzesuwane" +
   screenshot showing 🏠 sitting in the top-left corner of its badge with a
   big empty gap bottom-right): place-items:center here was already
   correctly centering the icon's own box within the 30x30 badge -- the
   actual cause is font-size:12px, which is far smaller than the 30px badge
   it sits in. SVG icons (Admin/PM, sized via width/height a few lines
   below, unaffected by font-size) never showed this; it only affects
   Supervisor's plain-emoji-character icons (Patch89), which render at
   whatever font-size applies here. Different emoji glyphs (Apple Color
   Emoji, which Robert is testing on) don't all draw their "ink" centered
   within their own text box at small sizes -- some (like 🏠) visibly hug one
   corner -- and that skew is far more visible when the box is 2.5x the
   glyph's rendered size. Worker's own equivalent badge (assets/
   communication-modern.css's `.appDrawer .appDrawerNav button>span`) never
   set an explicit small font-size at all, so its emoji inherit a much
   larger, more typical text size and don't show this -- bumped to 18px
   here to match that closer, rather than removing the override outright
   (which risks picking up a very different inherited size in some other
   context). */
/* Round 2 (Robert's next screenshot after the 18px attempt above): 18px
   fixed some emoji (🏠, 🎓) but made others worse -- 🧾 (Weekly Timesheets)
   is a tall, narrow glyph and was visibly clipped at the top of its badge
   at that size, and a few others (🗂, ⏱, 🏖) were still noticeably
   off-center. Apple Color Emoji glyphs don't share one consistent internal
   "ink" box the way a font's letterforms do, so no single font-size makes
   every one of them sit dead-center in a fixed square -- 15px is a more
   conservative middle ground (still well above the original 12px that
   started this) chosen to stop clipping the tallest glyphs while keeping
   most of the centering improvement. If specific icons still look off
   after this, the only way to make every single one sit pixel-perfect is
   the same approach Admin/PM's menu already uses -- real SVG icons instead
   of emoji, sized exactly instead of guessing a font-size that happens to
   suit a given glyph's own drawn proportions. */
/* Patch95 (Robert: "zrób to ładnie jak u workera", after Patch92's 18px
   clipped tall glyphs and Patch93's dial-back to 15px still wasn't right):
   font-size copied verbatim from Worker's own #workerDrawer .workerItemIcon
   rule (assets/staff-nav.css, "Worker portal" section) -- 14px there is
   the one emoji size in this whole app Robert has never complained about,
   so this patch reuses that exact number instead of picking a fourth new
   one. Was 15px (Patch93). */
nav.staffDrawer.sharedRoleMenu .proItemIcon{display:grid!important;flex:0 0 30px!important;place-items:center!important;width:30px!important;height:30px!important;margin:0!important;padding:0!important;border-radius:9px!important;background:var(--nav-accent-soft)!important;color:var(--nav-accent)!important;font-size:14px!important;line-height:1!important;transition:background-color .15s ease,color .15s ease!important}
nav.staffDrawer.sharedRoleMenu .proDirectDashboard.active .proItemIcon,nav.staffDrawer.sharedRoleMenu .proNavItems>.tab.active .proItemIcon{background:#dbe8ff!important;color:#173d8c!important}
nav.staffDrawer.sharedRoleMenu :where(.proItemIcon,.proNavGroupIcon) svg{display:block!important;width:16px!important;height:16px!important;margin:0!important;padding:0!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}
nav.staffDrawer.sharedRoleMenu .proNavGroupIcon svg{width:14px!important;height:14px!important}

/* ---- groups ---- */
nav.staffDrawer.sharedRoleMenu .proNavGroup{display:block!important;width:100%!important;margin:2px 0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;overflow:visible!important}
nav.staffDrawer.sharedRoleMenu .proNavGroup[hidden]{display:none!important}
nav.staffDrawer.sharedRoleMenu .proNavGroup>summary{display:flex!important;align-items:center!important;gap:9px!important;width:100%!important;min-height:38px!important;margin:0!important;padding:8px 9px!important;border-radius:9px!important;list-style:none!important;color:var(--nav-muted)!important;font-size:10.5px!important;font-weight:800!important;letter-spacing:.06em!important;line-height:1!important;text-transform:uppercase!important;cursor:pointer!important;transition:background-color .15s ease,color .15s ease!important}
nav.staffDrawer.sharedRoleMenu .proNavGroup>summary:hover{background:#f4f7fb!important;color:var(--nav-ink)!important}
nav.staffDrawer.sharedRoleMenu .proNavGroup>summary::-webkit-details-marker{display:none!important}
nav.staffDrawer.sharedRoleMenu .proNavGroup>summary::marker{content:none!important}
nav.staffDrawer.sharedRoleMenu .proNavGroup>summary::after{display:none!important}
nav.staffDrawer.sharedRoleMenu .proNavGroup>summary b{display:block!important;overflow:hidden!important;flex:1 1 auto!important;min-width:0!important;margin:0!important;padding:0!important;font:inherit!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:inherit!important}
nav.staffDrawer.sharedRoleMenu .proNavGroup[open]>summary,nav.staffDrawer.sharedRoleMenu .proNavGroup[open]>summary b{color:var(--nav-ink)!important}
/* Patch95: same Worker-matching fix as .proItemIcon just above, this time
   copied from Worker's own #workerDrawer .proNavGroupIcon rule (12px).
   Was 14px (Patch93). */
nav.staffDrawer.sharedRoleMenu .proNavGroupIcon,nav.staffDrawer.sharedRoleMenu .proNavGroup>summary>i{display:grid!important;flex:0 0 26px!important;place-items:center!important;width:26px!important;height:26px!important;margin:0!important;padding:0!important;border-radius:8px!important;background:#f1f5f9!important;color:#64748b!important;font-size:12px!important;line-height:1!important;transition:background-color .15s ease,color .15s ease!important}
nav.staffDrawer.sharedRoleMenu .proNavGroup>summary>i{position:relative!important;background:transparent!important;margin-left:auto!important;flex:0 0 16px!important;width:16px!important;height:16px!important}
nav.staffDrawer.sharedRoleMenu .proNavGroup>summary>i::before,nav.staffDrawer.sharedRoleMenu .proNavGroup>summary>i::after{content:""!important;position:absolute!important;left:3px!important;top:7px!important;width:8px!important;height:1.6px!important;border-radius:2px!important;background:#94a3b8!important;transition:transform .15s ease!important}
nav.staffDrawer.sharedRoleMenu .proNavGroup>summary>i::after{transform:rotate(90deg)!important;transition:transform .15s ease!important}
nav.staffDrawer.sharedRoleMenu .proNavGroup[open]>summary>i::after{transform:none!important}
nav.staffDrawer.sharedRoleMenu .proNavItems{display:grid!important;gap:2px!important;width:100%!important;margin:0!important;padding:2px 0 8px!important}

/* colour-coded group icon chips -- one tasteful, distinct tint per group, all from the
   same soft-pastel family so the sidebar reads as one coherent palette. Keyed off the
   data-group attribute core/Navigation.php always renders (STAFF_NAV_GROUP_ORDER),
   so this never depends on group position/order like the old nth-of-type hack did.
   Menu reorganization batch: the old 'approvals' group was merged into 'finance', so
   its swatch (green) was reassigned to the new 'site' group instead of going unused. */
nav.staffDrawer.sharedRoleMenu .proNavGroup[data-group="planning"] .proNavGroupIcon{background:var(--nav-accent-soft)!important;color:var(--nav-accent)!important}
nav.staffDrawer.sharedRoleMenu .proNavGroup[data-group="quality"] .proNavGroupIcon{background:#fff3e0!important;color:#b66d00!important}
nav.staffDrawer.sharedRoleMenu .proNavGroup[data-group="team"] .proNavGroupIcon{background:#f1ecff!important;color:#6947c9!important}
nav.staffDrawer.sharedRoleMenu .proNavGroup[data-group="time"] .proNavGroupIcon{background:#e5faf6!important;color:#0d8f7f!important}
nav.staffDrawer.sharedRoleMenu .proNavGroup[data-group="finance"] .proNavGroupIcon{background:#edeeff!important;color:#4338ca!important}
nav.staffDrawer.sharedRoleMenu .proNavGroup[data-group="reports"] .proNavGroupIcon{background:#e2f6f9!important;color:#0f8ea3!important}
nav.staffDrawer.sharedRoleMenu .proNavGroup[data-group="site"] .proNavGroupIcon{background:#e7f8ee!important;color:#158a4d!important}
nav.staffDrawer.sharedRoleMenu .proNavGroup[data-group="settings"] .proNavGroupIcon{background:#f1f5f9!important;color:#475569!important}
nav.staffDrawer.sharedRoleMenu .proNavGroup[data-group="messages"] .proNavGroupIcon{background:#fdecf3!important;color:#be185d!important}
nav.staffDrawer.sharedRoleMenu>.approvedMenuPowered{display:flex!important;flex:0 0 auto!important;align-items:center!important;justify-content:center!important;gap:8px!important;width:calc(100% - 16px)!important;margin:8px 8px 10px!important;padding:8px 6px!important;border:1px solid var(--nav-border)!important;border-radius:10px!important;background:#fafbfd!important}
nav.staffDrawer.sharedRoleMenu>.approvedMenuPowered img{display:block!important;height:22px!important;width:auto!important;max-width:150px!important;object-fit:contain!important}
nav.staffDrawer.sharedRoleMenu>.approvedMenuPowered span{display:none!important}
body .staffAppShell>.staffMobileHeader{position:fixed!important;inset:0 0 auto 0!important;z-index:900!important;height:60px!important;min-height:60px!important;display:flex!important;align-items:center!important;gap:10px!important;padding:8px 14px!important;background:var(--nav-bg)!important;color:var(--nav-ink)!important;border:0!important;border-bottom:1px solid var(--nav-border)!important;box-shadow:0 2px 10px rgba(15,23,42,.05)!important}
body .staffAppShell>.staffMobileHeader>button.staffMenuButton{width:40px!important;height:40px!important;padding:0!important;border:1px solid var(--nav-border)!important;border-radius:9px!important;background:#fff!important;color:var(--nav-ink)!important;font-size:20px!important;transition:background-color .15s ease!important}
body .staffAppShell>.staffMobileHeader>button.staffMenuButton:hover{background:#f4f7fb!important}
body .staffAppShell>.staffMobileHeader strong{color:var(--nav-ink)!important;font-size:13px!important;font-weight:800!important}
body .staffAppShell>.staffMobileHeader div:nth-child(2) span{color:var(--nav-muted)!important;font-size:10.5px!important;font-weight:600!important}
body .staffAppShell>.staffMobileHeader .staffOnline{color:var(--nav-muted)!important;font-weight:700!important}
body .staffAppShell>.staffMobileHeader .staffOnlineDate{color:var(--nav-muted)!important;border-right:1px solid var(--nav-border)!important}
/* Patch155 (Robert -- "zrób porządny [layout], żeby to aplikacja wyglądało
   na XXI wiek... Zacznijmy od notification"): these two rules used to only
   set background/color/border/transition -- every OTHER visual property
   (width, height, shape, padding, font-size) was left to whatever else
   happened to be loaded on a given page (assets/admin-pm-styles.css or
   supervisor/styles.css on some pages, nothing at all on others like
   pm/finance.php or admin/device-mapping.php -- confirmed by checking each
   page's own <link> list), so the bell/search icons could come out a
   different size, or with no rounded-square shape at all, depending on
   which page you were on. Now fully self-contained here, at the one
   selector already proven (by specificity) to win on every page -- same
   complete pattern already used a few hundred lines down for the
   Messenger icon (.staffMobileHeader .appHeaderInboxButton), so all three
   icon buttons in this bar are now visually identical everywhere. */
body .staffAppShell>.staffMobileHeader .staffActivityButton{position:relative!important;flex:0 0 auto!important;width:40px!important;height:40px!important;display:grid!important;place-items:center!important;padding:0!important;border:1px solid var(--nav-border)!important;border-radius:10px!important;background:#fff!important;color:var(--nav-muted)!important;font-size:17px!important;transition:background-color .15s ease,color .15s ease,border-color .15s ease!important}
body .staffAppShell>.staffMobileHeader .staffActivityButton:hover{background:var(--nav-accent-soft)!important;color:var(--nav-accent)!important;border-color:var(--nav-accent)!important}
/* The unread-count badge used to only exist inside the ≤700px media query
   below (as a small dot -- a deliberate, documented space-saving choice
   for phones, left unchanged here) -- on a normal desktop/tablet width it
   rendered as plain bold text with no badge shape at all. Same pill this
   header's Messenger icon already uses (.appHeaderInboxButton b, a few
   hundred lines down), so the two badges now match. */
body .staffAppShell>.staffMobileHeader .staffActivityButton b{position:absolute!important;top:-4px!important;right:-4px!important;min-width:18px!important;height:18px!important;display:grid!important;place-items:center!important;padding:0 5px!important;border:2px solid var(--nav-bg)!important;border-radius:999px!important;background:var(--nav-danger)!important;color:#fff!important;font-size:9px!important;font-weight:900!important;line-height:1!important}
body .staffAppShell>.staffMobileHeader .staffActivityButton b[hidden]{display:none!important}
body .staffAppShell>.staffMobileHeader .staffGlobalSearchButton{flex:0 0 auto!important;width:40px!important;height:40px!important;display:grid!important;place-items:center!important;padding:0!important;border:1px solid var(--nav-border)!important;border-radius:10px!important;background:#fff!important;color:var(--nav-muted)!important;font-size:17px!important;transition:background-color .15s ease,color .15s ease,border-color .15s ease!important}
body .staffAppShell>.staffMobileHeader .staffGlobalSearchButton:hover{background:var(--nav-accent-soft)!important;color:var(--nav-accent)!important;border-color:var(--nav-accent)!important}

/* ---- persistent top bar on real phones: trim to fit, no horizontal scroll ----
   Reported on a live device: hamburger + project/role text + online-dot +
   date + language flag + "Online" text + notification bell (with numeric
   badge) + search icon all in one 60px row is wider than a phone screen,
   forcing the whole bar to scroll sideways. Below 700px we now hide the
   project/role text block (it's redundant with the drawer header, which
   already shows the current project) and the "Online"/"Offline" word, and
   shrink the notification button to a plain status dot -- leaving exactly
   what was asked for: menu button, an orange dot when there are unread
   notifications, the search icon, the date, the language flag and the
   green/red online dot. */
@media(max-width:700px){
  body .staffAppShell>.staffMobileHeader{padding:8px 10px!important;gap:6px!important}
  body .staffAppShell>.staffMobileHeader>div:nth-child(2){display:none!important}
  body .staffAppShell>.staffMobileHeader .staffOnline{gap:4px!important;margin-left:auto!important}
  body .staffAppShell>.staffMobileHeader .staffOnline>span:last-child{display:none!important}
  body .staffAppShell>.staffMobileHeader .staffOnlineDate{padding-right:5px!important;margin-right:0!important;font-size:9.5px!important}
  body .staffAppShell>.staffMobileHeader .staffActivityButton{position:relative!important;width:30px!important;height:30px!important;background:transparent!important;border:0!important;font-size:15px!important}
  body .staffAppShell>.staffMobileHeader .staffActivityButton b{position:absolute!important;top:1px!important;right:1px!important;min-width:0!important;width:9px!important;height:9px!important;padding:0!important;border:2px solid var(--nav-bg)!important;border-radius:50%!important;background:#f59e0b!important;color:transparent!important;font-size:0!important;line-height:0!important;overflow:hidden!important}
  body .staffAppShell>.staffMobileHeader .staffGlobalSearchButton{width:30px!important;height:30px!important;background:transparent!important;border:0!important;font-size:15px!important}
  body .staffAppShell>.staffMobileHeader .globalLanguageButton{width:26px!important;height:26px!important;font-size:15px!important}}
.globalSearchBackdrop{position:fixed;inset:0;z-index:1490;background:#02061790;backdrop-filter:blur(2px)}
.globalSearchBackdrop[hidden],.globalSearchPanel[hidden]{display:none!important}
.globalSearchPanel{position:fixed;top:76px;left:50%;z-index:1500;width:min(720px,calc(100vw - 24px));max-height:78dvh;display:flex;flex-direction:column;overflow:hidden;border-radius:16px;background:#f4f7fb;box-shadow:0 24px 80px #02061755;transform:translateX(-50%)}
.globalSearchHead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;background:#0f1a2c;color:#fff}
.globalSearchHead>div{display:grid}
.globalSearchHead span{color:#b7c3d6;font-size:11px}
.globalSearchHead button{width:40px;height:40px;padding:0;border:0;border-radius:9px;background:#ffffff12;color:#fff;font-size:24px}
.globalSearchInputWrap{padding:10px;border-bottom:1px solid #d8e1ed;background:#fff}
.globalSearchInputWrap input{width:100%;min-height:46px;padding:10px 12px;border:1px solid #cbd5e1;border-radius:10px;font:inherit}
.globalSearchResults{display:grid;align-content:start;gap:7px;padding:9px;overflow:auto}
.globalSearchResult{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:10px;padding:11px;border:1px solid #d8e1ed;border-radius:10px;background:#fff;color:#172033;text-align:left;font:inherit;cursor:pointer}
.globalSearchResult>span:first-child{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:#eef2f6}
.globalSearchResult>span:nth-child(2){min-width:0;display:grid;gap:2px}
.globalSearchResult b,.globalSearchResult small,.globalSearchResult em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.globalSearchResult small{color:#475569}
.globalSearchResult em{color:#64748b;font-size:10px;font-style:normal}
.globalSearchEmpty{padding:28px;border:1px dashed #cbd5e1;border-radius:10px;background:#fff;color:#64748b;text-align:center}
.globalSearchOpen{overflow:hidden}
@media(max-width:600px){.globalSearchPanel{top:64px;width:calc(100vw - 12px);max-height:84dvh;border-radius:14px}}

/* ================================================================
   Worker portal (index.html) — same light theme + SiteOS branding as
   the staff drawer above, applied to the Worker's own drawer/header.
   Structurally these are NOT the same elements as .staffDrawer/
   .staffMobileHeader above -- the Worker app uses its own markup system
   (#workerDrawer.appDrawer > .appDrawerHead, #workerAppHeader). Menu
   Workera batch: that markup is now baked directly into index.html by
   hand (same move core/Navigation.php made for the staff drawer
   earlier) instead of being rebuilt at runtime -- assets/worker-
   closeout.js now only wires up the accordion/search-filter/click-to-
   close interactions against it, nothing more. Worker keeps its own
   .workerNavGroup/.workerNavItems/etc. class names rather than staff's
   .proNavGroup/.staffDrawer ones (the two portals' JS/markup were never
   unified, only their visual language and colour tokens), but reuses
   the .proNavGroupIcon class for its own group-icon chips since the
   sizing needed is identical.

   Scoped with the real #workerDrawer id, so these rules always win over
   base styles.css's own dark-navy .appDrawer defaults, and over the
   older worker-only dark theme still present in assets/pro-design-6.96.css
   (investigated, not edited -- see that file's own history; its
   .workerUnifiedMenu-scoped rules have no #id, so an #workerDrawer rule
   here always outranks them regardless of !important or <link> order,
   the same guarantee that already let this section's smaller, earlier
   version win before this batch). assets/worker-closeout.css's own
   worker dark-theme block (shell/header/search/groups/items/logout/
   footer) was deleted outright as part of this batch since it's now
   fully superseded by this section; its Profile-modal (account
   settings) theme is untouched, a separate screen, out of scope. */

/* Audit follow-up (menu Workera batch): same "hidden-but-still-visible" bug
   as the staff fix above -- assets/worker-closeout.js's search filter and
   app.js's Drawings floor submenu toggle both set the native `hidden`
   attribute, but every rule below for individual nav items/groups and
   .drawerSubmenu sets its own `display` with `!important` and no `[hidden]`
   exception. Fix mirrors each conflicting selector exactly (plus
   `[hidden]`), moved here from assets/worker-closeout.css (deleted). */
#workerDrawer .workerDirectItem[hidden],#workerDrawer .workerNavItems>button[hidden],#workerDrawer .workerNavItems>a[hidden],#workerDrawer .workerNavItems>.drawerSection>button[hidden],#workerDrawer .drawerSubmenu[hidden],#workerDrawer .workerNavGroup[hidden]{display:none!important}

/* ---- drawer shell ---- */
#workerDrawer.workerCanonicalShell{display:flex!important;flex-direction:column!important;width:var(--nav-width)!important;height:100dvh!important;max-height:100dvh!important;padding:0!important;overflow:hidden!important;border:0!important;border-right:1px solid var(--nav-border)!important;background:var(--nav-bg)!important;color:var(--nav-ink)!important;box-shadow:12px 0 32px rgba(15,23,42,.08)!important}

/* ---- header: logo + name/role/project, same layout as the staff header ---- */
#workerDrawer.workerCanonicalShell .appDrawerHead{display:flex!important;flex:0 0 auto!important;align-items:flex-start!important;justify-content:space-between!important;gap:10px!important;min-height:0!important;margin:0!important;padding:12px 14px!important;background:var(--nav-head-bg)!important;border:0!important;border-bottom:1px solid var(--nav-border)!important;color:var(--nav-ink)!important}
#workerDrawer .workerMenuIdentity{display:flex!important;flex:1 1 auto!important;flex-direction:row!important;align-items:center!important;gap:9px!important;width:100%!important;min-width:0!important}
#workerDrawer .workerMenuIdentity>img{display:block!important;flex:0 0 auto!important;width:auto!important;height:30px!important;max-width:72px!important;object-fit:contain!important;object-position:left center!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0!important}
#workerDrawer .workerMenuIdentity>div{display:flex!important;flex:1 1 auto!important;flex-direction:column!important;gap:3px!important;min-width:0!important}
#workerDrawer .workerMenuIdentity strong{display:block!important;overflow:hidden!important;width:100%!important;margin:0!important;padding:0!important;color:var(--nav-ink)!important;font-size:12.5px!important;font-weight:800!important;letter-spacing:-.005em!important;text-overflow:ellipsis!important;white-space:nowrap!important}
#workerDrawer #workerDrawerProject{display:block!important;overflow:hidden!important;width:100%!important;margin:0!important;padding:0!important;color:var(--nav-muted)!important;font-size:9.5px!important;font-weight:600!important;text-overflow:ellipsis!important;white-space:nowrap!important}
#workerDrawer .headerAccountRole{display:block!important;overflow:hidden!important;width:100%!important;margin:0!important;padding:0!important;color:var(--nav-muted)!important;font-size:9.5px!important;font-weight:700!important;letter-spacing:.04em!important;text-transform:uppercase!important;text-overflow:ellipsis!important;white-space:nowrap!important}
#workerDrawer .headerProjectSwitcher{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:center!important;gap:5px!important;width:100%!important;max-width:100%!important;margin:3px 0 0!important;padding:0!important;background:transparent!important;border:0!important}
#workerDrawer .headerProjectSwitcher>span{display:block!important;margin:0!important;padding:0!important;color:var(--nav-muted)!important;font-size:9px!important;font-weight:600!important;line-height:1.2!important;white-space:nowrap!important}
/* assets/global-project-switcher.js's error path (shown here in the sandbox
   because /api/** is blocked) writes this <small> in place of the <select>. */
#workerDrawer .headerProjectSwitcher small{display:block!important;margin:0!important;padding:0!important;color:var(--nav-muted)!important;font-size:9px!important;font-weight:600!important;line-height:1.2!important;white-space:nowrap!important}
#workerDrawer .headerProjectSwitcher select{display:block!important;width:100%!important;min-width:0!important;height:22px!important;min-height:22px!important;max-height:22px!important;margin:0!important;padding:1px 16px 1px 6px!important;border:1px solid var(--nav-border)!important;border-radius:6px!important;background:#fff!important;color:var(--nav-ink)!important;font-size:9.5px!important;font-weight:600!important;line-height:18px!important;transition:border-color .15s ease,box-shadow .15s ease!important}
#workerDrawer .headerProjectSwitcher select:focus{outline:none!important;border-color:var(--nav-accent)!important;box-shadow:0 0 0 3px var(--nav-accent-soft)!important}
#workerDrawer.workerCanonicalShell #workerDrawerClose{display:grid!important;flex:0 0 28px!important;place-items:center!important;width:28px!important;height:28px!important;margin:0!important;padding:0!important;border:1px solid var(--nav-border)!important;border-radius:9px!important;background:#fff!important;color:var(--nav-muted)!important;font-size:15px!important;line-height:1!important;transition:background-color .15s ease,color .15s ease,border-color .15s ease!important}
#workerDrawer.workerCanonicalShell #workerDrawerClose:hover{background:#f4f7fb!important;color:var(--nav-ink)!important;border-color:#d7deea!important}

/* ---- search ---- */
#workerDrawer .workerNavSearchWrap{position:relative!important;display:block!important;flex:0 0 auto!important;width:100%!important;margin:0!important;padding:10px 12px 8px!important;background:transparent!important}
#workerDrawer .workerNavSearch{display:block!important;width:100%!important;height:38px!important;min-height:38px!important;max-height:38px!important;margin:0!important;padding:8px 12px!important;border:1px solid var(--nav-border)!important;border-radius:9px!important;background:#f5f7fa!important;color:var(--nav-ink)!important;font-size:12px!important;line-height:20px!important;box-sizing:border-box!important;transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease!important}
#workerDrawer .workerNavSearch::placeholder{color:#94a3b8!important}
#workerDrawer .workerNavSearch:focus{outline:none!important;border-color:var(--nav-accent)!important;background:#fff!important;box-shadow:0 0 0 3px var(--nav-accent-soft)!important}
#workerDrawer .workerNavEmpty{margin:4px 12px!important;padding:10px 12px!important;border:1px dashed var(--nav-border)!important;border-radius:9px!important;color:var(--nav-muted)!important;font-size:11px!important;text-align:center!important}

/* ---- scroll area ---- */
#workerDrawer.workerCanonicalShell>.appDrawerNav{display:flex!important;flex:1 1 auto!important;flex-direction:column!important;gap:5px!important;min-height:0!important;width:100%!important;margin:0!important;padding:0 8px 8px!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:thin!important;scrollbar-color:#cbd5e1 transparent!important}
#workerDrawer.workerCanonicalShell>.appDrawerNav::-webkit-scrollbar{width:4px}
#workerDrawer.workerCanonicalShell>.appDrawerNav::-webkit-scrollbar-thumb{border-radius:99px;background:#cbd5e1}

/* ---- direct item (Messenger) + nav items (shared look, mirrors the staff drawer) ---- */
#workerDrawer .workerDirectItem,#workerDrawer .workerNavItems>button,#workerDrawer .workerNavItems>a,#workerDrawer .workerNavItems>.drawerSection>button{position:relative!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;width:100%!important;min-width:0!important;min-height:42px!important;margin:0 0 2px!important;padding:8px 9px!important;border:1px solid transparent!important;border-radius:10px!important;background:transparent!important;color:var(--nav-ink)!important;font-size:12px!important;font-weight:600!important;line-height:1.2!important;text-align:left!important;text-decoration:none!important;box-sizing:border-box!important;transition:background-color .15s ease,color .15s ease,border-color .15s ease!important}
/* Patch86: Robert -- "messanger ma do okoła obwolutke" -- .workerDirectItem
   used to be the class on the old "My dashboard" button (removed in
   Patch83), where a boxed/bordered "card" look made sense as a promoted
   shortcut sitting above the grouped menu. Patch83 moved the class onto
   #workerMenuMessages instead (it's the only item outside a
   .workerNavGroup, so it still needs .workerDirectItem's base layout
   rule above for width/padding/etc.) without noticing it also inherited
   that leftover boxed look -- Messenger is just a normal menu item, not
   a promoted one, so the border/background override is dropped here; it
   now gets exactly the same flat/transparent look (line above) as every
   grouped item, and still gets its own highlight on hover/:active below. */
#workerDrawer .workerDirectItem{flex:0 0 auto!important;margin:0 0 6px!important}
#workerDrawer .workerDirectItem:hover,#workerDrawer .workerNavItems>button:hover,#workerDrawer .workerNavItems>a:hover,#workerDrawer .workerNavItems>.drawerSection>button:hover{background:#f4f7fb!important}
#workerDrawer .workerDirectItem.active,#workerDrawer .workerNavItems>button.active,#workerDrawer .workerNavItems>a.active{border-color:var(--nav-accent-soft)!important;background:var(--nav-accent-soft)!important;color:#173d8c!important;box-shadow:inset 3px 0 var(--nav-accent)!important}

/* item icon chips */
#workerDrawer .workerItemIcon{display:grid!important;flex:0 0 30px!important;place-items:center!important;width:30px!important;height:30px!important;margin:0!important;padding:0!important;border-radius:9px!important;background:var(--nav-accent-soft)!important;color:var(--nav-accent)!important;font-size:14px!important;line-height:1!important;transition:background-color .15s ease,color .15s ease!important}
#workerDrawer .workerDirectItem.active .workerItemIcon,#workerDrawer .workerNavItems>button.active .workerItemIcon{background:#dbe8ff!important;color:#173d8c!important}

/* badges + chevron */
#workerDrawer .workerDirectItem b,#workerDrawer .workerNavItems b{flex:0 0 auto!important;margin:0 0 0 auto!important;padding:3px 8px!important;border-radius:999px!important;background:var(--nav-accent)!important;color:#fff!important;font-size:9.5px!important;font-weight:800!important;line-height:1.4!important}
#workerDrawer .workerNavItems small{margin-left:auto!important;color:var(--nav-muted)!important;font-size:11px!important}

/* ---- groups ---- */
#workerDrawer .workerNavGroup{display:block!important;width:100%!important;margin:2px 0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;overflow:visible!important}
#workerDrawer .workerNavGroup>summary{display:flex!important;align-items:center!important;gap:9px!important;width:100%!important;min-height:38px!important;margin:0!important;padding:8px 9px!important;border-radius:9px!important;list-style:none!important;color:var(--nav-muted)!important;font-size:10.5px!important;font-weight:800!important;letter-spacing:.06em!important;line-height:1!important;text-transform:uppercase!important;cursor:pointer!important;transition:background-color .15s ease,color .15s ease!important}
#workerDrawer .workerNavGroup>summary:hover{background:#f4f7fb!important;color:var(--nav-ink)!important}
#workerDrawer .workerNavGroup>summary::-webkit-details-marker{display:none!important}
#workerDrawer .workerNavGroup>summary::marker{content:none!important}
#workerDrawer .workerNavGroup>summary b{display:block!important;overflow:hidden!important;flex:1 1 auto!important;min-width:0!important;margin:0!important;padding:0!important;font:inherit!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:inherit!important}
#workerDrawer .workerNavGroup[open]>summary,#workerDrawer .workerNavGroup[open]>summary b{color:var(--nav-ink)!important}
#workerDrawer .proNavGroupIcon{display:grid!important;flex:0 0 26px!important;place-items:center!important;width:26px!important;height:26px!important;margin:0!important;padding:0!important;border-radius:8px!important;background:#f1f5f9!important;color:#64748b!important;font-size:12px!important;line-height:1!important;transition:background-color .15s ease,color .15s ease!important}
#workerDrawer .workerNavGroup>summary>i{position:relative!important;display:block!important;background:transparent!important;margin-left:auto!important;flex:0 0 16px!important;width:16px!important;height:16px!important}
#workerDrawer .workerNavGroup>summary>i::before,#workerDrawer .workerNavGroup>summary>i::after{content:""!important;position:absolute!important;left:3px!important;top:7px!important;width:8px!important;height:1.6px!important;border-radius:2px!important;background:#94a3b8!important;transition:transform .15s ease!important}
#workerDrawer .workerNavGroup>summary>i::after{transform:rotate(90deg)!important}
#workerDrawer .workerNavGroup[open]>summary>i::after{transform:none!important}
#workerDrawer .workerNavItems{display:grid!important;gap:2px!important;width:100%!important;margin:0!important;padding:2px 0 8px!important}
#workerDrawer .workerNavItems>.drawerSection{display:grid!important;width:100%!important;min-width:0!important;gap:0!important}

/* colour-coded group icon chips -- same token values as the staff groups above
   (planning/quality/settings), so the two menus read as one palette. */
#workerDrawer .workerNavGroup[data-group="planning"] .proNavGroupIcon{background:var(--nav-accent-soft)!important;color:var(--nav-accent)!important}
#workerDrawer .workerNavGroup[data-group="quality"] .proNavGroupIcon{background:#fff3e0!important;color:#b66d00!important}
#workerDrawer .workerNavGroup[data-group="settings"] .proNavGroupIcon{background:#f1f5f9!important;color:#475569!important}
/* Patch83 (menu Workera Faza 1): new "HR & Time" group -- reuses the same
   teal token already used for the STAFF menu's [data-group="time"] (see
   line ~143 above), so the two menus keep reading as one palette instead
   of inventing a 4th colour. */
#workerDrawer .workerNavGroup[data-group="time"] .proNavGroupIcon{background:#e5faf6!important;color:#0d8f7f!important}

/* ---- Drawings floor submenu ---- */
#workerDrawer .drawerSubmenu{display:grid!important;gap:2px!important;min-width:0!important;margin:2px 3px 4px 34px!important;padding:2px 0 2px 8px!important;border-left:1px solid var(--nav-border)!important}
#workerDrawer .drawerSubmenu button{display:block!important;width:100%!important;min-height:34px!important;margin:0!important;padding:6px 8px!important;border:0!important;border-radius:7px!important;background:transparent!important;color:var(--nav-ink)!important;font-size:11.5px!important;font-weight:600!important;text-align:left!important;transition:background-color .15s ease!important}
#workerDrawer .drawerSubmenu button:hover{background:#f4f7fb!important}

/* ---- logout + footer credit ---- */
#workerDrawer.workerCanonicalShell>.appDrawerLogout{position:static!important;display:flex!important;flex:0 0 auto!important;align-items:center!important;justify-content:flex-start!important;gap:9px!important;width:calc(100% - 16px)!important;min-height:40px!important;margin:6px 8px 0!important;padding:8px 10px!important;border:1px solid var(--nav-danger-border)!important;border-radius:10px!important;background:var(--nav-danger-bg)!important;color:var(--nav-danger)!important;font-size:12px!important;font-weight:700!important;text-align:left!important;transition:background-color .15s ease,border-color .15s ease!important}
#workerDrawer.workerCanonicalShell>.appDrawerLogout:hover{background:#fde3e3!important;border-color:#fca5a5!important}
#workerDrawer.workerCanonicalShell>.appDrawerLogout>span{display:grid!important;place-items:center!important;flex:0 0 24px!important;width:24px!important;height:24px!important;border-radius:7px!important;background:#fee2e2!important;color:var(--nav-danger)!important;font-size:14px!important;line-height:1!important}
#workerDrawer .workerMenuPowered{display:flex!important;flex:0 0 auto!important;align-items:center!important;justify-content:center!important;gap:8px!important;width:calc(100% - 16px)!important;margin:8px 8px 10px!important;padding:8px 6px!important;border:1px solid var(--nav-border)!important;border-radius:10px!important;background:#fafbfd!important}
#workerDrawer .workerMenuPowered img{display:block!important;height:22px!important;width:auto!important;max-width:150px!important;object-fit:contain!important}
#workerDrawer .workerMenuPowered span{display:none!important}

/* ---- mobile: narrower drawer on small phones (same formula as the staff drawer) ---- */
@media(max-width:700px){
  #workerDrawer.workerCanonicalShell{width:min(86vw,var(--nav-width))!important}
  #workerDrawer .workerMenuIdentity>img{height:26px!important;max-width:60px!important}
  #workerDrawer .workerNavSearch{font-size:16px!important}}

#workerAppHeader.workerAppHeader{background:var(--nav-bg)!important;color:var(--nav-ink)!important;border-bottom:1px solid var(--nav-border)!important;box-shadow:0 2px 10px rgba(15,23,42,.05)!important}
#workerAppHeader .appMenuButton{background:#fff!important;border:1px solid var(--nav-border)!important;border-radius:9px!important;color:var(--nav-ink)!important}
#workerAppHeader .appHeaderProject strong{color:var(--nav-ink)!important}
#workerAppHeader .appHeaderProject span{color:var(--nav-muted)!important}
#workerAppHeader .appOnline{color:var(--nav-muted)!important}
#workerAppHeader .appOnline.offline .appOnlineLabel{color:var(--nav-danger)!important}
#workerAppHeader .workerOnlineDate{color:var(--nav-muted)!important;border-right:1px solid var(--nav-border)!important}

/* ================================================================
   Patch83 (menu Workera Faza 1) -- "rysunek jako home": compact header
   project/floor button, open-Issues badge, header Inbox shortcut, and the
   new toolbar Select Drawing / Layers controls + their shared dropdown/
   bottom-sheet panel. Reuses the same --nav-* tokens as the rest of this
   file so the new pieces read as the same, already-approved visual style
   (no redesign) -- see this file's own header comment. Kept in this file
   (not styles.css) because it's the same "single source of truth for the
   Worker shell" this whole section already is.
   ================================================================ */

/* header: project+floor is now a <button> (was a plain <div>) so it can
   open Select Drawing -- reset default button chrome back to the identical
   look the old div had, then add the chevron + open-Issues badge. */
#workerHeaderDrawingButton{display:grid!important;gap:0!important;min-width:0!important;padding:0!important;border:0!important;background:transparent!important;color:inherit!important;font:inherit!important;text-align:left!important;cursor:pointer!important}
#workerHeaderDrawingButton:hover #workerHeaderFloor{text-decoration:underline!important}
.appHeaderFloorRow{display:flex!important;align-items:center!important;gap:5px!important;min-width:0!important}
.appHeaderFloorRow .toolbarChevron{flex:0 0 auto!important;width:7px!important;height:7px!important;border:1.6px solid var(--nav-muted)!important;border-width:0 1.6px 1.6px 0!important;transform:rotate(45deg) translateY(-2px)!important}
.headerIssuesBadge{flex:0 0 auto!important;margin:0!important;padding:2px 7px!important;border-radius:999px!important;background:#fff4c7!important;color:#785700!important;font-size:9.5px!important;font-weight:900!important;line-height:1.5!important}
.appHeaderSpacer{flex:1 1 auto!important}

/* header: Inbox/Messenger shortcut -- same #workerInboxButton element and
   base look as before (styles.css's .workerInboxButton), just relocated
   from the toolbar into the header; only the emoji glyph changed (💬
   instead of 📥) to read as "Messenger" here. */
#workerAppHeader .appHeaderInboxButton{flex:0 0 auto!important;width:36px!important;height:36px!important;font-size:15px!important;border-color:var(--nav-border)!important;background:#fff!important;color:var(--nav-accent)!important}

/* Patch123: same persistent Messenger shortcut, now also in the Admin/PM
   and Supervisor/Site Manager persistent top header -- Robert: "napewno
   bede chciał ikone messengera wrzucić na górę tak jak u workera". Placed
   in .staffMobileHeader (built dynamically, right before .staffOnline, by
   assets/admin-pm-app.js's/supervisor/app.js's new createMessengerButton()
   -- same pattern as that header's existing staffActivityButton/
   staffGlobalSearchButton icons), NOT the desktop <header>/.headActions
   block: that block turned out to be permanently hidden by
   assets/admin-pm-styles.css's unconditional ".staffAppShell > header
   {display:none!important}" rule in this design, so .staffMobileHeader is
   the one header actually on screen at every viewport width. Those
   portals don't load styles.css (Worker-only), so this is a self-contained
   copy of styles.css's .workerInboxButton base look, sized to match the
   40px icons already in this header, rather than a partial override with
   nothing to build on. Click handler just clicks the existing Messages nav
   item, reusing that view instead of adding a second way to open it. */
.staffMobileHeader .appHeaderInboxButton{position:relative;flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;padding:0;border:1px solid var(--nav-border);border-radius:9px;background:#fff;color:var(--nav-accent);font-size:17px;cursor:pointer}
.staffMobileHeader .appHeaderInboxButton b{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;display:grid;place-items:center;padding:0 5px;border-radius:999px;background:#dc2626;color:#fff;font-size:9px;font-weight:900;line-height:1}
.staffMobileHeader .appHeaderInboxButton b[hidden]{display:none}
@media(max-width:700px){
  .staffMobileHeader .appHeaderInboxButton{width:30px!important;height:30px!important;background:transparent!important;border:0!important;font-size:15px!important}}

/* toolbar: Select drawing + Layers buttons -- same visual language as a
   drawer nav item (.workerItemIcon chip + label), sized for a horizontal
   toolbar instead of a vertical list. */
.toolbar .selectDrawingButton,.toolbar .layersButton{display:flex!important;align-items:center!important;gap:7px!important;min-height:42px!important;padding:5px 11px 5px 6px!important;border:1px solid var(--nav-border)!important;border-radius:10px!important;background:#fff!important;color:var(--nav-ink)!important;font-size:12px!important;font-weight:700!important}
.toolbar .selectDrawingButton .workerItemIcon,.toolbar .layersButton .workerItemIcon{width:26px!important;height:26px!important;font-size:13px!important}
.toolbar .selectDrawingButton{max-width:200px!important}
.toolbar .selectDrawingButton span#selectDrawingLabel{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.toolbar .selectDrawingButton .toolbarChevron{flex:0 0 auto!important;width:7px!important;height:7px!important;margin-left:2px!important;border:1.6px solid var(--nav-muted)!important;border-width:0 1.6px 1.6px 0!important;transform:rotate(45deg) translateY(-2px)!important}
.toolbar .layersButton.active,.toolbar .selectDrawingButton[aria-expanded="true"],.toolbar .layersButton[aria-expanded="true"]{border-color:var(--nav-accent-soft)!important;background:var(--nav-accent-soft)!important;color:#173d8c!important}

/* Select Drawing / Layers panel -- desktop: dropdown anchored under its
   toolbar button. Mobile (<700px, same breakpoint as the drawer): bottom
   sheet, same technique already used for
   assets/worker-published-hours.css's modal-to-bottom-sheet conversion. */
.toolbarPanelBackdrop{position:fixed!important;inset:0!important;z-index:1190!important;background:#02061799!important;backdrop-filter:blur(2px)!important}
.toolbarPanel{position:fixed!important;z-index:1200!important;top:110px!important;left:12px!important;width:min(88vw,300px)!important;max-height:min(70dvh,420px)!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;border:1px solid var(--nav-border)!important;border-radius:14px!important;background:#fff!important;box-shadow:0 18px 44px rgba(15,23,42,.16)!important}
.toolbarPanel[hidden]{display:none!important}
.toolbarPanelHead{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;flex:0 0 auto!important;padding:11px 12px!important;border-bottom:1px solid var(--nav-border)!important;background:var(--nav-head-bg)!important}
.toolbarPanelHead strong{color:var(--nav-ink)!important;font-size:12.5px!important;font-weight:800!important}
.toolbarPanelHead button{width:26px!important;height:26px!important;border:1px solid var(--nav-border)!important;border-radius:8px!important;background:#fff!important;color:var(--nav-muted)!important;font-size:14px!important;line-height:1!important}
.selectDrawingList{display:grid!important;gap:2px!important;overflow-y:auto!important;padding:6px!important}
.selectDrawingList button{display:flex!important;align-items:center!important;gap:8px!important;min-height:40px!important;padding:8px 9px!important;border:1px solid transparent!important;border-radius:9px!important;background:transparent!important;color:var(--nav-ink)!important;font-size:12.5px!important;font-weight:650!important;text-align:left!important}
.selectDrawingList button:hover{background:#f4f7fb!important}
.selectDrawingList button.active{border-color:var(--nav-accent-soft)!important;background:var(--nav-accent-soft)!important;color:#173d8c!important;font-weight:800!important}
.layersList{display:grid!important;gap:4px!important;padding:9px!important}
.layersRow{display:flex!important;align-items:center!important;gap:9px!important;min-height:40px!important;padding:8px 9px!important;border-radius:9px!important;color:var(--nav-ink)!important;font-size:12.5px!important;font-weight:650!important}
.layersRow:hover{background:#f4f7fb!important}
.layersRow input{width:17px!important;height:17px!important;margin:0!important;accent-color:var(--nav-accent)!important}
.layersRow small{margin-left:auto!important;color:var(--nav-muted)!important;font-size:10px!important;font-weight:600!important}
.layersRow[data-layer-empty]{opacity:.55!important}

@media(max-width:700px){
  .toolbarPanel{top:auto!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;max-height:74dvh!important;border-radius:16px 16px 0 0!important}}

/* Patch83 mobile fix: the toolbar (Select drawing / Search / Layers /
   Zoom) has no wrapping and no overflow handling of its own -- on a real
   project name + all 4 controls it silently overflowed off the right
   edge of narrow phones (zoom in / % readout unreachable), which is the
   opposite of "maximise drawing space, minimise clicks". Below 600px
   (the Worker shell's established mobile breakpoint, see styles.css's
   other worker @media(max-width:600px) blocks): Select drawing / Layers
   drop their text label down to icon+chevron only -- the header already
   shows the current floor name right above the toolbar, so nothing is
   lost -- and every control shrinks a little further. overflow-x:auto is
   also added as a safety net so nothing can ever end up truly
   unreachable even if a future addition doesn't fit. */
@media(max-width:600px){
  .toolbar{overflow-x:auto!important;flex-wrap:nowrap!important;gap:5px!important;padding:5px 7px!important}
  .toolbar .selectDrawingButton,.toolbar .layersButton{flex:0 0 auto!important;max-width:none!important;padding:5px!important;gap:0!important}
  .toolbar .selectDrawingButton #selectDrawingLabel,
  .toolbar .layersButton>span:not(.workerItemIcon){display:none!important}
  .toolbar .selectDrawingButton .toolbarChevron{margin-left:1px!important}
  .toolbar .selectDrawingButton .workerItemIcon,.toolbar .layersButton .workerItemIcon{width:24px!important;height:24px!important}}

/* My Documents chooser (index.html's #workerDocumentsModal) -- two large
   link-style cards, each opening an existing screen (assets/worker-
   documents.js). Reuses .workerItemIcon for the icon chip so it matches
   the drawer's own visual language. */
.workerDocumentsChooser{display:grid!important;gap:9px!important;padding:4px 2px!important}
.workerDocumentsCard{display:flex!important;align-items:center!important;gap:12px!important;min-height:64px!important;padding:12px!important;border:1px solid var(--nav-border)!important;border-radius:12px!important;background:#fff!important;color:var(--nav-ink)!important;text-align:left!important}
.workerDocumentsCard:hover{background:#f4f7fb!important;border-color:#d7deea!important}
.workerDocumentsCard .workerItemIcon{width:38px!important;height:38px!important;font-size:17px!important}
.workerDocumentsText{display:grid!important;flex:1 1 auto!important;gap:2px!important;min-width:0!important}
.workerDocumentsText b{font-size:13px!important}
.workerDocumentsText small{color:var(--nav-muted)!important;font-size:11px!important}
.workerDocumentsArrow{flex:0 0 auto!important;color:var(--nav-muted)!important;font-size:16px!important}
/* Paczka 202 (Ksiega §36.1): "Solution powered by Robert M." pod logo AOT. */
#workerDrawer .workerPoweredBy{display:block!important;flex:0 0 auto!important;margin:-2px 0 8px!important;color:#64748b!important;font:600 10px/1.2 Inter,system-ui,sans-serif!important;letter-spacing:.02em!important;text-align:center!important}