/* Left-hand site menu (_Menu.cshtml, redesigned 2026-10-01): an always-there section, then collapsible portal groups. Theme tokens + rem (site magnification applies). */
.qzNavWrap { width: 100%; }
/* 2026-10-06: owner set the menu element to a static 370px (the grid columns below match); the text already follows the text-size control. */
#_qMenuDiv { width: 370px; box-sizing: border-box; }
.qzNav { padding: .35rem .4rem .6rem !important; }
.qzNavSec { padding: .15rem 0; }
.qzNavH { margin: .7rem .5rem .25rem; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--qz-muted, #6a6478); }
.qzNavItem { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; margin: 1px 0; border-radius: .5rem; color: var(--qz-text, #1f1c26) !important; text-decoration: none !important; font-size: .92rem; line-height: 1.25; cursor: pointer; }
.qzNavItem i { width: 1.15rem; text-align: center; flex: none; color: var(--qz-silver-text, #6a6478); font-size: .9em; }
.qzNavItem:hover, .qzNavItem:focus-visible { background: var(--qz-blue-soft, #eaf0fb); color: var(--qz-blue, #1f6feb) !important; outline: none; }
.qzNavItem[aria-current="page"] { background: var(--qz-accent-soft, #f4e8fa); font-weight: 700; color: var(--qz-accent-text, #8F12C4) !important; }
.qzNavItem[aria-current="page"] i { color: var(--qz-accent, #8F12C4); }
.qzNavSignin { font-weight: 700; }
.qzNavDivider { height: 1px; margin: .5rem .5rem; background: var(--qz-line, #e2dde9); }
.qzNavLegal { display: flex; flex-wrap: wrap; gap: .1rem .9rem; padding: .35rem .6rem .1rem; font-size: .78rem; }
.qzNavLegal a { color: var(--qz-muted, #6a6478) !important; text-decoration: none !important; } .qzNavLegal a:hover, .qzNavLegal a[aria-current="page"] { text-decoration: underline !important; color: var(--qz-text, #1f1c26) !important; }

/* collapsible groups */
.qzNavGroup { margin: 1px 0; border-radius: .5rem; }
.qzNavGroup > summary { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border-radius: .5rem; cursor: pointer; list-style: none; font-size: .92rem; font-weight: 600; color: var(--qz-text, #1f1c26); user-select: none; }
.qzNavGroup > summary::-webkit-details-marker { display: none; }
.qzNavGroup > summary::after { content: "\f054"; font-family: "Font Awesome 5 Free", "QzEditorIcons", sans-serif; font-weight: 900; font-size: .65rem; margin-left: auto; color: var(--qz-muted, #6a6478); transition: transform .15s; }
.qzNavGroup[open] > summary::after { transform: rotate(90deg); }
.qzNavGroup > summary:hover, .qzNavGroup > summary:focus-visible { background: var(--qz-blue-soft, #eaf0fb); outline: none; }
.qzNavGroup > summary i { width: 1.15rem; text-align: center; flex: none; color: var(--vt-accent, var(--qz-silver-text, #6a6478)); }
.qzNavGroup[data-current="1"] > summary { background: var(--qz-accent-soft, #f4e8fa); }
.qzNavPillar[open] { background: color-mix(in srgb, var(--vt-accent, var(--qz-accent, #8F12C4)) 7%, transparent); }
.qzNavSub { padding: .1rem 0 .4rem .9rem; border-left: 2px solid color-mix(in srgb, var(--vt-accent, var(--qz-line, #e2dde9)) 45%, transparent); margin-left: 1.1rem; }
.qzNavSub .qzNavItem { font-size: .87rem; padding: .35rem .5rem; }
.qzNavTag { margin-left: .2rem; padding: 0 .45rem; border-radius: 999px; font-style: normal; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--qz-raised, #f3f1f7); color: var(--qz-muted, #6a6478); }
.qzNavTagline { margin: .1rem .5rem .45rem; font-size: .72rem; color: var(--qz-muted, #6a6478); }

/* phones: the menu folds behind a button */
.qzNavToggle { display: none; width: 100%; box-sizing: border-box; margin: .3rem 0; padding: .6rem .8rem; text-align: left; border: 1px solid var(--qz-line, #e2dde9) !important; border-radius: .6rem; background: var(--qz-surface, #fff) !important; color: var(--qz-text, #1f1c26) !important; font: inherit; font-weight: 700; cursor: pointer; }
@media (max-width: 820px) {
  #_qMenuWrapper { float: none !important; width: auto !important; }
  .qzNavToggle { display: block; }
  .qzNavWrap:not(.open) .qzNav, .qzNavWrap:not(.open) #_qContentAdGutter { display: none; }
}
@media (prefers-reduced-motion: reduce) { .qzNavGroup > summary::after { transition: none; } }

/* the same menu as a LEFT rail on the Dossier layout (_DossierLayout: aside.qzLeftRail) and on portal pages (_VerticalLayout: .vtShell) - 2026-10-01 */
article:has(> #_qMenuWrapper.qzLeftRail) { grid-template-columns: 370px minmax(0, 1fr); }
article:has(> #_qMenuWrapper.qzLeftRail) > #_qContentDiv.dossierContent { grid-column: 2; grid-row: 1; }
article:has(> #_qMenuWrapper.qzLeftRail) > #_qMenuWrapper { grid-column: 1; grid-row: 1; margin-top: 0; }
.vtShell { display: grid; grid-template-columns: 370px minmax(0, 1fr); gap: 18px; max-width: 1500px; margin: 0 auto; padding: 14px 20px 0; box-sizing: border-box; }
.vtShell > #_qMenuWrapper { grid-column: 1; align-self: start; }
.vtShell > .vtMain { grid-column: 2; min-width: 0; }
.vtShell #_qContentAdGutter { display: none; }
@media (max-width: 960px) {
  article:has(> #_qMenuWrapper.qzLeftRail) { grid-template-columns: 1fr; }
  article:has(> #_qMenuWrapper.qzLeftRail) > #_qContentDiv.dossierContent { grid-column: 1; grid-row: 2; }
  article:has(> #_qMenuWrapper.qzLeftRail) > #_qMenuWrapper { grid-column: 1; grid-row: 1; }
  .vtShell { grid-template-columns: 1fr; padding: 10px 12px 0; }
  .vtShell > #_qMenuWrapper, .vtShell > .vtMain { grid-column: 1; }
}

/* menu tiers (2026-10-06): public = the normal grey; restricted (not public, not admin) = gold; administration only = red. The page you are on keeps the normal highlight. */
.qzNavItem.qzTierRestricted:not([aria-current="page"]), .qzNavItem.qzTierRestricted:not([aria-current="page"]) i { color: var(--qz-gold-text, #9a7400) !important; }
.qzNavItem.qzTierAdmin:not([aria-current="page"]), .qzNavItem.qzTierAdmin:not([aria-current="page"]) i { color: var(--qz-bad, #c0392b) !important; }

/* ---- collapse the whole navigation tree to a rail on the left (2026-10-10, owner: more room for pages like the Nexus application designer) ----
   The button sits above the menu; html.qzNavMini (set by js/qizmit/qizmit.nav.js from the NavCollapsed trait, and early by an inline script in _Menu.cshtml) shrinks the menu column to a 56px rail of icons
   (the names are in the tooltips) and gives the freed width to the page in all three layouts. Phones keep their own "Menu" button. */
.qzNavCollapse { display: flex; align-items: center; gap: .5rem; width: 100%; box-sizing: border-box; margin: .3rem 0 .15rem; padding: .4rem .7rem; border: 1px solid var(--qz-line, #e2dde9) !important; border-radius: .6rem; background: var(--qz-surface, #fff) !important; color: var(--qz-muted, #6a6478) !important; font-size: .8rem; text-align: left; cursor: pointer; }
.qzNavCollapse:hover, .qzNavCollapse:focus-visible { background: var(--qz-blue-soft, #eaf0fb) !important; color: var(--qz-blue, #1f6feb) !important; outline: none; }
.qzNavCollapse i { width: 1.15rem; text-align: center; flex: none; }
@media (max-width: 960px) { .qzNavCollapse { display: none !important; } }
@media (min-width: 961px) {
  html.qzNavMini #_qMenuDiv, html.qzNavMini #_qMenuWrapper { width: 56px !important; }
  html.qzNavMini article:has(> #_qMenuWrapper.qzLeftRail) { grid-template-columns: 56px minmax(0, 1fr); gap: 10px; max-width: none; }
  html.qzNavMini .vtShell { grid-template-columns: 56px minmax(0, 1fr); gap: 10px; max-width: none; }
  html.qzNavMini .qzNav { padding: .2rem .1rem .5rem !important; }
  html.qzNavMini .qzNavCollapse { justify-content: center; padding: .45rem 0; }
  html.qzNavMini .qzNav span, html.qzNavMini .qzNavCollapse span, html.qzNavMini .qzNavTag, html.qzNavMini .qzNavTagline, html.qzNavMini .qzNavH, html.qzNavMini .qzNavLegal, html.qzNavMini .qzNavSub,
  html.qzNavMini #_qContentAdGutter, html.qzNavMini #_qDynamicMenu { display: none !important; }
  html.qzNavMini .qzNavItem, html.qzNavMini .qzNavGroup > summary { justify-content: center; gap: 0; padding: .55rem 0; }
  html.qzNavMini .qzNavGroup > summary::after { display: none; }
  html.qzNavMini .qzNavItem i, html.qzNavMini .qzNavGroup > summary i { width: auto; font-size: 1.05rem; }
  html.qzNavMini .qzNavDivider { margin: .4rem .6rem; }
}

/* the Administration group (the former Admin pill, now the first group of the menu - _AdminMenu.cshtml in "nav" form): red like the other administration-only items */
.qzNavAdmin > summary, .qzNavAdmin > summary i { color: var(--qz-bad, #c0392b) !important; }
.qzNavAdmin[data-current="1"] > summary { background: var(--qz-accent-soft, #f4e8fa); }
.qzNavSubH { margin: .55rem .5rem .15rem; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--qz-muted, #6a6478); }

/* sub-groups inside the Administration group (Portals, Alice, Accounts): collapsible like every other node, a little smaller and less indented */
.qzNavSub .qzNavInner > summary { font-size: .87rem; padding: .35rem .5rem; }
.qzNavSub .qzNavInner > .qzNavSub { margin-left: .8rem; padding-left: .6rem; }
.qzNavSub .qzNavInner[data-current="1"] > summary { background: var(--qz-accent-soft, #f4e8fa); }

/* the health dot in front of each monitor in the Voyeur "Monitors" group (2026-10-10) */
.qzNavDot { display: inline-block; width: .7rem; height: .7rem; flex: none; margin: 0 .25rem; border-radius: 50%; background: var(--qz-muted, #9a94a6); }
.qzNavDot.up { background: var(--qz-ok, #1d6b3c); } .qzNavDot.degraded { background: var(--qz-warn, #c98a0b); } .qzNavDot.down { background: var(--qz-bad, #b3261e); } .qzNavDot.disabled { opacity: .4; }
.qzNavLabelLink { color: inherit !important; text-decoration: none !important; }
.qzNavLabelLink:hover, .qzNavLabelLink:focus-visible { text-decoration: underline !important; }
html.qzNavMini .qzNavLabelLink { pointer-events: none; }   /* on the rail only the icon shows: a click there expands the rail */

/* In the mobile apps' web view (?app=1, cookie qz_app; QizmitPhoenixServices.IsAppView) the app has its own navigation: no top bar, no left menu, no footer, full-width content - 2026-10-12 */
body.qzApp #vtTop, body.qzApp #_qMenuWrapper, body.qzApp #_qContentFooter, body.qzApp .vtFooter, body.qzApp #qzImpersonateBar { display: none !important; }
body.qzApp .vtShell { display: block; padding: 6px 8px 0; max-width: none; }
body.qzApp article:has(> #_qMenuWrapper.qzLeftRail) { display: block; max-width: none; }
body.qzApp .dossierContent { margin-top: 0 !important; padding-top: 6px; }
body.qzApp #_qContentDiv { margin-top: 0 !important; padding-top: 0 !important; }
body.qzApp #_qContentDivWrapper { margin-left: 0 !important; width: auto !important; float: none !important; }
body.qzApp #_qBodyWrapper { padding-top: 6px; }
/* _PageTop's <div class="clear"/> is never closed, so the whole page lives INSIDE #dTopDiv: hide only its header children, never #dTopDiv itself (the page content is its child, #_qContentDiv) */
body.qzApp #dTopDiv { position: static !important; height: auto !important; background: none !important; }
body.qzApp #dTopDiv > div:not(.clear):not(#_qContentDiv) { display: none !important; }
/* the order of the menu (owner 2026-10-12): administration + your pages, then the portals, then Apps / help / legal at the bottom; a line before the bottom group */
.qzNavBottom { margin-top: .5rem; border-top: 1px solid var(--qz-line, #e2dde9); padding-top: .4rem; }