/*
 * Shell redesign overrides — sidebar (SideBarComponent) + top header
 * (TopBarComponent) only. Loaded after custom.css so these rules win the
 * cascade without editing the vendor template files. Page content is handled
 * in later passes; this file never touches .section-body or page-level CSS.
 *
 * Colors/sizes here are read directly from the reference app's own compiled
 * output (http://172.16.0.15:9020 — read-only inspection via curl of its
 * index.html/CSS/JS, nothing submitted or changed there): its default theme
 * object (primaryColor #4e78ff / accentColor #11c7d7) and the CSS custom
 * properties its theme engine sets (--bg-sidebar, --bg-navbar, --navbar-text,
 * --uw-sidebar-w: 240px, --uw-header-h: 56px, etc). Earlier versions of this
 * file guessed these from screenshots and got several wrong (sidebar width,
 * header being white instead of the same blue as the sidebar) — this version
 * is sourced from the real values, via tokens.css / theme-silverstar-blue.css.
 *
 * Uses the tokens defined in themes/tokens.css + themes/theme-*.css so a
 * future theme swap (changing <html data-theme="...">) re-skins all of this
 * automatically.
 */

.main-sidebar {
  width: var(--sidebar-w);
}

.navbar {
  left: var(--sidebar-w);
}

.plexitechPoweredByLogo {
  width: var(--sidebar-w);
}

.main-content,
.main-footer {
  padding-left: var(--sidebar-w);
}

.main-sidebar,
body.sidebar-mini .main-sidebar:after {
  background: var(--color-sidebar-bg);
  font-family: var(--font-family-base);
}

.main-sidebar .sidebar-brand {
  padding: 6px 8px 11px;
  height: auto !important;
  line-height: normal !important;
  border-bottom: 1px solid var(--color-sidebar-border);
  margin-bottom: 6px;
}

.main-sidebar .sidebar-brand .sidebar-brand-link {
  /* custom.css's .main-sidebar .sidebar-brand a (class+class+tag, higher
     specificity than a single .sidebar-brand-link class) sets an italic
     Georgia font and a hard drop-shadow (text-shadow: -4px 3px 0 ...) meant
     for the old single-line logo text. These are inherited properties, so
     without a reset at EQUAL OR HIGHER specificity they leak down into the
     new .sidebar-brand-text small/strong children (the shadow visible behind
     the text) even though those set their own font-size/weight/color. */
  text-shadow: none !important;
  font-style: normal;
  font-family: var(--font-family-base);
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.sidebar-brand-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--accent-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 15px;
  flex-shrink: 0;
}

.sidebar-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.sidebar-brand-text small {
  color: var(--color-sidebar-muted);
  font-size: 0.58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.sidebar-brand-text strong {
  color: var(--color-sidebar-text);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
}

.main-sidebar .sidebar-menu {
  padding: 0 10px;
}

.main-sidebar .sidebar-menu li {
  margin-bottom: 8px;
}

.main-sidebar .sidebar-menu li a {
  color: var(--color-sidebar-text);
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 400;
  height: auto;
  padding: 8px 10px;
  border-radius: var(--radius-base);
  transition: background-color 0.12s ease, color 0.12s ease;
}

/* Known menu items (matched by label keyword — see getThinMenuIcon in
   SideBarComponent.jsx) now render a real thin-stroke lucide-react icon in
   the reference app's own per-item color instead of this FontAwesome glyph
   — see .sidebar-menu-thin-icon below. This rule only still applies to
   whatever doesn't match a keyword: those come from the backend as plain
   FontAwesome Free "fas" (solid) classes, which can't be reliably forced to
   a thin/regular weight (Free's regular style only covers ~150 of its 900+
   icons, so font-weight:400 across the board would leave most blank) —
   approximated with a lighter visual weight instead: smaller size + reduced
   opacity, safe regardless of which glyph it is. */
.main-sidebar .sidebar-menu li a i {
  font-size: 13px;
  width: 24px !important;
  margin-right: 14px !important;
  color: #cbd5e1;
  opacity: 1;
}

.main-sidebar .sidebar-menu li a .sidebar-menu-thin-icon {
  width: 24px !important;
  min-width: 24px;
  margin-right: 14px !important;
  flex-shrink: 0;
  vertical-align: middle;
  margin-top: -2px;
}

.main-sidebar .sidebar-menu li a:hover {
  color: var(--color-sidebar-text);
  background-color: var(--color-sidebar-hover-bg);
}

.main-sidebar .sidebar-menu li.active a,
.main-sidebar .sidebar-menu li.show a,
.main-sidebar .sidebar-menu li a.active {
  color: var(--color-sidebar-active-text) !important;
  background-color: var(--color-sidebar-active-bg) !important;
  font-weight: 600;
}

/* Reference app's nav icons are `color: currentColor` by default (no tint),
   but each item's icon gets its own explicit color inline (see
   MENU_ICON_COLORS in SideBarComponent.jsx) — the active item still forces
   white so it doesn't clash with the active pill. */
.main-sidebar .sidebar-menu li a.active i {
  color: var(--color-sidebar-active-text) !important;
}

/* Section labels injected as plain li's with no link (e.g. "MASTERS", "SETTINGS") —
   same .uw-eyebrow treatment the reference app reuses for its brand sublabel. */
.main-sidebar .sidebar-menu li.menu-header {
  color: var(--color-sidebar-muted);
  text-transform: uppercase;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 14px 10px 6px;
}

.companyLogoBox {
  background: transparent;
}

.plexitechPoweredByLogo {
  background: #000000;
  border-top: 1px solid var(--color-sidebar-border);
}

/* Rainbow accent strip under the header — exact 5-stop gradient from the
   reference app's .uw-shell-header__accent. */
.navbar-bg {
  height: 2px !important;
  background: var(--header-accent-strip);
  opacity: 0.85;
}

.main-navbar {
  /* !important: custom.css's .navbar { background-color: transparent } has
     equal selector specificity (single class) on the same <nav
     class="navbar navbar-custom navbar-expand-lg main-navbar">, so normally
     this only wins by load order (shell-redesign.css loads after custom.css)
     — fragile against any future reordering or stale-cache edge case. */
  background: var(--color-header-bg) !important;
  height: var(--header-h);
  border-bottom: 1px solid var(--color-header-border);
  font-family: var(--font-family-base);
  /* Bootstrap's real .navbar-expand-lg (bootstrap.min.css is loaded) wraps
     its flex content below the lg breakpoint by design — fine for the
     original header (hamburger + title + clock), but this redesign added a
     lot more content (logo/breadcrumb, search box, dark-toggle, plexitech
     badge), so at narrower widths it was wrapping to a second line and,
     since the header's height is fixed, that second line spilled down
     into the map below it (confirmed via DOM inspection: the stray
     "PlexiTech" badge overlapping the map was this exact element, not a
     duplicate). Forcing nowrap + clipping overflow so content shrinks/
     clips instead of spilling. */
  flex-wrap: nowrap !important;
  overflow: hidden;
}

#lblPageTitle {
  color: var(--color-header-text);
}

.topbar-clock {
  color: var(--color-header-muted);
}

.topbar-clockicon {
  color: var(--color-header-muted) !important;
}

/* ---- Header chrome: logo + breadcrumb, search, actions ---- */

.shell-header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 24px;
  flex-shrink: 0;
}

.shell-header-logo {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--accent-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 13px;
  flex-shrink: 0;
}

.shell-header-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  white-space: nowrap;
}

.shell-header-breadcrumb .shell-app-name {
  color: var(--color-header-muted);
  font-weight: 500;
}

.shell-header-breadcrumb .shell-breadcrumb-sep {
  color: var(--color-header-faint);
  font-size: 0.7rem;
}

.shell-header-breadcrumb .shell-page-name {
  color: var(--color-header-text);
  font-weight: 700;
}

.shell-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  flex-shrink: 0;
}

.shell-dark-toggle {
  border: none;
  background: transparent;
  color: var(--color-header-muted);
  font-size: 16px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shell-dark-toggle:hover {
  background: var(--color-header-hover-bg);
}

.shell-plexitech-badge {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--color-header-border);
  border-radius: var(--radius-pill);
  padding: 1px 14px;
}

/* Reference design uses a plain document icon + bold "PLEXITECH" text, not
   the colorful brand logo graphic — replaced the <img> with an <i> + text
   pair to match (see TopBarComponent.jsx). */
.shell-plexitech-badge i {
  color: #1f2430;
  font-size: 14px;
  margin-right: 8px;
}

.shell-plexitech-badge-text {
  color: #1f2430;
  font-family: var(--font-family-base);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Account-name dropdown (TopUserSetupComponent, "ZHL ..." / avatar menu).
   Two problems compounded here:
   1) It's a descendant of .main-navbar, which has overflow:hidden (added
      above to stop header content from wrapping/spilling into the map) —
      that clips ANY absolutely-positioned child that extends past the
      navbar's own fixed height, downward or upward, regardless of the
      dropdown's own top/bottom value.
   2) Bootstrap's Dropdown plugin uses Popper to position this menu, which
      sets its own inline `transform: translate3d(...)` — a plain CSS
      top/bottom change can't reliably override that (inline styles beat
      non-important stylesheet rules), so Popper was fighting any CSS-only
      position attempt.
   Fixed by (a) data-bs-display="static" on the toggle (see
   TopUserSetupComponent.jsx) so Bootstrap skips Popper entirely for this
   dropdown, and (b) position:fixed here instead of absolute — fixed
   positioning is relative to the viewport, not the navbar's box, so it
   completely escapes the navbar's overflow:hidden clipping and is always
   fully visible/clickable regardless of scroll position. */
.shell-header-actions .userloginpanel {
  position: fixed !important;
  top: calc(var(--header-h) + 8px) !important;
  bottom: auto !important;
  right: 12px !important;
  left: auto !important;
  margin: 0 !important;
  transform: none !important;
  width: 220px !important;
  z-index: 2000 !important;
}

/* Dark shell preview — toggled by the moon icon; only affects the sidebar
   and header surfaces, never page content, since page redesign is a later,
   separate pass. Driven by <html data-shell-dark="1">, set in index.html's
   bootstrap script (from localStorage) and by TopBarComponent's toggle. */
html[data-shell-dark] .main-sidebar,
html[data-shell-dark] .main-sidebar:after {
  background: var(--color-primary-dark);
}

html[data-shell-dark] .main-navbar {
  background: var(--color-primary-dark) !important;
}