/* /App.razor.rz.scp.css */
/* Auth gate styles now live in MainLayout.razor.css as the loading curtain */
/* /Layout/MainLayout.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────
   Page Shell
   ───────────────────────────────────────────────────────── */

.page[b-w0r6rhhs1e] {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--app-bg);
}

main[b-w0r6rhhs1e] {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────
   Sidebar
   ───────────────────────────────────────────────────────── */

.sidebar[b-w0r6rhhs1e] {
  background: linear-gradient(170deg, var(--app-navy) 0%, var(--app-navy-dark, #091A36) 100%);
  position: relative;
  flex-shrink: 0;
}

/* Micro dot-grid texture — adds depth without noise */
.sidebar[b-w0r6rhhs1e]::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
  z-index: 0;
}

/* ─────────────────────────────────────────────────────────
   Top Bar
   ───────────────────────────────────────────────────────── */

.top-row[b-w0r6rhhs1e] {
  background: var(--app-white);
  border-bottom: 1px solid var(--app-border);
  justify-content: flex-end;
  height: 58px;
  display: flex;
  align-items: center;
  padding: 0 1.75rem !important;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 1px 4px rgba(13,36,71,0.04);
}

/* ─────────────────────────────────────────────────────────
   Alpha Environment Banner
   ───────────────────────────────────────────────────────── */

.alpha-banner[b-w0r6rhhs1e] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.3rem 1rem;
  background: linear-gradient(90deg, #F59E0B, #D97706);
  color: #78350F;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.4;
  position: sticky;
  top: 58px;
  z-index: 19;
  text-align: center;
}

.alpha-banner-badge[b-w0r6rhhs1e] {
  display: inline-block;
  background: rgba(120, 53, 15, 0.18);
  color: #78350F;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.1rem 0.5rem;
  border-radius: 9999px;
  line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────
   Content Area
   ───────────────────────────────────────────────────────── */

article.content[b-w0r6rhhs1e] {
  flex: 1;
  padding: 2rem 2.25rem !important;
}

/* ─────────────────────────────────────────────────────────
   Unauthenticated layout — full-bleed branded background
   ───────────────────────────────────────────────────────── */

main.main-unauth[b-w0r6rhhs1e] {
  position: relative;
  background: linear-gradient(170deg, var(--app-navy) 0%, var(--app-navy-dark, #091A36) 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: clip;
  padding: 2.5rem 1rem;
}

/* Same dot-grid texture as the sidebar */
main.main-unauth[b-w0r6rhhs1e]::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
  z-index: 0;
}

/* Elevate content above dot-grid and orbs */
.auth-brand-header[b-w0r6rhhs1e],
main.main-unauth[b-w0r6rhhs1e]  article.content {
  position: relative;
  z-index: 1;
}

/* Let article size to its content so the brand header + card center as one group */
main.main-unauth article.content[b-w0r6rhhs1e] {
  flex: 0 0 auto;
  padding-top: 1rem !important;
}

/* ─────────────────────────────────────────────────────────
   Unauthenticated — centred branding header
   ───────────────────────────────────────────────────────── */

.auth-brand-header[b-w0r6rhhs1e] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem 0;
  gap: 0.6rem;
  animation: crm-slide-up 0.5s var(--app-ease) both;
}

.auth-brand-logo[b-w0r6rhhs1e] {
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px var(--app-teal-glow));
}

.auth-brand-name[b-w0r6rhhs1e] {
  font-family: 'Instrument Serif', serif;
  font-size: 1.75rem;
  font-weight: 400;
  color: #fff;
  letter-spacing: -0.01em;
}

/* ─────────────────────────────────────────────────────────
   Ambient Orbs — floating gradient blurs on login bg
   ───────────────────────────────────────────────────────── */

.auth-orb[b-w0r6rhhs1e] {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(80px);
  opacity: 0.35;
  will-change: transform;
}

.auth-orb-1[b-w0r6rhhs1e] {
  width: 400px;
  height: 400px;
  top: 5%;
  left: 5%;
  background: var(--app-teal);
  animation: crm-float-orb 20s ease-in-out infinite;
}

.auth-orb-2[b-w0r6rhhs1e] {
  width: 350px;
  height: 350px;
  bottom: 5%;
  right: 5%;
  background: var(--app-navy-400);
  animation: crm-float-orb 25s ease-in-out infinite reverse;
}

.auth-orb-3[b-w0r6rhhs1e] {
  width: 250px;
  height: 250px;
  top: 35%;
  left: 55%;
  background: var(--app-teal-600);
  animation: crm-float-orb 18s ease-in-out infinite 5s;
}

/* ─────────────────────────────────────────────────────────
   Loading Curtain — navy overlay that covers the entire
   viewport during initial load, then fades away to reveal
   the ready layout underneath.
   ───────────────────────────────────────────────────────── */

.load-curtain[b-w0r6rhhs1e] {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(170deg, var(--app-navy) 0%, var(--app-navy-dark, #091A36) 100%);
}

/* Dot-grid texture matching login + sidebar */
.load-curtain[b-w0r6rhhs1e]::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
}

.load-curtain-spinner[b-w0r6rhhs1e] {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.08);
  border-top-color: var(--app-teal);
  animation: curtain-spin-b-w0r6rhhs1e 0.7s linear infinite;
  position: relative;
  z-index: 1;
}

/* Fade-out state — played when layout is ready */
.load-curtain--out[b-w0r6rhhs1e] {
  animation: curtain-fade-out-b-w0r6rhhs1e 0.45s var(--app-ease) both;
}

@keyframes curtain-spin-b-w0r6rhhs1e {
  to { transform: rotate(360deg); }
}

@keyframes curtain-fade-out-b-w0r6rhhs1e {
  from { opacity: 1; }
  to   { opacity: 0; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  .load-curtain-spinner[b-w0r6rhhs1e] { animation: none; }
  .load-curtain--out[b-w0r6rhhs1e] { animation-duration: 0.01s; }
}

/* User Menu styles moved to Shared/UserMenu.razor.css so the component is styled
   wherever it's used (the staff shell here, plus the Member/Vendor portal top
   bars). The mobile-slot tweaks below stay here — they're about this layout's
   sidebar slot, not the component itself. */

/* ─────────────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────────────── */

@media (max-width: 640.98px) {
  .top-row[b-w0r6rhhs1e] { display: none; }
  article.content[b-w0r6rhhs1e] { padding: 1.25rem 1rem !important; }

  /* On mobile the window is the scroll container, but main has
     overflow:hidden (set above for desktop, where main IS the scroll
     container alongside a sticky sidebar). overflow:hidden also makes
     main a scrolling container for sticky positioning, which silently
     breaks `position: sticky` on any descendant — the sticky pins inside
     main (which never scrolls on mobile) instead of the viewport.
     `overflow: clip` keeps the visual clipping without registering as a
     scroll container, so descendant sticky elements pin to the viewport
     as expected. */
  main[b-w0r6rhhs1e] { overflow: clip; }

  .mobile-user-menu-slot[b-w0r6rhhs1e] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 0.875rem 0.5rem;
    position: relative;
    z-index: 1;
  }

  [b-w0r6rhhs1e] .mobile-user-menu-slot .user-display-name { display: none; }
  [b-w0r6rhhs1e] .mobile-user-menu-slot .user-caret { display: none; }

  /* Alpha banner: drop sticky on mobile (no top-row to anchor to) and
     condense to a slim inline strip so it scrolls with content instead
     of overlapping page H1s. */
  .alpha-banner[b-w0r6rhhs1e] {
    position: static;
    top: auto;
    z-index: auto;
    padding: 0.25rem 0.65rem;
    font-size: 0.7rem;
    line-height: 1.3;
    border-radius: 0;
    gap: 0.4rem;
  }
  .alpha-banner-badge[b-w0r6rhhs1e] {
    font-size: 0.6rem;
    padding: 0.05rem 0.4rem;
  }
}

@media (min-width: 641px) {
  .page[b-w0r6rhhs1e] { flex-direction: row; }

  .sidebar[b-w0r6rhhs1e] {
    width: 264px;
    height: 100vh;
    position: sticky;
    top: 0;
    transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
  }

  .sidebar.sidebar-collapsed[b-w0r6rhhs1e] {
    width: 64px;
  }

  main[b-w0r6rhhs1e] { flex: 1; overflow: auto; }

  article.content[b-w0r6rhhs1e] { min-height: calc(100vh - 58px); }
}

/* Collapsed sidebar — hide text, center icons */
[b-w0r6rhhs1e] .sidebar-collapsed .nav-label {
  opacity: 0;
  width: 0;
  overflow: hidden;
  pointer-events: none;
}

[b-w0r6rhhs1e] .sidebar-collapsed .nav-brand-text {
  opacity: 0;
  width: 0;
  overflow: hidden;
  pointer-events: none;
}

[b-w0r6rhhs1e] .sidebar-collapsed .nav-link {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

[b-w0r6rhhs1e] .sidebar-collapsed .bi {
  margin-right: 0;
  transform: scale(1.1);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              margin 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              opacity var(--app-fast) ease;
}

[b-w0r6rhhs1e] .sidebar-collapsed .nav-version {
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}

[b-w0r6rhhs1e] .sidebar-collapsed .nav-version-text {
  font-size: 0.55rem;
}

/* ─────────────────────────────────────────────────────────
   Mobile User Menu Slot
   ───────────────────────────────────────────────────────── */

.mobile-user-menu-slot[b-w0r6rhhs1e] { display: none; }

/* Mobile: restore nav labels even when sidebar is collapsed */
@media (max-width: 640.98px) {
  [b-w0r6rhhs1e] .sidebar-collapsed .nav-label {
    opacity: 1;
    width: auto;
    overflow: visible;
    pointer-events: auto;
  }

  [b-w0r6rhhs1e] .sidebar-collapsed .nav-brand-text {
    opacity: 1;
    width: auto;
    overflow: visible;
    pointer-events: auto;
  }

  [b-w0r6rhhs1e] .sidebar-collapsed .nav-link {
    justify-content: flex-start;
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }

  [b-w0r6rhhs1e] .sidebar-collapsed .bi {
    margin-right: 0.7rem;
  }
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────
   Nav Header (brand + collapse btn + mobile hamburger)
   ───────────────────────────────────────────────────────── */

.nav-header[b-rr6x2usjm0] {
  height: 58px;
  min-height: 58px;
  display: flex;
  align-items: center;
  padding: 0 0.875rem;
  border-bottom: none;
  position: relative;
  z-index: 1;
  gap: 0.25rem;
}

/* Gradient separator replacing solid border */
.nav-header[b-rr6x2usjm0]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0.875rem;
  right: 0.875rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12) 30%, rgba(255,255,255,0.12) 70%, transparent);
}

.nav-brand[b-rr6x2usjm0] {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff !important;
  letter-spacing: -0.01em;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  line-height: 1;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* Teal pulse dot — shown when no logo */
.nav-brand:not(:has(.nav-logo))[b-rr6x2usjm0]::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  min-width: 8px;
  background: var(--app-teal);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--app-teal-glow), 0 0 8px var(--app-teal-glow);
  flex-shrink: 0;
}

.nav-logo[b-rr6x2usjm0] {
  height: 26px;
  max-width: 80px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px var(--app-teal-glow));
}

.nav-brand-text[b-rr6x2usjm0] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity 0.18s ease, width 0.22s cubic-bezier(0.4,0,0.2,1);
}

/* ─────────────────────────────────────────────────────────
   Collapse Button (desktop chevron)
   ───────────────────────────────────────────────────────── */

.nav-collapse-btn[b-rr6x2usjm0] {
  display: none; /* shown only on desktop via media query */
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  transition: background var(--app-fast) ease;
}

.nav-collapse-btn:hover[b-rr6x2usjm0] {
  background: rgba(255,255,255,0.14);
}

/* Chevron arrow via CSS border trick */
.nav-collapse-icon[b-rr6x2usjm0] {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-left: 2px solid rgba(255,255,255,0.7);
  border-bottom: 2px solid rgba(255,255,255,0.7);
  transform: rotate(45deg) translateX(1px);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* When collapsed, flip chevron to point right */
.nav-collapse-icon.is-collapsed[b-rr6x2usjm0] {
  transform: rotate(-135deg) translateX(-1px);
}

/* ─────────────────────────────────────────────────────────
   Mobile Hamburger
   ───────────────────────────────────────────────────────── */

.nav-mobile-toggle[b-rr6x2usjm0] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  cursor: pointer;
  padding: 0 9px;
  flex-shrink: 0;
  transition: background var(--app-fast) ease;
}

.nav-mobile-toggle:hover[b-rr6x2usjm0] { background: rgba(255,255,255,0.15); }

.nav-mobile-toggle span[b-rr6x2usjm0] {
  display: block;
  height: 2px;
  width: 100%;
  background: rgba(255,255,255,0.8);
  border-radius: 2px;
}

/* ─────────────────────────────────────────────────────────
   Nav Body
   ───────────────────────────────────────────────────────── */

.nav-body[b-rr6x2usjm0] {
  padding: 0.875rem 0.75rem;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  z-index: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
  mask-image: linear-gradient(to bottom, transparent, black 20px, black calc(100% - 20px), transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 20px, black calc(100% - 20px), transparent);
}

.nav-body[b-rr6x2usjm0]::-webkit-scrollbar { width: 4px; }
.nav-body[b-rr6x2usjm0]::-webkit-scrollbar-track { background: transparent; }
.nav-body[b-rr6x2usjm0]::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

/* ─────────────────────────────────────────────────────────
   Nav Links
   ───────────────────────────────────────────────────────── */

.nav[b-rr6x2usjm0]  .nav-link {
  color: rgba(255,255,255,0.6);
  border-radius: 8px;
  height: 2.65rem;
  display: flex;
  align-items: center;
  padding: 0 0.875rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  border-left: 3px solid transparent;
  margin-bottom: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  transition: background-color var(--app-fast) ease,
              color var(--app-fast) ease,
              border-color var(--app-fast) ease,
              box-shadow var(--app-mid) var(--app-ease);
}

/* Animated left bar via pseudo-element */
.nav[b-rr6x2usjm0]  .nav-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.3);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--app-mid) var(--app-ease),
              background var(--app-fast) ease,
              box-shadow var(--app-fast) ease;
}

.nav[b-rr6x2usjm0]  .nav-link:hover {
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.07);
  border-left-color: transparent;
}

.nav[b-rr6x2usjm0]  .nav-link:hover::before {
  transform: scaleY(1);
}

.nav[b-rr6x2usjm0]  .nav-link.active {
  color: #fff;
  background: linear-gradient(90deg, var(--app-teal-50) 0%, transparent 70%);
  border-left-color: transparent;
  font-weight: 600;
  box-shadow: -4px 0 16px var(--app-teal-glow),
              inset 4px 0 12px var(--app-teal-50);
}

.nav[b-rr6x2usjm0]  .nav-link.active::before {
  transform: scaleY(1);
  background: var(--app-teal);
  box-shadow: 0 0 8px var(--app-teal-glow);
}

/* ── Skeleton nav items ── */

.nav-skel-item[b-rr6x2usjm0] {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.875rem;
  animation: crm-fade-in 0.3s var(--app-ease) both;
}

.nav-skel-icon[b-rr6x2usjm0] {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  flex-shrink: 0;
}

.nav-skel-label[b-rr6x2usjm0] {
  height: 12px;
  border-radius: 3px;
}

.nav-divider[b-rr6x2usjm0] {
  flex: 1;
  min-height: 1rem;
  display: flex;
  align-items: flex-end;
  padding-bottom: 0.5rem;
}

.nav-divider[b-rr6x2usjm0]::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0.08) 70%, transparent);
}

.nav.flex-column[b-rr6x2usjm0] {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* ─────────────────────────────────────────────────────────
   Nav Labels
   ───────────────────────────────────────────────────────── */

.nav-label[b-rr6x2usjm0] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity 0.18s ease;
}

/* ─────────────────────────────────────────────────────────
   Inbox count badge — Data Accuracy / Pending approvals.
   These links only render when their count > 0, so the badge
   is always showing a non-zero number.
   ───────────────────────────────────────────────────────── */

.nav[b-rr6x2usjm0]  .nav-link .nav-count-badge {
  margin-left: auto;
  flex-shrink: 0;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.36rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--app-teal);
  border-radius: 999px;
  box-shadow: 0 0 8px var(--app-teal-glow);
}

/* Desktop collapsed (icon-only): shrink to a corner dot on the icon.
   .sidebar-collapsed lives on MainLayout's .sidebar (an ancestor of .nav);
   Blazor appends this component's scope id to .nav, so the ancestor match holds. */
@media (min-width: 641px) {
  .sidebar-collapsed .nav[b-rr6x2usjm0]  .nav-link .nav-count-badge {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    margin-left: 0;
    min-width: 0.95rem;
    height: 0.95rem;
    padding: 0 0.18rem;
    font-size: 0.58rem;
  }
}

/* ─────────────────────────────────────────────────────────
   Nav Icons
   ───────────────────────────────────────────────────────── */

.bi[b-rr6x2usjm0] {
  display: inline-block;
  position: relative;
  width: 1.05rem;
  height: 1.05rem;
  min-width: 1.05rem;
  margin-right: 0.7rem;
  top: -1px;
  background-size: cover;
  opacity: 0.6;
  flex-shrink: 0;
  transition: opacity var(--app-fast) ease,
              margin var(--app-fast) ease,
              transform var(--app-mid) var(--app-ease);
}

.nav[b-rr6x2usjm0]  .nav-link:hover .bi,
.nav[b-rr6x2usjm0]  .nav-link.active .bi {
  opacity: 1;
  transform: scale(1.08);
}

.bi-house-door-fill-nav-menu[b-rr6x2usjm0] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-building-nav-menu[b-rr6x2usjm0] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M4 2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1ZM4 5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1ZM7.5 5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1ZM4.5 8a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Z'/%3E%3Cpath d='M2 1a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V1Zm11 0H3v14h3v-2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V15h3V1Z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-rr6x2usjm0] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-person-badge-fill-nav-menu[b-rr6x2usjm0] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-people-fill-nav-menu[b-rr6x2usjm0] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7Zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3Cpath fill-rule='evenodd' d='M5.216 14A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216Z'/%3E%3Cpath d='M4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z'/%3E%3C/svg%3E");
}

.bi-geo-fill-nav-menu[b-rr6x2usjm0] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z'/%3E%3C/svg%3E");
}

.bi-calendar-check-fill-nav-menu[b-rr6x2usjm0] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M4 .5a.5.5 0 0 0-1 0V1H2a2 2 0 0 0-2 2v1h16V3a2 2 0 0 0-2-2h-1V.5a.5.5 0 0 0-1 0V1H4V.5zM16 14V5H0v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2zm-5.146-5.146-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708.708z'/%3E%3C/svg%3E");
}

.bi-bar-chart-fill-nav-menu[b-rr6x2usjm0] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M4 11H2v3h2zm5-4H7v7h2zm5-5h-2v12h2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm-5 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.bi-question-circle-fill-nav-menu[b-rr6x2usjm0] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z'/%3E%3C/svg%3E");
}

.bi-gear-fill-nav-menu[b-rr6x2usjm0] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z'/%3E%3C/svg%3E");
}

/* ─────────────────────────────────────────────────────────
   Edit Mode Bar
   ───────────────────────────────────────────────────────── */

.nav-edit-bar[b-rr6x2usjm0] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.875rem;
  background: rgba(0, 197, 168, 0.1);
  border-bottom: 2px solid var(--app-teal);
  gap: 0.5rem;
}

.nav-edit-label[b-rr6x2usjm0] {
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--app-teal);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.nav-edit-actions[b-rr6x2usjm0] {
  display: flex;
  gap: 0.375rem;
}

.nav-edit-done[b-rr6x2usjm0],
.nav-edit-cancel[b-rr6x2usjm0] {
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: background var(--app-fast) ease, opacity var(--app-fast) ease;
}

.nav-edit-done[b-rr6x2usjm0] {
  background: var(--app-teal);
  color: #fff;
}
.nav-edit-done:hover[b-rr6x2usjm0] { background: var(--app-teal-600); }
.nav-edit-done:disabled[b-rr6x2usjm0] { opacity: 0.6; cursor: not-allowed; }

.nav-edit-cancel[b-rr6x2usjm0] {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
}
.nav-edit-cancel:hover[b-rr6x2usjm0] { background: rgba(255,255,255,0.18); color: #fff; }

/* ─────────────────────────────────────────────────────────
   Editable Nav Item Row
   ───────────────────────────────────────────────────────── */

.nav-item-edit[b-rr6x2usjm0] {
  display: flex;
  align-items: center;
  height: 2.65rem;
  padding: 0 0.5rem;
  margin-bottom: 0.1rem;
  border-radius: 8px;
  border-left: 2.5px solid transparent;
  position: relative;
  transition: opacity var(--app-fast) ease,
              background var(--app-fast) ease,
              border-color var(--app-fast) ease;
  cursor: grab;
}

.nav-item-edit:hover[b-rr6x2usjm0] {
  background: rgba(255,255,255,0.05);
}

.nav-item-edit.is-hidden[b-rr6x2usjm0] {
  opacity: 0.35;
  border-left-color: rgba(255,255,255,0.15);
  border-left-style: dashed;
}

.nav-item-edit.is-dragging[b-rr6x2usjm0] {
  opacity: 0.5;
  background: rgba(0, 197, 168, 0.08);
}

.nav-drop-indicator[b-rr6x2usjm0] {
  position: absolute;
  top: -2px;
  left: 0.5rem;
  right: 0.5rem;
  height: 2px;
  background: var(--app-teal);
  border-radius: 1px;
  box-shadow: 0 0 6px rgba(0, 197, 168, 0.4);
  z-index: 2;
}

.nav-drag-handle[b-rr6x2usjm0] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  min-width: 1.25rem;
  color: rgba(255,255,255,0.25);
  font-size: 1rem;
  cursor: grab;
  transition: color var(--app-fast) ease;
}

.nav-item-edit:hover .nav-drag-handle[b-rr6x2usjm0] {
  color: rgba(255,255,255,0.5);
}

.nav-item-edit-content[b-rr6x2usjm0] {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: 0;
  overflow: hidden;
}

.nav-item-edit-content .bi[b-rr6x2usjm0] {
  display: inline-block;
  position: relative;
  width: 1.05rem;
  height: 1.05rem;
  min-width: 1.05rem;
  margin-right: 0.7rem;
  top: -1px;
  background-size: cover;
  opacity: 0.6;
  flex-shrink: 0;
}

.nav-item-edit-content .nav-label[b-rr6x2usjm0] {
  font-family: 'Outfit', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-visibility-toggle[b-rr6x2usjm0] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  min-width: 1.75rem;
  height: 1.75rem;
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: rgba(255,255,255,0.3);
  font-size: 0.85rem;
  transition: color var(--app-fast) ease, background var(--app-fast) ease;
  flex-shrink: 0;
}

.nav-visibility-toggle:hover[b-rr6x2usjm0] {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
}

.nav-visibility-toggle.is-visible[b-rr6x2usjm0] {
  color: var(--app-teal);
}

.nav-visibility-toggle.is-visible:hover[b-rr6x2usjm0] {
  color: var(--app-teal-600);
  background: rgba(0, 197, 168, 0.1);
}

/* Mobile reorder buttons — hidden on desktop */
.nav-mobile-reorder[b-rr6x2usjm0] {
  display: none;
  flex-direction: column;
  gap: 1px;
  margin-left: 0.25rem;
}

.nav-reorder-btn[b-rr6x2usjm0] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  background: none;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  color: rgba(255,255,255,0.4);
  font-size: 0.7rem;
  padding: 0;
  transition: color var(--app-fast) ease, background var(--app-fast) ease;
}

.nav-reorder-btn:hover:not(:disabled)[b-rr6x2usjm0] {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8);
}

.nav-reorder-btn:disabled[b-rr6x2usjm0] {
  opacity: 0.2;
  cursor: not-allowed;
}

/* ─────────────────────────────────────────────────────────
   Collapsible Group Header (normal mode)
   ───────────────────────────────────────────────────────── */

.nav-group-header[b-rr6x2usjm0] {
  display: flex;
  align-items: center;
  width: 100%;
  color: rgba(255,255,255,0.6);
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 8px;
  height: 2.65rem;
  padding: 0 0.875rem;
  margin-bottom: 0.1rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  transition: background-color var(--app-fast) ease, color var(--app-fast) ease;
}

.nav-group-header:hover[b-rr6x2usjm0] {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.9);
}

.nav-group-header .nav-custom-obj-icon[b-rr6x2usjm0] {
  font-size: 1rem;
  margin-right: 0.7rem;
  opacity: 0.7;
  transition: opacity var(--app-fast) ease;
}

.nav-group-header:hover .nav-custom-obj-icon[b-rr6x2usjm0] {
  opacity: 1;
}

.nav-group-chevron[b-rr6x2usjm0] {
  margin-left: auto;
  font-size: 0.75rem !important;
  opacity: 0.5;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  margin-right: 0 !important;
  background-image: none !important;
  transition: transform var(--app-mid) var(--app-ease), opacity var(--app-fast) ease;
}

.nav-group-header:not(.is-expanded) .nav-group-chevron[b-rr6x2usjm0] {
  transform: rotate(-90deg);
}

.nav-group-header.is-expanded .nav-group-chevron[b-rr6x2usjm0] {
  opacity: 0.75;
}

.nav-group-children[b-rr6x2usjm0] {
  animation: crm-fade-in 0.22s var(--app-ease) both;
}

/* Indented child links under a group header */
.nav[b-rr6x2usjm0]  .nav-link.is-group-child {
  padding-left: 2rem;
  height: 2.35rem;
  font-size: 0.82rem;
}

/* Section divider shown in edit mode above the first child of a group */
.nav-group-header-edit[b-rr6x2usjm0] {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.5rem 0.3rem 0.5rem;
  margin-top: 0.25rem;
  color: rgba(255,255,255,0.55);
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.nav-group-header-edit .nav-custom-obj-icon[b-rr6x2usjm0] {
  font-size: 0.9rem;
  opacity: 0.65;
  color: var(--app-teal);
}

.nav-item-edit.is-group-child[b-rr6x2usjm0] {
  margin-left: 0.75rem;
}

.nav-item-edit.is-group-child .nav-item-edit-content .nav-label[b-rr6x2usjm0] {
  font-size: 0.82rem;
}

/* ─────────────────────────────────────────────────────────
   Customize Button
   ───────────────────────────────────────────────────────── */

.nav-customize-btn[b-rr6x2usjm0] {
  display: flex;
  align-items: center;
  height: 2.25rem;
  padding: 0 0.875rem;
  margin-top: 0.25rem;
  background: none;
  border: none;
  border-radius: 8px;
  border-left: 2.5px solid transparent;
  cursor: pointer;
  color: rgba(255,255,255,0.3);
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  transition: color var(--app-fast) ease, background var(--app-fast) ease;
  white-space: nowrap;
  overflow: hidden;
}

.nav-customize-btn:hover[b-rr6x2usjm0] {
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.05);
}

.nav-customize-btn i[b-rr6x2usjm0] {
  font-size: 0.9rem;
  margin-right: 0.7rem;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────
   Reset Button
   ───────────────────────────────────────────────────────── */

.nav-reset-btn[b-rr6x2usjm0] {
  display: block;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.3);
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.5rem 0.875rem;
  transition: color var(--app-fast) ease;
}

.nav-reset-btn:hover[b-rr6x2usjm0] {
  color: rgba(255,255,255,0.55);
}

/* ─────────────────────────────────────────────────────────
   Version Badge
   ───────────────────────────────────────────────────────── */

.nav-version[b-rr6x2usjm0] {
  padding: 0.5rem 0.875rem 0.75rem;
  text-align: right;
}

.nav-version-text[b-rr6x2usjm0] {
  font-family: 'Outfit', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  color: rgba(255,255,255,0.18);
  letter-spacing: 0.04em;
  transition: color var(--app-fast) ease;
}

.nav-version:hover .nav-version-text[b-rr6x2usjm0] {
  color: rgba(255,255,255,0.35);
}

.alpha-badge[b-rr6x2usjm0] {
  display: inline-block;
  background: #F59E0B;
  color: #78350F;
  font-family: 'Outfit', sans-serif;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.1rem 0.4rem;
  border-radius: 9999px;
  margin-right: 0.35rem;
  vertical-align: middle;
  line-height: 1.4;
}

/* Custom object icons use Bootstrap Icons font (not SVG background) */
.nav-custom-obj-icon[b-rr6x2usjm0] {
  background-image: none !important;
  font-size: 1rem;
  line-height: 1.05rem;
  color: white;
  text-align: center;
}

/* ─────────────────────────────────────────────────────────
   Mobile
   ───────────────────────────────────────────────────────── */

@media (max-width: 640.98px) {
  .nav-collapse-btn[b-rr6x2usjm0] { display: none !important; }

  .nav-body[b-rr6x2usjm0] {
    max-height: 0;
    overflow: hidden;
    padding: 0 0.75rem;
    transition: max-height 0.32s var(--app-ease), padding 0.32s ease;
  }

  .nav-body.mobile-open[b-rr6x2usjm0] {
    max-height: 100vh;
    padding: 0.875rem 0.75rem;
  }

  /* Mobile: show up/down buttons, hide drag handle */
  .nav-drag-handle[b-rr6x2usjm0] { display: none; }
  .nav-mobile-reorder[b-rr6x2usjm0] { display: flex; }
}

/* ─────────────────────────────────────────────────────────
   Desktop
   ───────────────────────────────────────────────────────── */

@media (min-width: 641px) {
  .nav-mobile-toggle[b-rr6x2usjm0] { display: none; }

  .nav-collapse-btn[b-rr6x2usjm0] { display: flex; }

  .nav-body[b-rr6x2usjm0] {
    height: calc(100vh - 58px);
    overflow-y: auto;
  }
}
/* /Pages/Admin/AdminSettings.razor.rz.scp.css */
.admin-header p[b-5p718f5na8] { font-size: 0.95rem; margin-top: 0.25rem; }

/* ── Settings card (no hover lift) ────────────────────── */

[b-5p718f5na8] .settings-card { transition: none !important; }
[b-5p718f5na8] .settings-card:hover { transform: none !important; box-shadow: var(--app-shadow-sm) !important; }

/* Card containing the icon picker must sit above sibling cards so the dropdown panel clears them */
[b-5p718f5na8] .settings-card-picker { z-index: 10; }

/* ── Branding grid ─────────────────────────────────────── */

[b-5p718f5na8] .settings-grid { display: grid; gap: 2rem; }

@media (min-width: 900px) {
    [b-5p718f5na8] .settings-grid { grid-template-columns: 1fr 1fr; }
}

[b-5p718f5na8] .settings-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--app-text-2);
    margin-bottom: 0.2rem;
}

[b-5p718f5na8] .settings-section-desc { font-size: 0.82rem; color: var(--app-text-3); margin-bottom: 0.75rem; }

/* Logo */
[b-5p718f5na8] .logo-preview-wrap {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    background: var(--app-bg);
    border: 1px solid var(--app-border);
    border-radius: var(--app-r-sm);
    max-width: 320px;
    margin-bottom: 0.5rem;
}
[b-5p718f5na8] .logo-preview-img { max-height: 40px; max-width: 180px; object-fit: contain; }
[b-5p718f5na8] .logo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    max-width: 320px;
    background: var(--app-bg);
    border: 1px dashed var(--app-border-2);
    border-radius: var(--app-r-sm);
    color: var(--app-text-3);
    font-size: 0.825rem;
    margin-bottom: 0.5rem;
}

/* Colors */
[b-5p718f5na8] .color-fields { display: flex; flex-direction: column; gap: 1.1rem; }
[b-5p718f5na8] .color-field { display: flex; flex-direction: column; gap: 0.25rem; }
[b-5p718f5na8] .color-input-row { display: flex; align-items: center; gap: 0.5rem; }
[b-5p718f5na8] .color-swatch {
    width: 42px;
    height: 38px;
    border: 1px solid var(--app-border-2);
    border-radius: var(--app-r-sm);
    padding: 2px;
    cursor: pointer;
    background: none;
    flex-shrink: 0;
}
[b-5p718f5na8] .color-hex { width: 108px; font-family: 'Courier New', monospace; font-size: 0.875rem; letter-spacing: 0.04em; }
[b-5p718f5na8] .color-hint { font-size: 0.78rem; color: var(--app-text-3); }

/* Save row */
[b-5p718f5na8] .settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 1.75rem;
    margin-top: 1.75rem;
    border-top: 1px solid var(--app-border);
}

[b-5p718f5na8] .alert-success {
    background: var(--app-teal-50);
    border: 1px solid var(--app-teal);
    color: var(--app-teal-600);
    border-radius: var(--app-r-sm);
    font-size: 0.875rem;
    padding: 0.6rem 1rem;
}

/* ── Add user form ─────────────────────────────────────── */

[b-5p718f5na8] .add-user-form {
    background: var(--app-bg);
    border: 1px solid var(--app-border);
    border-radius: var(--app-r);
    padding: 1.25rem;
}

/* ── Role filter pills ─────────────────────────────────── */

[b-5p718f5na8] .role-filter { display: flex; gap: 0.4rem; flex-wrap: wrap; }

[b-5p718f5na8] .role-pill {
    padding: 0.3rem 0.875rem;
    background: var(--app-white);
    border: 1px solid var(--app-border-2);
    border-radius: 20px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--app-text-2);
    cursor: pointer;
    transition: background-color var(--app-fast) ease,
                border-color var(--app-fast) ease,
                color var(--app-fast) ease;
}

[b-5p718f5na8] .role-pill:hover { border-color: var(--app-navy); color: var(--app-navy); }

[b-5p718f5na8] .role-pill.active {
    background: var(--app-navy);
    border-color: var(--app-navy);
    color: #fff;
}

/* ── User table ────────────────────────────────────────── */

[b-5p718f5na8] .user-table { margin-bottom: 0; }

[b-5p718f5na8] .user-cell { display: flex; align-items: center; gap: 0.75rem; }

[b-5p718f5na8] .user-cell-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--app-navy) 0%, var(--app-navy-600) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}

[b-5p718f5na8] .user-cell-name { font-weight: 500; font-size: 0.9rem; }
[b-5p718f5na8] .user-cell-title { font-size: 0.78rem; color: var(--app-text-3); }

[b-5p718f5na8] .role-select {
    width: auto;
    min-width: 100px;
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
}

/* ── Delete confirmation ───────────────────────────────── */

[b-5p718f5na8] .delete-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(13,36,71,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    backdrop-filter: blur(2px);
}

[b-5p718f5na8] .delete-confirm-box {
    background: var(--app-white);
    border-radius: var(--app-r);
    box-shadow: var(--app-shadow-lift);
    padding: 1.75rem 2rem;
    max-width: 360px;
    width: 100%;
    animation: crm-slide-up 0.2s var(--app-ease) both;
}

/* ── Relationship Labels ───────────────────────────── */

[b-5p718f5na8] .label-group {
    border: 1px solid var(--app-border);
    border-radius: var(--app-r);
    overflow: hidden;
    background: var(--app-white);
    box-shadow: var(--app-shadow-xs);
}

[b-5p718f5na8] .label-group-header {
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--app-text-3);
    padding: 0.55rem 1rem;
    background: var(--app-bg);
    border-bottom: 1px solid var(--app-border);
    margin-bottom: 0;
}

[b-5p718f5na8] .label-group .user-table { margin-bottom: 0; }

[b-5p718f5na8] .label-group .user-table thead th {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--app-text-3);
    border-bottom-width: 1px;
    border-color: var(--app-border);
    padding: 0.5rem 0.75rem;
    background: var(--app-white);
}

[b-5p718f5na8] .label-group .user-table tbody td {
    padding: 0.6rem 0.75rem;
    vertical-align: middle;
    font-size: 0.87rem;
    border-color: var(--app-border);
}

[b-5p718f5na8] .label-group .user-table tbody tr:last-child td {
    border-bottom: none;
}

/* Relationship label badges */
[b-5p718f5na8] .rl-badge-promoted {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--app-teal-50);
    color: var(--app-teal-600);
    border: 1px solid var(--app-teal);
}

[b-5p718f5na8] .rl-badge-change {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--app-bg);
    color: var(--app-text-2);
    border: 1px solid var(--app-border-2);
}

[b-5p718f5na8] .rl-badge-builtin {
    display: inline-block;
    padding: 0.12rem 0.5rem;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 600;
    background: var(--app-surface-2);
    color: var(--app-text-2);
    border: 1px solid var(--app-border-2);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ── Audit log ─────────────────────────────────────── */

[b-5p718f5na8] .audit-filters { }

[b-5p718f5na8] .audit-count-bar { border-bottom: 1px solid var(--app-border); padding-bottom: 0.5rem; }

[b-5p718f5na8] .audit-table td { vertical-align: middle; }

/* Action badges */
[b-5p718f5na8] .audit-action-badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

[b-5p718f5na8] .audit-badge-auth    { background: var(--app-teal-50); color: var(--app-teal-600); border: 1px solid var(--app-teal); }
[b-5p718f5na8] .audit-badge-create  { background: #ecfdf5; color: #065f46; border: 1px solid #6ee7b7; }
[b-5p718f5na8] .audit-badge-update  { background: #eff6ff; color: #1e40af; border: 1px solid #93c5fd; }
[b-5p718f5na8] .audit-badge-delete  { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }
[b-5p718f5na8] .audit-badge-complete { background: #f0fdf4; color: #166534; border: 1px solid #86efac; }
[b-5p718f5na8] .audit-badge-neutral { background: var(--app-bg); color: var(--app-text-2); border: 1px solid var(--app-border-2); }

/* ── Built-in fields: search toolbar & sortable headers ── */

[b-5p718f5na8] .field-search-wrap {
    position: relative;
    flex: 1;
    max-width: 280px;
}

[b-5p718f5na8] .field-search-icon {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: var(--app-text-3);
    pointer-events: none;
    line-height: 1;
}

[b-5p718f5na8] .field-search-input {
    width: 100%;
    padding: 0.3rem 0.75rem 0.3rem 2rem;
    font-size: 0.82rem;
    font-family: inherit;
    color: var(--app-text-1, #111);
    background: var(--app-white, #fff);
    border: 1px solid var(--app-border-2, #d1d5db);
    border-radius: var(--app-r-sm);
    outline: none;
    transition: border-color var(--app-fast) ease, box-shadow var(--app-fast) ease;
    /* remove native x in webkit */
    -webkit-appearance: none;
}

[b-5p718f5na8] .field-search-input:focus {
    border-color: var(--app-navy);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-navy) 12%, transparent);
}

[b-5p718f5na8] .field-search-input::placeholder { color: var(--app-text-3); }

[b-5p718f5na8] .sortable-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color var(--app-fast) ease;
}

[b-5p718f5na8] .sortable-th:hover { color: var(--app-navy); }

[b-5p718f5na8] .sortable-th.sort-active { color: var(--app-navy); }

[b-5p718f5na8] .sort-icon {
    display: inline-block;
    font-size: 0.68rem;
    margin-left: 0.25rem;
    opacity: 0.35;
    vertical-align: middle;
    transition: opacity var(--app-fast) ease;
}

[b-5p718f5na8] .sort-icon.active { opacity: 1; }

[b-5p718f5na8] .sortable-th:hover .sort-icon { opacity: 0.7; }

/* Inline audit trail (used in entity detail pages) */
[b-5p718f5na8] .audit-trail { display: flex; flex-direction: column; gap: 0.6rem; }

[b-5p718f5na8] .audit-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: var(--app-bg);
    border: 1px solid var(--app-border);
    border-radius: var(--app-r-sm);
    font-size: 0.83rem;
}

[b-5p718f5na8] .audit-time { color: var(--app-text-2); }
[b-5p718f5na8] .audit-actor { font-weight: 500; }
[b-5p718f5na8] .audit-notes-inline { color: var(--app-text-3); font-style: italic; }

/* ── Feature Module cards ──────────────────────────── */

[b-5p718f5na8] .fm-module-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.15rem;
    background: var(--app-bg);
    border: 1px solid var(--app-border);
    border-left: 3px solid var(--app-border-2);
    border-radius: 0 var(--app-r-sm) var(--app-r-sm) 0;
    transition: border-color var(--app-mid) ease,
                background-color var(--app-mid) ease,
                box-shadow var(--app-mid) ease;
}

[b-5p718f5na8] .fm-module-card.fm-enabled {
    border-left-color: var(--app-teal);
    background: var(--app-white);
    box-shadow: var(--app-shadow-xs);
}

[b-5p718f5na8] .fm-module-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--app-r-sm);
    background: var(--app-surface-2);
    color: var(--app-text-3);
    flex-shrink: 0;
    transition: background-color var(--app-mid) ease, color var(--app-mid) ease;
}

[b-5p718f5na8] .fm-enabled .fm-module-icon {
    background: var(--app-teal-50);
    color: var(--app-teal-600);
}

[b-5p718f5na8] .fm-module-body {
    flex: 1;
    min-width: 0;
}

[b-5p718f5na8] .fm-module-title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--app-navy);
    margin-bottom: 0.2rem;
    line-height: 1.3;
}

[b-5p718f5na8] .fm-module-desc {
    font-size: 0.82rem;
    color: var(--app-text-2);
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

[b-5p718f5na8] .fm-status-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

[b-5p718f5na8] .fm-status-active {
    background: var(--app-teal-50);
    color: var(--app-teal-600);
    border: 1px solid var(--app-teal);
}

[b-5p718f5na8] .fm-status-inactive {
    background: var(--app-bg);
    color: var(--app-text-3);
    border: 1px solid var(--app-border-2);
}

[b-5p718f5na8] .fm-module-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    padding-top: 0.15rem;
}

/* =====================================================
   Custom Objects -- Sub-tabs
   ===================================================== */

[b-5p718f5na8] .co-subtab-bar {
    display: flex;
    gap: 0.15rem;
    background: var(--app-surface-2);
    border-radius: var(--app-r);
    padding: 3px;
    margin-bottom: 1.5rem;
    width: fit-content;
}

[b-5p718f5na8] .co-subtab {
    padding: 0.4rem 1.1rem;
    background: none;
    border: none;
    border-radius: calc(var(--app-r) - 2px);
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--app-text-2);
    cursor: pointer;
    transition: background-color var(--app-fast) ease,
                color var(--app-fast) ease,
                box-shadow var(--app-fast) ease;
    white-space: nowrap;
}

[b-5p718f5na8] .co-subtab:hover { color: var(--app-navy); }

[b-5p718f5na8] .co-subtab.active {
    background: var(--app-white);
    color: var(--app-navy);
    font-weight: 600;
    box-shadow: var(--app-shadow-xs);
}

/* =====================================================
   Settings -- Sub-tabs (reusable pill-bar)
   ===================================================== */

.settings-subtab-bar[b-5p718f5na8] {
    display: flex;
    gap: 0.15rem;
    background: var(--app-surface-2);
    border-radius: var(--app-r);
    padding: 3px;
    margin-bottom: 1.5rem;
    width: fit-content;
}

.settings-subtab[b-5p718f5na8] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1.1rem;
    background: none;
    border: none;
    border-radius: calc(var(--app-r) - 2px);
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--app-text-2);
    cursor: pointer;
    transition: background-color var(--app-fast) ease,
                color var(--app-fast) ease,
                box-shadow var(--app-fast) ease;
    white-space: nowrap;
    text-decoration: none;
}

.settings-subtab:hover[b-5p718f5na8] { color: var(--app-navy); }

.settings-subtab.active[b-5p718f5na8] {
    background: var(--app-white);
    color: var(--app-navy);
    font-weight: 600;
    box-shadow: var(--app-shadow-xs);
}

.settings-subtab i[b-5p718f5na8] {
    font-size: 0.85rem;
}

/* External link icon for nav-away sub-tabs */
.settings-subtab-ext[b-5p718f5na8] {
    font-size: 0.6rem;
    opacity: 0.4;
    margin-left: 0.1rem;
    transition: opacity var(--app-fast) ease;
}
.settings-subtab-link:hover .settings-subtab-ext[b-5p718f5na8] {
    opacity: 0.7;
}

/* =====================================================
   Master-Detail layout
   ===================================================== */

[b-5p718f5na8] .co-master-detail {
    display: grid;
    grid-template-columns: minmax(280px, 2fr) 3fr;
    gap: 1.25rem;
    align-items: start;
    min-height: 420px;
}

@media (max-width: 900px) {
    [b-5p718f5na8] .co-master-detail { grid-template-columns: 1fr; }
}

/* Left panel -- object type list */
[b-5p718f5na8] .co-master {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--app-border);
    border-radius: var(--app-r);
    background: var(--app-white);
    overflow: visible;
    box-shadow: var(--app-shadow-xs);
}

[b-5p718f5na8] .co-master-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--app-border);
    background: var(--app-bg);
    border-radius: var(--app-r) var(--app-r) 0 0;
}

[b-5p718f5na8] .co-master-search {
    flex: 1;
    padding: 0.3rem 0.6rem;
    font-size: 0.82rem;
    font-family: inherit;
    border: 1px solid var(--app-border-2);
    border-radius: var(--app-r-sm);
    background: var(--app-white);
    outline: none;
    transition: border-color var(--app-fast) ease, box-shadow var(--app-fast) ease;
}

[b-5p718f5na8] .co-master-search:focus {
    border-color: var(--app-navy);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-navy) 12%, transparent);
}

[b-5p718f5na8] .co-master-search::placeholder { color: var(--app-text-3); }

[b-5p718f5na8] .co-master-list {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 520px;
    padding: 6px;
}

[b-5p718f5na8] .co-master-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 1rem;
    border: none;
    border-bottom: 1px solid var(--app-border);
    background: var(--app-white);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background-color var(--app-fast) ease;
    position: relative;
    width: 100%;
}

[b-5p718f5na8] .co-master-item:last-child { border-bottom: none; }

[b-5p718f5na8] .co-master-item:hover { background: var(--app-bg); }

[b-5p718f5na8] .co-master-item.selected {
    background: var(--app-teal-50);
    border-left: 3px solid var(--app-teal);
    padding-left: calc(1rem - 3px);
}

[b-5p718f5na8] .co-master-item.selected:hover { background: var(--app-teal-50); }

[b-5p718f5na8] .co-master-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--app-r-sm);
    background: var(--app-surface-2);
    color: var(--app-navy-400);
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: background-color var(--app-fast) ease, color var(--app-fast) ease;
}

[b-5p718f5na8] .co-master-item.selected .co-master-icon {
    background: var(--app-teal-glow);
    color: var(--app-teal-600);
}

[b-5p718f5na8] .co-master-info { flex: 1; min-width: 0; }

[b-5p718f5na8] .co-master-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--app-navy);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-5p718f5na8] .co-master-meta {
    font-size: 0.72rem;
    color: var(--app-text-3);
    margin-top: 1px;
}

[b-5p718f5na8] .co-master-add {
    padding: 0.65rem 1rem;
    border-top: 1px solid var(--app-border);
    background: var(--app-bg);
    border-radius: 0 0 var(--app-r) var(--app-r);
}

/* Right panel -- detail/fields */
[b-5p718f5na8] .co-detail {
    border: 1px solid var(--app-border);
    border-radius: var(--app-r);
    background: var(--app-white);
    box-shadow: var(--app-shadow-xs);
    overflow: hidden;
}

[b-5p718f5na8] .co-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1.15rem;
    background: var(--app-bg);
    border-bottom: 1px solid var(--app-border);
}

[b-5p718f5na8] .co-detail-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--app-navy);
}

[b-5p718f5na8] .co-detail-title i {
    color: var(--app-teal-600);
    font-size: 1.1rem;
}

[b-5p718f5na8] .co-detail-body { padding: 1.15rem; }

[b-5p718f5na8] .co-detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 360px;
    color: var(--app-text-3);
    text-align: center;
    padding: 2rem;
}

[b-5p718f5na8] .co-detail-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.35;
}

[b-5p718f5na8] .co-detail-empty-text {
    font-size: 0.88rem;
    max-width: 240px;
    line-height: 1.5;
}

/* =====================================================
   SortableList -- context overrides (core styles in SortableList.razor.css)
   ===================================================== */

/* Field row inside sortable list */
[b-5p718f5na8] .sl-field-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--app-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

[b-5p718f5na8] .sl-field-key {
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.7rem;
    color: var(--app-text-3);
    background: var(--app-bg);
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    border: 1px solid var(--app-border);
}

[b-5p718f5na8] .sl-field-type {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    letter-spacing: 0.02em;
    /* Default coloring — overridden per type */
    background: var(--app-surface-2);
    color: var(--app-text-2);
}

/* Type-specific badge colors */
[b-5p718f5na8] .sl-field-type[data-type="Text"]        { background: #f0f4f8; color: #475569; }
[b-5p718f5na8] .sl-field-type[data-type="Note"]        { background: #f0f4f8; color: #475569; }
[b-5p718f5na8] .sl-field-type[data-type="Number"]      { background: #eff6ff; color: #1d4ed8; }
[b-5p718f5na8] .sl-field-type[data-type="Date"]        { background: #fdf4ff; color: #7e22ce; }
[b-5p718f5na8] .sl-field-type[data-type="Boolean"]     { background: #fffbeb; color: #b45309; }
[b-5p718f5na8] .sl-field-type[data-type="Dropdown"]    { background: var(--app-teal-50); color: var(--app-teal-600); }
[b-5p718f5na8] .sl-field-type[data-type="MultiSelect"] { background: var(--app-teal-50); color: var(--app-teal-600); }
[b-5p718f5na8] .sl-field-type[data-type="Url"]         { background: #eef2ff; color: #4338ca; }
[b-5p718f5na8] .sl-field-type[data-type="Email"]       { background: #fef2f2; color: #b91c1c; }
[b-5p718f5na8] .sl-field-type[data-type="Phone"]       { background: #ecfdf5; color: #047857; }

/* Field type icons (inserted via CSS) */
[b-5p718f5na8] .sl-field-type-icon {
    font-size: 0.72rem;
    flex-shrink: 0;
}

[b-5p718f5na8] .sl-field-badge {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

[b-5p718f5na8] .sl-field-badge.required {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

/* Required dot indicator (alternative to badge) */
[b-5p718f5na8] .sl-field-required-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ef4444;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px #fecaca;
}

/* Hover left accent on field rows */
[b-5p718f5na8] .sl-item:hover {
    border-left: 2px solid var(--app-navy-400);
    padding-left: calc(0.75rem - 2px);
}

[b-5p718f5na8] .sl-compact .sl-item:hover {
    padding-left: calc(0.6rem - 2px);
}

/* Action buttons inside sortable list */
[b-5p718f5na8] .sl-action-btn {
    padding: 0.15rem 0.5rem;
    font-size: 0.72rem;
    line-height: 1.3;
    border-radius: 4px;
}

/* co-master-item nesting fix -- selected state lifted to sl-item */
[b-5p718f5na8] .sl-content .co-master-item {
    padding: 0;
    border: none;
    background: transparent;
    width: 100%;
}

[b-5p718f5na8] .sl-content .co-master-item:hover {
    background: transparent;
}

[b-5p718f5na8] .sl-content .co-master-item.selected {
    background: transparent;
    border-left: none;
    padding-left: 0;
}

[b-5p718f5na8] .sl-item:has(.co-master-item.selected) {
    background: var(--app-teal-50);
    border-left: 3px solid var(--app-teal);
    padding-left: calc(0.75rem - 3px);
}

/* =====================================================
   Object type inline edit form (in detail panel)
   ===================================================== */

[b-5p718f5na8] .co-props-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.75rem;
    padding: 0.75rem 0;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--app-border);
    align-items: end;
}

@media (max-width: 700px) {
    [b-5p718f5na8] .co-props-form { grid-template-columns: 1fr; }
}

[b-5p718f5na8] .co-props-field label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--app-text-3);
    margin-bottom: 0.2rem;
    display: block;
}

/* =====================================================
   Built-in Entities -- master panel overrides
   ===================================================== */

[b-5p718f5na8] .bei-master-list {
    max-height: 560px;
}

[b-5p718f5na8] .bei-section-header {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--app-text-3);
    padding: 0.75rem 1rem 0.35rem;
    background: var(--app-white);
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid var(--app-border);
}

[b-5p718f5na8] .bei-section-header i {
    font-size: 0.8rem;
    color: var(--app-navy-400);
}

[b-5p718f5na8] .bei-section-group {
    margin-left: 0.75rem;
    border-left: 2px solid var(--app-border);
    margin-bottom: 0.5rem;
    position: relative;
}

/* Tree-rail connector dots at each item */
[b-5p718f5na8] .bei-section-group .bei-item::before {
    content: '';
    position: absolute;
    left: -0.75rem;
    top: 50%;
    width: 8px;
    height: 2px;
    background: var(--app-border);
    transform: translateX(-2px);
}

[b-5p718f5na8] .bei-section-group .bei-item {
    position: relative;
}

[b-5p718f5na8] .bei-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.85rem;
    border: none;
    border-bottom: 1px solid var(--app-border);
    background: var(--app-white);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background-color var(--app-fast) ease;
    width: 100%;
}

[b-5p718f5na8] .bei-item:last-child { border-bottom: none; }

[b-5p718f5na8] .bei-item:hover { background: var(--app-bg); }

[b-5p718f5na8] .bei-item.selected {
    background: var(--app-teal-50);
    border-left: 3px solid var(--app-teal);
    padding-left: calc(0.85rem - 3px);
}

[b-5p718f5na8] .bei-item.selected:hover { background: var(--app-teal-50); }

[b-5p718f5na8] .bei-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--app-r-sm);
    font-size: 0.8rem;
    flex-shrink: 0;
    color: var(--app-white);
    transition: background-color var(--app-fast) ease;
}

[b-5p718f5na8] .bei-icon-account { background: var(--app-navy-400); }
[b-5p718f5na8] .bei-icon-contact { background: var(--app-teal-600); }
[b-5p718f5na8] .bei-icon-workgroup { background: var(--app-navy-700); }
[b-5p718f5na8] .bei-icon-visit { background: var(--app-text-2); }

[b-5p718f5na8] .bei-item-info { flex: 1; min-width: 0; }

[b-5p718f5na8] .bei-item-name {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--app-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

[b-5p718f5na8] .bei-all-name { font-weight: 500; }

[b-5p718f5na8] .bei-item-badge {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--app-text-3);
    background: var(--app-surface-2);
    padding: 0.12rem 0.5rem;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity var(--app-fast) ease;
}

/* Dim badge when zero fields */
[b-5p718f5na8] .bei-item-badge.bei-badge-empty {
    opacity: 0.45;
    font-weight: 400;
}

/* Category-colored badges for items with fields */
[b-5p718f5na8] .bei-icon-account ~ .bei-item-info ~ .bei-item-badge:not(.bei-badge-empty) {
    background: rgba(58, 90, 150, 0.1);
    color: var(--app-navy-400);
}

[b-5p718f5na8] .bei-icon-contact ~ .bei-item-info ~ .bei-item-badge:not(.bei-badge-empty) {
    background: var(--app-teal-50);
    color: var(--app-teal-600);
}

[b-5p718f5na8] .bei-add-type {
    padding: 0.4rem 0.85rem;
    border-top: 1px solid var(--app-border);
    background: var(--app-bg);
}

[b-5p718f5na8] .bei-add-type-btn {
    font-size: 0.78rem;
    color: var(--app-text-3);
    padding: 0;
    text-decoration: none;
}

[b-5p718f5na8] .bei-add-type-btn:hover {
    color: var(--app-navy);
}

[b-5p718f5na8] .bei-detail-subtitle {
    font-size: 0.76rem;
    color: var(--app-text-3);
    font-style: italic;
    margin-top: 1px;
}

/* ── Detail header enhancements ── */

[b-5p718f5na8] .bei-detail-header-left {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

[b-5p718f5na8] .bei-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    color: var(--app-text-3);
}

[b-5p718f5na8] .bei-breadcrumb-sep {
    font-size: 0.55rem;
    opacity: 0.6;
}

[b-5p718f5na8] .bei-breadcrumb-current {
    color: var(--app-navy);
    font-weight: 600;
}

[b-5p718f5na8] .bei-detail-title-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

[b-5p718f5na8] .bei-detail-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--app-r);
    font-size: 1rem;
    flex-shrink: 0;
    color: var(--app-white);
}

[b-5p718f5na8] .bei-detail-actions {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

/* Overflow menu */
[b-5p718f5na8] .bei-overflow-menu {
    position: relative;
}

[b-5p718f5na8] .bei-overflow-btn {
    padding: 0.25rem 0.45rem;
    line-height: 1;
}

[b-5p718f5na8] .bei-overflow-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 160px;
    background: var(--app-white);
    border: 1px solid var(--app-border);
    border-radius: var(--app-r-sm);
    box-shadow: var(--app-shadow);
    z-index: 100;
    padding: 0.25rem 0;
    animation: bei-dropdown-in-b-5p718f5na8 0.12s var(--app-ease) both;
}

@keyframes bei-dropdown-in-b-5p718f5na8 {
    0%   { opacity: 0; transform: translateY(-4px) scale(0.97); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

[b-5p718f5na8] .bei-overflow-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.5rem 0.85rem;
    border: none;
    background: transparent;
    font-size: 0.82rem;
    color: var(--app-text);
    cursor: pointer;
    text-align: left;
    transition: background-color var(--app-fast) ease;
}

[b-5p718f5na8] .bei-overflow-item:hover {
    background: var(--app-bg);
}

[b-5p718f5na8] .bei-overflow-danger {
    color: #b91c1c;
}

[b-5p718f5na8] .bei-overflow-danger:hover {
    background: #fef2f2;
}

[b-5p718f5na8] .bei-overflow-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
}

/* ── Empty fields state ── */

[b-5p718f5na8] .bei-empty-fields {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    text-align: center;
    gap: 0.65rem;
}

[b-5p718f5na8] .bei-empty-fields-icon {
    font-size: 2rem;
    color: var(--app-border-2);
    line-height: 1;
}

[b-5p718f5na8] .bei-empty-fields-text {
    font-size: 0.85rem;
    color: var(--app-text-3);
}

/* bei-item nesting fix for SortableList */
[b-5p718f5na8] .sl-content .bei-item {
    padding: 0;
    border: none;
    background: transparent;
    width: 100%;
}

[b-5p718f5na8] .sl-content .bei-item:hover {
    background: transparent;
}

[b-5p718f5na8] .sl-content .bei-item.selected {
    background: transparent;
    border-left: none;
    padding-left: 0;
}

[b-5p718f5na8] .sl-item:has(.bei-item.selected) {
    background: var(--app-teal-50);
    border-left: 3px solid var(--app-teal);
    padding-left: calc(0.75rem - 3px);
}

/* =====================================================
   Email Settings
   ===================================================== */

[b-5p718f5na8] .em-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

[b-5p718f5na8] .em-dot-connected {
    background: var(--app-teal);
    box-shadow: 0 0 0 3px var(--app-teal-50);
}

[b-5p718f5na8] .em-dot-disconnected {
    background: var(--app-border-2);
    box-shadow: 0 0 0 3px var(--app-bg);
}

[b-5p718f5na8] .em-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

[b-5p718f5na8] .em-form-grid .form-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--app-text-2);
    margin-bottom: 0.2rem;
}

[b-5p718f5na8] .em-span-full { grid-column: 1 / -1; }

[b-5p718f5na8] .em-field-hint {
    display: block;
    font-size: 0.72rem;
    color: var(--app-text-3);
    margin-top: 0.2rem;
}

[b-5p718f5na8] .em-test-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

[b-5p718f5na8] .em-test-row input {
    flex: 1;
    max-width: 280px;
}

@media (max-width: 640px) {
    [b-5p718f5na8] .em-form-grid { grid-template-columns: 1fr; }
    [b-5p718f5na8] .em-span-full { grid-column: auto; }
    [b-5p718f5na8] .em-test-row { flex-direction: column; align-items: stretch; }
    [b-5p718f5na8] .em-test-row input { max-width: none; }
}

/* Hero image preview */
[b-5p718f5na8] .em-hero-preview-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--app-bg);
    border: 1px solid var(--app-border);
    border-radius: var(--app-r-sm);
    max-width: 420px;
    margin-bottom: 0.5rem;
}

[b-5p718f5na8] .em-hero-preview-img {
    max-height: 60px;
    max-width: 280px;
    object-fit: contain;
    border-radius: var(--app-r-sm);
}

/* =====================================================
   Notification Toggle Groups
   ===================================================== */

[b-5p718f5na8] .em-notif-groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

[b-5p718f5na8] .em-notif-group {
    border: 1px solid var(--app-border);
    border-radius: var(--app-r);
    overflow: hidden;
    background: var(--app-white);
}

[b-5p718f5na8] .em-notif-group-header {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.9rem;
    background: var(--app-bg);
    border-bottom: 1px solid var(--app-border);
    font-family: 'Outfit', sans-serif;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--app-text-3);
}

[b-5p718f5na8] .em-notif-group-header i {
    font-size: 0.85rem;
    color: var(--app-navy-400);
}

[b-5p718f5na8] .em-notif-group-body {
    display: flex;
    flex-direction: column;
}

[b-5p718f5na8] .em-notif-toggle {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.9rem;
    cursor: pointer;
    transition: background-color var(--app-fast) ease;
    font-size: 0.85rem;
    color: var(--app-text);
    border-bottom: 1px solid var(--app-border);
    margin: 0;
}

[b-5p718f5na8] .em-notif-toggle:last-child { border-bottom: none; }

[b-5p718f5na8] .em-notif-toggle:hover { background: var(--app-bg); }

/* ── Notification Preview Rows ───────────────────────── */

[b-5p718f5na8] .em-preview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--app-border);
}

[b-5p718f5na8] .em-preview-row:last-child { border-bottom: none; }

[b-5p718f5na8] .em-preview-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

[b-5p718f5na8] .em-preview-label {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--app-text);
}

[b-5p718f5na8] .em-preview-desc {
    font-size: 0.74rem;
    color: var(--app-text-3);
    line-height: 1.3;
}

[b-5p718f5na8] .em-preview-btn {
    flex-shrink: 0;
    min-width: 52px;
}

/* ── Security Policy ─────────────────────────────────── */

[b-5p718f5na8] .sec-toggle-group {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--app-border);
    border-radius: var(--app-r-sm);
    overflow: hidden;
}

[b-5p718f5na8] .sec-toggle-group .em-notif-toggle { margin: 0; }

[b-5p718f5na8] .sec-admin-unlock-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

/* ── Email Provider Cards ────────────────────────────── */

[b-5p718f5na8] .em-provider-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--app-text-3);
    margin-bottom: 0.6rem;
}

[b-5p718f5na8] .em-provider-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

[b-5p718f5na8] .em-provider-grid-sm {
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 1rem;
}

[b-5p718f5na8] .em-provider-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1rem 0.5rem 0.75rem;
    background: var(--app-white);
    border: 1.5px solid var(--app-border);
    border-radius: var(--app-r);
    cursor: pointer;
    transition: border-color var(--app-fast) ease,
                background-color var(--app-fast) ease,
                box-shadow var(--app-fast) ease;
    text-align: center;
}

[b-5p718f5na8] .em-provider-card:hover {
    border-color: var(--app-border-2);
    background: var(--app-bg);
}

[b-5p718f5na8] .em-provider-card.em-provider-active {
    border-color: var(--app-teal);
    background: var(--app-teal-50);
    box-shadow: 0 0 0 2px var(--app-teal-glow);
}

[b-5p718f5na8] .em-provider-card-sm {
    padding: 0.65rem 0.4rem 0.55rem;
}

[b-5p718f5na8] .em-provider-card-sm .em-provider-icon {
    font-size: 1.1rem;
}

[b-5p718f5na8] .em-provider-icon {
    font-size: 1.4rem;
    color: var(--app-navy-400);
    transition: color var(--app-fast) ease;
}

[b-5p718f5na8] .em-provider-active .em-provider-icon {
    color: var(--app-teal-600);
}

[b-5p718f5na8] .em-provider-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--app-text);
    line-height: 1.2;
}

[b-5p718f5na8] .em-provider-tag {
    font-size: 0.68rem;
    color: var(--app-text-3);
    line-height: 1.1;
}

[b-5p718f5na8] .em-provider-config {
    padding: 0.25rem 0 0 0;
}

/* Fallback section */

[b-5p718f5na8] .em-fallback-section {
    margin-top: 1.5rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-r);
    overflow: hidden;
}

[b-5p718f5na8] .em-fallback-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    cursor: pointer;
    background: var(--app-bg);
    transition: background-color var(--app-fast) ease;
}

[b-5p718f5na8] .em-fallback-toggle:hover {
    background: var(--app-surface-2);
}

[b-5p718f5na8] .em-fallback-icon {
    font-size: 1.1rem;
    color: var(--app-navy-400);
}

[b-5p718f5na8] .em-fallback-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--app-text);
}

[b-5p718f5na8] .em-fallback-desc {
    font-size: 0.72rem;
    color: var(--app-text-3);
    line-height: 1.3;
}

[b-5p718f5na8] .em-fallback-chevron {
    font-size: 0.85rem;
    color: var(--app-text-3);
    transition: transform var(--app-fast) ease;
}

[b-5p718f5na8] .em-fallback-body {
    padding: 1rem;
    border-top: 1px solid var(--app-border);
}

[b-5p718f5na8] .em-fallback-enable {
    margin-bottom: 0.75rem;
}

/* Responsive */

@media (max-width: 900px) {
    [b-5p718f5na8] .em-provider-grid { grid-template-columns: repeat(3, 1fr); }
    [b-5p718f5na8] .em-provider-grid-sm { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    [b-5p718f5na8] .em-provider-grid { grid-template-columns: repeat(2, 1fr); }
    [b-5p718f5na8] .em-provider-grid-sm { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 400px) {
    [b-5p718f5na8] .em-provider-grid { grid-template-columns: 1fr; }
    [b-5p718f5na8] .em-provider-grid-sm { grid-template-columns: 1fr; }
}

/* ── Mobile: scrollable sub-tab bars ──────────────────── */

@media (max-width: 640.98px) {
    .settings-subtab-bar[b-5p718f5na8],
    [b-5p718f5na8] .co-subtab-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        width: 100%;
        flex-wrap: nowrap;
    }
    .settings-subtab-bar[b-5p718f5na8]::-webkit-scrollbar,
    [b-5p718f5na8] .co-subtab-bar::-webkit-scrollbar { display: none; }
    .settings-subtab[b-5p718f5na8],
    [b-5p718f5na8] .co-subtab { flex-shrink: 0; }
}
/* /Pages/ForgotPassword.razor.rz.scp.css */
.fp-desc[b-djf9ec2qjv] {
    font-size: 0.88rem;
    color: var(--app-text-2);
    line-height: 1.55;
    margin-bottom: 1.25rem;
}

.fp-sent[b-djf9ec2qjv] {
    text-align: center;
    padding: 1rem 0 0.5rem;
}

.fp-sent-icon[b-djf9ec2qjv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--app-teal-50);
    color: var(--app-teal-600);
    margin-bottom: 1rem;
}

.fp-sent-text[b-djf9ec2qjv] {
    font-size: 0.92rem;
    color: var(--app-text);
    line-height: 1.5;
    margin-bottom: 0.25rem;
}

.fp-sent-hint[b-djf9ec2qjv] {
    font-size: 0.8rem;
    color: var(--app-text-3);
}

.fp-back[b-djf9ec2qjv] {
    text-align: center;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--app-border);
}

.fp-back-link[b-djf9ec2qjv] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.84rem;
    color: var(--app-text-2);
    text-decoration: none;
    transition: color var(--app-fast) ease;
}

.fp-back-link:hover[b-djf9ec2qjv] {
    color: var(--app-navy);
}
/* /Pages/Home.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   DASHBOARD SKELETONS
   ═══════════════════════════════════════════════════════════════════ */

.dash-skel-metric[b-mumvh93wre] {
    height: 100px;
    border-radius: var(--app-r);
    animation: crm-slide-up var(--app-slow) var(--app-ease) both;
}

.dash-skel-list[b-mumvh93wre] {
    background: var(--app-white);
    border: 1px solid var(--app-border);
    border-radius: var(--app-r);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    animation: crm-slide-up var(--app-slow) var(--app-ease) both;
}

.dash-skel-list-header[b-mumvh93wre] {
    height: 16px;
    width: 40%;
    border-radius: 4px;
    margin-bottom: 0.25rem;
}

.dash-skel-list-row[b-mumvh93wre] {
    height: 12px;
    border-radius: 3px;
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL SEARCH — command-centre aesthetic
   Layer stack: page bg → white bar → navy panel → white cards
   ═══════════════════════════════════════════════════════════════════ */

.gs-wrapper[b-mumvh93wre] {
    position: relative;
}

/* ── Search bar ─────────────────────────────────────────────────────── */

.gs-bar[b-mumvh93wre] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 2px solid var(--app-border);
    border-radius: var(--app-r);
    padding: 13px 18px;
    box-shadow: 0 1px 4px rgba(13, 36, 71, 0.07);
    transition:
        border-color var(--app-fast) ease,
        box-shadow    var(--app-fast) ease;
}

.gs-bar:focus-within[b-mumvh93wre] {
    border-color: var(--app-teal);
    box-shadow:
        0 0 0 4px var(--app-teal-glow),
        0 2px 12px rgba(13, 36, 71, 0.12);
}

.gs-icon[b-mumvh93wre] {
    flex-shrink: 0;
    color: var(--app-text-3);
    transition: color var(--app-mid) ease;
}

.gs-bar:focus-within .gs-icon[b-mumvh93wre] {
    color: var(--app-teal);
}

.gs-input[b-mumvh93wre] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1rem;
    color: var(--app-text);
    font-family: inherit;
    font-weight: 500;
}

.gs-input[b-mumvh93wre]::placeholder {
    color: var(--app-text-3);
    font-weight: 400;
}

.gs-spinner[b-mumvh93wre] {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    border: 2px solid rgba(0, 197, 168, 0.25);
    border-top-color: var(--app-teal);
    border-radius: 50%;
    animation: gs-spin-b-mumvh93wre 0.65s linear infinite;
}

@keyframes gs-spin-b-mumvh93wre {
    to { transform: rotate(360deg); }
}

.gs-clear[b-mumvh93wre] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--app-bg);
    border: 1px solid var(--app-border);
    border-radius: 50%;
    cursor: pointer;
    color: var(--app-text-3);
    transition:
        color        var(--app-fast) ease,
        background   var(--app-fast) ease,
        border-color var(--app-fast) ease;
}

.gs-clear:hover[b-mumvh93wre] {
    color: var(--app-text);
    background: var(--app-border);
    border-color: transparent;
}

/* ── Results panel — rich navy backdrop ─────────────────────────────── */

.gs-results[b-mumvh93wre] {
    margin-top: 6px;
    background: var(--app-navy);
    border-radius: var(--app-r);
    /* teal outline + deep shadow for elevation */
    box-shadow:
        0 0 0 1px rgba(0, 197, 168, 0.22),
        0 8px 24px rgba(13, 36, 71, 0.28),
        0 32px 64px rgba(13, 36, 71, 0.18);
    overflow: hidden;
    animation: gs-reveal-b-mumvh93wre 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes gs-reveal-b-mumvh93wre {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.gs-no-results[b-mumvh93wre] {
    padding: 28px 20px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.875rem;
    text-align: center;
    letter-spacing: 0.01em;
}

/* ── Group sections ──────────────────────────────────────────────────── */

.gs-group[b-mumvh93wre] {
    padding: 14px 16px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.gs-group:last-child[b-mumvh93wre] {
    border-bottom: none;
}

.gs-group-header[b-mumvh93wre] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.gs-group-label[b-mumvh93wre] {
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--app-teal);
}

.gs-group-more[b-mumvh93wre] {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.38);
    text-decoration: none;
    transition: color var(--app-fast) ease;
}

.gs-group-more:hover[b-mumvh93wre] {
    color: var(--app-teal);
}

/* ── Result cards — white tiles on dark ─────────────────────────────── */

.gs-cards[b-mumvh93wre] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gs-card[b-mumvh93wre] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.97);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--app-r-sm);
    text-decoration: none;
    flex: 1 1 190px;
    min-width: 150px;
    max-width: 270px;
    /* staggered entrance */
    animation: gs-card-in-b-mumvh93wre 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
    transition:
        transform     var(--app-fast) ease,
        box-shadow    var(--app-fast) ease,
        border-color  var(--app-fast) ease;
}

/* stagger first 5 cards per group */
.gs-card:nth-child(1)[b-mumvh93wre] { animation-delay: 0.04s; }
.gs-card:nth-child(2)[b-mumvh93wre] { animation-delay: 0.08s; }
.gs-card:nth-child(3)[b-mumvh93wre] { animation-delay: 0.12s; }
.gs-card:nth-child(4)[b-mumvh93wre] { animation-delay: 0.16s; }
.gs-card:nth-child(5)[b-mumvh93wre] { animation-delay: 0.20s; }

@keyframes gs-card-in-b-mumvh93wre {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gs-card:hover[b-mumvh93wre] {
    transform: translateY(-2px);
    border-color: var(--app-teal);
    box-shadow:
        0 4px 12px rgba(13, 36, 71, 0.2),
        0 0 0 1px var(--app-teal);
}

/* ── Card icon badges ───────────────────────────────────────────────── */

.gs-card-icon[b-mumvh93wre] {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gs-icon-account[b-mumvh93wre] {
    background: color-mix(in srgb, var(--app-navy) 10%, white);
    color: var(--app-navy);
    box-shadow: inset 0 0 0 1px rgba(13, 36, 71, 0.12);
}

.gs-icon-contact[b-mumvh93wre] {
    background: color-mix(in srgb, var(--app-teal) 14%, white);
    color: var(--app-teal-600);
    box-shadow: inset 0 0 0 1px rgba(0, 197, 168, 0.2);
}

.gs-icon-workgroup[b-mumvh93wre] {
    background: color-mix(in srgb, #6366F1 12%, white);
    color: #4F46E5;
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.18);
}

.gs-icon-custom[b-mumvh93wre] {
    background: color-mix(in srgb, #F59E0B 12%, white);
    color: #B45309;
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.18);
}

/* ── Card text ──────────────────────────────────────────────────────── */

.gs-card-text[b-mumvh93wre] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.gs-card-name[b-mumvh93wre] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--app-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.gs-card-sub[b-mumvh93wre] {
    font-size: 0.7rem;
    color: var(--app-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
    line-height: 1.3;
}
/* /Pages/Login.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Login · Glassmorphism + Orchestrated Entrance
   The form internals are rendered by the shared <LoginForm/> child,
   so form rules are written as `.login-card-body ::deep …` to pierce
   the component boundary. Outer chrome (.login-stage/.login-card/
   .login-title) is owned directly by this page.
   ═══════════════════════════════════════════════════════════ */

.login-stage[b-yhypo15s78] {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  animation: crm-fade-in 0.5s var(--app-ease) both;
}

/* ── Glass Card ── */

.login-card[b-yhypo15s78] {
  width: 100%;
  position: relative;
  background: var(--app-glass-bg);
  backdrop-filter: blur(var(--app-glass-blur));
  -webkit-backdrop-filter: blur(var(--app-glass-blur));
  border: 1px solid transparent;
  border-radius: var(--app-r-xl);
  box-shadow: 0 0 40px rgba(var(--app-teal-rgb), 0.06),
              0 8px 32px rgba(0, 0, 0, 0.2);
  padding: 2.25rem 2rem 2rem;
  animation: crm-scale-up 0.6s var(--app-ease) both 0.2s;
}

/* Animated gradient border sweep — single ambient loop */
.login-card[b-yhypo15s78]::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--app-r-xl);
  padding: 1px;
  background: linear-gradient(
    90deg,
    rgba(var(--app-teal-rgb), 0.0) 0%,
    rgba(var(--app-teal-rgb), 0.3) 25%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(var(--app-teal-rgb), 0.3) 75%,
    rgba(var(--app-teal-rgb), 0.0) 100%
  );
  background-size: 200% 100%;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: crm-border-sweep 4s linear infinite 1s;
  pointer-events: none;
  z-index: 1;
}

.login-title[b-yhypo15s78] {
  font-family: 'Instrument Serif', serif;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 400;
  text-align: center;
  margin-bottom: 1.75rem;
  letter-spacing: -0.01em;
  animation: crm-fade-in 0.4s var(--app-ease) both 0.35s;
}

/* ── Form Controls (dark bg overrides) ── */

.login-card-body[b-yhypo15s78]  .form-label {
  color: rgba(255, 255, 255, 0.55);
}

.login-card-body[b-yhypo15s78]  .form-control {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  border-radius: 8px;
  transition: border-color var(--app-fast) ease,
              box-shadow var(--app-mid) var(--app-ease),
              background var(--app-fast) ease;
}

.login-card-body[b-yhypo15s78]  .form-control::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.login-card-body[b-yhypo15s78]  .form-control:focus {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--app-teal);
  box-shadow: 0 0 0 3px var(--app-teal-glow), 0 0 20px rgba(var(--app-teal-rgb), 0.08);
  color: #fff;
}

/* ── Staggered Field Entrance ── */

.login-card-body[b-yhypo15s78]  .login-field:nth-child(1) { animation: crm-slide-up 0.4s var(--app-ease) both 0.40s; }
.login-card-body[b-yhypo15s78]  .login-field:nth-child(2) { animation: crm-slide-up 0.4s var(--app-ease) both 0.50s; }
.login-card-body[b-yhypo15s78]  .login-field:nth-child(3) { animation: crm-slide-up 0.4s var(--app-ease) both 0.60s; }
.login-card-body[b-yhypo15s78]  .login-field:nth-child(4) { animation: crm-slide-up 0.4s var(--app-ease) both 0.70s; }

/* ── Primary Button (gradient + hover glow) ── */

.login-card-body[b-yhypo15s78]  .login-btn-primary {
  background: linear-gradient(135deg, var(--app-navy-600), var(--app-teal-600)) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 8px;
  transition: transform var(--app-fast) var(--app-ease),
              box-shadow var(--app-mid) var(--app-ease),
              opacity var(--app-fast) ease;
}

.login-card-body[b-yhypo15s78]  .login-btn-primary:hover:not(:disabled) {
  transform: scale(1.01);
  box-shadow: 0 0 32px rgba(var(--app-teal-rgb), 0.3),
              0 0 8px rgba(var(--app-teal-rgb), 0.2);
}

.login-card-body[b-yhypo15s78]  .login-btn-primary:active:not(:disabled) {
  transform: scale(0.99);
}

.login-card-body[b-yhypo15s78]  .login-btn-primary:disabled {
  opacity: 0.6;
}

/* ── SSO Button (dark bg variant) ── */

.login-card-body[b-yhypo15s78]  .login-btn-sso {
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 8px;
  transition: background var(--app-fast) ease,
              border-color var(--app-fast) ease;
}

.login-card-body[b-yhypo15s78]  .login-btn-sso:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
}

/* ── Error Alert (dark bg) ── */

.login-card-body[b-yhypo15s78]  .login-alert {
  background: rgba(220, 38, 38, 0.12) !important;
  border-color: rgba(220, 38, 38, 0.3) !important;
  color: #FCA5A5 !important;
  border-radius: 8px;
  animation: crm-slide-up 0.3s var(--app-ease) both;
}

/* ── Forgot Password ── */

.login-card-body[b-yhypo15s78]  .login-forgot {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  transition: color var(--app-fast) ease;
}

.login-card-body[b-yhypo15s78]  .login-forgot:hover {
  color: var(--app-teal);
}

/* ── MFA Section ── */

.login-card-body[b-yhypo15s78]  .login-mfa-section {
  animation: crm-scale-up 0.4s var(--app-ease) both;
}

.login-card-body[b-yhypo15s78]  .login-mfa-section .text-muted {
  color: rgba(255, 255, 255, 0.5) !important;
}

.login-card-body[b-yhypo15s78]  .login-mfa-code {
  letter-spacing: 0.3em;
  font-size: 1.25rem;
  text-align: center;
}

/* ── Link Buttons (dark bg) ── */

.login-card-body[b-yhypo15s78]  .login-link {
  color: var(--app-teal) !important;
  text-decoration: none !important;
  transition: opacity var(--app-fast) ease;
}

.login-card-body[b-yhypo15s78]  .login-link:hover {
  opacity: 0.8;
}

/* ── Validation Messages ── */

.login-card-body[b-yhypo15s78]  .validation-message {
  color: #FCA5A5;
}

/* ── Responsive ── */

@media (max-width: 640.98px) {
  .login-card[b-yhypo15s78] {
    padding: 1.5rem 1.25rem;
    margin: 0 0.75rem;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-card[b-yhypo15s78]::after {
    animation: none;
  }
}
/* /Pages/Profile.razor.rz.scp.css */
/* ── Profile avatar ─────────────────────────────────── */

.profile-avatar-row[b-afjqiqxudw] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--app-navy) 0%, var(--app-navy-600, #1a3d6e) 100%);
    border-radius: var(--app-r-sm);
    margin-bottom: 0.5rem;
    color: #fff;
}

.profile-avatar-lg[b-afjqiqxudw] {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    border: 2px solid rgba(255,255,255,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    flex-shrink: 0;
    color: #fff;
}

.profile-full-name[b-afjqiqxudw]  { font-size: 1.05rem; font-weight: 600; }
.profile-email[b-afjqiqxudw]      { font-size: 0.82rem; opacity: 0.8; }
.profile-title-display[b-afjqiqxudw] { font-size: 0.82rem; opacity: 0.7; font-style: italic; margin-top: 0.1rem; }

/* ── Email field (disabled) ─────────────────────────── */

.profile-email-input[b-afjqiqxudw] {
    background: var(--app-bg) !important;
    color: var(--app-text-2) !important;
    cursor: not-allowed;
}

/* ── Notifications placeholder ──────────────────────── */

.notifications-placeholder[b-afjqiqxudw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    gap: 0.75rem;
}

.notif-icon[b-afjqiqxudw] {
    font-size: 2.5rem;
    opacity: 0.35;
    margin-bottom: 0.5rem;
}

/* ── Notification preference groups ──────────────── */

.em-notif-groups[b-afjqiqxudw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.em-notif-group[b-afjqiqxudw] {
    border: 1px solid var(--app-border);
    border-radius: var(--app-r);
    overflow: hidden;
    background: var(--app-white);
}

.em-notif-group-header[b-afjqiqxudw] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.9rem;
    background: var(--app-bg);
    border-bottom: 1px solid var(--app-border);
    font-family: 'Outfit', sans-serif;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--app-text-3);
}

.em-notif-group-header i[b-afjqiqxudw] {
    font-size: 0.85rem;
    color: var(--app-navy-400);
}

.em-notif-group-body[b-afjqiqxudw] {
    display: flex;
    flex-direction: column;
}

.em-notif-toggle[b-afjqiqxudw] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.9rem;
    cursor: pointer;
    transition: background-color var(--app-fast) ease;
    font-size: 0.85rem;
    color: var(--app-text);
    border-bottom: 1px solid var(--app-border);
    margin: 0;
}

.em-notif-toggle:last-child[b-afjqiqxudw] { border-bottom: none; }

.em-notif-toggle:hover[b-afjqiqxudw] { background: var(--app-bg); }

/* ── Notification label with hint ──────────────────── */

.notif-label[b-afjqiqxudw] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.notif-hint[b-afjqiqxudw] {
    font-size: 0.74rem;
    color: var(--app-text-3);
    line-height: 1.3;
    opacity: 0.8;
}

/* ── Notification section description ──────────────── */

.notif-desc[b-afjqiqxudw] {
    font-size: 0.82rem;
    color: var(--app-text-3);
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

/* ── Save button row ───────────────────────────────── */

.notif-actions[b-afjqiqxudw] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 1.75rem;
    margin-top: 1.75rem;
    border-top: 1px solid var(--app-border);
}
/* /Pages/ResetPassword.razor.rz.scp.css */
.rp-success[b-v6j8xgr8yp] {
    text-align: center;
    padding: 1rem 0 0.5rem;
}

.rp-success-icon[b-v6j8xgr8yp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--app-teal-50);
    color: var(--app-teal-600);
    margin-bottom: 1rem;
}

.rp-success-text[b-v6j8xgr8yp] {
    font-size: 0.92rem;
    color: var(--app-text);
    line-height: 1.5;
    margin-bottom: 0.25rem;
}
/* /Pages/Vms/VmDetail.razor.rz.scp.css */
/* Tabbed VM detail — mirrors the Admin page's sub-tab bar (settings-subtab) using the
   global --app-* design tokens, scoped to this page. */
.vm-tab-bar[b-1xgqid8xgt] {
    display: flex;
    gap: 0.15rem;
    background: var(--app-surface-2);
    border-radius: var(--app-r);
    padding: 3px;
    margin-bottom: 1.5rem;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
}

.vm-tab[b-1xgqid8xgt] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1.1rem;
    background: none;
    border: none;
    border-radius: calc(var(--app-r) - 2px);
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--app-text-2);
    cursor: pointer;
    transition: background-color var(--app-fast) ease,
                color var(--app-fast) ease,
                box-shadow var(--app-fast) ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.vm-tab:hover[b-1xgqid8xgt] { color: var(--app-navy); }

.vm-tab.active[b-1xgqid8xgt] {
    background: var(--app-white);
    color: var(--app-navy);
    font-weight: 600;
    box-shadow: var(--app-shadow-xs);
}

.vm-tab i[b-1xgqid8xgt] { font-size: 0.85rem; }

.vm-tab-bar[b-1xgqid8xgt]::-webkit-scrollbar { display: none; }
/* /Shared/Breadcrumb.razor.rz.scp.css */
.app-breadcrumb[b-s4ran8cz30] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--app-text-3);
    letter-spacing: 0.01em;
}

.app-breadcrumb a[b-s4ran8cz30] {
    color: var(--app-navy-400);
    text-decoration: none;
    transition: color var(--app-fast) var(--app-ease);
}

.app-breadcrumb a:hover[b-s4ran8cz30] {
    color: var(--app-teal-600);
}

.app-breadcrumb-sep[b-s4ran8cz30] {
    opacity: 0.4;
}
/* /Shared/CollapsibleCard.razor.rz.scp.css */
.crm-cc[b-3ckke1lw03] {
  background: var(--app-white);
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(13, 36, 71, 0.04);
  overflow: hidden;
}

.crm-cc__header[b-3ckke1lw03] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 14px 22px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background-color 120ms ease;
}

/* Left cluster: title + section-meta. Takes the available horizontal space. */
.crm-cc__header-start[b-3ckke1lw03] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
}

/* Right cluster: pill + chevron. Anchors to the right edge of the header,
   creating clear visual separation from the title. */
.crm-cc__header-end[b-3ckke1lw03] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
}

.crm-cc__header:hover[b-3ckke1lw03],
.crm-cc__header:focus-visible[b-3ckke1lw03] {
  background: var(--app-surface-2);
  outline: none;
}

.crm-cc__title[b-3ckke1lw03] {
  flex: 0 0 auto;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--app-text);
}

/* Static section summary (e.g. "3 selected • 2 custom fields"). Lives in the
   left cluster next to the title, fills available width, ellipses on overflow. */
.crm-cc__summary[b-3ckke1lw03] {
  flex: 1 1 auto;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--app-text-3);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Inline modified-field display (1-2 fields). Lives in the RIGHT cluster
   alongside the pill, so it takes only its natural width. Field names read
   in body weight; the " · unsaved" suffix in muted weight defers to them. */
.crm-cc__inline-modified[b-3ckke1lw03] {
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 400;
  white-space: nowrap;
}

.crm-cc__inline-modified .crm-cc__modified-fields[b-3ckke1lw03] {
  color: var(--app-text);
  font-weight: 500;
}

.crm-cc__inline-modified .crm-cc__modified-suffix[b-3ckke1lw03] {
  color: var(--app-text-3);
  font-weight: 400;
}

/* Required-missing dot. Sits flush right of the title, before the summary. */
.crm-cc__required-dot[b-3ckke1lw03] {
  flex: 0 0 auto;
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #F59E0B;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
  animation: crm-cc-pulse-b-3ckke1lw03 1.2s ease-out 1;
}

@keyframes crm-cc-pulse-b-3ckke1lw03 {
  0%   { box-shadow: 0 0 0 0    rgba(245, 158, 11, 0.55); }
  60%  { box-shadow: 0 0 0 8px  rgba(245, 158, 11, 0.0); }
  100% { box-shadow: 0 0 0 3px  rgba(245, 158, 11, 0.18); }
}

/* Unsaved-changes pill. Shown in collapsed (count ≥ 3) and expanded (count > 0)
   states so the user has a live counter while editing within the card. */
.crm-cc__changes-pill[b-3ckke1lw03] {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 22px;
  padding: 0 10px 0 8px;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--app-text);
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
  border-radius: 999px;
  animation: crm-fade-in 160ms ease;
}

/* Tiny status dot inside the pill — pulses gently to signal "live / unsaved". */
.crm-cc__changes-dot[b-3ckke1lw03] {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--app-teal, #0fb39e);
  box-shadow: 0 0 0 0 rgba(15, 179, 158, 0.5);
  animation: crm-cc-dot-pulse-b-3ckke1lw03 2.4s ease-out infinite;
}

@keyframes crm-cc-dot-pulse-b-3ckke1lw03 {
  0%   { box-shadow: 0 0 0 0    rgba(15, 179, 158, 0.45); }
  60%  { box-shadow: 0 0 0 6px  rgba(15, 179, 158, 0.0); }
  100% { box-shadow: 0 0 0 0    rgba(15, 179, 158, 0.0); }
}

@media (prefers-reduced-motion: reduce) {
  .crm-cc__changes-dot[b-3ckke1lw03] { animation: none; }
}

.crm-cc__chevron[b-3ckke1lw03] {
  flex: 0 0 auto;
  font-size: 0.85rem;
  color: var(--app-text-3);
  transition: transform 160ms ease;
}

.crm-cc--expanded .crm-cc__chevron[b-3ckke1lw03] {
  transform: rotate(180deg);
}

.crm-cc--expanded .crm-cc__header[b-3ckke1lw03] {
  border-bottom: 1px solid var(--app-border);
}

.crm-cc__body[b-3ckke1lw03] {
  padding: 18px 24px 22px;
  animation: crm-slide-up 180ms ease;
}
/* /Shared/DataActionsMenu.razor.rz.scp.css */
.data-actions-menu[b-nmuhkgpl53] {
    position: relative;
    display: inline-block;
}

/* ── Toggle ─────────────────────────────────────────────────────────
   Borderless at rest so the kebab recedes into the header. Hover lifts
   it to a subtle pill; the open state inverts to filled navy so the
   user always knows the menu is theirs. */

.data-actions-toggle[b-nmuhkgpl53] {
    background: transparent;
    border: 1px solid transparent;
    color: var(--app-text-2, #4b5563);
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--app-r-sm, 6px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.data-actions-toggle:hover[b-nmuhkgpl53] {
    background: var(--app-bg, #f5f7fa);
    color: var(--app-navy, #0f172a);
}

.data-actions-toggle:focus-visible[b-nmuhkgpl53] {
    outline: 2px solid var(--app-teal, #00C5A8);
    outline-offset: 2px;
}

.data-actions-menu.is-open .data-actions-toggle[b-nmuhkgpl53] {
    background: var(--app-navy, #1f2937);
    color: #fff;
    border-color: var(--app-navy, #1f2937);
}

.data-actions-toggle .bi[b-nmuhkgpl53] {
    font-size: 1.05rem;
    line-height: 1;
}

/* ── Panel ──────────────────────────────────────────────────────────
   Off-white surface with backdrop blur reads as a raised plate, not a
   stark card. Two-layer shadow: a tight contact + a soft ambient. */

.data-actions-panel[b-nmuhkgpl53] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1050;
    min-width: 200px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 12px 24px -8px rgba(15, 23, 42, 0.18);
    padding: 6px;
    transform-origin: top right;
    animation: dam-reveal-b-nmuhkgpl53 140ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dam-reveal-b-nmuhkgpl53 {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

.data-actions-backdrop[b-nmuhkgpl53] {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: transparent;
}

/* ── Section label ──────────────────────────────────────────────────
   Tiny uppercase tag at the top of the panel; converts the surface
   from "list of buttons" into "menu with grouping intent." */

.data-actions-section-label[b-nmuhkgpl53] {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--app-text-3, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 8px 10px 4px;
}

/* ── Menu items ─────────────────────────────────────────────────────
   Grid with a fixed icon column forces vertical alignment regardless
   of which Bootstrap icon is used. Lighter font weight + tighter
   padding moves the rows from "form buttons" to "menu items." */

.data-actions-panel .btn[b-nmuhkgpl53],
.data-actions-panel a.btn[b-nmuhkgpl53],
.data-actions-panel a[b-nmuhkgpl53] {
    border: none;
    background: transparent;
    color: var(--app-text-1, #1f2937);
    font-weight: 450;
    font-size: 0.82rem;
    letter-spacing: 0.005em;
    padding: 7px 10px;
    border-radius: 6px;
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: center;
    gap: 10px;
    text-align: left;
    width: 100%;
    cursor: pointer;
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
}

.data-actions-panel .btn i[b-nmuhkgpl53],
.data-actions-panel a i[b-nmuhkgpl53] {
    color: var(--app-text-3, #9ca3af);
    font-size: 0.92rem;
    line-height: 1;
    justify-self: center;
    transition: color 120ms ease;
}

.data-actions-panel .btn:hover:not(:disabled)[b-nmuhkgpl53],
.data-actions-panel a:hover[b-nmuhkgpl53] {
    background: var(--app-bg, #f5f7fa);
    color: var(--app-navy, #0f172a);
}

.data-actions-panel .btn:hover:not(:disabled) i[b-nmuhkgpl53],
.data-actions-panel a:hover i[b-nmuhkgpl53] {
    color: var(--app-teal-600, #009E88);
}

.data-actions-panel .btn:disabled[b-nmuhkgpl53] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Divider — ready for grouped/destructive items as menus grow. */
.data-actions-panel hr[b-nmuhkgpl53] {
    margin: 4px 2px;
    border: 0;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}
/* /Shared/FilterSelect.razor.rz.scp.css */
/* Animated dropdown that replaces native <select> inside filter panes.
   Uses the same grid-template-rows: 0fr → 1fr trick as the parent
   ListFilters component so the open animates to natural content height
   without us hard-coding a max-height. */

.fs-wrapper[b-bk1z7ylfk8] {
    position: relative;
    display: block;
}

.fs-trigger[b-bk1z7ylfk8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: var(--bs-border-radius, 0.375rem);
    color: var(--bs-body-color);
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

.fs-wrapper--sm .fs-trigger[b-bk1z7ylfk8] {
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
}

.fs-trigger:hover[b-bk1z7ylfk8] {
    border-color: var(--bs-secondary, #6c757d);
}

.fs-trigger:focus-visible[b-bk1z7ylfk8],
.fs-trigger--open[b-bk1z7ylfk8] {
    outline: 0;
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.18);
}

.fs-trigger-label[b-bk1z7ylfk8] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fs-placeholder[b-bk1z7ylfk8] {
    color: var(--bs-secondary-color, #6c757d);
}

.fs-chevron[b-bk1z7ylfk8] {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.75rem;
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.fs-trigger--open .fs-chevron[b-bk1z7ylfk8] {
    transform: rotate(180deg);
}

/* The animated panel — collapsed = 0fr, open = 1fr. The inner
   wrapper hides overflow so content doesn't peek during the transition. */
.fs-collapse[b-bk1z7ylfk8] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1050;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.fs-open .fs-collapse[b-bk1z7ylfk8] {
    grid-template-rows: 1fr;
    pointer-events: auto;
}

.fs-collapse-inner[b-bk1z7ylfk8] {
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.14s ease, transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.fs-open .fs-collapse-inner[b-bk1z7ylfk8] {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.18s ease 0.04s, transform 0.18s cubic-bezier(0.4, 0, 0.2, 1) 0.04s;
}

.fs-menu[b-bk1z7ylfk8] {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06);
    padding: 0.25rem 0;
    max-height: 320px;
    overflow-y: auto;
}

/* Click-outside backdrop. Transparent + full-viewport so any click off
   the menu closes it. Below the menu (z-index 1049 < 1050) so options
   still receive clicks. */
.fs-backdrop[b-bk1z7ylfk8] {
    position: fixed;
    inset: 0;
    z-index: 1049;
    background: transparent;
}

[b-bk1z7ylfk8] .fs-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4rem 0.75rem;
    background: transparent;
    border: 0;
    color: var(--bs-body-color);
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.1s ease;
}

[b-bk1z7ylfk8] .fs-option:hover {
    background: rgba(13, 110, 253, 0.08);
}

[b-bk1z7ylfk8] .fs-option--selected {
    background: rgba(13, 110, 253, 0.12);
    color: var(--bs-primary, #0d6efd);
    font-weight: 500;
}

[b-bk1z7ylfk8] .fs-option-check {
    color: var(--bs-primary, #0d6efd);
    font-size: 0.875rem;
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .fs-chevron[b-bk1z7ylfk8],
    .fs-collapse[b-bk1z7ylfk8],
    .fs-collapse-inner[b-bk1z7ylfk8] {
        transition: none;
    }
}
/* /Shared/IconPicker.razor.rz.scp.css */
/* ── Wrapper ── */
.icon-picker[b-vrx4llmxjt] {
    position: relative;
    display: inline-block;
    width: 100%;
    z-index: 1;
}

.icon-picker.is-open[b-vrx4llmxjt] {
    z-index: 500;
}

/* ── Trigger — form-control look ── */
.icon-picker-toggle[b-vrx4llmxjt] {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 0.875rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--app-text);
    background: var(--app-white);
    border: 1px solid var(--app-border-2);
    border-radius: var(--app-r-sm);
    cursor: pointer;
    transition: border-color var(--app-fast) ease,
                box-shadow var(--app-fast) ease;
    text-align: left;
}

.icon-picker-toggle:hover[b-vrx4llmxjt] {
    border-color: var(--app-navy-400);
}

.icon-picker-toggle:focus[b-vrx4llmxjt] {
    outline: none;
    border-color: var(--app-teal);
    box-shadow: 0 0 0 3px var(--app-teal-glow);
}

.icon-picker.is-open .icon-picker-toggle[b-vrx4llmxjt] {
    border-color: var(--app-teal);
    box-shadow: 0 0 0 3px var(--app-teal-glow);
}

.icon-picker-value[b-vrx4llmxjt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.icon-picker-preview[b-vrx4llmxjt] {
    font-size: 1rem;
    color: var(--app-navy-600);
    flex-shrink: 0;
}

.icon-picker-placeholder[b-vrx4llmxjt] {
    color: var(--app-text-3);
}

.icon-picker-chevron[b-vrx4llmxjt] {
    font-size: 0.75rem;
    color: var(--app-text-3);
    flex-shrink: 0;
    margin-left: 0.5rem;
    transition: transform var(--app-fast) var(--app-ease);
}

.icon-picker.is-open .icon-picker-chevron[b-vrx4llmxjt] {
    transform: rotate(180deg);
}

/* ── Dropdown panel ── */
.icon-picker-panel[b-vrx4llmxjt] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1050;
    width: 340px;
    background: var(--app-white);
    border: 1px solid var(--app-border);
    border-radius: var(--app-r);
    padding: 0.875rem;
    box-shadow: var(--app-shadow-lg);
    animation: iconPickerIn-b-vrx4llmxjt var(--app-fast) var(--app-ease);
}

@keyframes iconPickerIn-b-vrx4llmxjt {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Search input ── */
.icon-picker-search[b-vrx4llmxjt] {
    margin-bottom: 0.625rem !important;
}

/* ── Icon grid ── */
.icon-picker-grid[b-vrx4llmxjt] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 3px;
    max-height: 256px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--app-border-2) transparent;
}

/* ── Individual icon cell — full appearance reset ── */
.icon-picker-item[b-vrx4llmxjt] {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    padding: 7px 3px 5px;
    border: none;
    border-radius: var(--app-r-sm);
    background: transparent;
    color: var(--app-text-2);
    font-family: 'Outfit', sans-serif;
    font-size: 0.6rem;
    cursor: pointer;
    transition: background var(--app-fast) ease,
                color var(--app-fast) ease;
    overflow: hidden;
    outline: none;
}

.icon-picker-item i[b-vrx4llmxjt] {
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
}

.icon-picker-item span[b-vrx4llmxjt] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    line-height: 1.2;
}

.icon-picker-item:hover[b-vrx4llmxjt] {
    background: var(--app-surface-2);
    color: var(--app-navy);
}

.icon-picker-item:focus-visible[b-vrx4llmxjt] {
    outline: none;
    box-shadow: 0 0 0 2px var(--app-teal);
}

.icon-picker-item.is-selected[b-vrx4llmxjt] {
    background: var(--app-teal-50);
    color: var(--app-teal-600);
}

.icon-picker-item.is-selected i[b-vrx4llmxjt] {
    color: var(--app-teal-600);
}

/* ── Empty state ── */
.icon-picker-empty[b-vrx4llmxjt] {
    grid-column: 1 / -1;
    color: var(--app-text-3);
    font-size: 0.8rem;
    padding: 0.5rem;
    margin: 0;
}
/* /Shared/ListFilters.razor.rz.scp.css */
.lf-wrapper[b-ttpy899esq] {
    border: 1px solid var(--bs-border-color-translucent, #dee2e6);
    border-radius: 8px;
    background: var(--bs-body-bg, #fff);
    margin-bottom: 1rem;
    /* Default overflow:hidden so the body's white background gets clipped
       to the rounded corners during the slide animation. We flip to
       visible after the open transition so child popups (FilterSelect's
       absolutely-positioned menu) can escape this clipping context. */
    overflow: hidden;
}

.lf-wrapper--open[b-ttpy899esq] {
    background: var(--bs-tertiary-bg, #f8f9fa);
    /* Delay the overflow snap until the height transition completes (0.22s)
       so content doesn't peek past the rounded bottom mid-animation. On
       close, the closed-state rule has no overflow transition, so overflow
       snaps back to hidden instantly when the user collapses the panel. */
    overflow: visible;
    transition: overflow 0s linear 0.22s;
}

.lf-header[b-ttpy899esq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.55rem 0.85rem;
    background: transparent;
    border: 0;
    color: var(--bs-body-color);
    font-size: 0.875rem;
    cursor: pointer;
    text-align: left;
    user-select: none;
}

.lf-header:hover[b-ttpy899esq] {
    background: rgba(13, 36, 71, 0.04);
}

.lf-header:focus-visible[b-ttpy899esq] {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: -2px;
}

.lf-header-left[b-ttpy899esq],
.lf-header-right[b-ttpy899esq] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.lf-header-left > i.bi-funnel[b-ttpy899esq] {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.95rem;
}

.lf-title[b-ttpy899esq] {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.lf-count[b-ttpy899esq] {
    font-size: 0.7rem;
    padding: 0.2rem 0.45rem;
}

.lf-clear[b-ttpy899esq] {
    font-size: 0.78rem;
    color: var(--bs-secondary-color, #6c757d);
    cursor: pointer;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}

.lf-clear:hover[b-ttpy899esq] {
    color: var(--bs-body-color);
    background: rgba(13, 36, 71, 0.06);
    text-decoration: underline;
}

/* Inline natural-language summary of applied filters. Shown next to the
   "Filters" title when the panel is collapsed so the user sees what's
   active without expanding. Each value is a removable chip — clicking the
   × invokes the per-chip callback supplied by the page. */
.lf-summary[b-ttpy899esq] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--bs-body-color);
    /* Keep the header on a single visual line on tight headers, but allow
       chip wrapping for long summaries. The min-width:0 lets the flex item
       shrink past its intrinsic width so the chevron stays glued to the right. */
    min-width: 0;
}

.lf-summary-item[b-ttpy899esq] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.lf-summary-label[b-ttpy899esq] {
    color: var(--bs-secondary-color, #6c757d);
    font-weight: 500;
}

.lf-summary-sep[b-ttpy899esq] {
    color: var(--bs-secondary-color, #6c757d);
    opacity: 0.6;
}

.lf-summary-chip[b-ttpy899esq] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.45rem 0.1rem 0.55rem;
    background: rgba(13, 110, 253, 0.10);
    color: var(--bs-primary, #0d6efd);
    border-radius: 999px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.12s ease, color 0.12s ease;
    user-select: none;
}

.lf-summary-chip:hover[b-ttpy899esq],
.lf-summary-chip:focus-visible[b-ttpy899esq] {
    background: rgba(220, 53, 69, 0.12);
    color: var(--bs-danger, #dc3545);
    outline: 0;
}

.lf-summary-x[b-ttpy899esq] {
    font-size: 0.7rem;
    opacity: 0.7;
    line-height: 1;
}

.lf-summary-chip:hover .lf-summary-x[b-ttpy899esq],
.lf-summary-chip:focus-visible .lf-summary-x[b-ttpy899esq] {
    opacity: 1;
}

.lf-summary-value[b-ttpy899esq] {
    /* Wraps a non-removable summary value (no OnRemove callback). Inherits
       parent color so it visually integrates with the label. */
    color: var(--bs-body-color);
}

.lf-chevron[b-ttpy899esq] {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.85rem;
    /* Single icon that rotates on open, so the chevron sweeps instead of
       hard-swapping between two glyphs. */
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.lf-wrapper--open .lf-chevron[b-ttpy899esq] {
    transform: rotate(180deg);
}

/* Grid-template-rows: 0fr → 1fr trick. The collapsed state has zero rows
   of "1fr" content, the open state has one full row. Animating between
   these is the cleanest way to do an auto-height collapse without
   measuring max-height at runtime. The inner wrapper has overflow:hidden
   so the body doesn't peek out during the transition. */
.lf-collapse[b-ttpy899esq] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.lf-wrapper--open .lf-collapse[b-ttpy899esq] {
    grid-template-rows: 1fr;
}

.lf-collapse-inner[b-ttpy899esq] {
    overflow: hidden;
    /* Fade the body alongside the height change — without this the content
       blinks in at the start of the transition because it's already at full
       opacity before its height makes room. */
    opacity: 0;
    transition: opacity 0.18s ease;
}

.lf-wrapper--open .lf-collapse-inner[b-ttpy899esq] {
    opacity: 1;
    /* Same delayed-overflow trick as .lf-wrapper--open: keep clipping
       during the 0.22s height animation so content doesn't peek out, then
       snap to visible once the panel is fully open so child popups
       (FilterSelect's absolutely-positioned menu) aren't clipped. */
    overflow: visible;
    transition: opacity 0.22s ease 0.05s, overflow 0s linear 0.22s;
}

.lf-body[b-ttpy899esq] {
    padding: 0.75rem 0.85rem 0.85rem;
    border-top: 1px solid var(--bs-border-color-translucent, #dee2e6);
    background: var(--bs-body-bg, #fff);
}

/* Honor the user's reduce-motion preference: skip the animations entirely
   when the OS asks for less motion. */
@media (prefers-reduced-motion: reduce) {
    .lf-chevron[b-ttpy899esq],
    .lf-collapse[b-ttpy899esq],
    .lf-collapse-inner[b-ttpy899esq] {
        transition: none;
    }
}

/* Tighter padding inside filter inputs so the body doesn't feel cavernous when
   it holds 1-2 inputs. The :deep wraps any `.row.g-2.mb-3` used by callers
   to ensure the bottom margin doesn't double up against `.lf-body` padding. */
.lf-body[b-ttpy899esq]  .row.g-2.mb-3:last-child,
.lf-body[b-ttpy899esq]  .mb-3:last-child {
    margin-bottom: 0 !important;
}
/* /Shared/MultiStateChipFilter.razor.rz.scp.css */
.cf-wrapper[b-9typgqda12] {
    width: 100%;
}

.cf-chipbar[b-9typgqda12] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.cf-label[b-9typgqda12] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-right: 0.25rem;
}

.cf-chip[b-9typgqda12] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    font-size: 0.8125rem;
    line-height: 1.25;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    cursor: pointer;
    user-select: none;
}

.cf-chip:focus-visible[b-9typgqda12] {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}

.cf-chip i[b-9typgqda12] {
    font-size: 0.875rem;
    line-height: 1;
}

.cf-chip-neutral[b-9typgqda12] {
    background: transparent;
    border-color: var(--bs-border-color, #dee2e6);
    color: var(--bs-body-color, #212529);
}

.cf-chip-neutral:hover[b-9typgqda12] {
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-color: var(--bs-secondary, #6c757d);
}

.cf-chip-neutral i[b-9typgqda12] {
    color: var(--bs-tertiary-color, #adb5bd);
}

.cf-chip-include[b-9typgqda12] {
    background: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
    color: #fff;
}

.cf-chip-include:hover[b-9typgqda12] {
    filter: brightness(1.08);
}

.cf-chip-exclude[b-9typgqda12] {
    background: var(--bs-danger-bg-subtle, #f8d7da);
    border-color: var(--bs-danger-border-subtle, #f1aeb5);
    color: var(--bs-danger-text-emphasis, #58151c);
    text-decoration: line-through;
}

.cf-chip-exclude:hover[b-9typgqda12] {
    background: var(--bs-danger, #dc3545);
    border-color: var(--bs-danger, #dc3545);
    color: #fff;
}

.cf-match-toggle[b-9typgqda12] {
    margin-left: 0.5rem;
}

.cf-clear[b-9typgqda12] {
    padding: 0 0.25rem;
    color: var(--bs-secondary-color, #6c757d);
    text-decoration: none;
}

.cf-clear:hover[b-9typgqda12] {
    color: var(--bs-body-color, #212529);
    text-decoration: underline;
}

.cf-chip-name[b-9typgqda12] {
    white-space: nowrap;
}
/* /Shared/NotificationBell.razor.rz.scp.css */
/* =====================================================
   Notification Bell + Drawer
   ===================================================== */

.notif-bell[b-67wey3czjl] {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-right: 0.5rem;
}

/* Bell button — matches the visual weight of the user-menu toggle next door */
.notif-bell-button[b-67wey3czjl] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: none;
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--app-text-2);
    cursor: pointer;
    transition: background-color var(--app-fast) ease,
                border-color var(--app-fast) ease,
                color var(--app-fast) ease;
}

.notif-bell-button:hover[b-67wey3czjl] {
    background: var(--app-bg);
    color: var(--app-navy);
}

.notif-bell-button.active[b-67wey3czjl] {
    background: var(--app-bg);
    border-color: var(--app-border-2);
    color: var(--app-navy);
}

.notif-bell-button i[b-67wey3czjl] {
    font-size: 1.15rem;
    line-height: 1;
}

.notif-bell-badge[b-67wey3czjl] {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: #dc2626;
    color: #fff;
    border: 2px solid var(--app-white, #fff);
    border-radius: 9px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 14px;
    letter-spacing: -0.01em;
    text-align: center;
    box-sizing: content-box;
    pointer-events: none;
}

/* ── Dropdown drawer ─────────────────────────────────── */

.notif-bell-backdrop[b-67wey3czjl] {
    position: fixed;
    inset: 0;
    z-index: 100;
}

.notif-drawer[b-67wey3czjl] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 101;
    width: 380px;
    max-width: calc(100vw - 16px);
    max-height: 560px;
    background: var(--app-white);
    border: 1px solid var(--app-border);
    border-radius: var(--app-r);
    box-shadow: var(--app-shadow-lift);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: notif-drawer-in-b-67wey3czjl 0.15s var(--app-ease) both;
}

@keyframes notif-drawer-in-b-67wey3czjl {
    0%   { opacity: 0; transform: translateY(-6px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.notif-drawer-header[b-67wey3czjl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.9rem;
    background: var(--app-bg);
    border-bottom: 1px solid var(--app-border);
}

.notif-drawer-title[b-67wey3czjl] {
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--app-navy);
    letter-spacing: -0.01em;
}

.notif-drawer-actions[b-67wey3czjl] {
    display: flex;
    gap: 0.15rem;
}

.notif-drawer-action[b-67wey3czjl] {
    width: 28px;
    height: 28px;
    border: 1px solid transparent;
    border-radius: var(--app-r-sm);
    background: transparent;
    color: var(--app-text-3);
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--app-fast) ease, color var(--app-fast) ease;
}

.notif-drawer-action:hover[b-67wey3czjl] {
    background: var(--app-white);
    border-color: var(--app-border-2);
    color: var(--app-navy);
}

/* ── List + empty state ─────────────────────────────── */

.notif-drawer-list[b-67wey3czjl] {
    overflow-y: auto;
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
}

.notif-drawer-empty[b-67wey3czjl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    color: var(--app-text-3);
}

.notif-drawer-empty-icon[b-67wey3czjl] {
    font-size: 2rem;
    opacity: 0.35;
}

.notif-drawer-empty-text[b-67wey3czjl] {
    font-size: 0.85rem;
}

.notif-drawer-spinner[b-67wey3czjl] {
    width: 24px;
    height: 24px;
    border: 3px solid var(--app-border);
    border-top-color: var(--app-navy);
    border-radius: 50%;
    animation: notif-spin-b-67wey3czjl 0.8s linear infinite;
}

@keyframes notif-spin-b-67wey3czjl {
    to { transform: rotate(360deg); }
}

/* ── Individual row ─────────────────────────────────── */

.notif-row[b-67wey3czjl] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--app-border);
    cursor: pointer;
    transition: background-color var(--app-fast) ease;
    position: relative;
}

.notif-row:last-child[b-67wey3czjl] { border-bottom: none; }

.notif-row:hover[b-67wey3czjl] {
    background: var(--app-bg);
}

.notif-row.unread[b-67wey3czjl] {
    background: color-mix(in srgb, var(--app-navy) 4%, transparent);
}

.notif-row.unread[b-67wey3czjl]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--app-navy);
}

.notif-row-icon[b-67wey3czjl] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--app-surface-2);
    color: var(--app-text-2);
    font-size: 0.9rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.notif-row-info .notif-row-icon[b-67wey3czjl],
.notif-row-info[b-67wey3czjl] { /* .notif-row-info is unused — keeping structure simple */ }

.notif-row.notif-row-info .notif-row-icon[b-67wey3czjl]    { background: #eff6ff; color: #1d4ed8; }
.notif-row.notif-row-success .notif-row-icon[b-67wey3czjl] { background: #ecfdf5; color: #047857; }
.notif-row.notif-row-warning .notif-row-icon[b-67wey3czjl] { background: #fffbeb; color: #b45309; }
.notif-row.notif-row-critical .notif-row-icon[b-67wey3czjl] { background: #fef2f2; color: #b91c1c; }

.notif-row-body[b-67wey3czjl] {
    flex: 1;
    min-width: 0;
}

.notif-row-title[b-67wey3czjl] {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--app-text);
    line-height: 1.35;
    margin-bottom: 0.1rem;
}

.notif-row-text[b-67wey3czjl] {
    font-size: 0.78rem;
    color: var(--app-text-2);
    line-height: 1.4;
    margin-bottom: 0.2rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-row-time[b-67wey3czjl] {
    font-size: 0.7rem;
    color: var(--app-text-3);
}

.notif-row-actions[b-67wey3czjl] {
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
}

.notif-row-dismiss[b-67wey3czjl] {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--app-text-3);
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--app-fast) ease, background-color var(--app-fast) ease;
}

.notif-row:hover .notif-row-dismiss[b-67wey3czjl] {
    opacity: 1;
}

.notif-row-dismiss:hover[b-67wey3czjl] {
    background: var(--app-white);
    color: var(--app-navy);
}

/* ── Responsive ─────────────────────────────────────── */

@media (max-width: 480px) {
    .notif-drawer[b-67wey3czjl] {
        width: calc(100vw - 16px);
        right: -8px;
    }
}
/* /Shared/SortableHeader.razor.rz.scp.css */
.bd-sort-header[b-retw0dvs94] {
    background: transparent;
    border: 0;
    padding: 0.5rem 0.5rem;
    font-weight: 600;
    color: inherit;
    text-align: left;
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
}

.bd-sort-header:hover[b-retw0dvs94] {
    color: var(--bs-primary);
}

.bd-sort-header--active[b-retw0dvs94] {
    color: var(--bs-primary);
}

.bd-sort-icon--inactive[b-retw0dvs94] {
    opacity: 0.25;
}

.bd-sort-header:hover .bd-sort-icon--inactive[b-retw0dvs94] {
    opacity: 0.6;
}
/* /Shared/SortableList.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════
   SortableList — drag-and-drop reorder
   ═══════════════════════════════════════════════════════ */

.sl-list[b-cbh4ixzf4h] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sl-item[b-cbh4ixzf4h] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    background: var(--app-white);
    border: 1px solid var(--app-border);
    border-radius: var(--app-r-sm);
    transition: background-color var(--app-fast) ease,
                border-color var(--app-fast) ease,
                box-shadow var(--app-fast) ease,
                opacity var(--app-fast) ease,
                transform var(--app-fast) var(--app-ease);
    position: relative;
}

.sl-item:hover[b-cbh4ixzf4h] {
    border-color: var(--app-border-2);
    background: var(--app-bg);
}

/* Drag handle */
.sl-handle[b-cbh4ixzf4h] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    cursor: grab;
    color: var(--app-text-3);
    border-radius: 4px;
    flex-shrink: 0;
    background: var(--app-bg);
    border: 1px solid transparent;
    transition: color var(--app-fast) ease,
                background-color var(--app-fast) ease,
                border-color var(--app-fast) ease;
}

.sl-handle:hover[b-cbh4ixzf4h] {
    color: var(--app-navy);
    background: var(--app-surface-2);
    border-color: var(--app-border);
}

.sl-handle:active[b-cbh4ixzf4h] { cursor: grabbing; }

.sl-handle svg[b-cbh4ixzf4h] {
    width: 14px;
    height: 14px;
}

/* Item content */
.sl-content[b-cbh4ixzf4h] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Action buttons area */
.sl-actions[b-cbh4ixzf4h] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    opacity: 0.35;
    transition: opacity var(--app-fast) ease;
}

.sl-item:hover .sl-actions[b-cbh4ixzf4h] { opacity: 1; }

/* Up/down arrow buttons */
.sl-arrow[b-cbh4ixzf4h] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 1px solid var(--app-border-2);
    border-radius: 3px;
    background: var(--app-white);
    color: var(--app-text-3);
    cursor: pointer;
    font-size: 0.75rem;
    transition: color var(--app-fast) ease,
                border-color var(--app-fast) ease,
                background-color var(--app-fast) ease;
}

.sl-arrow:hover[b-cbh4ixzf4h] {
    color: var(--app-navy);
    border-color: var(--app-navy);
    background: var(--app-surface-2);
}

.sl-arrow:disabled[b-cbh4ixzf4h] {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

/* ── Drag states ── */

.sl-item.sl-dragging[b-cbh4ixzf4h] {
    opacity: 0.55;
    border-style: dashed;
    border-color: var(--app-navy-400);
    background: var(--app-surface-2);
    box-shadow: var(--app-shadow);
}

.sl-item.sl-dragging .sl-handle[b-cbh4ixzf4h] { cursor: grabbing; }

.sl-item.sl-drop-above[b-cbh4ixzf4h]::before,
.sl-item.sl-drop-below[b-cbh4ixzf4h]::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--app-teal);
    border-radius: 2px;
    z-index: 2;
    box-shadow: 0 0 8px rgba(0, 197, 168, 0.45);
}

.sl-item.sl-drop-above[b-cbh4ixzf4h]::before { top: -5px; }
.sl-item.sl-drop-below[b-cbh4ixzf4h]::after  { bottom: -5px; }

.sl-item.sl-drop-target[b-cbh4ixzf4h] {
    background: var(--app-teal-50);
    border-color: var(--app-teal);
}

/* Settle animation after drop */
@keyframes sl-settle-b-cbh4ixzf4h {
    0%   { transform: scale(1.03); box-shadow: var(--app-shadow-sm); }
    100% { transform: scale(1);    box-shadow: none; }
}

.sl-item.sl-just-dropped[b-cbh4ixzf4h] {
    animation: sl-settle-b-cbh4ixzf4h 0.25s var(--app-ease) both;
    border-color: var(--app-teal);
    background: var(--app-teal-50);
}

/* ── Compact variant (for table-like field lists) ── */

.sl-compact .sl-item[b-cbh4ixzf4h] {
    padding: 0.4rem 0.6rem;
    border-radius: 3px;
    gap: 0.4rem;
}

.sl-compact .sl-handle[b-cbh4ixzf4h] {
    width: 1.35rem;
    height: 1.35rem;
}

.sl-compact .sl-handle svg[b-cbh4ixzf4h] {
    width: 12px;
    height: 12px;
}

.sl-compact .sl-arrow[b-cbh4ixzf4h] {
    width: 1.35rem;
    height: 1.35rem;
    font-size: 0.68rem;
}
/* /Shared/TagInput.razor.rz.scp.css */
.tag-input-wrap[b-yytm7j324m] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
    min-height: 2.15rem;
    background: var(--app-white);
    border: 1px solid var(--app-border-2);
    border-radius: var(--app-r-sm);
    cursor: text;
    transition: border-color var(--app-fast) ease, box-shadow var(--app-fast) ease;
}

.tag-input-wrap:focus-within[b-yytm7j324m] {
    border-color: var(--app-teal);
    box-shadow: 0 0 0 3px var(--app-teal-glow);
}

.tag-chip[b-yytm7j324m] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.25rem 0.15rem 0.5rem;
    background: var(--app-surface-2);
    border: 1px solid var(--app-border);
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--app-text);
    line-height: 1.3;
    animation: tag-pop-b-yytm7j324m 0.15s var(--app-ease) both;
}

@keyframes tag-pop-b-yytm7j324m {
    0%   { transform: scale(0.85); opacity: 0; }
    100% { transform: scale(1);    opacity: 1; }
}

.tag-chip-text[b-yytm7j324m] {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tag-chip-remove[b-yytm7j324m] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--app-text-3);
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: color var(--app-fast) ease, background-color var(--app-fast) ease;
}

.tag-chip-remove:hover[b-yytm7j324m] {
    color: #c0392b;
    background: rgba(192, 57, 43, 0.1);
}

.tag-input-field[b-yytm7j324m] {
    flex: 1;
    min-width: 80px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.8rem;
    color: var(--app-text);
    padding: 0.1rem 0;
}

.tag-input-field[b-yytm7j324m]::placeholder {
    color: var(--app-text-3);
}
/* /Shared/UserMenu.razor.rz.scp.css */
/* Component-owned styles so the menu renders correctly wherever it's used —
   the staff top row, and the Member/Vendor portal top bars. (Previously these
   lived in MainLayout.razor.css and only applied inside the staff shell, leaving
   the portal user menu unstyled.) Light-surface defaults; the portal top bars
   override the toggle colors for their navy background. */

.user-menu[b-cqazllyv70] { position: relative; }

.user-menu-toggle[b-cqazllyv70] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 0.3rem 0.55rem 0.3rem 0.4rem;
  border-radius: var(--app-r-sm);
  color: var(--app-text);
  font-family: 'Outfit', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color var(--app-fast) ease,
              border-color var(--app-fast) ease;
}

.user-menu-toggle:hover[b-cqazllyv70] {
  background-color: var(--app-bg);
  border-color: var(--app-border);
}

.user-avatar[b-cqazllyv70] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--app-navy) 0%, var(--app-navy-600) 100%);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0;
}

.user-avatar-lg[b-cqazllyv70] {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1rem;
  border: 2px solid var(--app-teal);
}

.user-display-name[b-cqazllyv70] {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--app-text);
}

.user-caret[b-cqazllyv70] {
  font-size: 0.5rem;
  color: var(--app-text-3);
  margin-left: 0.1rem;
}

.user-menu-backdrop[b-cqazllyv70] {
  position: fixed;
  inset: 0;
  z-index: 99;
}

.user-menu-dropdown[b-cqazllyv70] {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 248px;
  background: var(--app-white);
  border: 1px solid var(--app-border);
  border-radius: var(--app-r);
  box-shadow: var(--app-shadow-lg);
  z-index: 100;
  padding: 0.375rem 0;
  animation: crm-slide-up 0.2s var(--app-ease) both;
}

.user-menu-header[b-cqazllyv70] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
}

.user-menu-item[b-cqazllyv70] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  text-align: left;
  text-decoration: none;
  color: var(--app-text-2);
  font-family: 'Outfit', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  cursor: pointer;
  transition: background-color var(--app-fast) ease,
              color var(--app-fast) ease,
              border-color var(--app-fast) ease;
}

.user-menu-item:hover[b-cqazllyv70] {
  background-color: var(--app-bg);
  color: var(--app-navy);
  border-left-color: var(--app-teal);
}

.user-menu-item-danger[b-cqazllyv70] { color: #DC2626; }
.user-menu-item-danger:hover[b-cqazllyv70] {
  background-color: #FEF2F2;
  color: #B91C1C;
  border-left-color: #EF4444;
}