/* ============================================================================ New navigation rail — desktop icon-rail (default) that expands to a labeled panel, and slides in as an off-canvas drawer on mobile. Pairs with AppNav.razor and wwwroot/js/app-nav.js (toggles .appnav-expanded / .appnav-open on #pageWrapper). THEME-AWARE: light by default; dark when has .dark-only. The active-item accent follows the app theme via var(--theme-default) (set by the Appearance picker). ============================================================================ */ :root { --appnav-w: 84px; /* collapsed icon-rail width */ --appnav-w-open: 264px; /* expanded / drawer width */ /* Light palette (default) */ --appnav-bg: #ffffff; --appnav-bg-grad: #f7f9fc; --appnav-bg-2: #eef2f8; --appnav-fg: #46536b; --appnav-fg-dim: #8291ac; --appnav-fg-strong: #16233d; --appnav-border: #e7ecf3; --appnav-hover: #eef2f8; --appnav-scroll: #cdd8ea; --appnav-shadow: rgba(16, 28, 61, .10); --appnav-icon-filter: brightness(0) opacity(.55); /* darken sprite icons on light rail */ --appnav-accent: var(--theme-default, #7366ff); } body.dark-only { --appnav-bg: #0e1c3d; --appnav-bg-grad: #0b1730; --appnav-bg-2: #142850; --appnav-fg: #aebbd2; --appnav-fg-dim: #7e8db0; --appnav-fg-strong: #ffffff; --appnav-border: rgba(255, 255, 255, .06); --appnav-hover: rgba(255, 255, 255, .06); --appnav-scroll: #2a3d66; --appnav-shadow: rgba(0, 0, 0, .40); --appnav-icon-filter: brightness(0) invert(.85); /* whiten sprite icons on dark rail */ } /* ---- The rail ------------------------------------------------------------- */ .appnav { position: fixed; top: 0; left: 0; bottom: 0; width: var(--appnav-w); background: linear-gradient(180deg, var(--appnav-bg) 0%, var(--appnav-bg-grad) 100%); color: var(--appnav-fg); display: flex; flex-direction: column; z-index: 1046; transition: width .18s ease, transform .22s ease; overflow: hidden; border-right: 1px solid var(--appnav-border); box-shadow: 2px 0 18px var(--appnav-shadow); } /* Push the header + content to the right of the fixed rail — ONLY on desktop AND only when the rail is actually present. Pages without the nav (e.g. /login uses NoAuthMainLayout, which has no .appnav) stay full-width via :has(.appnav). The min-width guard keeps this out of the mobile layout entirely: because :has() raises specificity, an unscoped rule would otherwise out-rank the mobile margin-left:0 reset. .page-header is `position: fixed` (style.css) with `max-width: 100vw` — for a fixed element, margin-left does NOT auto-shrink its width the way it does for a normal block box; the box still computes up to max-width:100vw independently and the margin then shifts that full-width box further right, overflowing past the viewport by exactly the margin amount (worse when the rail expands, since the margin grows but the width never shrinks). So .page-header gets `left` + an explicit reduced `width` instead of margin-left. .page-body-wrapper is normal flow (not fixed), so margin-left alone is correct and unchanged there. */ @media (min-width: 992px) { #pageWrapper:has(.appnav) .page-header { left: var(--appnav-w); width: calc(100% - var(--appnav-w)); margin-left: 0; transition: left .18s ease, width .18s ease; } #pageWrapper:has(.appnav) .page-body-wrapper { margin-left: var(--appnav-w) !important; transition: margin-left .18s ease; } #pageWrapper.appnav-expanded:has(.appnav) .page-header { left: var(--appnav-w-open); width: calc(100% - var(--appnav-w-open)); } #pageWrapper.appnav-expanded:has(.appnav) .page-body-wrapper { margin-left: var(--appnav-w-open) !important; } } #pageWrapper.appnav-expanded .appnav { width: var(--appnav-w-open); } /* THE actual "content pushed off the right edge" bug: Cuba's own style.css still has ".page-wrapper.compact-small .page-body-wrapper .page-body { margin-left: 90px }" (and the matching .footer rule) — a leftover offset for its ORIGINAL sidebar, which #pageWrapper still carries the "compact-small" class for (see App.razor markup). That 90px stacks ON TOP of the margin-left we already apply to .page-body-wrapper itself above, with nothing reducing .page-body's width to compensate — so the page renders ~90px wider than the viewport. Reset it; our rail's spacing is fully handled by the .page-body-wrapper margin-left rule alone. */ #pageWrapper.compact-small .page-body-wrapper .page-body, #pageWrapper.compact-small .page-body-wrapper .footer { margin-left: 0 !important; padding-top: 12px; } /* ---- Brand --------------------------------------------------------------- */ .appnav__brand { padding: 16px 12px; } .appnav__brand-link { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--appnav-fg-strong); } .appnav__brand-mark { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--appnav-accent); color: #fff; font-size: 18px; } /* Logo image variant — clean image, no accent fill */ .appnav__brand-mark--img { background: #fff; padding: 3px; overflow: hidden; } .appnav__brand-mark--img img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; display: block; } .appnav__brand-text { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; } .appnav__brand-title { font-weight: 700; font-size: .95rem; color: var(--appnav-fg-strong); } .appnav__brand-sub { font-size: .68rem; color: var(--appnav-fg-dim); } .appnav__brand-version { font-size: .6rem; color: var(--appnav-fg-dim); opacity: .6; letter-spacing: .02em; } /* ---- Company card -------------------------------------------------------- */ .appnav__company { margin: 4px 12px 10px; padding: 10px; border-radius: 12px; background: var(--appnav-bg-2); display: flex; align-items: center; gap: 10px; white-space: nowrap; overflow: hidden; } .appnav__company-avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--appnav-accent); color: #fff; font-weight: 700; font-size: .8rem; } .appnav__company-text { display: flex; flex-direction: column; overflow: hidden; } .appnav__company-name { color: var(--appnav-fg-strong); font-weight: 600; font-size: .82rem; text-overflow: ellipsis; overflow: hidden; } .appnav__company-sub { color: var(--appnav-fg-dim); font-size: .68rem; } /* ---- Menu ---------------------------------------------------------------- */ .appnav__menu { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 6px 10px 16px; display: flex; flex-direction: column; gap: 3px; scrollbar-width: thin; scrollbar-color: var(--appnav-scroll) transparent; } .appnav__menu::-webkit-scrollbar { width: 6px; } .appnav__menu::-webkit-scrollbar-thumb { background: var(--appnav-scroll); border-radius: 6px; } .appnav__group { position: relative; } .appnav__item { position: relative; display: flex; align-items: center; border-radius: 11px; color: var(--appnav-fg); transition: background .14s ease, color .14s ease; } .appnav__item:hover { background: var(--appnav-hover); color: var(--appnav-fg-strong); } .appnav__item.is-active { background: var(--appnav-accent); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--appnav-accent) 35%, transparent); } .appnav__item.is-active:hover { background: color-mix(in srgb, var(--appnav-accent) 88%, #000); color: #fff; } .appnav__item-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 11px; color: inherit; text-decoration: none; font-size: .86rem; font-weight: 500; cursor: pointer; white-space: nowrap; } .appnav__item-main:hover { color: inherit; } .appnav__caret { flex: 0 0 auto; border: 0; background: transparent; color: inherit; width: 30px; height: 34px; margin-right: 4px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; opacity: .7; font-size: .72rem; transition: transform .18s ease, opacity .14s ease; } .appnav__caret:hover { opacity: 1; background: var(--appnav-hover); } .appnav__group.is-open .appnav__caret { transform: rotate(180deg); } .appnav__icon { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; font-size: 17px; } /* Recolor legacy sprite/SVG icons so they read on the current rail background */ .appnav__icon-sprite { display: inline-block; width: 20px; height: 20px; background-size: contain !important; background-repeat: no-repeat; background-position: center; filter: var(--appnav-icon-filter); } .appnav__item.is-active .appnav__icon-sprite { filter: brightness(0) invert(1); } .appnav__icon-svg { width: 20px; height: 20px; stroke: currentColor; fill: none; } .appnav__label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; } .appnav__badge { flex: 0 0 auto; font-size: .62rem; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: 20px; background: #ff5b7a; color: #fff; } /* ---- Submenu (child links) ----------------------------------------------- */ .appnav__sub { display: none; } .appnav__sub-title { display: none; } /* shown only inside the collapsed-rail flyout */ .appnav__subitem { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; margin-left: 26px; border-radius: 9px; color: var(--appnav-fg); text-decoration: none; font-size: .82rem; white-space: nowrap; cursor: pointer; transition: background .12s ease, color .12s ease; } .appnav__subitem:hover { background: var(--appnav-hover); color: var(--appnav-fg-strong); } .appnav__subitem.is-active { color: var(--appnav-accent); background: color-mix(in srgb, var(--appnav-accent) 14%, transparent); } .appnav__subdot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; } .appnav__sublabel { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; } /* Accordion (expanded desktop panel): show submenu inline when open */ #pageWrapper.appnav-expanded .appnav__group.is-open > .appnav__sub { display: block; padding: 2px 6px 6px; } /* ---- Collapsed icon-rail (desktop default): center icon, hide labels ------ */ @media (min-width: 992px) { #pageWrapper:not(.appnav-expanded) .appnav__item-main { flex-direction: column; gap: 4px; padding: 9px 4px; text-align: center; font-size: .66rem; } /* Collapsed rail: replace the full title with the section's short label (data-short). */ #pageWrapper:not(.appnav-expanded) .appnav__label { flex: none; width: 100%; line-height: 1.1; white-space: normal; font-size: 0; /* hide the full-title text node */ } #pageWrapper:not(.appnav-expanded) .appnav__label::after { content: attr(data-short); display: block; font-size: .64rem; font-weight: 600; letter-spacing: .01em; } #pageWrapper:not(.appnav-expanded) .appnav__caret { display: none; } #pageWrapper:not(.appnav-expanded) .appnav__badge { position: absolute; top: 4px; right: 8px; } #pageWrapper:not(.appnav-expanded) .appnav__brand-text, #pageWrapper:not(.appnav-expanded) .appnav__company-text { display: none; } #pageWrapper:not(.appnav-expanded) .appnav__brand-link, #pageWrapper:not(.appnav-expanded) .appnav__company { justify-content: center; } #pageWrapper:not(.appnav-expanded) .appnav__company { padding: 8px; } /* Flyout: hover a collapsed group with children → app-nav.js positions this with position:fixed (top/left set inline) so the rail's overflow:hidden can't clip it. */ #pageWrapper:not(.appnav-expanded) .appnav__sub.appnav__sub--show { display: block; position: fixed; min-width: 214px; max-height: 80vh; overflow-y: auto; background: var(--appnav-bg); border: 1px solid var(--appnav-border); border-radius: 12px; padding: 8px; box-shadow: 0 12px 34px var(--appnav-shadow); z-index: 2000; } #pageWrapper:not(.appnav-expanded) .appnav__sub.appnav__sub--show .appnav__subitem { margin-left: 0; } #pageWrapper:not(.appnav-expanded) .appnav__sub.appnav__sub--show .appnav__sub-title { display: block; padding: 4px 10px 8px; font-weight: 700; color: var(--appnav-fg-strong); font-size: .8rem; border-bottom: 1px solid var(--appnav-border); margin-bottom: 6px; } } /* ---- Mobile: off-canvas drawer (always the expanded layout) --------------- */ @media (max-width: 991.98px) { .appnav { width: var(--appnav-w-open); transform: translateX(-100%); } #pageWrapper.appnav-open .appnav { transform: translateX(0); box-shadow: 0 0 40px rgba(0, 0, 0, .5); } #pageWrapper .page-header, #pageWrapper .page-body-wrapper { margin-left: 0 !important; } /* Accordion: submenu expands inline in the mobile drawer */ .appnav__group.is-open > .appnav__sub { display: block; padding: 2px 6px 6px; } .appnav-backdrop { position: fixed; inset: 0; background: rgba(6, 12, 28, .55); opacity: 0; visibility: hidden; transition: opacity .22s ease; z-index: 1045; } #pageWrapper.appnav-open .appnav-backdrop { opacity: 1; visibility: visible; } } @media (min-width: 992px) { .appnav-backdrop { display: none; } } /* ── Live presence panel (top bar) ─────────────────────────────────────────── */ .spq-presence-li { display: inline-flex; align-items: center; } .spq-presence-box { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 6px; line-height: 1; } .spq-presence-box .fa-users { font-size: 16px; color: #6c757d; } .spq-presence-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #6c757d; color: #fff; font-weight: 600; font-size: 11px; } /* Same-return teammates present → highlight the whole chip */ .spq-presence-li.spq-same .spq-presence-box .fa-users { color: #f0ad4e; } .spq-presence-li.spq-same .spq-presence-count { background: #f0ad4e; color: #1b1b1b; } .spq-presence-panel { min-width: 260px; max-width: 320px; } .spq-presence-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 13px; border-bottom: 1px solid rgba(0,0,0,.05); } .spq-presence-row .spq-presence-name { font-weight: 600; white-space: nowrap; } .spq-presence-row .spq-presence-loc { color: #6c757d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .spq-presence-row .spq-presence-status { font-size: 11px; text-transform: uppercase; letter-spacing: .3px; } .spq-presence-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: #28a745; } .spq-presence-row.idle .spq-presence-dot { background: #f0ad4e; } .spq-presence-row.idle .spq-presence-status { color: #f0ad4e; } .spq-presence-row.active .spq-presence-status { color: #28a745; } .spq-presence-row.same-return { background: rgba(240,173,78,.12); border-left: 3px solid #f0ad4e; } /* Mobile: keep the icon + count, collapse label whitespace (dropdown stays hover/tap). */ @media (max-width: 991px) { .spq-presence-li { margin: 0 2px; } .spq-presence-panel { min-width: 220px; } .spq-presence-row .spq-presence-status { display: none; } }