/* /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-fpzuautqj7] {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--app-bg);
}

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

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

.sidebar[b-fpzuautqj7] {
  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-fpzuautqj7]::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-fpzuautqj7] {
  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-fpzuautqj7] {
  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-fpzuautqj7] {
  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-fpzuautqj7] {
  flex: 1;
  padding: 2rem 2.25rem !important;
}

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

main.main-unauth[b-fpzuautqj7] {
  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-fpzuautqj7]::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-fpzuautqj7],
main.main-unauth[b-fpzuautqj7]  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-fpzuautqj7] {
  flex: 0 0 auto;
  padding-top: 1rem !important;
}

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

.auth-brand-header[b-fpzuautqj7] {
  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-fpzuautqj7] {
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px var(--app-teal-glow));
}

.auth-brand-name[b-fpzuautqj7] {
  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-fpzuautqj7] {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(80px);
  opacity: 0.35;
  will-change: transform;
}

.auth-orb-1[b-fpzuautqj7] {
  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-fpzuautqj7] {
  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-fpzuautqj7] {
  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-fpzuautqj7] {
  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-fpzuautqj7]::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-fpzuautqj7] {
  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-fpzuautqj7 0.7s linear infinite;
  position: relative;
  z-index: 1;
}

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

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

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

@media (prefers-reduced-motion: reduce) {
  .load-curtain-spinner[b-fpzuautqj7] { animation: none; }
  .load-curtain--out[b-fpzuautqj7] { 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-fpzuautqj7] { display: none; }
  article.content[b-fpzuautqj7] { 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-fpzuautqj7] { overflow: clip; }

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

  [b-fpzuautqj7] .mobile-user-menu-slot .user-display-name { display: none; }
  [b-fpzuautqj7] .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-fpzuautqj7] {
    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-fpzuautqj7] {
    font-size: 0.6rem;
    padding: 0.05rem 0.4rem;
  }
}

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

  .sidebar[b-fpzuautqj7] {
    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-fpzuautqj7] {
    width: 64px;
  }

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

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

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

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

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

[b-fpzuautqj7] .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-fpzuautqj7] .sidebar-collapsed .nav-version {
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}

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

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

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

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

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

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

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

.nav-header[b-uyttfrzmau] {
  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-uyttfrzmau]::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-uyttfrzmau] {
  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-uyttfrzmau]::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-uyttfrzmau] {
  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-uyttfrzmau] {
  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-uyttfrzmau] {
  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-uyttfrzmau] {
  background: rgba(255,255,255,0.14);
}

/* Chevron arrow via CSS border trick */
.nav-collapse-icon[b-uyttfrzmau] {
  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-uyttfrzmau] {
  transform: rotate(-135deg) translateX(-1px);
}

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

.nav-mobile-toggle[b-uyttfrzmau] {
  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-uyttfrzmau] { background: rgba(255,255,255,0.15); }

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

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

.nav-body[b-uyttfrzmau] {
  padding: 0.875rem 0.75rem;
  overflow-x: hidden;
  position: relative;
  z-index: 1;
}

/* Scrollable region: Dashboard + sections + Customize scroll here, so the
   pinned footer (Help / Admin / version) stays anchored to the
   bottom. Bounded + faded on desktop (see the desktop media query). */
.nav-scroll[b-uyttfrzmau] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;               /* allow the flex item to shrink below content so it can scroll */
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

/* Section labels, group headers, dividers and the Customize button. Same reason as
   .nav-link below: a flex child that is allowed to shrink means .nav-scroll never
   overflows, so its overflow-y never engages. */
.nav-scroll > *[b-uyttfrzmau] { flex-shrink: 0; }

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

/* Pinned footer — never scrolls, never wraps. */
.nav-footer[b-uyttfrzmau] {
  flex-shrink: 0;
}

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

.nav[b-uyttfrzmau]  .nav-link {
  color: rgba(255,255,255,0.58);
  border-radius: 8px;
  height: 2.35rem;
  display: flex;
  align-items: center;
  padding: 0 0.875rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.84rem;
  font-weight: 500;
  text-decoration: none;
  border-left: 3px solid transparent;
  margin-bottom: 0.05rem;
  white-space: nowrap;
  overflow: hidden;
  /* Must not shrink. `overflow: hidden` above cancels the automatic minimum size
     a flex item normally gets, so without this the links squash towards zero
     height — text still painting at full size — instead of letting .nav-scroll
     scroll. Expanding a nav group on a short viewport made every other item
     collapse into an unreadable overlapping stack. */
  flex-shrink: 0;
  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-uyttfrzmau]  .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-uyttfrzmau]  .nav-link:hover {
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.07);
  border-left-color: transparent;
}

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

.nav[b-uyttfrzmau]  .nav-link.active {
  color: #fff;
  background: rgba(255,255,255,0.06);
  border-left-color: transparent;
  font-weight: 600;
}

.nav[b-uyttfrzmau]  .nav-link.active::before {
  transform: scaleY(1);
  background: var(--app-teal);
}

/* ── Skeleton nav items ── */

.nav-skel-item[b-uyttfrzmau] {
  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-uyttfrzmau] {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  flex-shrink: 0;
}

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

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

.nav-divider[b-uyttfrzmau]::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-uyttfrzmau] {
  display: flex;
  flex-direction: column;
  /* Override Bootstrap's .nav { flex-wrap: wrap }, which would spill a too-tall
     menu into a clipped second column instead of letting .nav-scroll scroll. */
  flex-wrap: nowrap;
  height: 100%;
}

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

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

/* ─────────────────────────────────────────────────────────
   Inbox count badge — for a footer link that carries a count
   (e.g. an approvals queue). Render such a link only when its count > 0, so the badge
   is always showing a non-zero number.
   ───────────────────────────────────────────────────────── */

.nav[b-uyttfrzmau]  .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-uyttfrzmau]  .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-uyttfrzmau] {
  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.5;
  flex-shrink: 0;
  transition: opacity var(--app-fast) ease,
              margin var(--app-fast) ease,
              transform var(--app-mid) var(--app-ease);
}

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

.bi-house-door-fill-nav-menu[b-uyttfrzmau] {
  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-question-circle-fill-nav-menu[b-uyttfrzmau] {
  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-uyttfrzmau] {
  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");
}

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

.nav-customize-btn[b-uyttfrzmau] {
  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-uyttfrzmau] {
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.05);
}

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

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

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

.nav-version-text[b-uyttfrzmau] {
  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-uyttfrzmau] {
  color: rgba(255,255,255,0.35);
}

.alpha-badge[b-uyttfrzmau] {
  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-uyttfrzmau] {
  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-uyttfrzmau] { display: none !important; }

  .nav-body[b-uyttfrzmau] {
    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-uyttfrzmau] {
    max-height: 100vh;
    padding: 0.875rem 0.75rem;
  }

}

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

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

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

  .nav-body[b-uyttfrzmau] {
    height: calc(100vh - 58px);
    overflow: hidden;          /* footer stays pinned; .nav-scroll does the scrolling */
  }

  /* Bound the scroll region and fade its content out at the bottom as it slides
     behind the pinned footer. When the menu fits, the faded strip is empty space
     so there's no visible artifact. */
  .nav-scroll[b-uyttfrzmau] {
    overflow-y: auto;
    mask-image: linear-gradient(to bottom, black calc(100% - 28px), transparent);
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 28px), transparent);
  }
}
/* /Pages/Admin/AdminSettings.razor.rz.scp.css */
.admin-header p[b-x157olibiw] { font-size: 0.95rem; margin-top: 0.25rem; }

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

[b-x157olibiw] .settings-card { transition: none !important; }
[b-x157olibiw] .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-x157olibiw] .settings-card-picker { z-index: 10; }

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

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

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

[b-x157olibiw] .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-x157olibiw] .settings-section-desc { font-size: 0.82rem; color: var(--app-text-3); margin-bottom: 0.75rem; }

/* Logo */
[b-x157olibiw] .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-x157olibiw] .logo-preview-img { max-height: 40px; max-width: 180px; object-fit: contain; }
[b-x157olibiw] .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-x157olibiw] .color-fields { display: flex; flex-direction: column; gap: 1.1rem; }
[b-x157olibiw] .color-field { display: flex; flex-direction: column; gap: 0.25rem; }
[b-x157olibiw] .color-input-row { display: flex; align-items: center; gap: 0.5rem; }
[b-x157olibiw] .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-x157olibiw] .color-hex { width: 108px; font-family: 'Courier New', monospace; font-size: 0.875rem; letter-spacing: 0.04em; }
[b-x157olibiw] .color-hint { font-size: 0.78rem; color: var(--app-text-3); }

/* Save row */
[b-x157olibiw] .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-x157olibiw] .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-x157olibiw] .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-x157olibiw] .role-filter { display: flex; gap: 0.4rem; flex-wrap: wrap; }

[b-x157olibiw] .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-x157olibiw] .role-pill:hover { border-color: var(--app-navy); color: var(--app-navy); }

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

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

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

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

[b-x157olibiw] .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-x157olibiw] .user-cell-name { font-weight: 500; font-size: 0.9rem; }
[b-x157olibiw] .user-cell-title { font-size: 0.78rem; color: var(--app-text-3); }

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

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

[b-x157olibiw] .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-x157olibiw] .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-x157olibiw] .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-x157olibiw] .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-x157olibiw] .label-group .user-table { margin-bottom: 0; }

[b-x157olibiw] .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-x157olibiw] .label-group .user-table tbody td {
    padding: 0.6rem 0.75rem;
    vertical-align: middle;
    font-size: 0.87rem;
    border-color: var(--app-border);
}

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

/* Relationship label badges */
[b-x157olibiw] .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-x157olibiw] .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-x157olibiw] .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-x157olibiw] .audit-filters { }

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

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

/* Action badges */
[b-x157olibiw] .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-x157olibiw] .audit-badge-auth    { background: var(--app-teal-50); color: var(--app-teal-600); border: 1px solid var(--app-teal); }
[b-x157olibiw] .audit-badge-create  { background: #ecfdf5; color: #065f46; border: 1px solid #6ee7b7; }
[b-x157olibiw] .audit-badge-update  { background: #eff6ff; color: #1e40af; border: 1px solid #93c5fd; }
[b-x157olibiw] .audit-badge-delete  { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }
[b-x157olibiw] .audit-badge-complete { background: #f0fdf4; color: #166534; border: 1px solid #86efac; }
[b-x157olibiw] .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-x157olibiw] .field-search-wrap {
    position: relative;
    flex: 1;
    max-width: 280px;
}

[b-x157olibiw] .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-x157olibiw] .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-x157olibiw] .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-x157olibiw] .field-search-input::placeholder { color: var(--app-text-3); }

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

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

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

[b-x157olibiw] .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-x157olibiw] .sort-icon.active { opacity: 1; }

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

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

[b-x157olibiw] .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-x157olibiw] .audit-time { color: var(--app-text-2); }
[b-x157olibiw] .audit-actor { font-weight: 500; }
[b-x157olibiw] .audit-notes-inline { color: var(--app-text-3); font-style: italic; }

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

[b-x157olibiw] .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-x157olibiw] .fm-module-card.fm-enabled {
    border-left-color: var(--app-teal);
    background: var(--app-white);
    box-shadow: var(--app-shadow-xs);
}

[b-x157olibiw] .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-x157olibiw] .fm-enabled .fm-module-icon {
    background: var(--app-teal-50);
    color: var(--app-teal-600);
}

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

[b-x157olibiw] .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-x157olibiw] .fm-module-desc {
    font-size: 0.82rem;
    color: var(--app-text-2);
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

[b-x157olibiw] .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-x157olibiw] .fm-status-active {
    background: var(--app-teal-50);
    color: var(--app-teal-600);
    border: 1px solid var(--app-teal);
}

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

[b-x157olibiw] .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-x157olibiw] .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-x157olibiw] .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-x157olibiw] .co-subtab:hover { color: var(--app-navy); }

[b-x157olibiw] .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-x157olibiw] {
    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-x157olibiw] {
    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-x157olibiw] { color: var(--app-navy); }

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

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

/* External link icon for nav-away sub-tabs */
.settings-subtab-ext[b-x157olibiw] {
    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-x157olibiw] {
    opacity: 0.7;
}

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

[b-x157olibiw] .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-x157olibiw] .co-master-detail { grid-template-columns: 1fr; }
}

/* Left panel -- object type list */
[b-x157olibiw] .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-x157olibiw] .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-x157olibiw] .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-x157olibiw] .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-x157olibiw] .co-master-search::placeholder { color: var(--app-text-3); }

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

[b-x157olibiw] .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-x157olibiw] .co-master-item:last-child { border-bottom: none; }

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

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

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

[b-x157olibiw] .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-x157olibiw] .co-master-item.selected .co-master-icon {
    background: var(--app-teal-glow);
    color: var(--app-teal-600);
}

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

[b-x157olibiw] .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-x157olibiw] .co-master-meta {
    font-size: 0.72rem;
    color: var(--app-text-3);
    margin-top: 1px;
}

[b-x157olibiw] .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-x157olibiw] .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-x157olibiw] .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-x157olibiw] .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-x157olibiw] .co-detail-title i {
    color: var(--app-teal-600);
    font-size: 1.1rem;
}

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

[b-x157olibiw] .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-x157olibiw] .co-detail-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.35;
}

[b-x157olibiw] .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-x157olibiw] .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-x157olibiw] .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-x157olibiw] .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-x157olibiw] .sl-field-type[data-type="Text"]        { background: #f0f4f8; color: #475569; }
[b-x157olibiw] .sl-field-type[data-type="Note"]        { background: #f0f4f8; color: #475569; }
[b-x157olibiw] .sl-field-type[data-type="Number"]      { background: #eff6ff; color: #1d4ed8; }
[b-x157olibiw] .sl-field-type[data-type="Date"]        { background: #fdf4ff; color: #7e22ce; }
[b-x157olibiw] .sl-field-type[data-type="Boolean"]     { background: #fffbeb; color: #b45309; }
[b-x157olibiw] .sl-field-type[data-type="Dropdown"]    { background: var(--app-teal-50); color: var(--app-teal-600); }
[b-x157olibiw] .sl-field-type[data-type="MultiSelect"] { background: var(--app-teal-50); color: var(--app-teal-600); }
[b-x157olibiw] .sl-field-type[data-type="Url"]         { background: #eef2ff; color: #4338ca; }
[b-x157olibiw] .sl-field-type[data-type="Email"]       { background: #fef2f2; color: #b91c1c; }
[b-x157olibiw] .sl-field-type[data-type="Phone"]       { background: #ecfdf5; color: #047857; }

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

[b-x157olibiw] .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-x157olibiw] .sl-field-badge.required {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

/* Required dot indicator (alternative to badge) */
[b-x157olibiw] .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-x157olibiw] .sl-item:hover {
    border-left: 2px solid var(--app-navy-400);
    padding-left: calc(0.75rem - 2px);
}

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

/* Action buttons inside sortable list */
[b-x157olibiw] .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-x157olibiw] .sl-content .co-master-item {
    padding: 0;
    border: none;
    background: transparent;
    width: 100%;
}

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

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

[b-x157olibiw] .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-x157olibiw] .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-x157olibiw] .co-props-form { grid-template-columns: 1fr; }
}

[b-x157olibiw] .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-x157olibiw] .bei-master-list {
    max-height: 560px;
}

[b-x157olibiw] .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-x157olibiw] .bei-section-header i {
    font-size: 0.8rem;
    color: var(--app-navy-400);
}

[b-x157olibiw] .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-x157olibiw] .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-x157olibiw] .bei-section-group .bei-item {
    position: relative;
}

[b-x157olibiw] .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-x157olibiw] .bei-item:last-child { border-bottom: none; }

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

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

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

[b-x157olibiw] .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-x157olibiw] .bei-icon-account { background: var(--app-navy-400); }
[b-x157olibiw] .bei-icon-contact { background: var(--app-teal-600); }
[b-x157olibiw] .bei-icon-workgroup { background: var(--app-navy-700); }
[b-x157olibiw] .bei-icon-visit { background: var(--app-text-2); }

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

[b-x157olibiw] .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-x157olibiw] .bei-all-name { font-weight: 500; }

[b-x157olibiw] .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-x157olibiw] .bei-item-badge.bei-badge-empty {
    opacity: 0.45;
    font-weight: 400;
}

/* Category-colored badges for items with fields */
[b-x157olibiw] .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-x157olibiw] .bei-icon-contact ~ .bei-item-info ~ .bei-item-badge:not(.bei-badge-empty) {
    background: var(--app-teal-50);
    color: var(--app-teal-600);
}

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

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

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

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

/* ── Detail header enhancements ── */

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

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

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

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

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

[b-x157olibiw] .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-x157olibiw] .bei-detail-actions {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

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

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

[b-x157olibiw] .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-x157olibiw 0.12s var(--app-ease) both;
}

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

[b-x157olibiw] .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-x157olibiw] .bei-overflow-item:hover {
    background: var(--app-bg);
}

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

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

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

/* ── Empty fields state ── */

[b-x157olibiw] .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-x157olibiw] .bei-empty-fields-icon {
    font-size: 2rem;
    color: var(--app-border-2);
    line-height: 1;
}

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

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

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

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

[b-x157olibiw] .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-x157olibiw] .em-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

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

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

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

[b-x157olibiw] .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-x157olibiw] .em-span-full { grid-column: 1 / -1; }

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

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

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

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

/* Hero image preview */
[b-x157olibiw] .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-x157olibiw] .em-hero-preview-img {
    max-height: 60px;
    max-width: 280px;
    object-fit: contain;
    border-radius: var(--app-r-sm);
}

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

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

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

[b-x157olibiw] .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-x157olibiw] .em-notif-group-header i {
    font-size: 0.85rem;
    color: var(--app-navy-400);
}

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

[b-x157olibiw] .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-x157olibiw] .em-notif-toggle:last-child { border-bottom: none; }

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

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

[b-x157olibiw] .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-x157olibiw] .em-preview-row:last-child { border-bottom: none; }

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

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

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

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

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

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

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

[b-x157olibiw] .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-x157olibiw] .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-x157olibiw] .em-provider-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

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

[b-x157olibiw] .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-x157olibiw] .em-provider-card:hover {
    border-color: var(--app-border-2);
    background: var(--app-bg);
}

[b-x157olibiw] .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-x157olibiw] .em-provider-card-sm {
    padding: 0.65rem 0.4rem 0.55rem;
}

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

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

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

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

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

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

/* Fallback section */

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

[b-x157olibiw] .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-x157olibiw] .em-fallback-toggle:hover {
    background: var(--app-surface-2);
}

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

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

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

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

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

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

/* Responsive */

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

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

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

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

@media (max-width: 640.98px) {
    .settings-subtab-bar[b-x157olibiw],
    [b-x157olibiw] .co-subtab-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        width: 100%;
        flex-wrap: nowrap;
    }
    .settings-subtab-bar[b-x157olibiw]::-webkit-scrollbar,
    [b-x157olibiw] .co-subtab-bar::-webkit-scrollbar { display: none; }
    .settings-subtab[b-x157olibiw],
    [b-x157olibiw] .co-subtab { flex-shrink: 0; }
}
/* /Pages/Admin/AssistantFeedback/FeedbackItemCard.razor.rz.scp.css */
.af-item[b-r20qxv1v3x] {
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--app-border, #DCE5F0);
}

.af-item:last-child[b-r20qxv1v3x] {
    border-bottom: 0;
}

.af-item--dismissed[b-r20qxv1v3x] {
    opacity: .6;
}

.af-item-head[b-r20qxv1v3x] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5rem;
}

.af-reason[b-r20qxv1v3x] {
    font-weight: 600;
    font-size: .88rem;
    color: var(--app-text, #0D2447);
}

.af-item-meta[b-r20qxv1v3x] {
    font-size: .78rem;
    color: var(--app-text-2, #4A5B78);
}

.af-item-id[b-r20qxv1v3x] {
    margin-left: auto;
    font-size: .72rem;
    color: var(--app-text-3, #8A9BB5);
}

/* The user's own words — what the owner most needs to read, so it reads like a quote. */
.af-note[b-r20qxv1v3x] {
    margin: .35rem 0 0;
    padding: .1rem 0 .1rem .7rem;
    border-left: 3px solid var(--app-teal, #00C5A8);
    font-size: .88rem;
    color: var(--app-text, #0D2447);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-width: 75ch;
}

.af-tools[b-r20qxv1v3x] {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .45rem;
}

.af-tool[b-r20qxv1v3x],
.af-signal[b-r20qxv1v3x] {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    padding: .08rem .45rem;
    border-radius: 6px;
    font-size: .72rem;
    border: 1px solid var(--app-border, #DCE5F0);
    background: var(--app-white, #fff);
    color: var(--app-text-2, #4A5B78);
}

.af-tool span:first-child[b-r20qxv1v3x] {
    font-family: var(--bs-font-monospace);
}

.af-tool-status[b-r20qxv1v3x] {
    font-weight: 600;
}

/* Colour carries the failure: a refused call (the missing-tool signal) and a thrown error
   stand out from the calls that simply ran. */
.af-tool--rejected[b-r20qxv1v3x] {
    border-color: #F5C2C0;
    background: #FEF3F2;
    color: #B42318;
}

.af-tool--error[b-r20qxv1v3x] {
    border-color: #FEDF89;
    background: #FFFAEB;
    color: #93370D;
}

.af-signal[b-r20qxv1v3x] {
    border-style: dashed;
}

.af-diagnosis[b-r20qxv1v3x] {
    margin-top: .4rem;
    font-size: .8rem;
    color: var(--app-text-2, #4A5B78);
}

.af-diagnosis-cat[b-r20qxv1v3x] {
    color: var(--app-text-3, #8A9BB5);
}

.af-suggestion[b-r20qxv1v3x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .45rem;
    padding: .4rem .6rem;
    border-radius: 8px;
    background: rgba(0, 197, 168, .07);
    font-size: .8rem;
}

.af-item-actions[b-r20qxv1v3x] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: .45rem;
}

.af-item-actions .btn-link[b-r20qxv1v3x] {
    font-size: .78rem;
    text-decoration: none;
}

.af-flag[b-r20qxv1v3x] {
    font-size: .7rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: #FEF3C7;
    color: #92400E;
}

.af-draft[b-r20qxv1v3x] {
    margin-top: .6rem;
    border: 1px solid var(--app-border, #DCE5F0);
    border-radius: var(--app-r, 10px);
    overflow: hidden;
}

.af-draft-head[b-r20qxv1v3x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: .45rem .75rem;
    background: var(--bs-secondary-bg-subtle, #f4f5f7);
    font-size: .78rem;
}

.af-draft-json[b-r20qxv1v3x] {
    margin: 0;
    padding: .6rem .75rem;
    max-height: 22rem;
    overflow: auto;
    font-size: .72rem;
    background: var(--app-white, #fff);
}
/* /Pages/Admin/AssistantFeedback/FeedbackThemeDetail.razor.rz.scp.css */
.af-status[b-6ghlb608f3] {
    font-size: 0.7rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    border: 1px solid currentColor;
}

.af-status--open[b-6ghlb608f3] { color: var(--app-text, #0D2447); }
.af-status--triaged[b-6ghlb608f3] { color: #1D4ED8; }
.af-status--resolved[b-6ghlb608f3] { color: #067647; }
.af-status--closed[b-6ghlb608f3] { color: var(--app-text-3, #8A9BB5); }

.af-regression[b-6ghlb608f3] {
    font-size: 0.72rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: #FEF3F2;
    color: #B42318;
}

.af-inline-select[b-6ghlb608f3] {
    width: auto;
    max-width: 22rem;
}

.af-inline-input[b-6ghlb608f3] {
    width: 14rem;
}

.af-pre[b-6ghlb608f3] {
    white-space: pre-wrap;
}

@media (max-width: 575.98px) {
    .af-inline-input[b-6ghlb608f3] { width: 100%; }
}
/* /Pages/Admin/AssistantFeedback/FeedbackTranscriptViewer.razor.rz.scp.css */
.af-transcript[b-wm6a1wk5re] {
    margin-top: .6rem;
    border: 1px solid var(--app-border, #DCE5F0);
    border-radius: var(--app-r, 10px);
    background: var(--app-white, #fff);
    overflow: hidden;
}

.af-transcript-banner[b-wm6a1wk5re] {
    padding: .35rem .75rem;
    background: var(--bs-secondary-bg-subtle, #f4f5f7);
    color: var(--app-text-2, #4A5B78);
    font-size: .75rem;
}

.af-transcript-head[b-wm6a1wk5re] {
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--app-border, #DCE5F0);
    font-size: .85rem;
}

.af-turns[b-wm6a1wk5re] {
    list-style: none;
    margin: 0;
    padding: .5rem .75rem .75rem;
    max-height: 32rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.af-turn[b-wm6a1wk5re] {
    padding: .45rem .65rem;
    border-radius: 8px;
    border-left: 3px solid transparent;
    font-size: .85rem;
}

.af-turn--user[b-wm6a1wk5re] {
    background: var(--bs-secondary-bg-subtle, #f4f5f7);
}

.af-turn--assistant[b-wm6a1wk5re] {
    background: transparent;
    border-left-color: var(--app-border, #DCE5F0);
}

/* The exchange that was reported — the reason the reviewer opened this. */
.af-turn--flagged[b-wm6a1wk5re] {
    border-left-color: #B42318;
    background: rgba(180, 35, 24, .04);
}

.af-turn-who[b-wm6a1wk5re] {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--app-text-2, #4A5B78);
    margin-bottom: .15rem;
}

.af-turn-when[b-wm6a1wk5re] {
    font-weight: 400;
    color: var(--app-text-3, #8A9BB5);
}

.af-turn-flag[b-wm6a1wk5re] {
    color: #B42318;
}

.af-turn-body[b-wm6a1wk5re] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.af-turn--assistant .af-turn-body[b-wm6a1wk5re] {
    white-space: normal;
}

.af-turn-tools[b-wm6a1wk5re] {
    margin-top: .3rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.af-turn-tool summary[b-wm6a1wk5re] {
    cursor: pointer;
    font-size: .75rem;
}

.af-turn-tool pre[b-wm6a1wk5re] {
    margin: .2rem 0 .3rem;
    padding: .35rem .5rem;
    max-height: 14rem;
    overflow: auto;
    background: var(--bs-secondary-bg, #f1f3f5);
    border-radius: 6px;
    font-size: .72rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.af-turn-tool-label[b-wm6a1wk5re] {
    font-size: .7rem;
    color: var(--app-text-3, #8A9BB5);
}

.af-flag[b-wm6a1wk5re] {
    font-size: .7rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: #FEF3C7;
    color: #92400E;
}
/* /Pages/Admin/AssistantFeedback/FeedbackWorklist.razor.rz.scp.css */
/* Mirrors the Data Health worklist (DataHealth/Worklist.razor.css): the same tiles, table and
   empty states, so the two queues read as one family. */

.af-lede[b-8lm37msahx] {
    max-width: 75ch;
}

.af-tiles[b-8lm37msahx] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.5rem;
}

.af-tile[b-8lm37msahx] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0.6rem 0.85rem;
    text-align: left;
    background: var(--app-white, #fff);
    border: 1px solid var(--app-border, #DCE5F0);
    border-radius: var(--app-r, 10px);
    box-shadow: var(--app-shadow-xs, 0 1px 3px rgba(13, 36, 71, 0.05));
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

button.af-tile:hover[b-8lm37msahx] {
    border-color: var(--app-border-2, #C5D3E8);
    box-shadow: var(--app-shadow-sm, 0 2px 8px rgba(13, 36, 71, 0.07));
}

.af-tile:focus-visible[b-8lm37msahx] {
    outline: 2px solid var(--app-teal, #00C5A8);
    outline-offset: 2px;
}

.af-tile--static[b-8lm37msahx] {
    background: transparent;
    box-shadow: none;
}

.af-tile--on[b-8lm37msahx] {
    border-color: var(--app-navy, #0D2447);
    box-shadow: inset 0 0 0 1px var(--app-navy, #0D2447);
}

.af-tile-n[b-8lm37msahx] {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--app-text, #0D2447);
    font-variant-numeric: tabular-nums;
}

.af-tile--attn .af-tile-n[b-8lm37msahx] {
    color: #B42318;
}

.af-tile-l[b-8lm37msahx] {
    font-size: 0.75rem;
    color: var(--app-text-2, #4A5B78);
}

.af-chips[b-8lm37msahx] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.af-chip[b-8lm37msahx] {
    padding: 0.2rem 0.65rem;
    border: 1px solid var(--app-border, #DCE5F0);
    border-radius: 999px;
    background: var(--app-white, #fff);
    color: var(--app-text, #0D2447);
    font-size: 0.78rem;
}

.af-chip:hover[b-8lm37msahx] {
    border-color: var(--app-border-2, #C5D3E8);
}

.af-chip:focus-visible[b-8lm37msahx] {
    outline: 2px solid var(--app-teal, #00C5A8);
    outline-offset: 2px;
}

.af-chip--on[b-8lm37msahx] {
    background: var(--app-navy, #0D2447);
    border-color: var(--app-navy, #0D2447);
    color: #fff;
}

.af-chip-n[b-8lm37msahx] {
    margin-left: 0.2rem;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

.af-table td[b-8lm37msahx] {
    font-size: 0.85rem;
}

.af-theme-title[b-8lm37msahx] {
    font-weight: 600;
    text-decoration: none;
}

.af-theme-title:hover[b-8lm37msahx] {
    text-decoration: underline;
}

.af-cat[b-8lm37msahx] {
    font-size: 0.78rem;
    white-space: nowrap;
}

.af-toolname[b-8lm37msahx],
.af-proposed[b-8lm37msahx] {
    display: inline-block;
    margin: 0 0.25rem 0.15rem 0;
    padding: 0.05rem 0.35rem;
    border-radius: 5px;
    background: var(--bs-secondary-bg, #f1f3f5);
    color: var(--app-text-2, #4A5B78);
    font-size: 0.72rem;
}

.af-proposed[b-8lm37msahx] {
    background: rgba(0, 197, 168, 0.1);
    color: #0B6B5D;
}

.af-status[b-8lm37msahx] {
    font-size: 0.7rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    border: 1px solid currentColor;
}

.af-status--triaged[b-8lm37msahx] { color: #1D4ED8; }
.af-status--resolved[b-8lm37msahx] { color: #067647; }
.af-status--closed[b-8lm37msahx] { color: var(--app-text-3, #8A9BB5); }

.af-regression[b-8lm37msahx] {
    font-size: 0.7rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: #FEF3F2;
    color: #B42318;
}

.af-inline-select[b-8lm37msahx] {
    width: auto;
    max-width: 22rem;
}

.af-inline-input[b-8lm37msahx] {
    width: 16rem;
}

@media (max-width: 1199.98px) {
    .af-tiles[b-8lm37msahx] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .af-tiles[b-8lm37msahx] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .af-inline-input[b-8lm37msahx] { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .af-tile[b-8lm37msahx] { transition: none; }
}
/* /Pages/Assistant/PendingActionReview.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────
   Pending action review page — full-surface approval UI
   for a single proposed write-tool action. Mirrors the
   dock's confirmation-card visual language so users
   recognize the surface, but takes the whole page so a
   reviewer (or someone finalizing an action proposed on
   their behalf) can read context comfortably without
   the chat history getting in the way.
   ───────────────────────────────────────────────────────── */

.par-back a[b-xrfjbasu10] {
    color: var(--bs-secondary-color);
    text-decoration: none;
    font-size: 0.85rem;
}

.par-back a:hover[b-xrfjbasu10] {
    color: var(--app-teal, #00C5A8);
    text-decoration: underline;
}

.par-card[b-xrfjbasu10] {
    max-width: 760px;
    background: #fffbea;
    border: 1px solid #f5d67a;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.par-card--error[b-xrfjbasu10] {
    background: #fff0ed;
    border-color: #f0a8a0;
}

.par-head[b-xrfjbasu10] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    color: #856404;
}

.par-head-main[b-xrfjbasu10] {
    font-size: 1.05rem;
    display: flex;
    align-items: center;
}

.par-head-meta[b-xrfjbasu10] {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
}

.par-list[b-xrfjbasu10] {
    background: #fff;
    border: 1px solid #f1e0a3;
    border-radius: 8px;
    max-height: 280px;
    overflow-y: auto;
    padding: 0.3rem 0.6rem;
}

.par-item[b-xrfjbasu10] {
    padding: 0.4rem 0.2rem;
    border-bottom: 1px solid #faf0cb;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.par-item:last-child[b-xrfjbasu10] {
    border-bottom: none;
}

.par-item-title[b-xrfjbasu10] {
    color: var(--bs-body-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

.par-item-state[b-xrfjbasu10] {
    color: var(--bs-secondary-color);
    white-space: nowrap;
    font-size: 0.8rem;
}

.par-overflow[b-xrfjbasu10] {
    text-align: center;
    padding: 0.4rem;
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
}

.par-edit[b-xrfjbasu10] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.par-edit-label[b-xrfjbasu10] {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.par-edit-textarea[b-xrfjbasu10] {
    font-family: var(--bs-font-monospace, ui-monospace, monospace);
    font-size: 0.8rem;
    resize: vertical;
}

.par-edit-error[b-xrfjbasu10] {
    font-size: 0.78rem;
    color: #a32a37;
    background: rgba(220, 53, 69, 0.08);
    border-radius: 6px;
    padding: 0.35rem 0.55rem;
}

.par-edit-formwrap[b-xrfjbasu10] {
    background: #fff;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 8px;
    padding: 0.7rem 0.85rem;
}

.par-edit-toggle[b-xrfjbasu10] {
    background: none;
    border: none;
    color: var(--bs-primary, #0d2447);
    font-size: 0.78rem;
    padding: 0.15rem 0;
    cursor: pointer;
    text-decoration: underline;
    align-self: flex-start;
}

.par-edit-toggle:hover[b-xrfjbasu10] {
    color: var(--app-teal, #00C5A8);
}

.par-actions[b-xrfjbasu10] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.par-view-convo[b-xrfjbasu10] {
    color: var(--bs-secondary-color);
    text-decoration: none;
}

.par-view-convo:hover[b-xrfjbasu10] {
    color: var(--app-teal, #00C5A8);
    text-decoration: underline;
}

/* ── Result panel: appears under the actions row once a decision is sent ─ */
.par-result[b-xrfjbasu10] {
    border-top: 1px dashed rgba(0, 0, 0, 0.12);
    padding-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.par-status[b-xrfjbasu10] {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: var(--bs-body-color);
}

.par-status--ok[b-xrfjbasu10] {
    color: #166534;
}

.par-status--err[b-xrfjbasu10] {
    color: #991b1b;
}

.par-tool-card[b-xrfjbasu10] {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 6px;
    padding: 0.35rem 0.55rem;
    font-size: 0.82rem;
    color: var(--bs-secondary-color);
    align-self: flex-start;
}

.par-tool-summary[b-xrfjbasu10] {
    color: var(--bs-secondary-color);
}

.par-final-text[b-xrfjbasu10] {
    background: #fff;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 6px;
    padding: 0.55rem 0.7rem;
    font-size: 0.9rem;
    color: var(--bs-body-color);
    white-space: pre-wrap;
}

.par-result-actions[b-xrfjbasu10] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

@@keyframes par-spin-kf {
    to[b-xrfjbasu10] { transform: rotate(360deg); }
}

.par-spin[b-xrfjbasu10] {
    display: inline-block;
    animation: par-spin-kf 1s linear infinite;
}

.par-warning[b-xrfjbasu10],
.par-unreviewed[b-xrfjbasu10] {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.par-warning[b-xrfjbasu10] {
    background: #fff3cd;
    border: 1px solid #f1c40f;
    color: #664d03;
}

.par-unreviewed[b-xrfjbasu10] {
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px dashed var(--bs-border-color, #dee2e6);
    color: var(--bs-secondary-color);
}

.par-steps[b-xrfjbasu10] {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.par-step-head[b-xrfjbasu10] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.par-step-num[b-xrfjbasu10] {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--bs-secondary-bg, #e9ecef);
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.par-step-note[b-xrfjbasu10] {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
    padding-left: 2rem;
}

.par-step .par-list[b-xrfjbasu10] {
    margin: 0.35rem 0 0 2rem;
}
/* /Pages/ForgotPassword.razor.rz.scp.css */
.fp-desc[b-53102ix6ml] {
    font-size: 0.88rem;
    color: var(--app-text-2);
    line-height: 1.55;
    margin-bottom: 1.25rem;
}

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

.fp-sent-icon[b-53102ix6ml] {
    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-53102ix6ml] {
    font-size: 0.92rem;
    color: var(--app-text);
    line-height: 1.5;
    margin-bottom: 0.25rem;
}

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

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

.fp-back-link[b-53102ix6ml] {
    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-53102ix6ml] {
    color: var(--app-navy);
}
/* /Pages/Home.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   DASHBOARD SKELETONS
   ═══════════════════════════════════════════════════════════════════ */

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

.dash-skel-list[b-wp7jh45d0i] {
    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-wp7jh45d0i] {
    height: 16px;
    width: 40%;
    border-radius: 4px;
    margin-bottom: 0.25rem;
}

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

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

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

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

.gs-bar[b-wp7jh45d0i] {
    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-wp7jh45d0i] {
    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-wp7jh45d0i] {
    flex-shrink: 0;
    color: var(--app-text-3);
    transition: color var(--app-mid) ease;
}

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

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

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

.gs-spinner[b-wp7jh45d0i] {
    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-wp7jh45d0i 0.65s linear infinite;
}

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

.gs-clear[b-wp7jh45d0i] {
    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-wp7jh45d0i] {
    color: var(--app-text);
    background: var(--app-border);
    border-color: transparent;
}

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

.gs-results[b-wp7jh45d0i] {
    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-wp7jh45d0i 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
}

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

.gs-no-results[b-wp7jh45d0i] {
    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-wp7jh45d0i] {
    padding: 14px 16px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

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

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

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

.gs-group-more[b-wp7jh45d0i] {
    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-wp7jh45d0i] {
    color: var(--app-teal);
}

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

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

.gs-card[b-wp7jh45d0i] {
    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-wp7jh45d0i 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-wp7jh45d0i] { animation-delay: 0.04s; }
.gs-card:nth-child(2)[b-wp7jh45d0i] { animation-delay: 0.08s; }
.gs-card:nth-child(3)[b-wp7jh45d0i] { animation-delay: 0.12s; }
.gs-card:nth-child(4)[b-wp7jh45d0i] { animation-delay: 0.16s; }
.gs-card:nth-child(5)[b-wp7jh45d0i] { animation-delay: 0.20s; }

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

.gs-card:hover[b-wp7jh45d0i] {
    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-wp7jh45d0i] {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gs-icon-account[b-wp7jh45d0i] {
    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-wp7jh45d0i] {
    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-wp7jh45d0i] {
    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-wp7jh45d0i] {
    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-wp7jh45d0i] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.gs-card-name[b-wp7jh45d0i] {
    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-wp7jh45d0i] {
    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-7rzj2s1937] {
  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-7rzj2s1937] {
  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-7rzj2s1937]::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-7rzj2s1937] {
  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-7rzj2s1937]  .form-label {
  color: rgba(255, 255, 255, 0.55);
}

.login-card-body[b-7rzj2s1937]  .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-7rzj2s1937]  .form-control::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.login-card-body[b-7rzj2s1937]  .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-7rzj2s1937]  .login-field:nth-child(1) { animation: crm-slide-up 0.4s var(--app-ease) both 0.40s; }
.login-card-body[b-7rzj2s1937]  .login-field:nth-child(2) { animation: crm-slide-up 0.4s var(--app-ease) both 0.50s; }
.login-card-body[b-7rzj2s1937]  .login-field:nth-child(3) { animation: crm-slide-up 0.4s var(--app-ease) both 0.60s; }
.login-card-body[b-7rzj2s1937]  .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-7rzj2s1937]  .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-7rzj2s1937]  .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-7rzj2s1937]  .login-btn-primary:active:not(:disabled) {
  transform: scale(0.99);
}

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

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

.login-card-body[b-7rzj2s1937]  .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-7rzj2s1937]  .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-7rzj2s1937]  .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-7rzj2s1937]  .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-7rzj2s1937]  .login-forgot:hover {
  color: var(--app-teal);
}

/* ── MFA Section ── */

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

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

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

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

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

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

/* ── Validation Messages ── */

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

/* ── Responsive ── */

@media (max-width: 640.98px) {
  .login-card[b-7rzj2s1937] {
    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-7rzj2s1937]::after {
    animation: none;
  }
}
/* /Pages/Profile.razor.rz.scp.css */
/* ── Profile avatar ─────────────────────────────────── */

.profile-avatar-row[b-qmgs75zjhl] {
    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-qmgs75zjhl] {
    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-qmgs75zjhl]  { font-size: 1.05rem; font-weight: 600; }
.profile-email[b-qmgs75zjhl]      { font-size: 0.82rem; opacity: 0.8; }
.profile-title-display[b-qmgs75zjhl] { font-size: 0.82rem; opacity: 0.7; font-style: italic; margin-top: 0.1rem; }

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

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

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

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

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

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

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

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

.em-notif-group-header[b-qmgs75zjhl] {
    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-qmgs75zjhl] {
    font-size: 0.85rem;
    color: var(--app-navy-400);
}

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

.em-notif-toggle[b-qmgs75zjhl] {
    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-qmgs75zjhl] { border-bottom: none; }

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

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

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

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

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

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

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

.notif-actions[b-qmgs75zjhl] {
    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-lge4ob15fq] {
    text-align: center;
    padding: 1rem 0 0.5rem;
}

.rp-success-icon[b-lge4ob15fq] {
    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-lge4ob15fq] {
    font-size: 0.92rem;
    color: var(--app-text);
    line-height: 1.5;
    margin-bottom: 0.25rem;
}
/* /Shared/AiAssistantDock.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────
   AI Assistant Dock — everpresent, draggable, resizable.
   Anchored bottom-right of the viewport. Uses existing
   --app-* tokens from app.css so it matches the app theme.
   ───────────────────────────────────────────────────────── */

.ai-dock[b-fd995rapx1] {
    position: fixed;
    right: var(--dock-x, 24px);
    bottom: var(--dock-y, 24px);
    z-index: 1050;
    font-family: inherit;
    user-select: text;
    /* Animate the pill ↔ panel transition. Only the size + border-radius
       need transitioning; content children fade in separately. Skipping
       `right`/`bottom` so live drag stays pixel-exact. */
    transition:
        width 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        height 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        border-radius 0.18s ease;
    will-change: width, height;
}

/* Suppress transitions while the user is dragging/resizing — JS sets this
   class via the pointer handlers so the dock tracks the pointer exactly
   without easing lag. */
.ai-dock--interacting[b-fd995rapx1] {
    transition: none !important;
}

/* ── Collapsed state: round teal pill ────────────────────────────── */
.ai-dock--pill[b-fd995rapx1] {
    width: 56px;
    height: 56px;
    /* No overflow: hidden here — the pill has nothing to clip, and the
       drop-shadow (6px offset + 18px blur + hover bump) needs to render
       outside the 56×56 box. */
}

.ai-dock-pill[b-fd995rapx1] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    animation: ai-dock-fade-in-b-fd995rapx1 0.2s ease-out;
    border: none;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #00C5A8 0%, #0D2447 100%);
    box-shadow: 0 6px 18px rgba(0, 197, 168, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ai-dock-pill:hover[b-fd995rapx1] {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 10px 22px rgba(0, 197, 168, 0.45), 0 3px 8px rgba(0, 0, 0, 0.25);
}

/* ── Expanded state: the panel ───────────────────────────────────── */
.ai-dock--open[b-fd995rapx1] {
    width: var(--dock-w, 380px);
    height: var(--dock-h, 560px);
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 6px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ai-dock-header[b-fd995rapx1] {
    padding: 0.65rem 0.9rem;
    background: linear-gradient(135deg, #0D2447, #143a6b);
    color: #fff;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    animation: ai-dock-fade-in-b-fd995rapx1 0.2s ease-out 0.05s backwards;
}

@keyframes ai-dock-fade-in-b-fd995rapx1 {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ai-dock-header:active[b-fd995rapx1] {
    cursor: grabbing;
}

.ai-dock-title[b-fd995rapx1] {
    display: flex;
    align-items: center;
    min-width: 0;
}

.ai-dock-context[b-fd995rapx1] {
    font-size: 0.72rem;
    padding: 0.1rem 0.45rem;
    background: rgba(0, 197, 168, 0.15);
    color: #7df0d9;
    border-radius: 999px;
    border: 1px solid rgba(0, 197, 168, 0.25);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.ai-dock-header-actions[b-fd995rapx1] {
    display: flex;
    gap: 0.25rem;
}

.ai-dock-iconbtn[b-fd995rapx1] {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.75);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.ai-dock-iconbtn:hover[b-fd995rapx1] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* ── Turn list ───────────────────────────────────────────────────── */
.ai-dock-turns[b-fd995rapx1] {
    flex: 1;
    overflow-y: auto;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    background: var(--bs-tertiary-bg, #f7f8fa);
}

.ai-turn[b-fd995rapx1] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ai-turn--user[b-fd995rapx1] { align-items: flex-end; }
.ai-turn--assistant[b-fd995rapx1] { align-items: flex-start; }

.ai-bubble[b-fd995rapx1] {
    max-width: 88%;
    padding: 0.55rem 0.8rem;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.ai-bubble--user[b-fd995rapx1] {
    background: #0D2447;
    color: #fff;
    border-bottom-right-radius: 4px;
}

.ai-bubble--assistant[b-fd995rapx1] {
    background: #fff;
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color-translucent, #e5e7eb);
    border-bottom-left-radius: 4px;
}

.ai-bubble--error[b-fd995rapx1] {
    background: rgba(220, 53, 69, 0.08);
    color: #a32a37;
    border: 1px solid rgba(220, 53, 69, 0.25);
}

/* ── Tool invocation card (read tools) ───────────────────────────── */
.ai-tool-card[b-fd995rapx1] {
    width: 88%;
    background: rgba(13, 36, 71, 0.03);
    border: 1px solid var(--bs-border-color-translucent);
    border-left: 3px solid #00C5A8;
    border-radius: 8px;
    padding: 0.45rem 0.7rem;
    font-size: 0.8rem;
}

.ai-tool-card--write[b-fd995rapx1] {
    border-left-color: #ffb020;
    background: rgba(255, 176, 32, 0.06);
}

.ai-tool-card-head[b-fd995rapx1] {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    color: var(--bs-body-color);
}

.ai-tool-card-summary[b-fd995rapx1] {
    color: var(--bs-secondary-color, #6b7280);
}

.ai-tool-card-details[b-fd995rapx1] {
    margin-top: 0.35rem;
    font-size: 0.72rem;
}

.ai-tool-card-details > summary[b-fd995rapx1] {
    cursor: pointer;
    color: var(--bs-secondary-color, #6b7280);
    user-select: none;
    list-style: none;
    padding: 0.1rem 0.25rem;
    border-radius: 4px;
}

.ai-tool-card-details > summary[b-fd995rapx1]::-webkit-details-marker {
    display: none;
}

.ai-tool-card-details > summary[b-fd995rapx1]::before {
    content: "▸";
    display: inline-block;
    width: 0.9rem;
    color: var(--bs-secondary-color, #6b7280);
}

.ai-tool-card-details[open] > summary[b-fd995rapx1]::before {
    content: "▾";
}

.ai-tool-card-details > summary:hover[b-fd995rapx1] {
    background: rgba(13, 36, 71, 0.04);
}

.ai-tool-card-section-label[b-fd995rapx1] {
    margin-top: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.65rem;
    color: var(--bs-secondary-color, #6b7280);
}

.ai-tool-card-json[b-fd995rapx1] {
    margin: 0.15rem 0 0.35rem 0;
    padding: 0.4rem 0.55rem;
    background: rgba(13, 36, 71, 0.05);
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem;
    line-height: 1.35;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 14rem;
    overflow: auto;
}

/* ── Confirmation card (write tools) ─────────────────────────────── */
.ai-confirm-card[b-fd995rapx1] {
    width: 92%;
    background: #fffbea;
    border: 1px solid #f5d67a;
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
    font-size: 0.87rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Safety-check flagged a potential mismatch. Shift from amber to red accent. */
.ai-confirm-card--warned[b-fd995rapx1] {
    background: #fff0ed;
    border-color: #f0a8a0;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.12);
}

.ai-confirm-warning[b-fd995rapx1] {
    background: rgba(220, 53, 69, 0.08);
    border: 1px solid rgba(220, 53, 69, 0.25);
    border-radius: 6px;
    padding: 0.4rem 0.55rem;
    color: #991b1b;
    font-size: 0.8rem;
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    line-height: 1.35;
}

.ai-confirm-head[b-fd995rapx1] {
    display: flex;
    align-items: center;
    color: #856404;
}

.ai-confirm-list[b-fd995rapx1] {
    background: #fff;
    border: 1px solid #f1e0a3;
    border-radius: 6px;
    max-height: 180px;
    overflow-y: auto;
    padding: 0.2rem 0.4rem;
}

.ai-confirm-item[b-fd995rapx1] {
    padding: 0.3rem 0.2rem;
    border-bottom: 1px solid #faf0cb;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8rem;
}

.ai-confirm-item:last-child[b-fd995rapx1] { border-bottom: none; }

.ai-confirm-item-title[b-fd995rapx1] {
    color: var(--bs-body-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

.ai-confirm-item-state[b-fd995rapx1] {
    color: var(--bs-secondary-color);
    white-space: nowrap;
    font-size: 0.75rem;
}

.ai-confirm-overflow[b-fd995rapx1] {
    text-align: center;
    padding: 0.3rem;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

/* A plan card: every write of the job, numbered in the order it runs. */
.ai-plan-steps[b-fd995rapx1] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.ai-plan-step[b-fd995rapx1] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.ai-plan-step-head[b-fd995rapx1] {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    font-size: 0.82rem;
    min-width: 0;
}

.ai-plan-step-num[b-fd995rapx1] {
    flex: 0 0 auto;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: #f1e0a3;
    color: #856404;
    font-size: 0.72rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ai-plan-step-desc[b-fd995rapx1] {
    color: var(--bs-body-color);
    min-width: 0;
    overflow-wrap: anywhere;
}

.ai-plan-step-note[b-fd995rapx1] {
    font-size: 0.72rem;
    color: var(--bs-secondary-color);
    padding-left: 1.75rem;
}

.ai-plan-step .ai-confirm-list[b-fd995rapx1] {
    margin-left: 1.75rem;
}

.ai-plan-more[b-fd995rapx1] {
    display: block;
    width: 100%;
    background: none;
    border: none;
    padding: 0.3rem;
    font-size: 0.75rem;
    color: var(--bs-primary, #0d2447);
    text-decoration: underline;
    cursor: pointer;
}

.ai-confirm-actions[b-fd995rapx1] {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
}

/* ── Thread switcher (slides over the turns area) ────────────────── */
.ai-dock-threadlist[b-fd995rapx1] {
    position: absolute;
    top: 54px; /* sits under the header */
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bs-body-bg, #fff);
    border-top: 1px solid var(--bs-border-color);
    display: flex;
    flex-direction: column;
    z-index: 2;
    animation: ai-dock-slide-in-b-fd995rapx1 0.15s ease;
}

@keyframes ai-dock-slide-in-b-fd995rapx1 {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ai-dock-threadlist-head[b-fd995rapx1] {
    padding: 0.65rem 0.9rem;
    background: linear-gradient(135deg, #0D2447, #143a6b);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ai-dock-iconbtn--dark[b-fd995rapx1] {
    color: rgba(255, 255, 255, 0.75);
}

.ai-dock-threadlist-items[b-fd995rapx1] {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
}

.ai-dock-threadlist-item[b-fd995rapx1] {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    transition: background 0.15s;
}

.ai-dock-threadlist-item:hover[b-fd995rapx1] {
    background: var(--bs-tertiary-bg, #f7f8fa);
}

.ai-dock-threadlist-item--active[b-fd995rapx1] {
    background: rgba(0, 197, 168, 0.08);
    border-left: 3px solid var(--app-teal, #00C5A8);
}

.ai-dock-threadlist-pick[b-fd995rapx1] {
    flex: 1;
    background: none;
    border: none;
    text-align: left;
    padding: 0.55rem 0.85rem;
    cursor: pointer;
    min-width: 0;
}

.ai-dock-threadlist-pick:disabled[b-fd995rapx1] { cursor: wait; opacity: 0.6; }

.ai-dock-threadlist-title[b-fd995rapx1] {
    font-size: 0.87rem;
    font-weight: 500;
    color: var(--bs-body-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-dock-threadlist-meta[b-fd995rapx1] {
    font-size: 0.72rem;
    color: var(--bs-secondary-color, #6b7280);
    margin-top: 0.12rem;
}

.ai-dock-threadlist-del[b-fd995rapx1] {
    background: none;
    border: none;
    color: var(--bs-secondary-color, #6b7280);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    margin-right: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ai-dock-threadlist-del:hover[b-fd995rapx1] {
    background: rgba(220, 53, 69, 0.08);
    color: #a32a37;
}

.ai-dock-threadlist-empty[b-fd995rapx1] {
    padding: 1.5rem;
    text-align: center;
    color: var(--bs-secondary-color);
    font-size: 0.85rem;
}

/* ── Confirmation edit area ──────────────────────────────────────── */
.ai-confirm-edit[b-fd995rapx1] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ai-confirm-edit-label[b-fd995rapx1] {
    font-size: 0.72rem;
    color: var(--bs-secondary-color);
}

.ai-confirm-edit-textarea[b-fd995rapx1] {
    font-family: var(--bs-font-monospace, ui-monospace, monospace);
    font-size: 0.75rem;
    resize: vertical;
}

.ai-confirm-edit-error[b-fd995rapx1] {
    font-size: 0.72rem;
    color: #a32a37;
    background: rgba(220, 53, 69, 0.08);
    border-radius: 4px;
    padding: 0.25rem 0.45rem;
}

.ai-confirm-edit-formwrap[b-fd995rapx1] {
    background: #fff;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 6px;
    padding: 0.55rem 0.7rem;
}

.ai-confirm-edit-toggle[b-fd995rapx1] {
    background: none;
    border: none;
    color: var(--bs-primary, #0d2447);
    font-size: 0.72rem;
    padding: 0.15rem 0;
    cursor: pointer;
    text-decoration: underline;
    align-self: flex-start;
}

.ai-confirm-edit-toggle:hover[b-fd995rapx1] {
    color: var(--app-teal, #00C5A8);
}

/* ── Schema-driven form ──────────────────────────────────────────── */
.ai-sf[b-fd995rapx1] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.ai-sf-row[b-fd995rapx1] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ai-sf-label[b-fd995rapx1] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 0;
    text-transform: none;
}

.ai-sf-required[b-fd995rapx1] {
    color: #a32a37;
    margin-left: 0.15rem;
}

.ai-sf-hint[b-fd995rapx1] {
    font-size: 0.7rem;
    color: var(--bs-secondary-color, #6b7280);
    line-height: 1.3;
}

.ai-sf-array[b-fd995rapx1] {
    font-family: inherit;
}

.ai-sf-empty[b-fd995rapx1] {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
    font-style: italic;
}

/* ── Input composer ──────────────────────────────────────────────── */
.ai-dock-input[b-fd995rapx1] {
    border-top: 1px solid var(--bs-border-color);
    padding: 0.7rem 0.85rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ai-dock-input textarea[b-fd995rapx1] {
    resize: none;
    border-radius: 8px;
}

.ai-dock-input-row[b-fd995rapx1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ai-dock-input-left[b-fd995rapx1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ── Voice (mic + listening indicator + TTS toggle) ──────────────── */
.ai-dock-iconbtn--on[b-fd995rapx1] {
    background: rgba(0, 197, 168, 0.18);
    color: #7df0d9;
}

.ai-voice-mic[b-fd995rapx1] {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--bs-border-color);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color, #6b7280);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ai-voice-mic:hover[b-fd995rapx1] {
    background: rgba(13, 36, 71, 0.05);
    color: #0D2447;
}

.ai-voice-mic--on[b-fd995rapx1] {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
    animation: ai-voice-pulse-btn-b-fd995rapx1 1.2s ease-in-out infinite;
}

.ai-voice-mic--on:hover[b-fd995rapx1] {
    background: #b02635;
    color: #fff;
}

.ai-voice-speaker[b-fd995rapx1] {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--bs-border-color);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color, #6b7280);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ai-voice-speaker:hover[b-fd995rapx1] {
    background: rgba(13, 36, 71, 0.05);
    color: #0D2447;
}

.ai-voice-speaker--on[b-fd995rapx1] {
    background: rgba(0, 197, 168, 0.12);
    border-color: rgba(0, 197, 168, 0.45);
    color: #007a68;
}

.ai-voice-speaker--on:hover[b-fd995rapx1] {
    background: rgba(0, 197, 168, 0.22);
    color: #006455;
}

@keyframes ai-voice-pulse-btn-b-fd995rapx1 {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.6); }
    50%      { box-shadow: 0 0 0 7px rgba(220, 53, 69, 0); }
}

.ai-voice-autosend[b-fd995rapx1] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    user-select: none;
    cursor: pointer;
    margin: 0;
}

.ai-voice-autosend input[type="checkbox"][b-fd995rapx1] {
    margin: 0;
}

.ai-voice-listening[b-fd995rapx1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.4rem;
    background: rgba(220, 53, 69, 0.08);
    border: 1px solid rgba(220, 53, 69, 0.25);
    border-radius: 8px;
    font-size: 0.8rem;
    color: #991b1b;
    font-weight: 500;
}

.ai-voice-hint[b-fd995rapx1] {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--bs-secondary-color, #6b7280);
    margin-left: auto;
}

.ai-voice-pulse[b-fd995rapx1] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #dc3545;
    display: inline-block;
    animation: ai-voice-pulse-dot-b-fd995rapx1 1s ease-in-out infinite;
}

@keyframes ai-voice-pulse-dot-b-fd995rapx1 {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.3); opacity: 0.5; }
}

.ai-voice-error[b-fd995rapx1] {
    margin-bottom: 0.4rem;
    padding: 0.5rem 0.65rem;
    background: #fff3cd;
    border: 1px solid #f5d67a;
    border-left: 3px solid #d68f00;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #5a4300;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ai-voice-error-head[b-fd995rapx1] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.ai-voice-error-head strong[b-fd995rapx1] {
    color: #4a3700;
}

.ai-voice-error-body[b-fd995rapx1] {
    font-size: 0.72rem;
    line-height: 1.35;
    color: #5a4300;
}

.ai-voice-error-details[b-fd995rapx1] {
    font-size: 0.7rem;
    color: #7a5e00;
}

.ai-voice-error-details summary[b-fd995rapx1] {
    cursor: pointer;
    user-select: none;
    padding: 0.1rem 0;
}

.ai-voice-error-details code[b-fd995rapx1] {
    display: block;
    margin-top: 0.2rem;
    padding: 0.25rem 0.4rem;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 3px;
    font-size: 0.68rem;
    color: #4a3700;
    word-break: break-word;
}

.ai-voice-settings-btn[b-fd995rapx1] {
    padding: 0.15rem 0.35rem;
    color: var(--bs-secondary-color, #6b7280);
}

.ai-voice-settings-btn:hover[b-fd995rapx1] {
    color: #0D2447;
}

.ai-voice-settings[b-fd995rapx1] {
    background: var(--bs-tertiary-bg, #f7f8fa);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    padding: 0.65rem 0.8rem;
    margin-bottom: 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ai-voice-settings-head[b-fd995rapx1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    color: var(--bs-body-color);
}

.ai-voice-settings-row[b-fd995rapx1] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.82rem;
    margin: 0;
}

.ai-voice-settings-row input[type="checkbox"][b-fd995rapx1] {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.ai-voice-settings-row small[b-fd995rapx1] {
    font-size: 0.7rem;
    line-height: 1.3;
}

/* ── Resize handle (bottom-right / inside-top-left visually since we anchor BR) ── */
.ai-dock-resize[b-fd995rapx1] {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 18px;
    height: 18px;
    cursor: nwse-resize;
    color: rgba(255, 255, 255, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transform: rotate(90deg);
}

.ai-dock-resize:hover[b-fd995rapx1] {
    color: rgba(255, 255, 255, 0.9);
}

/* ── Spinner ─────────────────────────────────────────────────────── */
.ai-spin[b-fd995rapx1] {
    display: inline-block;
    animation: ai-spin-kf-b-fd995rapx1 0.9s linear infinite;
}

@keyframes ai-spin-kf-b-fd995rapx1 {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Car mode ─────────────────────────────────────────────────────── */

/* Highlight the car-mode row in the voice settings popover so the
   "single-tap hands-free" affordance reads at a glance. */
.ai-voice-settings-row--carmode[b-fd995rapx1] {
    background: rgba(0, 197, 168, 0.08);
    border: 1px solid rgba(0, 197, 168, 0.25);
    border-radius: 8px;
    padding: 0.55rem 0.6rem;
    margin-bottom: 0.4rem;
}
.ai-voice-settings-row--carmode strong[b-fd995rapx1] {
    color: #007a68;
}

/* In-row chip surfacing car-mode status with one-tap exit. Doubles as a
   reminder when the user has switched away from voice for a moment. */
.ai-dock-carmode-chip[b-fd995rapx1] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(0, 197, 168, 0.12);
    border: 1px solid rgba(0, 197, 168, 0.4);
    color: #007a68;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.ai-dock-carmode-chip:hover[b-fd995rapx1] {
    background: rgba(0, 197, 168, 0.22);
    border-color: rgba(0, 197, 168, 0.6);
}
.ai-dock-carmode-chip-x[b-fd995rapx1] {
    font-size: 0.7rem;
    opacity: 0.7;
}

/* When car mode is on, scale the voice surface up across viewports. The
   hides keep the dock minimally chromed so the user can glance at the
   transcript and tap the mic without hunting. */
.ai-dock--carmode .ai-voice-mic[b-fd995rapx1] {
    width: 64px;
    height: 64px;
    font-size: 1.55rem;
}
.ai-dock--carmode .ai-voice-speaker[b-fd995rapx1] {
    width: 56px;
    height: 56px;
    font-size: 1.35rem;
}
.ai-dock--carmode .ai-dock-input-row .btn-primary[b-fd995rapx1],
.ai-dock--carmode .ai-dock-input-row .btn-outline-danger[b-fd995rapx1] {
    min-height: 56px;
    font-size: 1rem;
}
.ai-dock--carmode .ai-bubble[b-fd995rapx1] {
    font-size: 1.05rem;
    line-height: 1.55;
}
/* Chrome hidden in car mode: thread switcher, settings gear (the popover
   already exposes the toggle), the resize affordance. Header keeps
   minimize/close so the dock can still be backgrounded or dismissed. */
.ai-dock--carmode .ai-dock-context[b-fd995rapx1],
.ai-dock--carmode .ai-voice-settings-btn[b-fd995rapx1],
.ai-dock--carmode .ai-dock-resize[b-fd995rapx1] {
    display: none;
}
.ai-dock--carmode .ai-dock-header-actions .ai-dock-iconbtn[title="Conversation history"][b-fd995rapx1],
.ai-dock--carmode .ai-dock-header-actions .ai-dock-iconbtn[title="New chat"][b-fd995rapx1] {
    display: none;
}

/* Bigger still on mobile, where car mode is the most likely use case. */
@media (max-width: 640px) {
    .ai-dock--carmode .ai-voice-mic[b-fd995rapx1] {
        width: 76px;
        height: 76px;
        font-size: 1.75rem;
    }
    .ai-dock--carmode .ai-voice-speaker[b-fd995rapx1] {
        width: 64px;
        height: 64px;
        font-size: 1.45rem;
    }
}

/* ── Mobile: dock becomes a true bottom sheet ────────────────────── */
@media (max-width: 640px) {
    .ai-dock--open[b-fd995rapx1] {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto;
        width: 100% !important;
        height: 90vh !important;
        border-radius: 16px 16px 0 0;
        border-bottom: none;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
    }
    .ai-dock-header[b-fd995rapx1] {
        cursor: default;
        position: relative;
    }
    /* Drag-handle pill at the top of the sheet */
    .ai-dock-header[b-fd995rapx1]::before {
        content: '';
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.35);
    }
    .ai-dock-resize[b-fd995rapx1] { display: none; }

    /* Mobile voice prominence: enlarge mic/speaker to ≥48px touch targets,
       give the settings gear a real 44px tap zone. */
    .ai-voice-mic[b-fd995rapx1] {
        width: 52px;
        height: 52px;
        font-size: 1.35rem;
    }
    .ai-voice-speaker[b-fd995rapx1] {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
    }
    .ai-voice-settings-btn[b-fd995rapx1] {
        width: 44px;
        height: 44px;
        padding: 0;
        font-size: 1.1rem;
    }
    .ai-dock-input-row[b-fd995rapx1] {
        gap: 0.5rem;
        align-items: center;
    }
    .ai-dock-input-left[b-fd995rapx1] {
        gap: 0.5rem;
    }
    .ai-dock-input-row .btn-primary[b-fd995rapx1],
    .ai-dock-input-row .btn-outline-danger[b-fd995rapx1] {
        min-height: 48px;
        padding: 0.5rem 1rem;
    }
}

/* ── Progress indicator ─────────────────────────────────────────────────
   Shown while a turn is in flight so the user always has visible feedback
   even when ShowToolActivity is off. Live label switches between "Thinking…"
   and tool-specific verbs as the agent loop progresses. */
.ai-progress-indicator[b-fd995rapx1] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    background: rgba(0, 197, 168, 0.08);
    border: 1px solid rgba(0, 197, 168, 0.25);
    border-radius: 999px;
    color: var(--bs-secondary-color, #4b5563);
    font-size: 0.78rem;
    font-style: italic;
    max-width: 88%;
}

/* ── Suggested answers (ask_user) ───────────────────────────────────────
   Hangs off the question bubble above it: the teal rule ties the answers to
   that question rather than reading as another free-standing card. Once the
   user replies, the choices go quiet and the one they picked stays solid. */
.ai-ask-card[b-fd995rapx1] {
    width: 88%;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.1rem 0 0.1rem 0.7rem;
    border-left: 3px solid var(--app-teal, #00C5A8);
}

.ai-ask-question[b-fd995rapx1] {
    font-size: 0.85rem;
    color: var(--bs-body-color);
    margin-bottom: 0.1rem;
}

.ai-ask-option[b-fd995rapx1] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
    width: 100%;
    padding: 0.45rem 0.75rem;
    background: #fff;
    border: 1px solid rgba(13, 36, 71, 0.22);
    border-radius: 10px;
    color: #0d2447;
    text-align: left;
    cursor: pointer;
    transition: background-color 80ms ease-out, border-color 80ms ease-out;
}

.ai-ask-option:hover:not(:disabled)[b-fd995rapx1] {
    background: rgba(0, 197, 168, 0.08);
    border-color: var(--app-teal, #00C5A8);
}

.ai-ask-option:focus-visible[b-fd995rapx1] {
    outline: 2px solid var(--app-teal, #00C5A8);
    outline-offset: 2px;
}

.ai-ask-option:disabled[b-fd995rapx1] {
    cursor: default;
}

.ai-ask-option-label[b-fd995rapx1] {
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.3;
}

.ai-ask-option-detail[b-fd995rapx1] {
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #6b7280);
    line-height: 1.3;
}

.ai-ask-hint[b-fd995rapx1] {
    font-size: 0.72rem;
    color: var(--bs-secondary-color, #6b7280);
}

.ai-ask-card--answered .ai-ask-option[b-fd995rapx1] {
    opacity: 0.55;
    border-style: dashed;
}

.ai-ask-card--answered .ai-ask-option--chosen[b-fd995rapx1] {
    opacity: 1;
    border-style: solid;
    background: #0d2447;
    border-color: #0d2447;
    color: #fff;
}

.ai-ask-card--answered .ai-ask-option--chosen .ai-ask-option-detail[b-fd995rapx1] {
    color: rgba(255, 255, 255, 0.75);
}

@media (prefers-reduced-motion: reduce) {
    .ai-ask-option[b-fd995rapx1] { transition: none; }
}

/* Second-opinion review could not run. Distinct from ai-confirm-warning (which
   means the reviewer DID run and objected) — this is an absence of evidence, so
   it reads as informational rather than alarming, but must not be invisible. */
.ai-confirm-unreviewed[b-fd995rapx1] {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    margin-top: .4rem;
    padding: .4rem .55rem;
    border-radius: .375rem;
    border: 1px dashed var(--bs-secondary-border-subtle, #cfd4da);
    background: var(--bs-secondary-bg-subtle, #f4f5f7);
    color: var(--bs-secondary-color, #5c636a);
    font-size: .78rem;
    line-height: 1.3;
}

/* Sources behind a grounded answer. The server always emitted these; the dock
   parsed the frame and dropped it, so "[1]" markers pointed at nothing. */
.ai-citations[b-fd995rapx1] {
    margin: .3rem 0 .1rem;
    padding: .35rem .5rem;
    border-left: 2px solid var(--bs-border-color, #dee2e6);
    font-size: .74rem;
    line-height: 1.35;
}
.ai-citations-label[b-fd995rapx1] {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    opacity: .65;
    margin-bottom: .15rem;
}
.ai-citations-list[b-fd995rapx1] { margin: 0; padding-left: 1.1rem; }
.ai-citations-list a[b-fd995rapx1] { text-decoration: none; }
.ai-citations-list a:hover[b-fd995rapx1] { text-decoration: underline; }

/* Token count — quiet by default; it is diagnostic, not the content. */
.ai-usage[b-fd995rapx1] {
    font-size: .68rem;
    opacity: .45;
    margin: .1rem 0 .2rem;
}

/* Markdown blocks inside an assistant bubble. Tight margins so a one-line reply
   still reads as one line rather than a spaced-out document. */
.ai-bubble--assistant .ai-md-p[b-fd995rapx1] { margin: 0 0 .45rem; }
.ai-bubble--assistant .ai-md-p:last-child[b-fd995rapx1] { margin-bottom: 0; }
.ai-bubble--assistant .ai-md-list[b-fd995rapx1] { margin: 0 0 .45rem; padding-left: 1.15rem; }
.ai-bubble--assistant .ai-md-list:last-child[b-fd995rapx1] { margin-bottom: 0; }
.ai-bubble--assistant .ai-md-list li[b-fd995rapx1] { margin-bottom: .12rem; }
.ai-bubble--assistant .ai-md-inline-code[b-fd995rapx1],
.ai-bubble--assistant .ai-md-code[b-fd995rapx1] {
    background: var(--bs-secondary-bg, #f1f3f5);
    border-radius: .25rem;
    font-size: .82em;
}
.ai-bubble--assistant .ai-md-inline-code[b-fd995rapx1] { padding: .05rem .25rem; }
.ai-bubble--assistant .ai-md-code[b-fd995rapx1] {
    display: block;
    padding: .4rem .55rem;
    margin: 0 0 .45rem;
    overflow-x: auto;
    white-space: pre;
}

/* Respect a reduced-motion preference. The dock animates on open, on the pill
   hover, and on the streaming spinner; none of that is load-bearing. */
@media (prefers-reduced-motion: reduce) {
    .ai-dock[b-fd995rapx1],
    .ai-dock *[b-fd995rapx1],
    .ai-dock-pill[b-fd995rapx1],
    .ai-dock-pill:hover[b-fd995rapx1] {
        animation: none !important;
        transition: none !important;
    }
    .ai-dock-pill:hover[b-fd995rapx1] { transform: none; }
}

/* Stop was pressed mid-reply. Set on the turn since the dock was written but never
   rendered, so a half-finished bubble read as the whole answer. */
.ai-interrupted[b-fd995rapx1] {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin: .15rem 0 .25rem;
    font-size: .72rem;
    font-style: italic;
    opacity: .7;
}
/* /Shared/AiReplyFeedback.razor.rz.scp.css */
/* Reply feedback — deliberately quiet. The thumbs sit under the reply at low contrast and only
   come forward on hover or focus; a lit thumb stays solid so the user can see what they said.
   The report form borrows the ask-card's teal rule: it hangs off the reply it is about. */

.ai-fb[b-17fndyh9wg] {
    margin: .05rem 0 .2rem;
}

.ai-fb-row[b-17fndyh9wg] {
    display: flex;
    align-items: center;
    gap: .15rem;
}

.ai-fb-thumb[b-17fndyh9wg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: .4rem;
    background: transparent;
    color: var(--bs-secondary-color, #6b7280);
    font-size: .8rem;
    opacity: .55;
    cursor: pointer;
    transition: opacity 80ms ease-out, background-color 80ms ease-out, color 80ms ease-out;
}

.ai-fb-thumb:hover:not(:disabled)[b-17fndyh9wg],
.ai-fb-thumb:focus-visible[b-17fndyh9wg] {
    opacity: 1;
    background: rgba(0, 197, 168, .1);
    color: #0d2447;
}

.ai-fb-thumb:focus-visible[b-17fndyh9wg] {
    outline: 2px solid var(--app-teal, #00C5A8);
    outline-offset: 1px;
}

.ai-fb-thumb--on[b-17fndyh9wg] {
    opacity: 1;
    color: #0d2447;
}

.ai-fb-thumb:disabled[b-17fndyh9wg] {
    cursor: default;
}

.ai-fb-status[b-17fndyh9wg] {
    margin-left: .35rem;
    font-size: .7rem;
    color: var(--bs-secondary-color, #6b7280);
}

.ai-fb-form[b-17fndyh9wg] {
    width: 92%;
    margin-top: .3rem;
    padding: .15rem 0 .15rem .7rem;
    border-left: 3px solid var(--app-teal, #00C5A8);
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.ai-fb-title[b-17fndyh9wg] {
    font-size: .85rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

.ai-fb-reasons[b-17fndyh9wg] {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.ai-fb-reason[b-17fndyh9wg] {
    padding: .22rem .6rem;
    border: 1px solid rgba(13, 36, 71, .22);
    border-radius: 999px;
    background: var(--bs-body-bg, #fff);
    color: #0d2447;
    font-size: .76rem;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color 80ms ease-out, border-color 80ms ease-out;
}

.ai-fb-reason:hover[b-17fndyh9wg] {
    background: rgba(0, 197, 168, .08);
    border-color: var(--app-teal, #00C5A8);
}

.ai-fb-reason:focus-visible[b-17fndyh9wg] {
    outline: 2px solid var(--app-teal, #00C5A8);
    outline-offset: 2px;
}

.ai-fb-reason--on[b-17fndyh9wg],
.ai-fb-reason--on:hover[b-17fndyh9wg] {
    background: #0d2447;
    border-color: #0d2447;
    color: #fff;
}

.ai-fb-note-label[b-17fndyh9wg] {
    font-size: .76rem;
    font-weight: 600;
    margin: .1rem 0 0;
}

.ai-fb-note-label span[b-17fndyh9wg] {
    font-weight: 400;
    color: var(--bs-secondary-color, #6b7280);
}

.ai-fb-note[b-17fndyh9wg] {
    width: 100%;
    resize: vertical;
    min-height: 2.6rem;
    padding: .35rem .5rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .4rem;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color);
    font-size: .8rem;
    line-height: 1.35;
}

.ai-fb-note:focus[b-17fndyh9wg] {
    outline: none;
    border-color: var(--app-teal, #00C5A8);
    box-shadow: 0 0 0 .15rem rgba(0, 197, 168, .2);
}

.ai-fb-count[b-17fndyh9wg] {
    align-self: flex-end;
    margin-top: -.25rem;
    font-size: .66rem;
    color: var(--bs-secondary-color, #6b7280);
    font-variant-numeric: tabular-nums;
}

/* What sending shares. Not small print: the user is agreeing to it. */
.ai-fb-consent[b-17fndyh9wg] {
    margin: 0;
    padding: .35rem .5rem;
    border-radius: .375rem;
    background: var(--bs-secondary-bg-subtle, #f4f5f7);
    color: var(--bs-body-color);
    font-size: .72rem;
    line-height: 1.35;
}

.ai-fb-error[b-17fndyh9wg] {
    font-size: .75rem;
    color: var(--bs-danger-text-emphasis, #842029);
}

.ai-fb-actions[b-17fndyh9wg] {
    display: flex;
    gap: .4rem;
}

@media (prefers-reduced-motion: reduce) {
    .ai-fb-thumb[b-17fndyh9wg],
    .ai-fb-reason[b-17fndyh9wg] { transition: none; }
}
/* /Shared/Breadcrumb.razor.rz.scp.css */
.app-breadcrumb[b-alw0u79dqt] {
    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-alw0u79dqt] {
    color: var(--app-navy-400);
    text-decoration: none;
    transition: color var(--app-fast) var(--app-ease);
}

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

.app-breadcrumb-sep[b-alw0u79dqt] {
    opacity: 0.4;
}
/* /Shared/CollapsibleCard.razor.rz.scp.css */
.crm-cc[b-azw81p36yu] {
  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-azw81p36yu] {
  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-azw81p36yu] {
  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-azw81p36yu] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
}

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

.crm-cc__title[b-azw81p36yu] {
  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-azw81p36yu] {
  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-azw81p36yu] {
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 400;
  white-space: nowrap;
}

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

.crm-cc__inline-modified .crm-cc__modified-suffix[b-azw81p36yu] {
  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-azw81p36yu] {
  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-azw81p36yu 1.2s ease-out 1;
}

@keyframes crm-cc-pulse-b-azw81p36yu {
  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-azw81p36yu] {
  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-azw81p36yu] {
  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-azw81p36yu 2.4s ease-out infinite;
}

@keyframes crm-cc-dot-pulse-b-azw81p36yu {
  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-azw81p36yu] { animation: none; }
}

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

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

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

.crm-cc__body[b-azw81p36yu] {
  padding: 18px 24px 22px;
  animation: crm-slide-up 180ms ease;
}
/* /Shared/DataActionsMenu.razor.rz.scp.css */
.data-actions-menu[b-3t5xp8z0qa] {
    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-3t5xp8z0qa] {
    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-3t5xp8z0qa] {
    background: var(--app-bg, #f5f7fa);
    color: var(--app-navy, #0f172a);
}

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

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

.data-actions-toggle .bi[b-3t5xp8z0qa] {
    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-3t5xp8z0qa] {
    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-3t5xp8z0qa 140ms cubic-bezier(0.16, 1, 0.3, 1);
}

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

.data-actions-backdrop[b-3t5xp8z0qa] {
    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-3t5xp8z0qa] {
    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-3t5xp8z0qa],
.data-actions-panel a.btn[b-3t5xp8z0qa],
.data-actions-panel a[b-3t5xp8z0qa] {
    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-3t5xp8z0qa],
.data-actions-panel a i[b-3t5xp8z0qa] {
    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-3t5xp8z0qa],
.data-actions-panel a:hover[b-3t5xp8z0qa] {
    background: var(--app-bg, #f5f7fa);
    color: var(--app-navy, #0f172a);
}

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

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

/* Divider — ready for grouped/destructive items as menus grow. */
.data-actions-panel hr[b-3t5xp8z0qa] {
    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-gwxnmnfn7p] {
    position: relative;
    display: block;
}

.fs-trigger[b-gwxnmnfn7p] {
    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-gwxnmnfn7p] {
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
}

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

.fs-trigger:focus-visible[b-gwxnmnfn7p],
.fs-trigger--open[b-gwxnmnfn7p] {
    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-gwxnmnfn7p] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.fs-chevron[b-gwxnmnfn7p] {
    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-gwxnmnfn7p] {
    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-gwxnmnfn7p] {
    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-gwxnmnfn7p] {
    grid-template-rows: 1fr;
    pointer-events: auto;
}

.fs-collapse-inner[b-gwxnmnfn7p] {
    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-gwxnmnfn7p] {
    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-gwxnmnfn7p] {
    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-gwxnmnfn7p] {
    position: fixed;
    inset: 0;
    z-index: 1049;
    background: transparent;
}

[b-gwxnmnfn7p] .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-gwxnmnfn7p] .fs-option:hover {
    background: rgba(13, 110, 253, 0.08);
}

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

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

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

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

/* ── Trigger — form-control look ── */
.icon-picker-toggle[b-mbz60vfkvh] {
    -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-mbz60vfkvh] {
    border-color: var(--app-navy-400);
}

.icon-picker-toggle:focus[b-mbz60vfkvh] {
    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-mbz60vfkvh] {
    border-color: var(--app-teal);
    box-shadow: 0 0 0 3px var(--app-teal-glow);
}

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

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

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

.icon-picker-chevron[b-mbz60vfkvh] {
    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-mbz60vfkvh] {
    transform: rotate(180deg);
}

/* ── Dropdown panel ── */
.icon-picker-panel[b-mbz60vfkvh] {
    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-mbz60vfkvh var(--app-fast) var(--app-ease);
}

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

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

/* ── Icon grid ── */
.icon-picker-grid[b-mbz60vfkvh] {
    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-mbz60vfkvh] {
    -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-mbz60vfkvh] {
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
}

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

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

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

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

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

/* ── Empty state ── */
.icon-picker-empty[b-mbz60vfkvh] {
    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-3zc6nywx5l] {
    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-3zc6nywx5l] {
    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-3zc6nywx5l] {
    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-3zc6nywx5l] {
    background: rgba(13, 36, 71, 0.04);
}

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

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

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

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

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

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

.lf-clear:hover[b-3zc6nywx5l] {
    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-3zc6nywx5l] {
    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-3zc6nywx5l] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

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

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

.lf-summary-chip[b-3zc6nywx5l] {
    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-3zc6nywx5l],
.lf-summary-chip:focus-visible[b-3zc6nywx5l] {
    background: rgba(220, 53, 69, 0.12);
    color: var(--bs-danger, #dc3545);
    outline: 0;
}

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

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

.lf-summary-value[b-3zc6nywx5l] {
    /* 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-3zc6nywx5l] {
    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-3zc6nywx5l] {
    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-3zc6nywx5l] {
    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-3zc6nywx5l] {
    grid-template-rows: 1fr;
}

.lf-collapse-inner[b-3zc6nywx5l] {
    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-3zc6nywx5l] {
    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-3zc6nywx5l] {
    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-3zc6nywx5l],
    .lf-collapse[b-3zc6nywx5l],
    .lf-collapse-inner[b-3zc6nywx5l] {
        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-3zc6nywx5l]  .row.g-2.mb-3:last-child,
.lf-body[b-3zc6nywx5l]  .mb-3:last-child {
    margin-bottom: 0 !important;
}
/* /Shared/MultiStateChipFilter.razor.rz.scp.css */
.cf-wrapper[b-id2jkchxwu] {
    width: 100%;
}

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

.cf-label[b-id2jkchxwu] {
    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-id2jkchxwu] {
    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-id2jkchxwu] {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}

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

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

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

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

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

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

.cf-chip-exclude[b-id2jkchxwu] {
    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-id2jkchxwu] {
    background: var(--bs-danger, #dc3545);
    border-color: var(--bs-danger, #dc3545);
    color: #fff;
}

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

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

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

.cf-chip-name[b-id2jkchxwu] {
    white-space: nowrap;
}
/* /Shared/Navigation/NavCustomizeDialog.razor.rz.scp.css */
.ncd-intro[b-qneyg32fdb] {
  font-size: 0.85rem;
  color: var(--app-text-2);
  margin-bottom: 0.75rem;
}

.ncd-footer[b-qneyg32fdb] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  width: 100%;
}

.ncd-reset[b-qneyg32fdb] {
  margin-right: auto;
  padding-left: 0;
}

.ncd-confirm[b-qneyg32fdb] {
  margin-right: auto;
  font-size: 0.85rem;
  color: var(--app-text);
}

.ncd-error[b-qneyg32fdb] {
  flex-basis: 100%;
  font-size: 0.8rem;
  color: #B42318;
  text-align: right;
}
/* /Shared/Navigation/NavLayoutEditorView.razor.rz.scp.css */
.nle[b-d3uiplr6bg] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
}

.nle-error[b-d3uiplr6bg] {
  padding: 0.45rem 0.75rem;
  border-radius: 6px;
  background: #FEF3C7;
  color: #78350F;
  font-size: 0.8rem;
}

/* ── Section ── */

.nle-section[b-d3uiplr6bg] {
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: #fff;
  position: relative;
}

.nle-section-head[b-d3uiplr6bg] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 0.65rem;
  background: var(--app-surface-2);
  border-bottom: 1px solid var(--app-border);
  border-radius: 10px 10px 0 0;
  position: relative;
}

.nle-section-label[b-d3uiplr6bg] {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--app-text-2);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nle-nodes[b-d3uiplr6bg] {
  padding: 0.35rem;
}

.nle-empty[b-d3uiplr6bg] {
  padding: 0.6rem 0.75rem;
  font-size: 0.8rem;
  color: var(--app-text-3);
}

/* ── Rows ── */

.nle-row[b-d3uiplr6bg] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.2rem 0.35rem 0.2rem 0.25rem;
  border-radius: 7px;
  position: relative;
  cursor: grab;
}

.nle-row:hover[b-d3uiplr6bg] {
  background: var(--app-surface-2);
}

.nle-row.is-group[b-d3uiplr6bg] {
  font-weight: 600;
}

.nle-row.is-child[b-d3uiplr6bg] {
  margin-left: 2.1rem;
}

.nle-children[b-d3uiplr6bg] {
  border-left: 1px solid var(--app-border);
  margin-left: 1.1rem;
  padding-left: 0;
}

.nle-row.is-hidden .nle-label[b-d3uiplr6bg],
.nle-row.is-hidden .nle-icon[b-d3uiplr6bg] {
  opacity: 0.45;
}

.nle-row.is-hidden .nle-label[b-d3uiplr6bg] {
  text-decoration: line-through;
  text-decoration-color: var(--app-text-3);
}

.nle-row.is-drag-source[b-d3uiplr6bg] {
  opacity: 0.4;
}

.nle-grip[b-d3uiplr6bg] {
  color: var(--app-text-3);
  width: 1rem;
  flex-shrink: 0;
  text-align: center;
}

.nle-row:hover .nle-grip[b-d3uiplr6bg],
.nle-section-head:hover .nle-grip[b-d3uiplr6bg] {
  color: var(--app-text-2);
}

.nle-chevron[b-d3uiplr6bg] {
  border: 0;
  background: transparent;
  color: var(--app-text-2);
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  margin-left: -0.35rem;
  border-radius: 4px;
  flex-shrink: 0;
}

.nle-chevron:hover[b-d3uiplr6bg] {
  background: var(--app-border);
}

.nle-icon[b-d3uiplr6bg] {
  color: var(--app-navy);
  width: 1.1rem;
  text-align: center;
  flex-shrink: 0;
}

.nle-icon-btn[b-d3uiplr6bg] {
  border: 0;
  background: transparent;
  padding: 0;
  width: 1.6rem;
  height: 1.6rem;
  margin: 0 -0.25rem;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nle-icon-btn:hover[b-d3uiplr6bg],
.nle-icon-btn:focus-visible[b-d3uiplr6bg] {
  background: var(--app-border);
  box-shadow: inset 0 0 0 1px var(--app-border-2);
}

.nle-icon-strip[b-d3uiplr6bg] {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.15rem 0 0.35rem 2.1rem;
}

.nle-icon-picker[b-d3uiplr6bg] {
  width: 14rem;
  max-width: 100%;
}

.nle-label[b-d3uiplr6bg] {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  color: var(--app-text);
}

.nle-tag[b-d3uiplr6bg] {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--app-text-3);
  border: 1px solid var(--app-border);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  flex-shrink: 0;
}

.nle-count[b-d3uiplr6bg] {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--app-text-3);
  min-width: 1.2rem;
  text-align: right;
  flex-shrink: 0;
}

.nle-eye[b-d3uiplr6bg],
.nle-menu-btn[b-d3uiplr6bg] {
  border: 0;
  background: transparent;
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  color: var(--app-text-3);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nle-eye:hover[b-d3uiplr6bg],
.nle-menu-btn:hover[b-d3uiplr6bg] {
  background: var(--app-border);
  color: var(--app-text);
}

.nle-eye.is-visible[b-d3uiplr6bg] {
  color: var(--app-teal-600);
}

.nle-eye:disabled[b-d3uiplr6bg] {
  opacity: 0.35;
}

.nle-rename[b-d3uiplr6bg] {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--app-teal);
  border-radius: 5px;
  outline: none;
  text-transform: none;
  letter-spacing: 0;
}

/* ── Drop feedback ──
   Nothing here may take space: a drag that shifts the rows under the pointer lands somewhere
   other than where it was aimed. Bands and indicators are all absolutely positioned. */

.nle-band[b-d3uiplr6bg] {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 5;
}

.is-drop-before[b-d3uiplr6bg]::before,
.is-drop-after[b-d3uiplr6bg]::after,
.is-drop-after-section[b-d3uiplr6bg]::after {
  content: '';
  position: absolute;
  left: 0.25rem;
  right: 0.25rem;
  height: 3px;
  border-radius: 2px;
  background: var(--app-teal);
  pointer-events: none;
  z-index: 6;
}

.is-drop-before[b-d3uiplr6bg]::before { top: -2px; }
.is-drop-after[b-d3uiplr6bg]::after { bottom: -2px; }

.nle-section-head.is-drop-before[b-d3uiplr6bg]::before { top: -0.45rem; }
.is-drop-after-section[b-d3uiplr6bg]::after { bottom: -0.45rem; }

/* Dropping on the bottom edge of a group's last page puts the item after the group, so the
   line reaches back out to the group's own indent. */
.nle-row.is-child.is-drop-outdent[b-d3uiplr6bg]::after { left: -2.1rem; }

.is-drop-into[b-d3uiplr6bg] {
  background: rgba(0, 197, 168, 0.12) !important;
  box-shadow: inset 0 0 0 2px var(--app-teal);
}

.nle-empty-group[b-d3uiplr6bg] {
  position: relative;
  margin: 0.2rem 0.25rem 0.2rem 2.1rem;
  padding: 0.35rem 0.6rem;
  border: 1px dashed var(--app-border-2);
  border-radius: 6px;
  font-size: 0.75rem;
  color: var(--app-text-3);
}

/* ── Menu ── */

.nle-menu-backdrop[b-d3uiplr6bg] {
  position: fixed;
  inset: 0;
  z-index: 10;
}

.nle-menu[b-d3uiplr6bg] {
  position: absolute;
  right: 0.25rem;
  top: calc(100% - 0.2rem);
  z-index: 11;
  min-width: 14rem;
  max-height: 20rem;
  overflow-y: auto;
  padding: 0.3rem;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(13, 36, 71, 0.16);
  cursor: default;
  font-weight: 400;
}

.nle-menu button[b-d3uiplr6bg] {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 0.83rem;
  color: var(--app-text);
  padding: 0.4rem 0.55rem;
  border-radius: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nle-menu button:hover:not(:disabled)[b-d3uiplr6bg],
.nle-menu button:focus-visible[b-d3uiplr6bg] {
  background: var(--app-surface-2);
}

.nle-menu button:disabled[b-d3uiplr6bg] {
  color: var(--app-text-3);
}

.nle-menu button.is-danger[b-d3uiplr6bg] {
  color: #B42318;
}

.nle-menu-heading[b-d3uiplr6bg] {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--app-text-3);
  padding: 0.5rem 0.55rem 0.2rem;
}

.nle-menu-divider[b-d3uiplr6bg] {
  height: 1px;
  background: var(--app-border);
  margin: 0.3rem 0;
}

.nle-add-section[b-d3uiplr6bg] {
  align-self: flex-start;
  border: 1px dashed var(--app-border-2);
  background: transparent;
  color: var(--app-text-2);
  font-size: 0.83rem;
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
}

.nle-add-section:hover:not(:disabled)[b-d3uiplr6bg] {
  border-color: var(--app-teal);
  color: var(--app-teal-600);
}

@media (max-width: 575.98px) {
  .nle-grip[b-d3uiplr6bg] { display: none; }
  .nle-row.is-child[b-d3uiplr6bg] { margin-left: 0.9rem; }
  .nle-empty-group[b-d3uiplr6bg] { margin-left: 0.9rem; }
  .nle-row.is-child.is-drop-outdent[b-d3uiplr6bg]::after { left: -0.9rem; }
  .nle-children[b-d3uiplr6bg] { margin-left: 0.4rem; }
  .nle-tag[b-d3uiplr6bg] { display: none; }
}
/* /Shared/Navigation/NavTreeView.razor.rz.scp.css */
/* The sidebar page tree, moved out of NavMenu with its markup. Selectors keep the shape they had in
   NavMenu.razor.css (`.nav-tree ::deep .nav-link` for the same specificity as
   `.nav ::deep .nav-link`) so the collapsed-sidebar rules in MainLayout resolve exactly as
   before. `::deep` is needed only where NavLink renders the element itself. */

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

.nav-tree[b-n8y712ioxg]  .nav-link {
  color: rgba(255,255,255,0.58);
  border-radius: 8px;
  height: 2.35rem;
  display: flex;
  align-items: center;
  padding: 0 0.875rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.84rem;
  font-weight: 500;
  text-decoration: none;
  border-left: 3px solid transparent;
  margin-bottom: 0.05rem;
  white-space: nowrap;
  overflow: hidden;
  /* Must not shrink. `overflow: hidden` above cancels the automatic minimum size
     a flex item normally gets, so without this the links squash towards zero
     height — text still painting at full size — instead of letting .nav-scroll
     scroll. Expanding a nav group on a short viewport made every other item
     collapse into an unreadable overlapping stack. */
  flex-shrink: 0;
  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-tree[b-n8y712ioxg]  .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-tree[b-n8y712ioxg]  .nav-link:hover {
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.07);
  border-left-color: transparent;
}

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

.nav-tree[b-n8y712ioxg]  .nav-link.active {
  color: #fff;
  background: rgba(255,255,255,0.06);
  border-left-color: transparent;
  font-weight: 600;
}

.nav-tree[b-n8y712ioxg]  .nav-link.active::before {
  transform: scaleY(1);
  background: var(--app-teal);
}

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

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

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

.bi[b-n8y712ioxg] {
  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.5;
  flex-shrink: 0;
  transition: opacity var(--app-fast) ease,
              margin var(--app-fast) ease,
              transform var(--app-mid) var(--app-ease);
}

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

.bi-building-nav-menu[b-n8y712ioxg] {
  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-n8y712ioxg] {
  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-n8y712ioxg] {
  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-n8y712ioxg] {
  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-n8y712ioxg] {
  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");
}

/* Bootstrap Icons "briefcase-fill" — the partner program is commercial. */
.bi-handshake-nav-menu[b-n8y712ioxg] {
  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 1A1.5 1.5 0 0 0 5 2.5V3H1.5A1.5 1.5 0 0 0 0 4.5v1.384l7.614 2.03a1.5 1.5 0 0 0 .772 0L16 5.884V4.5A1.5 1.5 0 0 0 14.5 3H11v-.5A1.5 1.5 0 0 0 9.5 1h-3zm0 1h3a.5.5 0 0 1 .5.5V3H6v-.5a.5.5 0 0 1 .5-.5z'/%3E%3Cpath d='M0 12.5A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5V6.85L8.129 8.947a.5.5 0 0 1-.258 0L0 6.85v5.65z'/%3E%3C/svg%3E");
}

/* Bootstrap Icons "patch-check-fill" — a CMS certification. */
.bi-patch-check-fill-nav-menu[b-n8y712ioxg] {
  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='M10.067.87a2.89 2.89 0 0 0-4.134 0l-.622.638-.89-.011a2.89 2.89 0 0 0-2.924 2.924l.01.89-.636.622a2.89 2.89 0 0 0 0 4.134l.637.622-.011.89a2.89 2.89 0 0 0 2.924 2.924l.89-.01.622.636a2.89 2.89 0 0 0 4.134 0l.622-.637.89.011a2.89 2.89 0 0 0 2.924-2.924l-.01-.89.636-.622a2.89 2.89 0 0 0 0-4.134l-.637-.622.011-.89a2.89 2.89 0 0 0-2.924-2.924l-.89.01-.622-.636zm.287 5.984-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7 8.793l2.646-2.647a.5.5 0 0 1 .708.708z'/%3E%3C/svg%3E");
}

.bi-calendar-check-fill-nav-menu[b-n8y712ioxg] {
  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-n8y712ioxg] {
  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");
}

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

.nav-group-header[b-n8y712ioxg] {
  display: flex;
  align-items: center;
  width: 100%;
  color: rgba(255,255,255,0.58);
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 8px;
  height: 2.35rem;
  padding: 0 0.875rem;
  margin-bottom: 0.05rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.84rem;
  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-n8y712ioxg] {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
}

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

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

.nav-group-chevron[b-n8y712ioxg] {
  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-n8y712ioxg] {
  transform: rotate(-90deg);
}

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

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

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

/* ── Second level: a hub's own pages ──
   Budget at the 264px sidebar: 264 − 24 (nav-body padding) − 4 (scrollbar) = 236 usable;
   less 14 right padding, less 28 for the icon block, less this 48px indent leaves ~146px
   of label. The longest label here ("Legislators") needs ~72px, so nothing has to give.
   The tight one is depth 1, not depth 2: "People & committees" at 0.82rem is ~130px
   against the ~144px a row has once it grows a chevron. Re-measure that in a browser
   before adding any longer level-1 label. */
.nav-tree[b-n8y712ioxg]  .nav-link.is-sub-child {
  padding-left: 3rem;
  height: 2.2rem;
  font-size: 0.78rem;
}

/* A hub rendered as a disclosure rather than a link. */
.nav-group-header.is-group-child[b-n8y712ioxg] {
  padding-left: 2rem;
  font-size: 0.82rem;
}

.nav-group-children.is-sub[b-n8y712ioxg] {
  margin-left: 2.35rem;
  border-left: 1px solid rgba(255,255,255,0.08);
}

/* A disclosure never receives NavLink's .active, so without this the "you are inside here"
   cue vanishes the moment a hub grows children. */
.nav-group-header.is-active-ancestor[b-n8y712ioxg] {
  color: rgba(255,255,255,0.9);
}

.nav-group-header.is-active-ancestor .nav-custom-obj-icon[b-n8y712ioxg] {
  opacity: 1;
}

/* ─────────────────────────────────────────────────────────
   Section labels — chunk the groups + items into Workspace /
   Advocacy / Programs so the eye can scan the nav as a few
   blocks rather than one long list.
   ───────────────────────────────────────────────────────── */

.nav-section-label[b-n8y712ioxg] {
  padding: 0.75rem 0.875rem 0.3rem;
  margin-top: 0.35rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.34);
  border-top: 1px solid rgba(255,255,255,0.06);
  white-space: nowrap;
  overflow: hidden;
}

/* The first section label sits right under Dashboard — nothing to divide from. */
.nav-section-label:first-of-type[b-n8y712ioxg] {
  border-top: 0;
  margin-top: 0;
}

/* ─────────────────────────────────────────────────────────
   Collapsed sidebar (icon-only) — drop chevrons + labels, center
   group icons, and slim the section labels to a divider. The
   .sidebar-collapsed class lives on MainLayout's .sidebar ancestor.
   ───────────────────────────────────────────────────────── */

.sidebar-collapsed .nav-group-chevron[b-n8y712ioxg] { display: none; }

.sidebar-collapsed .nav-group-header[b-n8y712ioxg] {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.sidebar-collapsed .nav-group-header .nav-custom-obj-icon[b-n8y712ioxg] {
  margin-right: 0;
}

.sidebar-collapsed .nav-tree[b-n8y712ioxg]  .nav-link.is-group-child {
  padding-left: 0;
}

/* Icon-only mode cannot show a hierarchy, so the tree flattens to a centred icon column.
   It stays legible because every row keeps its title tooltip, only one top-level group is
   ever open, and the GA sub-page icons were picked to not repeat a neighbouring glyph. */
.sidebar-collapsed .nav-tree[b-n8y712ioxg]  .nav-link.is-sub-child {
  padding-left: 0;
}

.sidebar-collapsed .nav-group-header.is-group-child[b-n8y712ioxg] {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.sidebar-collapsed .nav-group-children.is-sub[b-n8y712ioxg] {
  margin-left: 0;
  border-left: 0;
}

.sidebar-collapsed .nav-section-label[b-n8y712ioxg] {
  font-size: 0;
  padding: 0.4rem 0;
  margin-top: 0.25rem;
  letter-spacing: 0;
}

/* Custom object icons use Bootstrap Icons font (not SVG background) */
.nav-custom-obj-icon[b-n8y712ioxg] {
  background-image: none !important;
  font-size: 1rem;
  line-height: 1.05rem;
  color: white;
  text-align: center;
}
/* /Shared/NotificationBell.razor.rz.scp.css */
/* =====================================================
   Notification Bell + Drawer
   ===================================================== */

.notif-bell[b-7564laotdk] {
    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-7564laotdk] {
    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-7564laotdk] {
    background: var(--app-bg);
    color: var(--app-navy);
}

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

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

.notif-bell-badge[b-7564laotdk] {
    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-7564laotdk] {
    position: fixed;
    inset: 0;
    z-index: 100;
}

.notif-drawer[b-7564laotdk] {
    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-7564laotdk 0.15s var(--app-ease) both;
}

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

.notif-drawer-header[b-7564laotdk] {
    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-7564laotdk] {
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--app-navy);
    letter-spacing: -0.01em;
}

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

.notif-drawer-action[b-7564laotdk] {
    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-7564laotdk] {
    background: var(--app-white);
    border-color: var(--app-border-2);
    color: var(--app-navy);
}

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

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

.notif-drawer-empty[b-7564laotdk] {
    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-7564laotdk] {
    font-size: 2rem;
    opacity: 0.35;
}

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

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

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

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

.notif-row[b-7564laotdk] {
    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-7564laotdk] { border-bottom: none; }

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

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

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

.notif-row-icon[b-7564laotdk] {
    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-7564laotdk],
.notif-row-info[b-7564laotdk] { /* .notif-row-info is unused — keeping structure simple */ }

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

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

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

.notif-row-text[b-7564laotdk] {
    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-7564laotdk] {
    font-size: 0.7rem;
    color: var(--app-text-3);
}

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

.notif-row-dismiss[b-7564laotdk] {
    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-7564laotdk] {
    opacity: 1;
}

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

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

@media (max-width: 480px) {
    .notif-drawer[b-7564laotdk] {
        width: calc(100vw - 16px);
        right: -8px;
    }
}
/* /Shared/SortableHeader.razor.rz.scp.css */
.bd-sort-header[b-nuio5lxrrt] {
    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-nuio5lxrrt] {
    color: var(--bs-primary);
}

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

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

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

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

.sl-item[b-7i4bzctrra] {
    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-7i4bzctrra] {
    border-color: var(--app-border-2);
    background: var(--app-bg);
}

/* Drag handle */
.sl-handle[b-7i4bzctrra] {
    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-7i4bzctrra] {
    color: var(--app-navy);
    background: var(--app-surface-2);
    border-color: var(--app-border);
}

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

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

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

/* Action buttons area */
.sl-actions[b-7i4bzctrra] {
    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-7i4bzctrra] { opacity: 1; }

/* Up/down arrow buttons */
.sl-arrow[b-7i4bzctrra] {
    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-7i4bzctrra] {
    color: var(--app-navy);
    border-color: var(--app-navy);
    background: var(--app-surface-2);
}

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

/* ── Drag states ── */

.sl-item.sl-dragging[b-7i4bzctrra] {
    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-7i4bzctrra] { cursor: grabbing; }

.sl-item.sl-drop-above[b-7i4bzctrra]::before,
.sl-item.sl-drop-below[b-7i4bzctrra]::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-7i4bzctrra]::before { top: -5px; }
.sl-item.sl-drop-below[b-7i4bzctrra]::after  { bottom: -5px; }

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

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

.sl-item.sl-just-dropped[b-7i4bzctrra] {
    animation: sl-settle-b-7i4bzctrra 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-7i4bzctrra] {
    padding: 0.4rem 0.6rem;
    border-radius: 3px;
    gap: 0.4rem;
}

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

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

.sl-compact .sl-arrow[b-7i4bzctrra] {
    width: 1.35rem;
    height: 1.35rem;
    font-size: 0.68rem;
}
/* /Shared/TagInput.razor.rz.scp.css */
.tag-input-wrap[b-qbp6yxh0vg] {
    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-qbp6yxh0vg] {
    border-color: var(--app-teal);
    box-shadow: 0 0 0 3px var(--app-teal-glow);
}

.tag-chip[b-qbp6yxh0vg] {
    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-qbp6yxh0vg 0.15s var(--app-ease) both;
}

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

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

.tag-chip-remove[b-qbp6yxh0vg] {
    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-qbp6yxh0vg] {
    color: #c0392b;
    background: rgba(192, 57, 43, 0.1);
}

.tag-input-field[b-qbp6yxh0vg] {
    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-qbp6yxh0vg]::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-hp41j5wvym] { position: relative; }

.user-menu-toggle[b-hp41j5wvym] {
  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-hp41j5wvym] {
  background-color: var(--app-bg);
  border-color: var(--app-border);
}

.user-avatar[b-hp41j5wvym] {
  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-hp41j5wvym] {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1rem;
  border: 2px solid var(--app-teal);
}

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

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

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

.user-menu-dropdown[b-hp41j5wvym] {
  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-hp41j5wvym] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
}

.user-menu-item[b-hp41j5wvym] {
  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-hp41j5wvym] {
  background-color: var(--app-bg);
  color: var(--app-navy);
  border-left-color: var(--app-teal);
}

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