/*
  HelTrack UI v2 foundation.

  Migration rules:
  - New UI uses .gj-ui on <body>, .gj-* classes, and data-gj-* JS hooks.
  - Do not attach behavior to Bootstrap/theme/legacy classes.
  - Keep page-specific legacy selectors out of this file unless they bridge a
    component into the v2 system during migration.
*/

.gj-ui {
  --gj-color-bg: var(--bs-body-bg, #f6f8fb);
  --gj-color-surface: #ffffff;
  --gj-color-surface-muted: #f8fafc;
  --gj-color-text: #172033;
  --gj-color-muted: #667085;
  --gj-color-border: #dfe5ec;
  --gj-color-primary: #0f766e;
  --gj-color-primary-hover: #0b5f59;
  --gj-color-primary-soft: #e7f5f3;
  --gj-color-danger: #b42318;
  --gj-radius-sm: 6px;
  --gj-radius-md: 8px;
  --gj-radius-lg: 14px;
  --gj-shadow-action: 0 8px 18px rgba(15, 118, 110, .22);
  --gj-focus-ring: 0 0 0 .2rem rgba(15, 118, 110, .24);
  color: var(--gj-color-text);
}

.gj-ui[data-bs-theme="dark"],
[data-bs-theme="dark"] .gj-ui,
[data-bs-theme="dark"].gj-ui {
  --gj-color-bg: #11171d;
  --gj-color-surface: #171d24;
  --gj-color-surface-muted: #202832;
  --gj-color-text: #eef2f6;
  --gj-color-muted: #aeb8c3;
  --gj-color-border: #35404c;
  --gj-color-primary: #14a39a;
  --gj-color-primary-hover: #0f8d85;
  --gj-color-primary-soft: #183b38;
  --gj-shadow-action: 0 8px 18px rgba(20, 163, 154, .24);
  --gj-focus-ring: 0 0 0 .2rem rgba(20, 163, 154, .28);
}

.gj-ui *,
.gj-ui *::before,
.gj-ui *::after {
  box-sizing: border-box;
}

.gj-ui :where(button, input, select, textarea) {
  font: inherit;
}

.gj-ui :where(button, .btn, [role="button"]) {
  opacity: 1;
  visibility: visible;
}

.gj-ui :where(button, .btn, a, input, select, textarea):focus-visible,
.gj-ui :where(.form-control, .form-select):focus {
  outline: 2px solid transparent;
  box-shadow: var(--gj-focus-ring) !important;
}

.gj-surface {
  color: var(--gj-color-text);
  background: var(--gj-color-surface);
  border: 1px solid var(--gj-color-border);
  border-radius: var(--gj-radius-md);
}

.gj-stack {
  display: grid;
  gap: 1rem;
}

.gj-cluster {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
}

.gj-cluster-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.gj-btn {
  position: relative;
  z-index: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 38px;
  min-width: max-content;
  padding: .58rem .9rem;
  border: 1px solid transparent;
  border-radius: var(--gj-radius-sm);
  font-size: .8rem;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  opacity: 1 !important;
  visibility: visible !important;
}

.gj-btn > i,
.gj-btn > span {
  color: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.gj-btn-primary {
  color: #fff !important;
  background: var(--gj-color-primary) !important;
  border-color: var(--gj-color-primary) !important;
  box-shadow: var(--gj-shadow-action);
}

.gj-btn-primary:hover,
.gj-btn-primary:focus,
.gj-btn-primary:active {
  color: #fff !important;
  background: var(--gj-color-primary-hover) !important;
  border-color: var(--gj-color-primary-hover) !important;
}

.gj-btn-secondary {
  color: var(--gj-color-text) !important;
  background: var(--gj-color-surface) !important;
  border-color: var(--gj-color-border) !important;
}

.gj-form-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}

.gj-field-12 { grid-column: span 12; }
.gj-field-8 { grid-column: span 8; }
.gj-field-6 { grid-column: span 6; }
.gj-field-4 { grid-column: span 4; }
.gj-field-3 { grid-column: span 3; }

.gj-ui :where(.form-control, .form-select) {
  min-height: 38px;
  color: var(--gj-color-text);
  background-color: var(--gj-color-surface);
  border-color: var(--gj-color-border);
}

/* Legacy bridge: Access Authorization now uses the v2 button system. */
.gj-ui .access-auth__add,
.gj-ui button.access-auth__add {
  position: relative !important;
  z-index: 10 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .45rem !important;
  min-height: 40px !important;
  min-width: max-content !important;
  padding: .6rem .92rem !important;
  color: #fff !important;
  background: var(--gj-color-primary) !important;
  border: 1px solid var(--gj-color-primary) !important;
  border-radius: var(--gj-radius-sm) !important;
  box-shadow: var(--gj-shadow-action) !important;
  font-size: .8rem !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.gj-ui .access-auth__add:hover,
.gj-ui .access-auth__add:focus,
.gj-ui .access-auth__add:active {
  color: #fff !important;
  background: var(--gj-color-primary-hover) !important;
  border-color: var(--gj-color-primary-hover) !important;
}

.gj-ui .access-auth__add i,
.gj-ui .access-auth__add span {
  display: inline-flex !important;
  color: inherit !important;
}

.gj-ui .access-auth__header .access-auth__add {
  margin-left: auto !important;
}

.gj-ui .modal { z-index: 1060; }
.gj-ui .modal-backdrop { z-index: 1055; }

@media (max-width: 767.98px) {
  .gj-form-grid {
    grid-template-columns: 1fr;
  }

  .gj-field-12,
  .gj-field-8,
  .gj-field-6,
  .gj-field-4,
  .gj-field-3 {
    grid-column: 1 / -1;
  }

  .gj-ui .access-auth__header {
    align-items: stretch !important;
  }

  .gj-ui .access-auth__add,
  .gj-btn {
    width: 100%;
    min-width: 0;
  }
}


/*
  Dashboard navbar + account menu.
  Shares the persona tokens with the sidebar/banner (see "Persona chrome" below):
  on desktop the brand block takes the sidebar's width and surface so both read
  as one column, and the bottom beam animates per user type.
*/
.gj-ui .gj-navbar {
  min-height: var(--app-nav-height, 70px);
  padding: 0 !important;
  color: var(--gj-color-text);
  background: color-mix(in srgb, var(--gj-color-surface) 88%, transparent) !important;
  border-bottom: 1px solid var(--gj-color-border);
  box-shadow: 0 6px 24px -12px rgba(25, 38, 52, .18);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  z-index: 1040;
}

.gj-ui .gj-navbar__inner {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: var(--app-nav-height, 70px);
  padding-right: 20px;
}

.gj-ui .gj-navbar__lead {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
  padding: 0 16px 0 20px;
  overflow: hidden;
  transition: flex-basis .22s ease, width .22s ease, padding .22s ease;
}

.gj-ui .gj-navbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  color: var(--gj-color-text) !important;
  text-decoration: none;
}

.gj-ui .gj-navbar__logo {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  overflow: hidden;
  background: #fff;
  border-radius: 11px;
  box-shadow: 0 0 0 1px var(--gj-color-border), 0 6px 14px -8px rgba(15, 23, 42, .4);
}

.gj-ui .gj-navbar__logo img {
  width: 100%;
  height: 100%;
  padding: 3px;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
}

/* Premium logo tile, shared by the app navbar, the sign-in navbar and the auth brand panel:
   a light ring orbits the tile edge, a tinted sheen sweeps across, the mark breathes, and the
   tile pops in once. Uses the persona's --app-context-glow / accent2 (guests get the brand pair). */
@property --gj-logo-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.gj-ui .gj-logo-fx {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from var(--gj-logo-angle), var(--app-context-glow), var(--app-context-accent2), transparent 38%, transparent 62%, var(--app-context-glow)) border-box;
  border: 2px solid transparent;
  box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--app-context-glow) 75%, transparent);
  animation:
    gj-logo-orbit 4.5s linear infinite,
    gj-logo-in .9s cubic-bezier(.34, 1.56, .64, 1) .1s backwards;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease;
}

.gj-ui .gj-logo-fx img {
  animation: gj-logo-breathe 5s ease-in-out infinite;
}

.gj-ui .gj-logo-fx::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(115deg,
    transparent 30%,
    color-mix(in srgb, var(--app-context-glow) 30%, transparent) 46%,
    rgba(255, 255, 255, .9) 50%,
    color-mix(in srgb, var(--app-context-accent2) 30%, transparent) 54%,
    transparent 70%);
  transform: translateX(-130%);
  pointer-events: none;
  animation: gj-logo-sheen 6s cubic-bezier(.6, 0, .3, 1) 1.2s infinite;
}

/* The platform radar tile (.gj-logo-radar) lives in gj-brand.css so the kiosk can share it. */

.gj-ui .gj-navbar__brand:hover .gj-logo-fx,
.gj-ui .gj-authbar__brand:hover .gj-logo-fx,
.gj-ui .gj-navbar__brand:focus-visible .gj-logo-fx,
.gj-ui .gj-authbar__brand:focus-visible .gj-logo-fx {
  transform: rotate(-6deg) scale(1.08);
  box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--app-context-glow) 90%, transparent);
}

@keyframes gj-logo-orbit { to { --gj-logo-angle: 360deg; } }

/* gj-logo-in is defined in gj-brand.css. */

@keyframes gj-logo-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@keyframes gj-logo-sheen {
  0% { transform: translateX(-130%); }
  35%, 100% { transform: translateX(130%); }
}

@media (prefers-reduced-motion: reduce) {
  .gj-ui .gj-logo-fx,
  .gj-ui .gj-logo-fx img,
  .gj-ui .gj-logo-fx::after { animation: none; }
  .gj-ui .gj-logo-fx { transition: none; }
}

.gj-ui .gj-navbar__brand-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.1;
}

.gj-ui .gj-navbar__brand-copy strong {
  overflow: hidden;
  color: inherit;
  font-size: .92rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gj-ui .gj-navbar__brand-copy small {
  margin-top: 4px;
  color: var(--gj-color-muted);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Desktop with sidebar: the brand block continues the sidebar column. */
@media (min-width: 992px) {
  .gj-shell:has(.gj-sidebar) .gj-navbar__lead {
    flex-basis: var(--gj-shell-sidebar-width);
    width: var(--gj-shell-sidebar-width);
    color: var(--theme-chrome-ink);
    background: var(--app-context-deep);
    border-right: 1px solid var(--theme-chrome-line);
  }

  .gj-shell:has(.gj-sidebar) .gj-navbar__lead::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--gj-chrome-glow) 22%, transparent), transparent 60%);
  }

  .gj-shell:has(.gj-sidebar) .gj-navbar__lead > * {
    position: relative;
    z-index: 1;
  }

  .gj-shell:has(.gj-sidebar) .gj-navbar__brand {
    color: var(--theme-chrome-ink) !important;
  }

  .gj-shell:has(.gj-sidebar) .gj-navbar__brand-copy small {
    color: var(--theme-chrome-muted);
  }

  .gj-shell:has(.gj-sidebar) .gj-navbar__logo {
    box-shadow: 0 0 0 1px var(--gj-chrome-glow-line), 0 8px 20px -8px color-mix(in srgb, var(--gj-chrome-glow) 60%, transparent);
  }

  .gj-shell:has(.gj-sidebar.collapsed) .gj-navbar__lead {
    flex-basis: var(--gj-shell-sidebar-collapsed);
    width: var(--gj-shell-sidebar-collapsed);
    justify-content: center;
    padding: 0;
  }

  .gj-shell:has(.gj-sidebar.collapsed) .gj-navbar__brand-copy {
    display: none;
  }
}

/* Mobile sidebar trigger: three bars that morph into a close mark. */
.gj-ui .gj-navbar__menu-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--gj-color-text);
  background: color-mix(in srgb, var(--app-context) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--app-context) 20%, transparent);
  border-radius: 12px;
}

.gj-ui .gj-navbar__menu-btn span {
  position: absolute;
  left: 11px;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease, width .25s ease;
}

.gj-ui .gj-navbar__menu-btn span:nth-child(1) { transform: translateY(-5px); }
.gj-ui .gj-navbar__menu-btn span:nth-child(2) { width: 11px; }
.gj-ui .gj-navbar__menu-btn span:nth-child(3) { transform: translateY(5px); }
.gj-ui .gj-navbar__menu-btn[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.gj-ui .gj-navbar__menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.gj-ui .gj-navbar__menu-btn[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

@media (min-width: 992px) {
  .gj-ui .gj-navbar__menu-btn {
    display: none;
  }
}

.gj-ui .gj-navbar__context {
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-left: 24px;
}

.gj-ui .gj-navbar__workspace {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  color: var(--app-context-dark);
  background: var(--app-context-soft);
  border: 1px solid var(--app-context-border);
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 750;
  white-space: nowrap;
}

.gj-ui .gj-navbar__workspace i {
  font-size: .85rem;
}

.gj-ui .gj-navbar__pulse {
  position: relative;
  width: 7px;
  height: 7px;
  background: var(--app-context);
  border-radius: 50%;
}

.gj-ui .gj-navbar__pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  pointer-events: none;
}

.gj-ui .gj-navbar--platform .gj-navbar__pulse::after {
  border: 1.5px solid transparent;
  border-top-color: var(--app-context);
  border-right-color: color-mix(in srgb, var(--app-context-accent2) 80%, var(--app-context));
  animation: gj-chrome-spin 1.6s linear infinite;
}

.gj-ui .gj-navbar--customer .gj-navbar__pulse::after {
  background: radial-gradient(closest-side, color-mix(in srgb, var(--app-context-accent2) 55%, transparent), transparent);
  animation: gj-chrome-breathe 2.6s ease-in-out infinite;
}

.gj-ui .gj-navbar--site .gj-navbar__pulse::after {
  inset: 0;
  border: 1.5px solid var(--app-context);
  animation: gj-chrome-ping 2.2s cubic-bezier(0, 0, .2, 1) infinite;
}

.gj-ui .gj-navbar__crumb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--gj-color-text);
  font-size: .84rem;
  font-weight: 700;
  white-space: nowrap;
}

.gj-ui .gj-navbar__crumb[hidden] {
  display: none;
}

.gj-ui .gj-navbar__crumb i {
  color: var(--gj-color-muted);
  font-size: .7rem;
}

.gj-ui .gj-navbar__crumb span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.gj-ui .gj-navbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  margin-left: auto;
}

.gj-ui .gj-navbar__icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  color: var(--gj-color-muted) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}

.gj-ui .gj-navbar__icon-btn i {
  font-size: 1.12rem;
}

.gj-ui .gj-navbar__icon-btn:hover,
.gj-ui .gj-navbar__icon-btn:focus-visible,
.gj-ui .gj-navbar__icon-btn[aria-expanded="true"] {
  color: var(--app-context-dark) !important;
  background: var(--app-context-soft) !important;
  border-color: var(--app-context-border) !important;
}

/* Bell swings when there is something unread. */
.gj-ui .notification-button:has(.notification-badge:not(.d-none)) i {
  transform-origin: 50% 10%;
  animation: gj-navbar-bell 4s ease-in-out infinite;
}

.gj-ui .gj-navbar .notification-badge {
  top: 3px;
  right: 2px;
  border-color: var(--gj-color-surface);
}

.gj-ui .gj-navbar__divider {
  width: 1px;
  height: 26px;
  margin: 0 6px;
  background: var(--gj-color-border);
}

.gj-ui .gj-navbar__profile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 4px 12px 4px 4px;
  color: var(--gj-color-text) !important;
  background: transparent !important;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background .18s ease, border-color .18s ease;
}

.gj-ui .gj-navbar__profile:hover,
.gj-ui .gj-navbar__profile[aria-expanded="true"] {
  background: var(--gj-color-surface-muted) !important;
  border-color: var(--gj-color-border);
}

.gj-ui .gj-navbar__avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 2px;
  background: linear-gradient(135deg, var(--app-context), var(--app-context-accent2));
  border-radius: 50%;
}

.gj-ui .gj-navbar__avatar img,
.gj-ui .gj-navbar__avatar .profile-initial {
  width: 34px;
  height: 34px;
  border: 2px solid var(--gj-color-surface);
  border-radius: 50%;
  object-fit: cover;
}

.gj-ui .gj-navbar__avatar .profile-initial {
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--app-context-dark);
  font-size: .85rem;
  font-weight: 800;
}

.gj-ui .gj-navbar__avatar .profile-initial.d-none {
  display: none !important;
}

.gj-ui .gj-navbar .profile-status-dot {
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--gj-color-surface);
  background: var(--theme-online);
}

.gj-ui .gj-navbar .profile-status-dot[data-status="busy"],
.gj-ui .gj-navbar .profile-status-dot[data-status="dnd"] { background: var(--theme-danger); }
.gj-ui .gj-navbar .profile-status-dot[data-status="away"] { background: var(--theme-highlight); }

.gj-ui .gj-navbar__profile .profile-copy strong {
  font-size: .82rem;
  font-weight: 700;
}

.gj-ui .gj-navbar__profile .profile-copy small {
  color: var(--gj-color-muted);
  font-size: .68rem;
}

.gj-ui .gj-navbar__chevron {
  color: var(--gj-color-muted);
  font-size: .7rem;
  transition: transform .2s ease;
}

.gj-ui .gj-navbar__profile[aria-expanded="true"] .gj-navbar__chevron {
  transform: rotate(180deg);
}

/* Bottom beam: one line per persona, animated differently. */
.gj-ui .gj-navbar__beam {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}

.gj-ui .gj-navbar--platform .gj-navbar__beam {
  background: linear-gradient(90deg, transparent 0 40%, var(--app-context-glow) 48%, var(--app-context-accent2) 52%, transparent 60% 100%);
  background-size: 250% 100%;
  animation: gj-navbar-beam 5s linear infinite;
}

.gj-ui .gj-navbar--customer .gj-navbar__beam {
  background: linear-gradient(90deg, transparent, var(--app-context), var(--app-context-accent2), var(--app-context), transparent);
  background-size: 200% 100%;
  opacity: .7;
  animation: gj-navbar-beam 12s ease-in-out infinite alternate;
}

.gj-ui .gj-navbar--site .gj-navbar__beam {
  background: repeating-linear-gradient(90deg, var(--app-context) 0 18px, transparent 18px 30px);
  opacity: .38;
  animation: gj-navbar-patrol 1.6s linear infinite;
}

/* ---------- Dropdowns ---------- */
.gj-ui .gj-navbar .dropdown-menu {
  color: var(--gj-color-text);
  background: var(--gj-color-surface);
  border-color: var(--gj-color-border);
}

.gj-ui .gj-navbar .dropdown-menu.show {
  animation: gj-navbar-menu-in .18s cubic-bezier(.2, .8, .2, 1) both;
}

.gj-ui .gj-navbar .notification-menu {
  margin-top: 10px !important;
  border-radius: var(--gj-radius-lg);
  box-shadow: 0 24px 60px -20px rgba(15, 23, 42, .35);
}

.gj-ui .gj-navbar .notification-menu__header {
  background: linear-gradient(135deg, var(--app-context-soft), var(--gj-color-surface));
}

.gj-ui .gj-navbar .notification-menu__eyebrow,
.gj-ui .gj-navbar .notification-menu__header button,
.gj-ui .gj-navbar .notification-load-more {
  color: var(--app-context-dark);
}

.gj-ui .gj-navbar .notification-menu__header button {
  border-color: var(--app-context-border);
  border-radius: 999px;
}

.gj-ui .gj-navbar .notification-item__icon {
  color: var(--app-context-dark);
  background: var(--app-context-soft);
  border-radius: 10px;
}

.gj-ui .gj-navbar .notification-item.is-unread {
  background: color-mix(in srgb, var(--app-context) 7%, var(--gj-color-surface));
  box-shadow: inset 3px 0 0 var(--app-context);
}

.gj-ui .gj-navbar .notification-item.is-unread::after {
  background: var(--app-context);
}

/* Updates / Offers & Announcements views: commercial items stay out of the operational inbox. */
.gj-ui .gj-navbar .notification-menu__views {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 6px;
  border-bottom: 1px solid var(--gj-color-border);
  background: var(--gj-color-surface);
}

.gj-ui .gj-navbar .notification-menu__views button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 8px;
  border: 0;
  border-radius: 999px;
  color: var(--gj-color-muted);
  background: transparent;
  font-size: .7rem;
  font-weight: 750;
  transition: background-color .15s ease, color .15s ease;
}

.gj-ui .gj-navbar .notification-menu__views button:hover {
  color: var(--gj-color-text);
  background: var(--gj-color-surface-muted);
}

.gj-ui .gj-navbar .notification-menu__views button[aria-selected="true"] {
  color: var(--app-context-dark);
  background: var(--app-context-soft);
  box-shadow: inset 0 0 0 1px var(--app-context-border);
}

.gj-ui .gj-navbar .notification-menu__views button:focus-visible {
  outline: 2px solid var(--app-context);
  outline-offset: 1px;
}

.gj-ui .gj-navbar .notification-menu__count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  color: var(--theme-chrome-ink, #fff);
  background: var(--app-context-dark);
  font-size: .6rem;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
}

.gj-ui .gj-navbar .notification-item__tag {
  width: fit-content;
  margin-bottom: 3px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: .56rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.gj-ui .gj-navbar .notification-item__tag--announcement {
  color: var(--app-context-dark);
  background: var(--app-context-soft);
}

.gj-ui .gj-navbar .notification-item__tag--offer {
  color: color-mix(in srgb, var(--theme-warning) 70%, var(--gj-color-text));
  background: color-mix(in srgb, var(--theme-warning) 16%, var(--gj-color-surface));
}

.gj-ui .gj-navbar .notification-item__tag--sponsored {
  color: var(--gj-color-muted);
  background: var(--gj-color-surface-muted);
  box-shadow: inset 0 0 0 1px var(--gj-color-border);
}

[data-bs-theme="dark"] .gj-ui .gj-navbar .notification-menu__views button[aria-selected="true"],
[data-bs-theme="dark"] .gj-ui .gj-navbar .notification-item__tag--announcement {
  color: var(--app-context);
}

[data-bs-theme="dark"] .gj-ui .gj-navbar .notification-menu__count {
  color: #0b1520;
  background: var(--app-context);
}

[data-bs-theme="dark"] .gj-ui .gj-navbar .notification-item__tag--offer {
  color: color-mix(in srgb, var(--theme-warning) 75%, #fff);
}

.gj-ui .gj-usermenu.dropdown-menu {
  width: 300px;
  max-width: calc(100vw - 20px);
  margin-top: 10px !important;
  padding: 0 !important;
  overflow: hidden;
  border-radius: var(--gj-radius-lg);
  box-shadow: 0 24px 60px -20px rgba(15, 23, 42, .4);
}

.gj-usermenu__hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 4px 12px;
  padding: 16px;
  overflow: hidden;
  color: var(--theme-chrome-ink);
  background:
    radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--app-context) 45%, transparent), transparent 60%),
    linear-gradient(135deg, var(--app-context-deep), var(--app-context-deeper));
}

.gj-usermenu__fx {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.gj-navbar--platform .gj-usermenu__fx {
  background:
    linear-gradient(90deg, var(--theme-chrome-line) 1px, transparent 1px),
    linear-gradient(0deg, var(--theme-chrome-line) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(270deg, #000, transparent 80%);
  mask-image: linear-gradient(270deg, #000, transparent 80%);
}

.gj-navbar--customer .gj-usermenu__fx {
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .1) 50%, transparent 62%);
  animation: gj-chrome-sheen 7s ease-in-out infinite;
}

.gj-navbar--site .gj-usermenu__fx {
  background: radial-gradient(circle, var(--theme-chrome-glass-strong) 1px, transparent 1.6px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(270deg, #000, transparent 80%);
  mask-image: linear-gradient(270deg, #000, transparent 80%);
}

.gj-usermenu__avatar {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  color: var(--app-context-deeper);
  background: linear-gradient(135deg, var(--app-context-glow), var(--app-context-accent2));
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--app-context-deeper), 0 0 0 4px var(--gj-chrome-glow-line);
  font-size: 1.15rem;
  font-weight: 800;
}

.gj-usermenu__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gj-usermenu__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.gj-usermenu__who strong {
  overflow: hidden;
  font-size: .92rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gj-usermenu__who span {
  overflow: hidden;
  color: var(--theme-chrome-muted);
  font-size: .72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gj-usermenu__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.gj-usermenu__persona,
.gj-usermenu__role {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 750;
}

.gj-usermenu__persona {
  color: var(--app-context-deeper);
  background: linear-gradient(135deg, var(--app-context-glow), var(--app-context-accent2));
  letter-spacing: .08em;
  text-transform: uppercase;
}

.gj-usermenu__role {
  color: var(--theme-chrome-ink);
  background: var(--theme-chrome-glass-strong);
  border: 1px solid var(--theme-chrome-line);
}

.gj-usermenu__section {
  padding: 10px 8px;
  border-bottom: 1px solid var(--gj-color-border);
}

.gj-ui .gj-usermenu__label {
  padding: 2px 8px 8px;
  color: var(--gj-color-muted);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.gj-ui .gj-usermenu__status {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 0;
}

.gj-ui .gj-usermenu__status button {
  min-height: 34px;
  padding: 6px 9px;
  color: var(--gj-color-text);
  background: var(--gj-color-surface-muted);
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: .7rem;
  font-weight: 600;
}

.gj-ui .gj-usermenu__status button::after {
  content: none;
}

.gj-ui .gj-usermenu__status button:hover {
  background: var(--app-context-soft);
}

.gj-ui .gj-usermenu__status button.active {
  color: var(--app-context-dark);
  background: var(--app-context-soft);
  border-color: var(--app-context-border);
}

.gj-ui .gj-usermenu__status .status-available { background: var(--theme-online); }
.gj-ui .gj-usermenu__status .status-busy,
.gj-ui .gj-usermenu__status .status-dnd { background: var(--theme-danger); }
.gj-ui .gj-usermenu__status .status-away { background: var(--theme-highlight); }

.gj-ui .gj-usermenu__item.dropdown-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 40px;
  padding: 5px 8px;
  color: var(--gj-color-text);
  background: transparent;
  border-radius: 10px;
  font-size: .82rem;
  font-weight: 600;
}

.gj-ui .gj-usermenu__item.dropdown-item:hover,
.gj-ui .gj-usermenu__item.dropdown-item:focus-visible {
  color: var(--gj-color-text);
  background: var(--gj-color-surface-muted);
}

.gj-usermenu__icon {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  color: var(--app-context-dark);
  background: var(--app-context-soft);
  border-radius: 8px;
  font-size: .9rem;
  transition: transform .18s ease;
}

.gj-usermenu__item:hover .gj-usermenu__icon {
  transform: scale(1.06);
}

/* The menu entry for the page you're on (for example Settings). */
.gj-ui .gj-usermenu__item.dropdown-item[aria-current="page"] {
  color: var(--app-context-dark);
  background: var(--app-context-soft);
  box-shadow: inset 3px 0 0 var(--app-context);
}

.gj-ui .gj-usermenu__item .gj-messages-count {
  margin-left: auto;
}

.gj-ui .gj-usermenu__item.future-nav-item .gj-usermenu__icon {
  flex: 0 0 30px;
}

.gj-ui .gj-usermenu__item.future-nav-item small {
  margin-left: auto;
  padding: 2px 7px;
  color: var(--gj-color-muted);
  background: var(--gj-color-surface-muted);
  border: 1px solid var(--gj-color-border);
  border-radius: 999px;
  font-size: .58rem;
  font-weight: 750;
}

.gj-usermenu__footer {
  padding: 8px;
  background: var(--gj-color-surface-muted);
}

.gj-ui .gj-usermenu__signout.dropdown-item,
.gj-ui .gj-usermenu__signout.dropdown-item:hover {
  color: var(--theme-danger);
}

.gj-ui .gj-usermenu__signout.dropdown-item:hover {
  background: color-mix(in srgb, var(--theme-danger) 8%, transparent);
}

.gj-usermenu__signout .gj-usermenu__icon {
  color: var(--theme-danger);
  background: color-mix(in srgb, var(--theme-danger) 10%, transparent);
}

@keyframes gj-navbar-beam {
  from { background-position: 100% 0; }
  to { background-position: -150% 0; }
}

@keyframes gj-navbar-patrol {
  to { background-position: 30px 0; }
}

@keyframes gj-navbar-bell {
  0%, 86%, 100% { transform: rotate(0); }
  89% { transform: rotate(14deg); }
  92% { transform: rotate(-12deg); }
  95% { transform: rotate(7deg); }
}

@keyframes gj-navbar-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 991.98px) {
  .gj-ui .gj-navbar__inner {
    padding-right: 12px;
  }

  .gj-ui .gj-navbar__lead {
    padding-left: 12px;
  }
}

@media (max-width: 575.98px) {
  .gj-ui .gj-navbar__actions {
    gap: 2px;
  }

  .gj-ui .gj-navbar__divider {
    display: none;
  }

  .gj-ui .gj-navbar__brand-copy small {
    display: none;
  }

  .gj-ui .gj-navbar__icon-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
  }

  .gj-ui .gj-navbar__profile {
    padding-right: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gj-ui .gj-navbar *,
  .gj-ui .gj-navbar *::before,
  .gj-ui .gj-navbar *::after {
    animation: none !important;
  }
}


/* Dashboard shell, sidebar, and banner v2 bridge. */
.gj-shell {
  --gj-shell-nav-height: var(--app-nav-height, 70px);
  --gj-shell-sidebar-width: 248px;
  --gj-shell-sidebar-collapsed: 76px;
  --gj-shell-footer-height: var(--app-footer-height, 48px);
  min-height: 100vh;
  padding-top: var(--gj-shell-nav-height) !important;
  color: var(--gj-color-text);
  background: var(--gj-color-bg) !important;
}

.gj-shell__layout {
  min-width: 0;
}

.gj-shell .gj-shell__content {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding: 26px 24px calc(var(--gj-shell-footer-height) + 28px) !important;
  color: var(--gj-color-text);
  background: var(--gj-color-bg) !important;
  transition: margin-left .22s ease, padding .22s ease;
}

.gj-dashboard {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding: 0;
}

/*
  Persona chrome: main sidebar + welcome banner.
  Colors come only from --app-context-* and --theme-chrome-* (theme-tokens.css),
  so re-theming happens there. Each user type gets its own motion through the
  --platform (command radar), --customer (aurora + sheen) and --site (patrol
  scan) modifiers.
*/
.gj-ui .gj-navbar,
.gj-ui .gj-sidebar,
.gj-banner {
  --gj-chrome-glow: var(--app-context-glow);
  --gj-chrome-accent2: var(--app-context-accent2);
  --gj-chrome-glow-soft: color-mix(in srgb, var(--gj-chrome-glow) 16%, transparent);
  --gj-chrome-glow-line: color-mix(in srgb, var(--gj-chrome-glow) 26%, transparent);
  --gj-chrome-icon: color-mix(in srgb, var(--gj-chrome-glow) 72%, var(--theme-chrome-ink));
}

/* ---------- Sidebar ---------- */
.gj-ui .gj-sidebar {
  position: fixed;
  top: var(--gj-shell-nav-height);
  left: -100%;
  z-index: 1035;
  display: flex;
  flex-direction: column;
  width: var(--gj-shell-sidebar-width);
  /* dvh tracks the visible area; mobile 100vh includes hidden browser toolbars and cuts off the last items. */
  height: calc(100vh - var(--gj-shell-nav-height));
  height: calc(100dvh - var(--gj-shell-nav-height));
  min-height: 0 !important;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--theme-chrome-ink);
  background: linear-gradient(180deg, var(--app-context-deep) 0%, var(--app-context-deeper) 100%) !important;
  border: 0;
  border-right: 1px solid var(--theme-chrome-line) !important;
  box-shadow: 10px 0 34px color-mix(in srgb, var(--app-context-deeper) 28%, transparent);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* The panel still scrolls (wheel, touch, keyboard); only the scrollbar is hidden. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  transition: left .22s ease, width .22s ease, opacity .22s ease;
}

.gj-ui .gj-sidebar::-webkit-scrollbar {
  display: none;
}

.gj-ui .gj-sidebar.active {
  left: 0;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/*
  The aura sits at z-index 0 under content raised to z-index 1 (same as the banner).
  A negative z-index layer inside this fixed, scrolling panel makes iOS WebKit skip
  painting labels and later links until a tap forces a repaint.
*/
.gj-ui .gj-sidebar__aura {
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: 340px;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent);
  mask-image: linear-gradient(180deg, #000 30%, transparent);
}

.gj-ui .gj-sidebar__aura::before,
.gj-ui .gj-sidebar__aura::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.gj-ui .gj-sidebar--platform .gj-sidebar__aura::before {
  inset: -30% -40% 20% -30%;
  background:
    radial-gradient(closest-side at 30% 40%, color-mix(in srgb, var(--gj-chrome-glow) 26%, transparent), transparent),
    radial-gradient(closest-side at 80% 30%, color-mix(in srgb, var(--gj-chrome-accent2) 24%, transparent), transparent);
  animation: gj-chrome-drift 18s ease-in-out infinite alternate;
}

.gj-ui .gj-sidebar--platform .gj-sidebar__aura::after {
  inset: 0;
  background:
    linear-gradient(90deg, var(--theme-chrome-line) 1px, transparent 1px),
    linear-gradient(0deg, var(--theme-chrome-line) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .5;
}

.gj-ui .gj-sidebar--customer .gj-sidebar__aura::before {
  inset: -40% -60% 10% -40%;
  background:
    radial-gradient(closest-side at 35% 45%, color-mix(in srgb, var(--gj-chrome-glow) 24%, transparent), transparent),
    radial-gradient(closest-side at 75% 25%, color-mix(in srgb, var(--gj-chrome-accent2) 18%, transparent), transparent);
  animation: gj-chrome-drift 22s ease-in-out infinite alternate;
}

.gj-ui .gj-sidebar--customer .gj-sidebar__aura::after {
  inset: 0;
  background: repeating-linear-gradient(125deg, var(--theme-chrome-glass) 0 1px, transparent 1px 16px);
  opacity: .7;
}

.gj-ui .gj-sidebar--site .gj-sidebar__aura::before {
  inset: 0;
  background: radial-gradient(circle, var(--theme-chrome-glass-strong) 1px, transparent 1.6px);
  background-size: 16px 16px;
}

.gj-ui .gj-sidebar--site .gj-sidebar__aura::after {
  left: 0;
  right: 0;
  top: -40px;
  height: 40px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--gj-chrome-glow) 22%, transparent) 85%, var(--gj-chrome-glow-line));
  animation: gj-chrome-scan-down 7s cubic-bezier(.45, 0, .55, 1) infinite;
}

.gj-ui .gj-sidebar__header {
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px;
  border-bottom: 1px solid var(--theme-chrome-line);
}

.gj-ui .gj-sidebar__mark {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  color: var(--app-context-deeper);
  background: linear-gradient(135deg, var(--gj-chrome-glow), var(--gj-chrome-accent2));
  border-radius: 12px;
  box-shadow: 0 8px 22px -6px color-mix(in srgb, var(--gj-chrome-glow) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, .45);
  font-size: 1.1rem;
}

.gj-ui .gj-sidebar__mark i {
  color: inherit !important;
}

.gj-ui .gj-sidebar__mark::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}

.gj-ui .gj-sidebar--platform .gj-sidebar__mark::after {
  inset: -5px;
  border: 1px solid var(--gj-chrome-glow-line);
  border-radius: 15px;
  animation: gj-chrome-breathe 3.6s ease-in-out infinite;
}

.gj-ui .gj-sidebar--customer .gj-sidebar__mark {
  overflow: hidden;
}

.gj-ui .gj-sidebar--customer .gj-sidebar__mark::after {
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: gj-chrome-sheen 6s ease-in-out infinite;
}

.gj-ui .gj-sidebar--site .gj-sidebar__mark::after {
  inset: 0;
  border: 2px solid var(--gj-chrome-glow);
  animation: gj-chrome-ping 2.8s cubic-bezier(0, 0, .2, 1) infinite;
}

.gj-ui .gj-sidebar .label {
  min-width: 0;
  opacity: 1;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity .18s ease;
}

.gj-ui .gj-sidebar__header .label {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.gj-ui .gj-sidebar__header small {
  color: var(--theme-chrome-muted);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.gj-ui .gj-sidebar__header strong {
  margin-top: 3px;
  color: var(--theme-chrome-ink);
  font-size: .9rem;
  font-weight: 750;
}

.gj-ui .gj-sidebar__menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px 14px;
}

.gj-ui .gj-sidebar__section {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 10px 6px;
  color: var(--theme-chrome-muted);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.gj-ui .gj-sidebar__section::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--theme-chrome-line), transparent);
}

.gj-ui .gj-sidebar__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 6px 10px 6px 7px;
  color: color-mix(in srgb, var(--theme-chrome-ink) 80%, transparent) !important;
  background: transparent !important;
  border-radius: 11px;
  box-shadow: none;
  font-size: .84rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.gj-ui .gj-sidebar__link > i {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  color: var(--gj-chrome-icon) !important;
  background: var(--theme-chrome-glass);
  border-radius: 9px;
  font-size: .98rem;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.gj-ui .gj-sidebar__link:hover {
  color: var(--theme-chrome-ink) !important;
  background: var(--theme-chrome-glass) !important;
}

.gj-ui .gj-sidebar__link:hover > i {
  color: var(--gj-chrome-glow) !important;
  background: var(--gj-chrome-glow-soft);
  transform: scale(1.06);
}

.gj-ui .gj-sidebar__link.active {
  color: var(--theme-chrome-ink) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gj-chrome-glow) 18%, transparent), color-mix(in srgb, var(--gj-chrome-glow) 3%, transparent)) !important;
  box-shadow: inset 0 0 0 1px var(--gj-chrome-glow-soft), 0 12px 24px -16px color-mix(in srgb, var(--gj-chrome-glow) 70%, transparent);
  font-weight: 700;
}

.gj-ui .gj-sidebar__link.active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  background: linear-gradient(180deg, var(--gj-chrome-glow), var(--gj-chrome-accent2));
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 12px var(--gj-chrome-glow);
  animation: gj-chrome-rail-in .35s cubic-bezier(.2, .8, .2, 1) both;
}

.gj-ui .gj-sidebar__link.active > i {
  color: var(--app-context-deeper) !important;
  background: linear-gradient(135deg, var(--gj-chrome-glow), var(--gj-chrome-accent2));
  box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--gj-chrome-glow) 55%, transparent);
}

.gj-ui .gj-sidebar__link:focus-visible {
  outline: 2px solid var(--gj-chrome-glow);
  outline-offset: 2px;
}

.gj-ui .gj-sidebar__spacer {
  flex: 1 1 auto;
}

.gj-ui .gj-sidebar__header,
.gj-ui .gj-sidebar__menu,
.gj-ui .gj-sidebar__account,
.gj-ui .gj-sidebar__footer {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.gj-ui .gj-sidebar__account {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 12px 14px;
  padding: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--theme-chrome-glass-strong), var(--theme-chrome-glass));
  border: 1px solid var(--theme-chrome-line) !important;
  border-top: 1px solid var(--theme-chrome-line) !important;
  border-radius: 13px;
}

.gj-ui .gj-sidebar__account::before {
  content: "";
  position: absolute;
  inset: 0 12px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gj-chrome-glow), var(--gj-chrome-accent2), transparent);
  opacity: .7;
}

.gj-ui .gj-sidebar__account-mark {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  color: var(--gj-chrome-glow);
  background: var(--gj-chrome-glow-soft);
  border-radius: 10px;
}

.gj-ui .gj-sidebar__account-mark i {
  color: inherit !important;
}

.gj-ui .gj-sidebar__account-dot,
.gj-banner__presence,
.gj-banner__status > span {
  background: var(--theme-online);
  border-radius: 50%;
  animation: gj-chrome-online 2.8s ease-out infinite;
}

.gj-ui .gj-sidebar__account-dot {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--app-context-deeper);
}

.gj-ui .gj-sidebar__account .label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gj-ui .gj-sidebar__account strong {
  overflow: hidden;
  color: var(--theme-chrome-ink);
  font-size: .8rem;
  font-weight: 700;
  text-overflow: ellipsis;
}

.gj-ui .gj-sidebar__account small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--theme-chrome-muted);
  font-size: .66rem;
  letter-spacing: .04em;
  text-transform: none;
}

.gj-ui .gj-sidebar__account small i {
  color: var(--gj-chrome-accent2) !important;
  font-size: .62rem;
}

.gj-ui .gj-sidebar__footer {
  padding: 10px 14px 14px;
  border-top: 1px solid var(--theme-chrome-line) !important;
}

.gj-ui .gj-sidebar__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  color: var(--theme-chrome-muted);
  background: var(--theme-chrome-glass);
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: .74rem;
  font-weight: 600;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.gj-ui .gj-sidebar__toggle:hover {
  color: var(--theme-chrome-ink);
  background: var(--theme-chrome-glass-strong);
  border-color: var(--gj-chrome-glow-soft);
  transform: none;
}

.gj-ui .gj-sidebar__toggle i {
  color: inherit !important;
  transition: transform .25s ease;
}

.gj-ui .gj-sidebar.collapsed {
  width: var(--gj-shell-sidebar-collapsed);
}

.gj-ui .gj-sidebar.collapsed .label {
  display: none;
}

.gj-ui .gj-sidebar.collapsed .gj-sidebar__header {
  justify-content: center;
  padding-inline: 0;
}

.gj-ui .gj-sidebar.collapsed .gj-sidebar__menu {
  padding-inline: 10px;
}

.gj-ui .gj-sidebar.collapsed .gj-sidebar__section {
  display: block;
  height: 1px;
  margin: 10px 8px;
  padding: 0;
  background: var(--theme-chrome-line);
}

.gj-ui .gj-sidebar.collapsed .gj-sidebar__section::after {
  content: none;
}

.gj-ui .gj-sidebar.collapsed .gj-sidebar__link {
  justify-content: center;
  padding: 6px;
}

.gj-ui .gj-sidebar.collapsed .gj-sidebar__link.active::before {
  left: -10px;
}

.gj-ui .gj-sidebar.collapsed .gj-sidebar__account {
  justify-content: center;
  margin-inline: 10px;
  padding: 10px 0;
}

.gj-ui .gj-sidebar.collapsed .gj-sidebar__toggle i {
  transform: rotate(180deg);
}

/*
  Sidebar groups and "Find a Page" (gj-sidebar.js). Each group heading folds its links; a closed group shows how
  many pages it holds, plus a dot when one of them has an unread count. Folding animates grid rows (0fr to 1fr);
  folded links are visibility-hidden, so the keyboard skips them. The icon-only rail ignores folding.
*/
.gj-ui .gj-sidebar__find {
  position: sticky;
  top: 0;
  z-index: 3;
  flex-shrink: 0;
  display: block;
  padding: 12px 14px 8px;
  overflow: visible;
  background: linear-gradient(180deg, var(--app-context-deep) 78%, transparent);
}

.gj-ui .gj-sidebar__find > i {
  position: absolute;
  top: 31px;
  inset-inline-start: 26px;
  color: var(--theme-chrome-muted);
  font-size: .8rem;
  pointer-events: none;
  transform: translateY(-50%);
}

.gj-ui .gj-sidebar__find .gj-sidebar__find-input {
  width: 100%;
  height: 38px;
  padding-block: 0;
  padding-inline: 33px 34px;
  color: var(--theme-chrome-ink) !important;
  background-color: var(--theme-chrome-glass) !important;
  border: 1px solid var(--theme-chrome-line) !important;
  border-radius: 11px;
  box-shadow: none;
  font-size: .82rem;
  font-weight: 500;
  outline: 0;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.gj-ui .gj-sidebar__find .gj-sidebar__find-input::placeholder {
  color: var(--theme-chrome-muted) !important;
}

.gj-ui .gj-sidebar__find .gj-sidebar__find-input::-webkit-search-cancel-button {
  filter: invert(1) opacity(.6);
}

.gj-ui .gj-sidebar__find .gj-sidebar__find-input:focus {
  background-color: var(--theme-chrome-glass-strong) !important;
  border-color: var(--gj-chrome-glow) !important;
  box-shadow: 0 0 0 3px var(--gj-chrome-glow-soft);
}

.gj-ui .gj-sidebar__find-key {
  position: absolute;
  top: 31px;
  inset-inline-end: 24px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  color: var(--theme-chrome-muted);
  background: var(--theme-chrome-glass);
  border: 1px solid var(--theme-chrome-line);
  border-radius: 6px;
  box-shadow: none;
  font-size: .7rem;
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity .15s ease;
}

.gj-ui .gj-sidebar__find:focus-within .gj-sidebar__find-key,
.gj-ui .gj-sidebar__find:has(.gj-sidebar__find-input:not(:placeholder-shown)) .gj-sidebar__find-key {
  opacity: 0;
}

.gj-ui .gj-sidebar .gj-sidebar__find-empty {
  margin: 8px 10px 4px;
  color: var(--theme-chrome-muted);
  font-size: .8rem;
  white-space: normal;
}

.gj-ui .gj-sidebar__menu {
  padding-top: 2px;
}

.gj-ui .gj-sidebar__group {
  display: flex;
  flex-direction: column;
}

.gj-ui button.gj-sidebar__section {
  width: 100%;
  margin: 0;
  padding: 14px 8px 6px 10px;
  text-align: start;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: color .2s ease;
}

.gj-ui button.gj-sidebar__section:hover {
  color: var(--theme-chrome-ink);
}

.gj-ui button.gj-sidebar__section:focus-visible {
  outline: 2px solid var(--gj-chrome-glow);
  outline-offset: -2px;
}

/* The rule after the label, then the count and chevron at the end. */
.gj-ui button.gj-sidebar__section::after {
  order: 1;
}

.gj-ui .gj-sidebar__section-count,
.gj-ui .gj-sidebar__section-chevron {
  order: 2;
}

.gj-ui .gj-sidebar__section-count {
  display: none;
  min-width: 20px;
  padding: 2px 6px;
  color: var(--theme-chrome-ink);
  background: var(--theme-chrome-glass-strong);
  border-radius: 99px;
  font-size: .62rem;
  letter-spacing: 0;
  text-align: center;
}

.gj-ui .gj-sidebar__group.is-closed .gj-sidebar__section-count:not(:empty) {
  display: inline-block;
}

.gj-ui .gj-sidebar__section-chevron {
  flex: 0 0 auto;
  margin-inline-start: -2px;
  color: inherit !important;
  font-size: .7rem;
  transition: transform .22s ease;
}

.gj-ui .gj-sidebar__group.is-closed .gj-sidebar__section-chevron {
  transform: rotate(-90deg);
}

[dir="rtl"] .gj-ui .gj-sidebar__group.is-closed .gj-sidebar__section-chevron {
  transform: rotate(90deg);
}

/* A closed group with unread items gets a dot beside its name. */
.gj-ui .gj-sidebar__group.is-closed:has(.gj-sidebar__count, .gj-messages-count:not(.d-none)) .gj-sidebar__section-text::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-inline-start: 7px;
  vertical-align: middle;
  background: var(--gj-chrome-accent2);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--gj-chrome-accent2);
}

.gj-ui .gj-sidebar__group-items {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .22s ease;
}

/* Overflow is clipped only while folding; the negative margin keeps the active rail and focus rings in view. */
.gj-ui .gj-sidebar__group-inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  margin: -3px -12px;
  padding: 3px 12px;
  overflow: hidden;
  visibility: visible;
  transition: visibility 0s linear 0s;
}

.gj-ui .gj-sidebar__group.is-closed .gj-sidebar__group-items {
  grid-template-rows: 0fr;
}

.gj-ui .gj-sidebar__group.is-closed .gj-sidebar__group-inner {
  visibility: hidden;
  transition-delay: .22s;
}

/* While searching every group is open and headings are only labels. */
.gj-ui .gj-sidebar__menu.is-filtering .gj-sidebar__group-items {
  grid-template-rows: 1fr;
}

.gj-ui .gj-sidebar__menu.is-filtering .gj-sidebar__group-inner {
  visibility: visible;
  transition-delay: 0s;
}

.gj-ui .gj-sidebar__menu.is-filtering .gj-sidebar__section {
  pointer-events: none;
}

.gj-ui .gj-sidebar__menu.is-filtering .gj-sidebar__section-chevron,
.gj-ui .gj-sidebar__menu.is-filtering .gj-sidebar__section-count {
  visibility: hidden;
}

/* Icon-only rail: every link shows, groups are separated by a thin rule, and there is no search box. */
.gj-ui .gj-sidebar.collapsed .gj-sidebar__find,
.gj-ui .gj-sidebar.collapsed button.gj-sidebar__section {
  display: none;
}

.gj-ui .gj-sidebar.collapsed .gj-sidebar__group-items {
  grid-template-rows: 1fr;
}

.gj-ui .gj-sidebar.collapsed .gj-sidebar__group-inner {
  visibility: visible;
  transition-delay: 0s;
}

.gj-ui .gj-sidebar.collapsed .gj-sidebar__group + .gj-sidebar__group::before {
  content: "";
  height: 1px;
  margin: 10px 8px;
  background: var(--theme-chrome-line);
}

/* Mouse and trackpad: a denser list. Touch keeps 44px targets. */
@media (hover: hover) and (pointer: fine) {
  .gj-ui .gj-sidebar__link {
    min-height: 38px;
    padding-block: 4px;
  }

  .gj-ui .gj-sidebar__link > i {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
    font-size: .92rem;
  }
}

@media (hover: none) {
  .gj-ui .gj-sidebar__find-key {
    display: none;
  }
}

/* Phones and tablets: the sidebar is a drawer over the page, with a scrim that closes it when tapped. */
.gj-sidebar-scrim {
  display: none;
}

@media (max-width: 991.98px) {
  .gj-ui .gj-sidebar.active + .gj-sidebar-scrim {
    position: fixed;
    inset: var(--gj-shell-nav-height) 0 0;
    z-index: 1034;
    display: block;
    background: rgba(3, 12, 16, .45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: gj-sidebar-scrim-in .2s ease both;
  }
}

@keyframes gj-sidebar-scrim-in {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .gj-ui .gj-sidebar__group-items,
  .gj-ui .gj-sidebar__section-chevron {
    transition: none;
  }
}

/* ---------- Welcome banner ---------- */
.gj-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 24px 26px !important;
  color: var(--theme-chrome-ink) !important;
  background:
    radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--app-context) 42%, transparent), transparent 55%),
    linear-gradient(135deg, var(--app-context-deep), var(--app-context-deeper)) !important;
  border: 1px solid var(--gj-chrome-glow-soft) !important;
  border-radius: var(--gj-radius-lg) !important;
  box-shadow:
    0 26px 50px -28px color-mix(in srgb, var(--app-context-deeper) 85%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

/* Top hairline in the persona gradient; replaces the legacy home.css overlay. */
.gj-banner::before {
  content: "";
  position: absolute;
  inset: 0 8% auto;
  z-index: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gj-chrome-glow), var(--gj-chrome-accent2), transparent);
  opacity: .8;
  pointer-events: none;
}

.gj-banner::after {
  content: none !important;
}

.gj-banner__fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.gj-banner__fx > span {
  position: absolute;
  display: block;
  pointer-events: none;
}

.gj-banner__content,
.gj-banner__chips {
  position: relative;
  z-index: 1;
}

/* Platform: command console — grid, radar sweep, orbit rings, violet aurora. */
.gj-banner--platform .gj-banner__fx {
  background:
    linear-gradient(90deg, var(--theme-chrome-line) 1px, transparent 1px),
    linear-gradient(0deg, var(--theme-chrome-line) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: linear-gradient(270deg, #000, transparent 75%);
  mask-image: linear-gradient(270deg, #000, transparent 75%);
}

.gj-banner--platform .gj-banner__fx-a,
.gj-banner--platform .gj-banner__fx-b {
  top: 50%;
  right: -110px;
  width: 440px;
  aspect-ratio: 1;
  margin-top: -220px;
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent);
  mask-image: radial-gradient(closest-side, #000 55%, transparent);
}

.gj-banner--platform .gj-banner__fx-a {
  background: conic-gradient(from 0deg, transparent 0 290deg, color-mix(in srgb, var(--gj-chrome-glow) 38%, transparent) 352deg, transparent 360deg);
  animation: gj-chrome-spin 7s linear infinite;
}

.gj-banner--platform .gj-banner__fx-b {
  background: repeating-radial-gradient(circle, transparent 0 43px, var(--gj-chrome-glow-line) 44px 45px);
  animation: gj-chrome-breathe 5s ease-in-out infinite;
}

.gj-banner--platform .gj-banner__fx-c {
  top: -60%;
  left: 18%;
  width: 46%;
  height: 160%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--gj-chrome-accent2) 26%, transparent), transparent);
  animation: gj-chrome-drift 16s ease-in-out infinite alternate;
}

/* Customer: premium concierge — rotating teal + gold aurora, flowing silk ribbons, gold sheen,
   twinkling stars (.gj-banner__luxe), a glowing avatar halo and a staggered entrance. */
.gj-banner--customer {
  --gj-luxe-light: color-mix(in srgb, var(--gj-chrome-accent2) 40%, var(--theme-chrome-ink));
}

.gj-banner--customer .gj-banner__fx {
  background: radial-gradient(90% 130% at 100% 0%, color-mix(in srgb, var(--gj-chrome-accent2) 12%, transparent), transparent 60%);
}

.gj-banner--customer .gj-banner__fx::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -12%;
  width: 72%;
  aspect-ratio: 1;
  margin-top: -36%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    color-mix(in srgb, var(--gj-chrome-glow) 55%, transparent),
    transparent 22%,
    color-mix(in srgb, var(--gj-chrome-accent2) 50%, transparent) 38%,
    transparent 58%,
    color-mix(in srgb, var(--gj-chrome-glow) 40%, transparent) 76%,
    transparent 90%,
    color-mix(in srgb, var(--gj-chrome-glow) 55%, transparent));
  filter: blur(40px);
  opacity: .7;
  transition: opacity .6s ease;
  animation: gj-chrome-spin 24s linear infinite;
}

.gj-banner--customer:hover .gj-banner__fx::before {
  opacity: .9;
}

.gj-banner--customer .gj-banner__fx-a {
  top: -70%;
  right: -8%;
  width: 62%;
  height: 190%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--gj-chrome-glow) 30%, transparent), transparent);
  animation: gj-chrome-drift 13s ease-in-out infinite alternate;
}

.gj-banner--customer .gj-banner__fx-b {
  right: 18%;
  bottom: -90%;
  width: 50%;
  height: 170%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--gj-chrome-accent2) 30%, transparent), transparent);
  animation: gj-chrome-drift 17s ease-in-out infinite alternate-reverse;
}

.gj-banner--customer .gj-banner__fx-c {
  inset: 0;
  background: linear-gradient(105deg,
    transparent 40%,
    color-mix(in srgb, var(--gj-luxe-light) 10%, transparent) 47%,
    color-mix(in srgb, var(--gj-luxe-light) 26%, transparent) 50%,
    color-mix(in srgb, var(--gj-luxe-light) 10%, transparent) 53%,
    transparent 60%);
  transform: translateX(-120%);
  animation: gj-chrome-sheen 7s cubic-bezier(.6, 0, .3, 1) infinite 1.2s;
}

/* Stars and gold dust glow through a shared drop shadow; the text side stays calm. */
.gj-banner__luxe {
  position: absolute;
  inset: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--gj-chrome-accent2) 75%, transparent));
}

/* Two layers of gold dust rising at different speeds. Each layer is one tile taller than the
   banner and moves up by exactly one tile, so the loop is seamless with transform-only motion. */
.gj-banner__luxe::before,
.gj-banner__luxe::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 22%, #000 60%);
  mask-image: linear-gradient(90deg, transparent 22%, #000 60%);
}

.gj-banner__luxe::before {
  --gj-dust: color-mix(in srgb, var(--gj-chrome-accent2) 85%, transparent);
  background:
    radial-gradient(circle at 8% 22%, var(--gj-dust) 0 1.6px, transparent 2.6px),
    radial-gradient(circle at 34% 70%, var(--gj-dust) 0 2.2px, transparent 3.2px),
    radial-gradient(circle at 57% 38%, var(--gj-dust) 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 78% 84%, var(--gj-dust) 0 2px, transparent 3px),
    radial-gradient(circle at 92% 12%, var(--gj-dust) 0 1.6px, transparent 2.6px);
  background-size: 380px 220px;
  height: calc(100% + 220px);
  animation: gj-customer-dust-a 13s linear infinite;
}

.gj-banner__luxe::after {
  --gj-dust: color-mix(in srgb, var(--gj-luxe-light) 70%, transparent);
  background:
    radial-gradient(circle at 18% 46%, var(--gj-dust) 0 1px, transparent 2px),
    radial-gradient(circle at 46% 12%, var(--gj-dust) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 70% 60%, var(--gj-dust) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 90%, var(--gj-dust) 0 1.2px, transparent 2.2px);
  background-size: 260px 160px;
  height: calc(100% + 160px);
  opacity: .8;
  animation: gj-customer-dust-b 8s linear infinite;
}

/* Four-point stars; the static state stays visible when motion is reduced. */
.gj-banner__luxe > i {
  position: absolute;
  width: 16px;
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--gj-luxe-light) 0 22%, var(--gj-chrome-accent2) 46%, transparent 74%);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  opacity: .8;
  animation: gj-customer-twinkle 4.2s ease-in-out infinite both;
}

.gj-banner__luxe > i:nth-child(1) { top: 12%; right: 33%; width: 22px; animation-delay: 0s; }
.gj-banner__luxe > i:nth-child(2) { top: 62%; right: 24%; width: 15px; animation-delay: 1.2s; }
.gj-banner__luxe > i:nth-child(3) { top: 8%; right: 18%; width: 26px; animation-delay: 2.4s; }
.gj-banner__luxe > i:nth-child(4) { top: 76%; right: 44%; width: 13px; animation-delay: .6s; }
.gj-banner__luxe > i:nth-child(5) { top: 20%; right: 54%; width: 14px; animation-delay: 3s; }
.gj-banner__luxe > i:nth-child(6) { top: 44%; right: 38%; width: 18px; animation-delay: 1.8s; }
.gj-banner__luxe > i:nth-child(7) { top: 80%; right: 6%; width: 20px; animation-delay: 3.6s; }

/* Premium halo behind the avatar plus a gold-led ring. */
.gj-banner--customer .gj-banner__avatar::before {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--gj-chrome-accent2) 42%, transparent), transparent);
  pointer-events: none;
  animation: gj-customer-halo 3.4s ease-in-out infinite;
}

.gj-banner--customer .gj-banner__avatar-ring {
  background: conic-gradient(from 0deg, var(--gj-chrome-accent2), var(--gj-luxe-light), var(--gj-chrome-glow), transparent 64%, var(--gj-chrome-accent2));
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--gj-chrome-accent2) 60%, transparent));
}

.gj-banner--customer .gj-banner__name {
  background-image: linear-gradient(90deg, var(--theme-chrome-ink) 0%, var(--gj-chrome-accent2) 30%, var(--gj-luxe-light) 45%, var(--gj-chrome-glow) 70%, var(--theme-chrome-ink) 100%);
  background-size: 250% 100%;
  animation-duration: 6s;
}

.gj-banner--customer .gj-banner__chip--plan {
  position: relative;
  color: var(--theme-chrome-ink);
}

/* Glow lives on a pseudo-element so the pulse animates opacity only. */
.gj-banner--customer .gj-banner__chip--plan::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 18px -3px color-mix(in srgb, var(--gj-chrome-accent2) 65%, transparent);
  opacity: 0;
  pointer-events: none;
  animation: gj-customer-chip-glow 2.8s ease-in-out 1.3s infinite alternate;
}

/* Entrance: the banner content settles in with the page. No delays and no fade from transparent,
   so a reload never shows an empty banner while the content catches up. */
.gj-banner--customer .gj-banner__avatar,
.gj-banner--customer .gj-banner__intro > *,
.gj-banner--customer .gj-banner__clock,
.gj-banner--customer .gj-banner__chip {
  animation: gj-customer-settle .4s cubic-bezier(.2, .8, .2, 1);
}

/* Site: field patrol — dot grid, sweeping scan beam, hi-vis contour rings. */
.gj-banner--site .gj-banner__fx {
  background: radial-gradient(circle, var(--theme-chrome-glass-strong) 1px, transparent 1.6px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(270deg, #000 10%, transparent 80%);
  mask-image: linear-gradient(270deg, #000 10%, transparent 80%);
}

.gj-banner--site .gj-banner__fx-a {
  top: 0;
  bottom: 0;
  left: 0;
  width: 140px;
  background:
    linear-gradient(90deg, transparent calc(100% - 1px), var(--gj-chrome-glow-line) 0),
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--gj-chrome-glow) 20%, transparent));
  animation: gj-chrome-scan-across 6.5s cubic-bezier(.45, 0, .55, 1) infinite;
}

.gj-banner--site .gj-banner__fx-b {
  right: -140px;
  bottom: -220px;
  width: 460px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 26px, color-mix(in srgb, var(--gj-chrome-accent2) 16%, transparent) 27px 28px);
  -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent);
  mask-image: radial-gradient(closest-side, #000 50%, transparent);
  animation: gj-chrome-breathe 6s ease-in-out infinite;
}

.gj-banner--site .gj-banner__fx-c {
  top: -50%;
  right: 8%;
  width: 40%;
  height: 150%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--gj-chrome-accent2) 18%, transparent), transparent);
  animation: gj-chrome-breathe 4.5s ease-in-out infinite;
}

.gj-banner__content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 24px;
}

.gj-banner__identity {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1 1 360px;
  min-width: 0;
}

.gj-banner__avatar {
  position: relative;
  flex: 0 0 68px;
  width: 68px;
  height: 68px;
  padding: 0;
  background: none;
  border-radius: 50%;
}

.gj-banner__avatar-ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--gj-chrome-glow), var(--gj-chrome-accent2), transparent 62%, var(--gj-chrome-glow));
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
}

.gj-banner--platform .gj-banner__avatar-ring { animation: gj-chrome-spin 4s linear infinite; }
.gj-banner--customer .gj-banner__avatar-ring { animation: gj-chrome-spin 14s linear infinite; }
.gj-banner--site .gj-banner__avatar-ring { animation: gj-chrome-spin 9s linear infinite reverse; }

.gj-banner--site .gj-banner__avatar::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 2px solid var(--gj-chrome-glow);
  border-radius: 50%;
  pointer-events: none;
  animation: gj-chrome-ping 3s cubic-bezier(0, 0, .2, 1) infinite;
}

.gj-banner__avatar-img,
.gj-banner__avatar-fallback,
.gj-banner .avatar-img,
.gj-banner .avatar-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 2px solid var(--app-context-deeper);
  border-radius: 50%;
  object-fit: cover;
}

.gj-banner__avatar-fallback,
.gj-banner .avatar-fallback {
  color: var(--app-context-deeper);
  background: linear-gradient(135deg, var(--gj-chrome-glow), var(--gj-chrome-accent2));
  font-size: 1.55rem;
  font-weight: 800;
}

.gj-banner__presence {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 15px;
  height: 15px;
  border: 3px solid var(--app-context-deeper);
}

.gj-banner__intro {
  min-width: 0;
}

.gj-banner .dashboard-eyebrow,
.gj-banner__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  color: var(--gj-chrome-icon) !important;
  background: var(--gj-chrome-glow-soft);
  border: 1px solid var(--gj-chrome-glow-line);
  border-radius: 999px;
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.gj-banner .dashboard-welcome-title,
.gj-banner h1,
.gj-banner h2 {
  margin: 10px 0 8px;
  color: var(--theme-chrome-ink) !important;
  font-size: clamp(1.35rem, 2.2vw, 1.95rem);
  font-weight: 750;
  letter-spacing: -.015em;
  line-height: 1.15;
}

.gj-banner__name {
  color: transparent;
  background: linear-gradient(90deg, var(--theme-chrome-ink) 0%, var(--gj-chrome-glow) 55%, var(--gj-chrome-accent2) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: gj-chrome-text-flow 8s ease-in-out infinite alternate;
}

.gj-banner__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.gj-banner .dashboard-role-badge,
.gj-banner__role {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  color: var(--theme-chrome-ink) !important;
  background: var(--theme-chrome-glass-strong) !important;
  border: 1px solid var(--theme-chrome-line) !important;
  border-radius: 999px !important;
  font-size: .72rem;
  font-weight: 700;
}

.gj-banner__role i {
  color: var(--gj-chrome-accent2);
}

.gj-banner__email {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  color: var(--theme-chrome-muted);
  font-size: .8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gj-banner__clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 210px;
  margin-left: auto;
  padding: 14px 18px;
  background: var(--theme-chrome-glass);
  border: 1px solid var(--theme-chrome-line);
  border-radius: var(--gj-radius-lg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.gj-banner__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: color-mix(in srgb, var(--theme-online) 70%, var(--theme-chrome-ink));
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.gj-banner__status > span {
  width: 7px;
  height: 7px;
}

.gj-banner__time {
  color: var(--theme-chrome-ink);
  font-size: 1.65rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  line-height: 1.1;
}

.gj-banner__date {
  color: var(--theme-chrome-muted);
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
}

.gj-banner__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--theme-chrome-line);
}

.gj-banner__chip,
.gj-banner .chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  color: color-mix(in srgb, var(--theme-chrome-ink) 88%, transparent);
  background: var(--theme-chrome-glass);
  border: 1px solid var(--theme-chrome-line);
  border-radius: 999px;
  font-size: .74rem;
}

.gj-banner__chip i {
  color: var(--gj-chrome-glow);
}

.gj-banner__chip strong {
  color: var(--theme-chrome-ink);
  font-weight: 700;
  letter-spacing: .06em;
}

.gj-banner__chip--plan {
  background: color-mix(in srgb, var(--gj-chrome-accent2) 10%, transparent);
  border-color: color-mix(in srgb, var(--gj-chrome-accent2) 34%, transparent);
}

.gj-banner__chip--plan i {
  color: var(--gj-chrome-accent2);
}

/* ---------- Persona motion ---------- */
@keyframes gj-chrome-spin {
  to { transform: rotate(360deg); }
}

@keyframes gj-chrome-drift {
  0% { transform: translate3d(-6%, -4%, 0) scale(1); }
  100% { transform: translate3d(6%, 5%, 0) scale(1.12); }
}

@keyframes gj-chrome-breathe {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

@keyframes gj-chrome-sheen {
  0% { transform: translateX(-120%); }
  45%, 100% { transform: translateX(120%); }
}

@keyframes gj-chrome-ping {
  0% { opacity: .8; transform: scale(1); }
  80%, 100% { opacity: 0; transform: scale(1.45); }
}

@keyframes gj-chrome-scan-across {
  0% { transform: translateX(-160px); }
  100% { transform: translateX(calc(100vw)); }
}

@keyframes gj-chrome-scan-down {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(380px); opacity: 0; }
}

@keyframes gj-chrome-rail-in {
  from { opacity: 0; transform: scaleY(.2); }
  to { opacity: 1; transform: scaleY(1); }
}

@keyframes gj-chrome-online {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--theme-online) 45%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px transparent; }
}

@keyframes gj-chrome-text-flow {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

/* Distances match the dust tile heights so the loop is seamless. */
@keyframes gj-customer-dust-a {
  to { transform: translateY(-220px); }
}

@keyframes gj-customer-dust-b {
  to { transform: translateY(-160px); }
}

@keyframes gj-customer-twinkle {
  0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
  45%, 55% { opacity: 1; transform: scale(1) rotate(45deg); }
}

@keyframes gj-customer-halo {
  0%, 100% { opacity: .35; transform: scale(.92); }
  50% { opacity: .9; transform: scale(1.06); }
}

@keyframes gj-customer-chip-glow {
  to { opacity: 1; }
}

@keyframes gj-customer-settle {
  from { transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .gj-ui .gj-sidebar *,
  .gj-ui .gj-sidebar *::before,
  .gj-ui .gj-sidebar *::after,
  .gj-banner *,
  .gj-banner *::before,
  .gj-banner *::after {
    animation: none !important;
  }
}

.gj-workspace-panel {
  margin-top: 16px;
  padding: 18px;
  color: var(--gj-color-text);
  background: var(--gj-color-surface) !important;
  border: 1px solid var(--gj-color-border) !important;
  border-radius: var(--gj-radius-md) !important;
  box-shadow: 0 7px 20px rgba(35, 48, 60, .05) !important;
}

@media (min-width: 992px) {
  .gj-ui .gj-sidebar {
    left: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .gj-shell .gj-shell__content {
    margin-left: var(--gj-shell-sidebar-width) !important;
  }

  .gj-shell:has(.gj-sidebar.collapsed) .gj-shell__content {
    margin-left: var(--gj-shell-sidebar-collapsed) !important;
  }

  .gj-shell:has(.gj-sidebar) .app-footer {
    left: var(--gj-shell-sidebar-width) !important;
  }

  .gj-shell:has(.gj-sidebar.collapsed) .app-footer {
    left: var(--gj-shell-sidebar-collapsed) !important;
  }
}

@media (max-width: 767.98px) {
  .gj-shell .gj-shell__content {
    padding: 16px 13px calc(var(--gj-shell-footer-height) + 20px) !important;
  }

  .gj-banner {
    padding: 18px 16px !important;
  }

  .gj-banner__identity {
    flex-basis: 100%;
    align-items: flex-start;
    gap: 14px;
  }

  .gj-banner__avatar {
    flex-basis: 54px;
    width: 54px;
    height: 54px;
  }

  .gj-banner__clock {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    width: 100%;
    min-width: 0;
    margin-left: 0;
    padding: 10px 14px;
  }

  .gj-banner__time {
    font-size: 1.15rem;
  }

  /* Phones: keep the dust and stars off the stacked title and email. */
  .gj-banner__luxe::before,
  .gj-banner__luxe::after {
    -webkit-mask-image: linear-gradient(90deg, transparent 50%, #000 90%);
    mask-image: linear-gradient(90deg, transparent 50%, #000 90%);
  }

  .gj-banner__luxe > i:nth-child(-n+3),
  .gj-banner__luxe > i:nth-child(5),
  .gj-banner__luxe > i:nth-child(6) {
    display: none;
  }

  .gj-banner__chips {
    margin-top: 14px;
    padding-top: 12px;
  }

  .gj-workspace-panel {
    padding: 12px;
  }
}


/* Arrival after sign-in: continues the sign-in curtain (gj-auth-stage.css .gj-launch), then lifts
   it while the workspace rises in. html.gj-arrival is set before first paint by base.html and
   removed by gj-ui.js; it is never set under prefers-reduced-motion. */
html.gj-arrival body::after {
  position: fixed;
  inset: 0;
  z-index: 3000;
  content: "";
  pointer-events: none;
  /* Same colors as the sign-in curtain (auth pages use the guest palette) so it reads as one curtain. */
  background:
    radial-gradient(50% 60% at 50% 40%, color-mix(in srgb, var(--theme-customer-glow) 22%, transparent), transparent 70%),
    linear-gradient(160deg, var(--theme-customer-deep), var(--theme-customer-deeper));
  animation: gj-arrival-lift .8s cubic-bezier(.22, 1, .36, 1) .12s both;
}
html.gj-arrival main { animation: gj-arrival-rise .8s cubic-bezier(.22, 1, .36, 1) .25s both; }
@keyframes gj-arrival-lift { to { opacity: 0; transform: scale(1.06); visibility: hidden; } }
@keyframes gj-arrival-rise { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) {
  html.gj-arrival body::after { display: none; }
  html.gj-arrival main { animation: none; }
}

/* Page loader: shown by gj-ui.js while the server prepares the next page.
   A top progress bar starts at once; a translucent overlay follows if it takes a moment. */
.gj-loader-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4001;
  width: 100%;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--app-context, #087f78), var(--app-context-glow, #5fe0cf), var(--app-context-accent2, #e6bd5c));
  box-shadow: 0 0 12px color-mix(in srgb, var(--app-context-glow, #5fe0cf) 70%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  animation: gj-loader-trickle 12s cubic-bezier(.08, .7, .2, 1) forwards;
}
.gj-loader {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--gj-color-bg, #f6f8fb) 42%, transparent);
  backdrop-filter: blur(2px) saturate(110%);
  -webkit-backdrop-filter: blur(2px) saturate(110%);
  animation: gj-loader-in .25s ease-out both;
}
.gj-loader__card {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem 1.2rem .85rem .9rem;
  color: var(--gj-color-text, #172033);
  background: color-mix(in srgb, var(--gj-color-surface, #fff) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--gj-color-border, #dfe5ec) 80%, transparent);
  border-radius: 999px;
  box-shadow: 0 2px 4px rgb(16 24 40 / .06), 0 16px 32px -14px rgb(16 24 40 / .28);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  animation: gj-loader-pop .35s cubic-bezier(.34, 1.56, .64, 1) both;
}
.gj-loader__spinner {
  position: relative;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 20%, var(--app-context, #087f78) 75%, var(--app-context-glow, #5fe0cf));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
  animation: gj-loader-spin .8s linear infinite;
}
.gj-loader__text { display: grid; line-height: 1.2; }
.gj-loader__text strong { font-size: .92rem; font-weight: 800; }
.gj-loader__text small { color: var(--gj-color-muted, #667085); font-size: .78rem; }
[data-bs-theme="dark"] .gj-loader { background: color-mix(in srgb, var(--gj-color-bg, #11171d) 50%, transparent); }
[data-bs-theme="dark"] .gj-loader__card { box-shadow: 0 16px 36px -14px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .05); }
/* A tab that is opening shows a spinner in place of its icon. */
.gj-tab-spinner {
  display: inline-block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: gj-loader-spin .7s linear infinite;
}
.is-loading > .gj-tab-spinner + i.bi,
.is-loading > .gj-tab-spinner + .bi { display: none; }
.gj-sidebar__link.is-loading { cursor: progress; }
@keyframes gj-loader-trickle { 0% { transform: scaleX(0); } 10% { transform: scaleX(.35); } 40% { transform: scaleX(.7); } 100% { transform: scaleX(.92); } }
@keyframes gj-loader-in { from { opacity: 0; } }
@keyframes gj-loader-pop { from { opacity: 0; transform: translateY(6px) scale(.96); } }
@keyframes gj-loader-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .gj-loader-bar { animation: none; transform: scaleX(.6); }
  .gj-loader,
  .gj-loader__card { animation: none; }
  .gj-loader__spinner,
  .gj-tab-spinner { animation-duration: 2.4s; }
}


/* Animated sidebar collapse button: gradient icon tile that springs around, a light sweep on
   hover, and a pulse ring on click. Content beside the sidebar slides with it. */
.gj-ui .gj-sidebar__toggle { position: relative; isolation: isolate; overflow: hidden; }
.gj-ui .gj-sidebar__toggle::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--app-context-glow) 28%, transparent) 50%, transparent 70%);
  transform: translateX(-120%);
}
.gj-ui .gj-sidebar__toggle:hover::before { transition: transform .8s cubic-bezier(.22, 1, .36, 1); transform: translateX(120%); }
.gj-ui .gj-sidebar__toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--app-context-glow) 55%, transparent); outline-offset: 2px; }
.gj-ui .gj-sidebar__toggle-icon {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  place-items: center;
  color: #04201d;
  background: linear-gradient(135deg, var(--app-context-glow), var(--app-context-accent2));
  border-radius: 9px;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--app-context-glow) 80%, transparent);
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease;
}
.gj-ui .gj-sidebar__toggle-icon i { font-size: .8rem; color: inherit !important; transition: transform .25s ease; }
.gj-ui .gj-sidebar__toggle:hover .gj-sidebar__toggle-icon { box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--app-context-glow) 95%, transparent); transform: scale(1.08); }
.gj-ui .gj-sidebar__toggle:hover .gj-sidebar__toggle-icon i { transform: translateX(-2px); }
.gj-ui .gj-sidebar__toggle:active .gj-sidebar__toggle-icon { transform: scale(.92); }
.gj-ui .gj-sidebar.collapsed .gj-sidebar__toggle-icon { transform: rotate(180deg); }
.gj-ui .gj-sidebar.collapsed .gj-sidebar__toggle:hover .gj-sidebar__toggle-icon { transform: rotate(180deg) scale(1.08); }
.gj-ui .gj-sidebar.collapsed .gj-sidebar__toggle .gj-sidebar__toggle-icon i { transform: none; }
.gj-ui .gj-sidebar.collapsed .gj-sidebar__toggle:hover .gj-sidebar__toggle-icon i { transform: translateX(-2px); }
.gj-ui .gj-sidebar__toggle-icon::after {
  position: absolute;
  inset: -4px;
  content: "";
  border: 2px solid color-mix(in srgb, var(--app-context-glow) 70%, transparent);
  border-radius: 12px;
  opacity: 0;
}
.gj-ui .gj-sidebar__toggle.is-pulsing .gj-sidebar__toggle-icon::after { animation: gj-sidebar-toggle-pulse .6s ease-out; }
@keyframes gj-sidebar-toggle-pulse { from { opacity: .9; transform: scale(.85); } to { opacity: 0; transform: scale(1.5); } }
@media (min-width: 992px) {
  .gj-shell .gj-shell__content { transition: margin-left .3s cubic-bezier(.22, 1, .36, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .gj-ui .gj-sidebar__toggle::before { display: none; }
  .gj-ui .gj-sidebar__toggle-icon,
  .gj-ui .gj-sidebar__toggle-icon i,
  .gj-shell .gj-shell__content { transition: none; }
  .gj-ui .gj-sidebar__toggle.is-pulsing .gj-sidebar__toggle-icon::after { animation: none; }
}


/* Sidebar Upgrade card (sidebar.html, filled by subscription-nav.js): a glowing border that
   circles the card, a floating gem tile, and a light sweep on hover. */
@property --gj-upgrade-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.gj-ui .gj-sidebar__upgrade {
  --upgrade-a: var(--app-context-glow);
  --upgrade-b: var(--app-context-accent2);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-shrink: 0; /* the sidebar is a fixed-height flex column; a long menu must scroll, not squash this */
  align-items: center;
  gap: 10px;
  margin: 8px 14px 4px;
  padding: 10px 12px;
  overflow: hidden;
  color: var(--theme-chrome-ink);
  text-decoration: none;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--app-context-deep) 92%, #000), var(--app-context-deeper)) padding-box,
    conic-gradient(from var(--gj-upgrade-angle), var(--upgrade-a), var(--upgrade-b), transparent 40%, var(--upgrade-a)) border-box;
  border: 1.5px solid transparent;
  border-radius: 14px;
  box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--upgrade-a) 80%, transparent);
  animation: gj-upgrade-orbit 5s linear infinite;
  transition: transform .2s ease, box-shadow .2s ease;
}
.gj-ui .gj-sidebar__upgrade[hidden] { display: none; }
.gj-ui .gj-sidebar__upgrade[data-tone="warning"] { --upgrade-a: #f5c46c; --upgrade-b: #fb923c; }
.gj-ui .gj-sidebar__upgrade[data-tone="danger"] { --upgrade-a: #fda29b; --upgrade-b: #f97066; }
.gj-ui .gj-sidebar__upgrade::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .16) 50%, transparent 70%);
  transform: translateX(-120%);
}
.gj-ui .gj-sidebar__upgrade:hover { color: var(--theme-chrome-ink); box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--upgrade-a) 95%, transparent); transform: translateY(-1px); }
.gj-ui .gj-sidebar__upgrade:hover::before { transition: transform .9s cubic-bezier(.22, 1, .36, 1); transform: translateX(120%); }
.gj-ui .gj-sidebar__upgrade:focus-visible { outline: 3px solid color-mix(in srgb, var(--upgrade-a) 60%, transparent); outline-offset: 2px; }
.gj-ui .gj-sidebar__upgrade-icon {
  display: grid;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #04201d;
  background: linear-gradient(135deg, var(--upgrade-a), var(--upgrade-b));
  border-radius: 10px;
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--upgrade-a) 90%, transparent);
  animation: gj-upgrade-float 3.2s ease-in-out infinite;
}
.gj-ui .gj-sidebar__upgrade-icon i { color: inherit !important; font-size: .95rem; }
.gj-ui .gj-sidebar .gj-sidebar__upgrade-copy { display: grid; flex: 1 1 0; min-width: 0; line-height: 1.2; white-space: normal; }
.gj-ui .gj-sidebar .gj-sidebar__upgrade-copy strong { display: -webkit-box; overflow: hidden; font-size: .82rem; font-weight: 800; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.gj-ui .gj-sidebar .gj-sidebar__upgrade-copy small { overflow: hidden; color: var(--theme-chrome-muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.gj-ui .gj-sidebar__upgrade-go { margin-left: auto; color: var(--upgrade-a) !important; transition: transform .2s ease; }
.gj-ui .gj-sidebar__upgrade:hover .gj-sidebar__upgrade-go { transform: translateX(3px); }
.gj-ui .gj-sidebar.collapsed .gj-sidebar__upgrade { justify-content: center; margin-inline: 10px; padding: 8px 0; }
@keyframes gj-upgrade-orbit { to { --gj-upgrade-angle: 360deg; } }
@keyframes gj-upgrade-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2px) rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) {
  .gj-ui .gj-sidebar__upgrade,
  .gj-ui .gj-sidebar__upgrade-icon { animation: none; }
  .gj-ui .gj-sidebar__upgrade::before { display: none; }
}

/* ---------- Branch switcher (banner) and branch badges (MULTI_BRANCH_CONTRACT.md) ---------- */
.gj-branch-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 3px 4px 3px 12px;
  color: color-mix(in srgb, var(--theme-chrome-ink) 88%, transparent);
  background: color-mix(in srgb, var(--gj-chrome-glow) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gj-chrome-glow) 38%, transparent);
  border-radius: 999px;
  font-size: .74rem;
}
.gj-branch-switch > i { color: var(--gj-chrome-glow); }
.gj-branch-switch label { margin: 0; font-weight: 700; letter-spacing: .02em; }
.gj-ui .gj-branch-switch select {
  min-height: 28px;
  max-width: 15rem;
  padding: 2px 28px 2px 12px;
  color: var(--theme-chrome-ink) !important;
  background-color: var(--theme-chrome-glass-strong) !important;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  border: 1px solid var(--theme-chrome-line);
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 800;
  appearance: none;
  cursor: pointer;
}
.gj-ui .gj-branch-switch select option { color: var(--theme-ink); background: var(--theme-surface); }
.gj-branch-switch select:focus-visible { outline: 2px solid var(--gj-chrome-glow); outline-offset: 2px; }
.gj-branch-switch.is-busy { opacity: .7; pointer-events: none; }

.gj-branch-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  max-width: 100%;
  padding: .12rem .5rem;
  overflow: hidden;
  color: var(--app-context-dark, var(--theme-brand-dark));
  background: var(--app-context-soft, var(--theme-brand-soft));
  border: 1px solid var(--app-context-border, var(--theme-line));
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.gj-branch-badge i { font-size: .72rem; }
[data-bs-theme="dark"] .gj-branch-badge {
  color: color-mix(in srgb, var(--app-context-accent, #5fe0cf) 82%, #fff);
  background: color-mix(in srgb, var(--app-context-accent, #5fe0cf) 16%, transparent);
  border-color: color-mix(in srgb, var(--app-context-accent, #5fe0cf) 36%, transparent);
}
.gj-sidebar__lock { margin-left: auto; font-size: .72rem; opacity: .7; }
/* Unread count on a sidebar entry (Site Handover). The sidebar is dark chrome in both themes. */
.gj-sidebar__count {
  display: inline-grid; min-width: 1.35rem; height: 1.35rem; margin-left: auto; padding: 0 .38rem; place-items: center;
  color: #0b1520; background: var(--app-context-glow, #5fe0cf); border-radius: 999px;
  font-size: .68rem; font-weight: 850; line-height: 1; font-variant-numeric: tabular-nums;
}
.gj-sidebar.collapsed .gj-sidebar__count { position: absolute; top: .3rem; right: .55rem; min-width: 1.05rem; height: 1.05rem; font-size: .6rem; }
@media (max-width: 575.98px) {
  .gj-branch-switch { width: 100%; }
  .gj-ui .gj-branch-switch select { flex: 1; max-width: none; }
}

/* Credential warnings on schedule screens (schedule-credential-warnings.js; LICENSE_TRACKING_CONTRACT.md).
   Amber semantic tone in both themes; a warning only, so never the danger color. */
.gj-cred-warn {
  --cw-tone: var(--theme-warning);
  --cw-soft: color-mix(in srgb, var(--theme-warning) 12%, var(--theme-surface));
  display: grid; gap: .6rem; margin-top: .75rem; padding: .8rem .9rem;
  color: var(--theme-ink); background: var(--cw-soft);
  border: 1px solid color-mix(in srgb, var(--cw-tone) 35%, transparent); border-left: 4px solid var(--cw-tone);
  border-radius: var(--gj-radius-sm, .55rem); text-align: start;
}
.gj-cred-warn__head { display: flex; align-items: flex-start; gap: .6rem; }
.gj-cred-warn__head > i { display: inline-grid; flex: 0 0 2rem; width: 2rem; height: 2rem; place-items: center; color: var(--cw-tone); background: var(--theme-surface); border-radius: .6rem; font-size: 1rem; }
.gj-cred-warn__head strong { display: block; font-size: .86rem; font-weight: 900; }
.gj-cred-warn__head small { display: block; color: var(--theme-muted); font-size: .74rem; line-height: 1.4; }
.gj-cred-warn__list { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.gj-cred-warn__list li { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; padding: .45rem .55rem; background: var(--theme-surface); border: 1px solid var(--theme-line); border-radius: .5rem; font-size: .8rem; }
.gj-cred-warn__list li > small { color: var(--theme-muted); font-size: .72rem; font-weight: 700; }
.gj-cred-warn__site { color: var(--theme-muted); font-weight: 700; }
.gj-cred-warn__site::before { content: "· "; }
.gj-cred-warn__creds { display: flex; flex-wrap: wrap; gap: .3rem; width: 100%; }
.gj-cred-warn__chip { display: inline-flex; align-items: center; padding: .12rem .5rem; color: var(--theme-ink); background: var(--cw-soft); border: 1px solid color-mix(in srgb, var(--cw-tone) 30%, transparent); border-radius: 999px; font-size: .7rem; font-weight: 800; }
.gj-cred-warn__chip--missing, .gj-cred-warn__chip--expired, .gj-cred-warn__chip--rejected { border-color: color-mix(in srgb, var(--theme-danger) 40%, transparent); }
.gj-cred-warn__more { color: var(--theme-muted); font-size: .74rem; }
.schedule-toast--warning { border-left-color: var(--theme-warning); }
.schedule-toast--warning .schedule-toast__icon { color: var(--theme-warning); background: color-mix(in srgb, var(--theme-warning) 14%, transparent); }