@import '_content/Wsha.Platform.Ai.Ui/Wsha.Platform.Ai.Ui.wd3xbh9k8h.bundle.scp.css';

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

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

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

/* Part of the page in light and dark (or the brand colour: Admin › Branding › Sidebar). */
.sidebar[b-x3kwjkacmv] {
  background: var(--app-sidebar-bg);
  color: var(--app-sidebar-fg);
  position: relative;
  flex-shrink: 0;
}

@media (min-width: 641px) {
  .sidebar[b-x3kwjkacmv] { border-right: 1px solid var(--app-sidebar-border); }
}

@media (max-width: 640.98px) {
  .sidebar[b-x3kwjkacmv] { border-bottom: 1px solid var(--app-sidebar-border); }
}

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

.top-row[b-x3kwjkacmv] {
  background: color-mix(in srgb, var(--app-surface) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  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;
}

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

/* A slim, quiet strip: the pill carries the warning colour, not the whole bar. */
.alpha-banner[b-x3kwjkacmv] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 26px;
  padding: 0 1rem;
  background: var(--app-surface-2);
  border-bottom: 1px solid var(--app-border);
  color: var(--app-text-2);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  position: sticky;
  top: 58px;
  z-index: 19;
  text-align: center;
}

.alpha-banner-badge[b-x3kwjkacmv] {
  display: inline-block;
  background: var(--app-warning-bg);
  border: 1px solid var(--app-warning-border);
  color: var(--app-warning-fg);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.12rem 0.5rem;
  border-radius: 9999px;
  line-height: 1.2;
}

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

article.content[b-x3kwjkacmv] {
  flex: 1;
  /* The bottom leaves room for the assistant button, so a page's last buttons can scroll clear of it. */
  padding: 2rem 2.25rem 6rem !important;
}

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

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

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

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

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

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

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

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

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

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

  /* No pinned top bar on phones, so sticky content sits at the very top. */
  .page[b-x3kwjkacmv] { --app-chrome-top: 0px !important; }

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

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

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

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

  /* The window scrolls, not main (main has no fixed height), so main must not be a scroll
     container: overflow:auto would pin every sticky descendant (the top bar, the job editor's
     rail and summary) inside a box that never scrolls. clip keeps the clipping without that. */
  main[b-x3kwjkacmv] { flex: 1; overflow: clip; }

  article.content[b-x3kwjkacmv] { min-height: calc(100vh - var(--app-chrome-top, 58px)); }   /* top bar + alpha strip */
}

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

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

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

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

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

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

@media (min-width: 641px) { .mobile-user-menu-slot[b-x3kwjkacmv] { display: none; } }   /* phones show it (above); a later unconditional rule hid it there too */

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

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

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

  [b-x3kwjkacmv] .sidebar-collapsed .nav-icon {
    margin-right: 0.7rem;
  }
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* The sidebar. Colours come from the --app-sidebar-* tokens (app.css): part of the page in light and
   dark, or the brand colour when Admin › Branding says so. Accent only on the current page. */

/* ─────────────────────────────────────────────────────────
   Header (brand + collapse button + mobile controls)
   ───────────────────────────────────────────────────────── */

.nav-header[b-mqji6nq3rt] {
  height: 58px;
  min-height: 58px;
  display: flex;
  align-items: center;
  padding: 0 0.875rem 0 1rem;
  border-bottom: 1px solid var(--app-sidebar-border);
  position: relative;
  z-index: 1;
  gap: 0.25rem;
}

.nav-brand[b-mqji6nq3rt] {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--app-sidebar-fg-strong) !important;
  letter-spacing: -0.01em;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  line-height: 1;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* The brand mark when there's no logo: a small square in the accent colour. */
.nav-brand:not(:has(.nav-logo))[b-mqji6nq3rt]::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  min-width: 10px;
  background: var(--app-sidebar-accent);
  border-radius: 3px;
  flex-shrink: 0;
}

.nav-logo[b-mqji6nq3rt] {
  height: 26px;
  max-width: 80px;
  object-fit: contain;
  flex-shrink: 0;
}

.nav-brand-text[b-mqji6nq3rt] {
  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)
   ───────────────────────────────────────────────────────── */

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

.nav-collapse-btn:hover[b-mqji6nq3rt] {
  background: var(--app-sidebar-hover-bg);
  color: var(--app-sidebar-fg-strong);
}

.nav-collapse-btn i[b-mqji6nq3rt] {
  font-size: 0.95rem;
  line-height: 1;
}

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

.nav-mobile-toggle[b-mqji6nq3rt],
.nav-mobile-search[b-mqji6nq3rt] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--app-sidebar-control);
  border: 1px solid var(--app-sidebar-border);
  border-radius: 8px;
  color: var(--app-sidebar-fg);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background var(--app-fast) ease;
}

.nav-mobile-search[b-mqji6nq3rt] { margin-right: 0.25rem; }

.nav-mobile-toggle:hover[b-mqji6nq3rt],
.nav-mobile-search:hover[b-mqji6nq3rt] { background: var(--app-sidebar-hover-bg); color: var(--app-sidebar-fg-strong); }

.nav-mobile-toggle i[b-mqji6nq3rt] { font-size: 1.15rem; line-height: 1; }

.nav-mobile-bell[b-mqji6nq3rt] { display: none; margin-right: 0.25rem; }
.nav-mobile-bell[b-mqji6nq3rt]  .notif-bell-button { color: var(--app-sidebar-fg); }
.nav-mobile-bell[b-mqji6nq3rt]  .notif-bell-button:hover { background: var(--app-sidebar-hover-bg); color: var(--app-sidebar-fg-strong); }

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

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

/* Scrollable region: Overview + the page tree 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-mqji6nq3rt] {
  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: var(--app-sidebar-border) transparent;
}

/* Section headings, group headings and dividers: a flex child allowed to shrink means .nav-scroll
   never overflows, so its overflow-y never engages. */
.nav-scroll > *[b-mqji6nq3rt] { flex-shrink: 0; }

.nav-scroll[b-mqji6nq3rt]::-webkit-scrollbar { width: 4px; }
.nav-scroll[b-mqji6nq3rt]::-webkit-scrollbar-track { background: transparent; }
.nav-scroll[b-mqji6nq3rt]::-webkit-scrollbar-thumb { background: var(--app-sidebar-border); border-radius: 2px; }

/* Pinned footer — never scrolls, never wraps. */
.nav-footer[b-mqji6nq3rt] {
  flex-shrink: 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--app-sidebar-border);
}

/* ─────────────────────────────────────────────────────────
   Links (Overview, the footer rows; the tree's own are in NavTreeView)
   ───────────────────────────────────────────────────────── */

.nav[b-mqji6nq3rt]  .nav-link {
  color: var(--app-sidebar-fg);
  border-radius: 8px;
  height: 2.15rem;
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.84rem;
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 0.05rem;
  white-space: nowrap;
  overflow: hidden;
  /* Must not shrink: `overflow: hidden` cancels a flex item's automatic minimum size, so without
     this the links squash towards zero height instead of letting .nav-scroll scroll. */
  flex-shrink: 0;
  position: relative;
  transition: background-color var(--app-fast) ease, color var(--app-fast) ease;
}

/* The current page: a short accent bar at the left edge. */
.nav[b-mqji6nq3rt]  .nav-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 25%;
  height: 50%;
  width: 3px;
  border-radius: 2px;
  background: var(--app-sidebar-accent);
  transform: scaleY(0);
  transition: transform var(--app-mid) var(--app-ease);
}

.nav[b-mqji6nq3rt]  .nav-link:hover {
  color: var(--app-sidebar-fg-strong);
  background: var(--app-sidebar-hover-bg);
}

.nav[b-mqji6nq3rt]  .nav-link.active {
  color: var(--app-sidebar-fg-strong);
  background: var(--app-sidebar-active-bg);
  font-weight: 600;
}

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

/* Overview sits above the first heading. */
.nav[b-mqji6nq3rt]  .nav-link.nav-overview { margin-bottom: 0.75rem; }

.nav[b-mqji6nq3rt]  .nav-link:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: -2px;
}

/* ── Skeleton nav items ── */

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

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

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

.nav.flex-column[b-mqji6nq3rt] {
  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%;
}

/* ─────────────────────────────────────────────────────────
   Labels and icons
   ───────────────────────────────────────────────────────── */

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

.nav-icon[b-mqji6nq3rt] {
  font-size: 1rem;
  line-height: 1;
  width: 1.05rem;
  min-width: 1.05rem;
  margin-right: 0.7rem;
  text-align: center;
  color: var(--app-sidebar-muted);
  flex-shrink: 0;
  transition: color var(--app-fast) ease, margin var(--app-fast) ease;
}

.nav[b-mqji6nq3rt]  .nav-link:hover .nav-icon,
.nav[b-mqji6nq3rt]  .nav-link.active .nav-icon {
  color: var(--app-sidebar-fg-strong);
}

/* ─────────────────────────────────────────────────────────
   Inbox count badge — on a footer link that carries a count. Rendered only when the count is > 0.
   ───────────────────────────────────────────────────────── */

.nav[b-mqji6nq3rt]  .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: var(--app-primary-fg);
  background: var(--app-primary-bg);
  border-radius: 999px;
}

/* Desktop collapsed (icon-only): shrink to a corner dot on the icon. */
@media (min-width: 641px) {
  .sidebar-collapsed .nav[b-mqji6nq3rt]  .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;
  }
}

/* ─────────────────────────────────────────────────────────
   Version line
   ───────────────────────────────────────────────────────── */

.nav-version[b-mqji6nq3rt] {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem 0.75rem;
  white-space: nowrap;
  overflow: hidden;
}

.nav-version-text[b-mqji6nq3rt] {
  font-family: 'Outfit', sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--app-sidebar-muted);
  letter-spacing: 0.02em;
}

.alpha-badge[b-mqji6nq3rt] {
  display: inline-block;
  background: var(--app-warning-bg);
  color: var(--app-warning-fg);
  border: 1px solid var(--app-warning-border);
  font-family: 'Outfit', sans-serif;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.05rem 0.4rem;
  border-radius: 9999px;
  line-height: 1.4;
}

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

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

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

  .nav-body.mobile-open[b-mqji6nq3rt] {
    max-height: 100vh;
    padding: 0.75rem 0.625rem;
    border-bottom: 1px solid var(--app-sidebar-border);
  }
}

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

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

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

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

  /* Fade the scroll region's content out at the bottom as it slides behind the pinned footer. */
  .nav-scroll[b-mqji6nq3rt] {
    overflow-y: auto;
    mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent);
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent);
  }

  /* Collapsed (icon rail): the version line keeps only the version, centred. */
  .sidebar-collapsed .nav-version[b-mqji6nq3rt] { justify-content: center; padding-left: 0; padding-right: 0; }
  .sidebar-collapsed .alpha-badge[b-mqji6nq3rt] { display: none; }
  .sidebar-collapsed .nav-header[b-mqji6nq3rt] { padding: 0; justify-content: center; }
  .sidebar-collapsed .nav-brand[b-mqji6nq3rt] { flex: 0 0 auto; }
}
/* /Pages/Admin/AdminSettings.razor.rz.scp.css */
.admin-header p[b-m8ovyhyah5] { font-size: 0.95rem; margin-top: 0.25rem; }

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

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

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

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

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

[b-m8ovyhyah5] .settings-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--app-text-2);
    margin-bottom: 0.2rem;
}

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

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

/* Save row */
[b-m8ovyhyah5] .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-m8ovyhyah5] .alert-success {
    background: var(--app-teal-50);
    border: 1px solid var(--app-teal);
    color: var(--app-accent-text);
    border-radius: var(--app-r-sm);
    font-size: 0.875rem;
    padding: 0.6rem 1rem;
}

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

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

[b-m8ovyhyah5] .role-pill {
    padding: 0.3rem 0.875rem;
    background: var(--app-surface);
    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-m8ovyhyah5] .role-pill:hover { border-color: var(--app-text-3); color: var(--app-heading); }

[b-m8ovyhyah5] .role-pill.active {
    background: var(--app-primary-bg);
    border-color: var(--app-primary-bg);
    color: var(--app-primary-fg);
}

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

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

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

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

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

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

[b-m8ovyhyah5] .delete-confirm-overlay {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--app-text) 35%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    backdrop-filter: blur(2px);
}

[b-m8ovyhyah5] .delete-confirm-box {
    background: var(--app-surface);
    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-m8ovyhyah5] .label-group {
    border: 1px solid var(--app-border);
    border-radius: var(--app-r);
    overflow: hidden;
    background: var(--app-surface);
    box-shadow: var(--app-shadow-xs);
}

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

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

[b-m8ovyhyah5] .label-group .user-table thead th {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--app-text-3);
    border-bottom-width: 1px;
    border-color: var(--app-border);
    padding: 0.5rem 0.75rem;
    background: var(--app-surface);
}

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

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

/* Relationship label badges */
[b-m8ovyhyah5] .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-accent-text);
    border: 1px solid var(--app-teal);
}

[b-m8ovyhyah5] .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-m8ovyhyah5] .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);
}

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

[b-m8ovyhyah5] .audit-filters { }

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

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

/* Action badges */
[b-m8ovyhyah5] .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-m8ovyhyah5] .audit-badge-auth    { background: var(--app-teal-50); color: var(--app-accent-text); border: 1px solid var(--app-teal); }
[b-m8ovyhyah5] .audit-badge-create  { background: var(--app-success-bg); color: var(--app-success-fg); border: 1px solid var(--app-success-border); }
[b-m8ovyhyah5] .audit-badge-update  { background: var(--app-info-bg); color: var(--app-info-fg); border: 1px solid var(--app-info-border); }
[b-m8ovyhyah5] .audit-badge-delete  { background: var(--app-danger-bg); color: var(--app-danger-fg); border: 1px solid var(--app-danger-border); }
[b-m8ovyhyah5] .audit-badge-complete { background: var(--app-success-bg); color: var(--app-success-fg); border: 1px solid var(--app-success-border); }
[b-m8ovyhyah5] .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-m8ovyhyah5] .field-search-wrap {
    position: relative;
    flex: 1;
    max-width: 280px;
}

[b-m8ovyhyah5] .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-m8ovyhyah5] .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);
    background: var(--app-var(--app-surface));
    border: 1px solid var(--app-border-2);
    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-m8ovyhyah5] .field-search-input:focus {
    border-color: var(--app-text-3);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-navy) 12%, transparent);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[b-m8ovyhyah5] .fm-status-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
}

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

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

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

[b-m8ovyhyah5] .co-subtab.active {
    background: var(--app-surface);
    color: var(--app-heading);
    font-weight: 600;
    box-shadow: var(--app-shadow-xs);
}

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

.settings-subtab-bar[b-m8ovyhyah5] {
    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-m8ovyhyah5] {
    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-m8ovyhyah5] { color: var(--app-heading); }

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

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

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

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

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

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

[b-m8ovyhyah5] .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-m8ovyhyah5] .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-surface);
    outline: none;
    transition: border-color var(--app-fast) ease, box-shadow var(--app-fast) ease;
}

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

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

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

[b-m8ovyhyah5] .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-surface);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background-color var(--app-fast) ease;
    position: relative;
    width: 100%;
}

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

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

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

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

[b-m8ovyhyah5] .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-link);
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: background-color var(--app-fast) ease, color var(--app-fast) ease;
}

[b-m8ovyhyah5] .co-master-item.selected .co-master-icon {
    background: var(--app-teal-glow);
    color: var(--app-accent-text);
}

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

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

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

[b-m8ovyhyah5] .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-m8ovyhyah5] .co-detail {
    border: 1px solid var(--app-border);
    border-radius: var(--app-r);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-xs);
    overflow: hidden;
}

[b-m8ovyhyah5] .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-m8ovyhyah5] .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-heading);
}

[b-m8ovyhyah5] .co-detail-title i {
    color: var(--app-accent-text);
    font-size: 1.1rem;
}

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

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

[b-m8ovyhyah5] .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-m8ovyhyah5] .sl-field-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--app-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

[b-m8ovyhyah5] .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-m8ovyhyah5] .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-m8ovyhyah5] .sl-field-type[data-type="Text"]        { background: var(--app-surface-2); color: var(--app-text-2); }
[b-m8ovyhyah5] .sl-field-type[data-type="Note"]        { background: var(--app-surface-2); color: var(--app-text-2); }
[b-m8ovyhyah5] .sl-field-type[data-type="Number"]      { background: var(--app-info-bg); color: var(--app-info-fg); }
[b-m8ovyhyah5] .sl-field-type[data-type="Date"]        { background: var(--app-info-bg); color: var(--app-info-fg); }
[b-m8ovyhyah5] .sl-field-type[data-type="Boolean"]     { background: var(--app-warning-bg); color: var(--app-warning-fg); }
[b-m8ovyhyah5] .sl-field-type[data-type="Dropdown"]    { background: var(--app-teal-50); color: var(--app-accent-text); }
[b-m8ovyhyah5] .sl-field-type[data-type="MultiSelect"] { background: var(--app-teal-50); color: var(--app-accent-text); }
[b-m8ovyhyah5] .sl-field-type[data-type="Url"]         { background: var(--app-info-bg); color: var(--app-info-fg); }
[b-m8ovyhyah5] .sl-field-type[data-type="Email"]       { background: var(--app-danger-bg); color: var(--app-danger-fg); }
[b-m8ovyhyah5] .sl-field-type[data-type="Phone"]       { background: var(--app-success-bg); color: var(--app-success-fg); }

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

[b-m8ovyhyah5] .sl-field-badge {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 600;
}

[b-m8ovyhyah5] .sl-field-badge.required {
    background: var(--app-danger-bg);
    color: var(--app-danger-fg);
    border: 1px solid var(--app-danger-border);
}

/* Required dot indicator (alternative to badge) */
[b-m8ovyhyah5] .sl-field-required-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--app-danger-solid);
    flex-shrink: 0;
    box-shadow: 0 0 0 2px var(--app-danger-bg);
}

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

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

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

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

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

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

[b-m8ovyhyah5] .co-props-field label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--app-text-3);
    margin-bottom: 0.2rem;
    display: block;
}

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

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

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

[b-m8ovyhyah5] .bei-section-header i {
    font-size: 0.8rem;
    color: var(--app-link);
}

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

[b-m8ovyhyah5] .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-surface);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background-color var(--app-fast) ease;
    width: 100%;
}

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

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

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

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

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

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

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

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

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

/* Category-colored badges for items with fields */
[b-m8ovyhyah5] .bei-icon-account ~ .bei-item-info ~ .bei-item-badge:not(.bei-badge-empty) {
    background: color-mix(in srgb, var(--app-link) 12%, transparent);
    color: var(--app-link);
}

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

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

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

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

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

/* ── Detail header enhancements ── */

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

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

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

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

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

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

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

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

[b-m8ovyhyah5] .bei-overflow-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 160px;
    background: var(--app-surface);
    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-m8ovyhyah5 0.12s var(--app-ease) both;
}

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

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

[b-m8ovyhyah5] .bei-overflow-danger {
    color: var(--app-danger-fg);
}

[b-m8ovyhyah5] .bei-overflow-danger:hover {
    background: var(--app-danger-bg);
}

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

/* ── Empty fields state ── */

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

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

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

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

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

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

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

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

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

[b-m8ovyhyah5] .em-form-grid .form-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--app-text-2);
    margin-bottom: 0.2rem;
}

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

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

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

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

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

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

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

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

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

[b-m8ovyhyah5] .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;
    color: var(--app-text-3);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

[b-m8ovyhyah5] .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: var(--app-warning-bg);
    color: var(--app-warning-fg);
    border: 1px solid var(--app-warning-border);
}

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

[b-m8ovyhyah5] .em-provider-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--app-text-3);
    margin-bottom: 0.6rem;
}

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

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

[b-m8ovyhyah5] .em-provider-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1rem 0.5rem 0.75rem;
    background: var(--app-surface);
    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-m8ovyhyah5] .em-provider-card:hover {
    border-color: var(--app-border-2);
    background: var(--app-bg);
}

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

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

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

[b-m8ovyhyah5] .em-provider-active .em-provider-icon {
    color: var(--app-accent-text);
}

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

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

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

/* Fallback section */

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

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

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

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

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

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

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

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

/* Responsive */

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

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

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

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

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

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

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

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

.af-reason[b-54wleg3bnl] {
    font-weight: 600;
    font-size: .88rem;
    color: var(--app-text);
}

.af-item-meta[b-54wleg3bnl] {
    font-size: .78rem;
    color: var(--app-text-2);
}

.af-item-id[b-54wleg3bnl] {
    margin-left: auto;
    font-size: .72rem;
    color: var(--app-text-3);
}

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

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

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

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

.af-tool-status[b-54wleg3bnl] {
    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-54wleg3bnl] {
    border-color: var(--app-danger-border);
    background: var(--app-danger-bg);
    color: var(--app-danger-fg);
}

.af-tool--error[b-54wleg3bnl] {
    border-color: var(--app-warning-border);
    background: var(--app-warning-bg);
    color: var(--app-warning-fg);
}

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

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

.af-diagnosis-cat[b-54wleg3bnl] {
    color: var(--app-text-3);
}

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

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

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

.af-flag[b-54wleg3bnl] {
    font-size: .7rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: var(--app-warning-bg);
    color: var(--app-warning-fg);
}

.af-draft[b-54wleg3bnl] {
    margin-top: .6rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-r);
    overflow: hidden;
}

.af-draft-head[b-54wleg3bnl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: .45rem .75rem;
    background: var(--app-surface-sunken);
    font-size: .78rem;
}

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

.af-status--open[b-zapcwm62hr] { color: var(--app-text); }
.af-status--triaged[b-zapcwm62hr] { color: var(--app-info-fg); }
.af-status--resolved[b-zapcwm62hr] { color: var(--app-success-fg); }
.af-status--closed[b-zapcwm62hr] { color: var(--app-text-3); }

.af-regression[b-zapcwm62hr] {
    font-size: 0.72rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--app-danger-bg);
    color: var(--app-danger-fg);
}

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

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

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

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

.af-transcript-banner[b-bmgmecduif] {
    padding: .35rem .75rem;
    background: var(--app-surface-sunken);
    color: var(--app-text-2);
    font-size: .75rem;
}

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

.af-turns[b-bmgmecduif] {
    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-bmgmecduif] {
    padding: .45rem .65rem;
    border-radius: 8px;
    border-left: 3px solid transparent;
    font-size: .85rem;
}

.af-turn--user[b-bmgmecduif] {
    background: var(--app-surface-sunken);
}

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

/* The exchange that was reported — the reason the reviewer opened this. */
.af-turn--flagged[b-bmgmecduif] {
    border-left-color: var(--app-danger-fg);
    background: var(--app-danger-bg);
}

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

.af-turn-when[b-bmgmecduif] {
    font-weight: 400;
    color: var(--app-text-3);
}

.af-turn-flag[b-bmgmecduif] {
    color: var(--app-danger-fg);
}

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

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

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

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

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

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

.af-flag[b-bmgmecduif] {
    font-size: .7rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: var(--app-warning-bg);
    color: var(--app-warning-fg);
}
/* /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-4la0sa7faa] {
    max-width: 75ch;
}

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

.af-tile[b-4la0sa7faa] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0.6rem 0.85rem;
    text-align: left;
    background: var(--app-var(--app-surface));
    border: 1px solid var(--app-border);
    border-radius: var(--app-r);
    box-shadow: var(--app-shadow-xs);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

button.af-tile:hover[b-4la0sa7faa] {
    border-color: var(--app-border-2);
    box-shadow: var(--app-shadow-sm);
}

.af-tile:focus-visible[b-4la0sa7faa] {
    outline: 2px solid var(--app-teal);
    outline-offset: 2px;
}

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

.af-tile--on[b-4la0sa7faa] {
    border-color: var(--app-text-3);
    box-shadow: inset 0 0 0 1px var(--app-navy);
}

.af-tile-n[b-4la0sa7faa] {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--app-text);
    font-variant-numeric: tabular-nums;
}

.af-tile--attn .af-tile-n[b-4la0sa7faa] {
    color: var(--app-danger-fg);
}

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

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

.af-chip[b-4la0sa7faa] {
    padding: 0.2rem 0.65rem;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    background: var(--app-var(--app-surface));
    color: var(--app-text);
    font-size: 0.78rem;
}

.af-chip:hover[b-4la0sa7faa] {
    border-color: var(--app-border-2);
}

.af-chip:focus-visible[b-4la0sa7faa] {
    outline: 2px solid var(--app-teal);
    outline-offset: 2px;
}

.af-chip--on[b-4la0sa7faa] {
    background: var(--app-primary-bg);
    border-color: var(--app-primary-bg);
    color: var(--app-primary-fg);
}

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

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

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

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

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

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

.af-proposed[b-4la0sa7faa] {
    background: rgba(var(--app-teal-rgb), 0.1);
    color: var(--app-accent-text);
}

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

.af-status--triaged[b-4la0sa7faa] { color: var(--app-info-fg); }
.af-status--resolved[b-4la0sa7faa] { color: var(--app-success-fg); }
.af-status--closed[b-4la0sa7faa] { color: var(--app-text-3); }

.af-regression[b-4la0sa7faa] {
    font-size: 0.7rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--app-danger-bg);
    color: var(--app-danger-fg);
}

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

.af-inline-input[b-4la0sa7faa] {
    width: 16rem;
}

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

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

@media (prefers-reduced-motion: reduce) {
    .af-tile[b-4la0sa7faa] { transition: none; }
}
/* /Pages/Admin/Tabs/AdminServiceKeysTab.razor.rz.scp.css */
/* Permissions by module: a label, then each resource's name and its actions on one row. */
.sk-perm-group[b-bkkfoh8l92] {
    border: 1px solid var(--app-border);
    border-radius: 8px;
    padding: 0.5rem 0.75rem 0.35rem;
    margin: 0 0 0.6rem;
    background: var(--app-surface);
}

.sk-perm-group legend[b-bkkfoh8l92] {
    float: none;
    width: auto;
    margin: 0 0 0.25rem;
    padding: 0;
}

.sk-perm-row[b-bkkfoh8l92] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 1rem;
    padding: 0.25rem 0;
    border-top: 1px solid var(--app-border);
}

.sk-perm-row:first-of-type[b-bkkfoh8l92] {
    border-top: 0;
}

.sk-perm-name[b-bkkfoh8l92] {
    flex: 0 0 13rem;
    min-width: 0;
    font-size: 0.85rem;
    color: var(--app-text);
}

.sk-perm-actions[b-bkkfoh8l92] {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.25rem;
}

@media (max-width: 575.98px) {
    .sk-perm-name[b-bkkfoh8l92] { flex-basis: 100%; }
}
/* /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-7x2pzvtptp] {
    color: var(--app-text-2);
    text-decoration: none;
    font-size: 0.85rem;
}

.par-back a:hover[b-7x2pzvtptp] {
    color: var(--app-teal);
    text-decoration: underline;
}

.par-card[b-7x2pzvtptp] {
    max-width: 760px;
    background: var(--app-warning-bg);
    border: 1px solid var(--app-warning-border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    box-shadow: 0 1px 3px rgba(var(--app-shadow-rgb), 0.04);
}

.par-card--error[b-7x2pzvtptp] {
    background: var(--app-danger-bg);
    border-color: var(--app-danger-border);
}

.par-head[b-7x2pzvtptp] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    color: var(--app-warning-fg);
}

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

.par-head-meta[b-7x2pzvtptp] {
    font-size: 0.78rem;
    color: var(--app-text-2);
}

.par-list[b-7x2pzvtptp] {
    background: var(--app-surface);
    border: 1px solid var(--app-warning-border);
    border-radius: 8px;
    max-height: 280px;
    overflow-y: auto;
    padding: 0.3rem 0.6rem;
}

.par-item[b-7x2pzvtptp] {
    padding: 0.4rem 0.2rem;
    border-bottom: 1px solid var(--app-warning-border);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.15rem 0.5rem;
    font-size: 0.85rem;
}

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

.par-item-title[b-7x2pzvtptp] {
    color: var(--app-text);
    overflow-wrap: anywhere;
    flex: 1 1 10rem;
    min-width: 0;
}

.par-item-state[b-7x2pzvtptp] {
    color: var(--app-text-2);
    overflow-wrap: anywhere;
    min-width: 0;
    font-size: 0.8rem;
}

.par-overflow[b-7x2pzvtptp] {
    text-align: center;
    padding: 0.4rem;
    font-size: 0.78rem;
    color: var(--app-text-2);
}

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

.par-edit-label[b-7x2pzvtptp] {
    font-size: 0.78rem;
    color: var(--app-text-2);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.par-edit-error[b-7x2pzvtptp] {
    font-size: 0.78rem;
    color: var(--app-danger-fg);
    background: var(--app-danger-bg);
    border-radius: 6px;
    padding: 0.35rem 0.55rem;
}

.par-edit-formwrap[b-7x2pzvtptp] {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    padding: 0.7rem 0.85rem;
}

.par-edit-toggle[b-7x2pzvtptp] {
    background: none;
    border: none;
    color: var(--app-link);
    font-size: 0.78rem;
    padding: 0.15rem 0;
    cursor: pointer;
    text-decoration: underline;
    align-self: flex-start;
}

.par-edit-toggle:hover[b-7x2pzvtptp] {
    color: var(--app-teal);
}

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

.par-view-convo[b-7x2pzvtptp] {
    color: var(--app-text-2);
    text-decoration: none;
}

.par-view-convo:hover[b-7x2pzvtptp] {
    color: var(--app-teal);
    text-decoration: underline;
}

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

.par-status[b-7x2pzvtptp] {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: var(--app-text);
}

.par-status--ok[b-7x2pzvtptp] {
    color: var(--app-success-fg);
}

.par-status--declined[b-7x2pzvtptp] {
    color: var(--app-text-2);
}

.par-status--err[b-7x2pzvtptp] {
    color: var(--app-danger-fg);
}

.par-tool-card[b-7x2pzvtptp] {
    background: color-mix(in srgb, var(--app-text) 4%, transparent);
    border: 1px solid var(--app-border);
    border-radius: 6px;
    padding: 0.35rem 0.55rem;
    font-size: 0.82rem;
    color: var(--app-text-2);
    align-self: flex-start;
}

.par-tool-summary[b-7x2pzvtptp] {
    color: var(--app-text-2);
}

.par-final-text[b-7x2pzvtptp] {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 6px;
    padding: 0.55rem 0.7rem;
    font-size: 0.9rem;
    color: var(--app-text);
    white-space: pre-wrap;
}

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

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

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

.par-warning[b-7x2pzvtptp],
.par-unreviewed[b-7x2pzvtptp] {
    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-7x2pzvtptp] {
    background: var(--app-warning-bg);
    border: 1px solid var(--app-warning-border);
    color: var(--app-warning-fg);
}

.par-unreviewed[b-7x2pzvtptp] {
    background: var(--app-surface-sunken);
    border: 1px dashed var(--app-border);
    color: var(--app-text-2);
}

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

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

.par-step-num[b-7x2pzvtptp] {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--app-surface-2);
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.par-step-note[b-7x2pzvtptp] {
    font-size: 0.8rem;
    color: var(--app-text-2);
    padding-left: 2rem;
}

.par-step .par-list[b-7x2pzvtptp] {
    margin: 0.35rem 0 0 2rem;
}
/* /Pages/Datasets/ClassificationReview.razor.rz.scp.css */
/* The review list's header: counts, the filter and the bulk accept, sticky under the top bar. */
.classify-summary[b-cxeaal90b7] {
    position: sticky;
    top: var(--app-chrome-top, 58px);
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 0;
    background: var(--app-bg);
    border-bottom: 1px solid var(--app-border);
}

.classify-counts[b-cxeaal90b7] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    color: var(--app-text-2);
}

.classify-later summary[b-cxeaal90b7] {
    cursor: pointer;
    list-style-position: inside;
}

.classify-later-list li + li[b-cxeaal90b7] {
    border-top: 1px solid var(--app-border);
    padding-top: 2px;
    margin-top: 2px;
}

.min-w-0[b-cxeaal90b7] {
    min-width: 0;
}

.flex-none[b-cxeaal90b7] {
    flex: none;
}
/* /Pages/Datasets/ConnectionList.razor.rz.scp.css */

/* A multi-line secret (SFTP key) is masked like a password until it has focus. */
.secret-area:not(:focus)[b-kkwxbeojxg] { -webkit-text-security: disc; }
/* /Pages/Datasets/DatasetCatalog.razor.rz.scp.css */
/* The catalog's job list: one line per job, long names end in an ellipsis and the badges stay beside them. */
.catalog-list[b-pkx89eu2rx] {
    max-height: 75vh;
    overflow: auto;
}

.catalog-folder[b-pkx89eu2rx] {
    background: var(--app-surface-2);
    color: var(--app-text-2);
}

.catalog-item[b-pkx89eu2rx] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.catalog-name[b-pkx89eu2rx] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flex-none[b-pkx89eu2rx] {
    flex: none;
}

/* Scrolled to on a phone: stop below the pinned top bar. */
.catalog-doc[b-pkx89eu2rx] {
    scroll-margin-top: calc(var(--app-chrome-top, 58px) + 8px);
}

.catalog-title:focus[b-pkx89eu2rx] {
    outline: none;
}

.catalog-title:focus-visible[b-pkx89eu2rx] {
    outline: 2px solid var(--app-focus);
    outline-offset: 2px;
}

/* On a phone the list is above the docs: keep it short so the docs aren't far away. */
@media (max-width: 991.98px) {
    .catalog-list[b-pkx89eu2rx] {
        max-height: 45vh;
    }
}
/* /Pages/Datasets/DatasetDetail.razor.rz.scp.css */
/* The job page's ⋯ menu: its items are this page's buttons (DataActionsMenu draws the panel). */
.job-menu__item[b-sa7xy6r2xk] {
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--app-text);
    font: inherit;
    font-size: 0.85rem;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.job-menu__item i[b-sa7xy6r2xk] { color: var(--app-text-3); justify-self: center; }
.job-menu__item:hover:not(:disabled)[b-sa7xy6r2xk], .job-menu__item:focus-visible[b-sa7xy6r2xk] { background: var(--app-surface-2); color: var(--app-heading); }
.job-menu__item:focus-visible[b-sa7xy6r2xk] { outline: 2px solid var(--app-teal); outline-offset: -2px; }
.job-menu__item:disabled[b-sa7xy6r2xk] { opacity: 0.5; cursor: default; }
.job-menu__item--danger[b-sa7xy6r2xk], .job-menu__item--danger i[b-sa7xy6r2xk] { color: var(--app-danger-fg); }
.job-menu__item--danger:hover:not(:disabled)[b-sa7xy6r2xk] { background: var(--app-danger-bg); color: var(--app-danger-fg); }

.job-menu__rule[b-sa7xy6r2xk] { margin: 4px 2px; border: 0; border-top: 1px solid var(--app-border); opacity: 1; }

/* Phones: YAML and Lineage move from the header into the menu, so the header keeps to one row. */
.job-head__narrow[b-sa7xy6r2xk] { display: none; }

@media (max-width: 767.98px) {
    .job-head__wide[b-sa7xy6r2xk] { display: none; }
    .job-head__narrow[b-sa7xy6r2xk] { display: grid; }
}
/* /Pages/Datasets/DatasetForm.razor.rz.scp.css */
/* Rail | form | summary on wide screens; stacked (rail as chips on top) below 1200px. */
.job-editor[b-vuxsgh4f6d] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

/* The app's top bar and alpha banner stay pinned above the page; keep clear of them. */
.job-editor[b-vuxsgh4f6d] { --job-editor-top: calc(var(--app-chrome-top) + 1rem); }

.job-editor__rail[b-vuxsgh4f6d] {
    position: sticky;
    top: calc(var(--job-editor-top) - 1rem);
    z-index: 2;
    background: var(--app-bg);
    padding: 0.25rem 0;
}

@media (min-width: 1200px) {
    .job-editor[b-vuxsgh4f6d] {
        grid-template-columns: 11.5rem minmax(0, 1fr) 19rem;
        align-items: start;
        gap: 1.5rem;
    }

    .job-editor__rail[b-vuxsgh4f6d],
    .job-editor__side[b-vuxsgh4f6d] {
        position: sticky;
        top: var(--job-editor-top);
        max-height: calc(100vh - var(--job-editor-top) - 1rem);
        overflow-y: auto;
    }

    .job-editor__rail[b-vuxsgh4f6d] { background: transparent; padding: 0; }
}

.job-editor__subhead[b-vuxsgh4f6d] {
    margin: 1.5rem 0 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--app-border);
    font-size: 0.875rem;
}

.job-editor__disclosure[b-vuxsgh4f6d] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    color: inherit;
}

.job-editor__disclosure[b-vuxsgh4f6d]  .job-section-title { margin-bottom: 0; }

.job-runs-when[b-vuxsgh4f6d] {
    border: 1px solid var(--app-border);
    border-radius: var(--app-r-sm);
}

.job-runs-when__row[b-vuxsgh4f6d] { padding: 0.75rem; }
.job-runs-when__row + .job-runs-when__row[b-vuxsgh4f6d] { border-top: 1px solid var(--app-border); }

/* The form is one surface; its sections are divided by rules, not boxed separately. */
.job-editor__main[b-vuxsgh4f6d] {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-r-lg);
    overflow: clip;
}

.job-section[b-vuxsgh4f6d] {
    padding: 1.5rem 1.5rem 1.75rem;
    scroll-margin-top: calc(var(--app-chrome-top) + 1rem);
}

.job-section + .job-section[b-vuxsgh4f6d] { border-top: 1px solid var(--app-border); }

@media (max-width: 575.98px) {
    .job-section[b-vuxsgh4f6d] { padding: 1.25rem 1rem; }
}

/* The columns table scrolls sideways in a narrow editor rather than squeezing names to a few letters. */
.job-columns-table[b-vuxsgh4f6d] { min-width: 30rem; }

/* Wide screens: the side panel scrolls on its own, and its actions card stays at its top, so the Scan's
   results can't push Save out of sight. */
@media (min-width: 1200px) {
    .job-editor__actions[b-vuxsgh4f6d] {
        position: sticky;
        top: 0;
        z-index: 1;
        box-shadow: var(--app-shadow-sm);
    }
}

/* Narrow screens: the side panel sits below the form, so a bar keeps the actions at the bottom of the
   screen; the side panel's own copy of the buttons goes. */
.job-editor__bar[b-vuxsgh4f6d] { display: none; }

@media (max-width: 1199.98px) {
    .job-editor__bar[b-vuxsgh4f6d] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        position: sticky;
        bottom: 0.5rem;
        z-index: 3;
        padding: 0.625rem 0.75rem;
        background: var(--app-surface);
        border: 1px solid var(--app-border);
        border-radius: var(--app-r-lg);
        box-shadow: var(--app-shadow);
        /* Clear of the assistant's round button in the bottom-right corner. */
        margin-right: 4.5rem;
    }

    .job-editor__buttons[b-vuxsgh4f6d] { display: none !important; }
    .job-editor__actions .job-editor__problems[b-vuxsgh4f6d] { margin-top: 0 !important; }
    .job-editor__actions:not(:has(.alert))[b-vuxsgh4f6d] { display: none; }
}

/* A column's classification: a plain select, with a shield beside it when the column is PHI. */
.job-col-class[b-vuxsgh4f6d] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.job-col-class__phi[b-vuxsgh4f6d] {
    flex: 0 0 auto;
    color: var(--app-danger-fg);
    line-height: 1;
}

/* The AI helpers under the columns: their buttons keep to one line. */
.job-columns-ai[b-vuxsgh4f6d]  .btn { white-space: nowrap; flex-shrink: 0; }

/* The load modes keep each label whole. */
.job-editor__main[b-vuxsgh4f6d]  .job-modes .seg__item { white-space: nowrap; }

.job-columns-fixed td:first-child[b-vuxsgh4f6d] { width: 11rem; }
/* /Pages/Datasets/DatasetImport.razor.rz.scp.css */
/* The import list: actions stay in reach while a long list scrolls; the job column carries its source path. */
.import-actions[b-bjd8nr24g1] {
    position: sticky;
    top: var(--app-chrome-top, 4rem);
    z-index: 5;
    padding: 0.5rem 0;
    background: var(--app-bg);
}

.import-table__job[b-bjd8nr24g1] {
    min-width: 16rem;
}

/* The export drop zone: the real file input covers it, invisible, so drops and clicks both reach it. */
.import-drop[b-bjd8nr24g1] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 8.5rem;
    padding: 1rem;
    text-align: center;
    border: 2px dashed var(--app-border-2);
    border-radius: var(--app-r-lg, 12px);
    background: var(--app-surface-2);
    color: var(--app-text-2);
    transition: border-color var(--app-fast, 120ms) ease, background-color var(--app-fast, 120ms) ease;
}

.import-drop:hover[b-bjd8nr24g1],
.import-drop.is-over[b-bjd8nr24g1] {
    border-color: var(--app-accent-text);
    background: var(--app-surface-sunken);
}

.import-drop.has-file[b-bjd8nr24g1] {
    border-style: solid;
    border-color: var(--app-success-border);
    background: var(--app-success-bg);
}

.import-drop:focus-within[b-bjd8nr24g1] {
    box-shadow: 0 0 0 3px var(--app-focus);
}

.import-drop[b-bjd8nr24g1]  .import-drop__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.import-drop__icon[b-bjd8nr24g1] {
    font-size: 1.75rem;
    color: var(--app-text-3);
}

.import-drop.has-file .import-drop__icon[b-bjd8nr24g1] {
    color: var(--app-success-fg);
}

.import-drop__link[b-bjd8nr24g1] {
    color: var(--app-link);
    text-decoration: underline;
}

/* STAGE → and SOURCE → stay on one line each; on a phone the two boxes stack. */
.import-remap[b-bjd8nr24g1] {
    flex: 1 1 12rem;
    max-width: 16rem;
    flex-wrap: nowrap;
}

.import-remap .input-group-text[b-bjd8nr24g1] {
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .import-remap[b-bjd8nr24g1] {
        max-width: none;
    }
}
/* /Pages/Datasets/DatasetList.razor.rz.scp.css */
.job-filters[b-q4qe2ogbfl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.job-filters__search[b-q4qe2ogbfl] { max-width: 18rem; }
.job-filters__folder[b-q4qe2ogbfl] { width: auto; max-width: 16rem; }

@media (max-width: 575.98px) {
    .job-filters__search[b-q4qe2ogbfl],
    .job-filters__folder[b-q4qe2ogbfl] { max-width: none; width: 100%; }
}

/* Status filter chips: a pressed chip is clearly selected (accent outline, tint, a tick); a chip
   with nothing to show steps back. */
.job-chips[b-q4qe2ogbfl] { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.job-chip[b-q4qe2ogbfl] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 30px;
    padding: 0.15rem 0.4rem 0.15rem 0.7rem;
    border: 1px solid var(--app-border-2);
    border-radius: 999px;
    background: var(--app-surface);
    color: var(--app-text-2);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color var(--app-fast) ease, border-color var(--app-fast) ease, color var(--app-fast) ease;
}

.job-chip:hover:not(:disabled)[b-q4qe2ogbfl] { border-color: var(--app-accent-text); color: var(--app-heading); }
.job-chip:focus-visible[b-q4qe2ogbfl] { outline: 2px solid var(--app-focus); outline-offset: 2px; }

.job-chip__count[b-q4qe2ogbfl] {
    min-width: 1.5rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--app-surface-2);
    color: var(--app-text-2);
    font-size: 0.75rem;
    text-align: center;
}

.job-chip--on[b-q4qe2ogbfl] {
    border-color: var(--app-accent-text);
    background: var(--app-teal-50);
    color: var(--app-heading);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--app-accent-text);
}

.job-chip--on .bi[b-q4qe2ogbfl] { color: var(--app-accent-text); margin-right: -0.1rem; }
.job-chip--on .job-chip__count[b-q4qe2ogbfl] { background: var(--app-accent-text); color: var(--app-surface); }

.job-chip--empty:not(.job-chip--on)[b-q4qe2ogbfl] {
    border-style: dashed;
    border-color: var(--app-border);
    background: transparent;
    color: var(--app-text-4);
    cursor: default;
}

.job-chip--empty:not(.job-chip--on) .job-chip__count[b-q4qe2ogbfl] { background: transparent; color: var(--app-text-4); }

/* The selection toolbar floats at the bottom of the screen (Linear-style) instead of pushing the list
   down: a zero-height sticky anchor after the list, the bar rising from it. Centred on the content
   with room on the right for the assistant's button. */
.job-bulk-dock[b-q4qe2ogbfl] {
    position: sticky;
    bottom: 1rem;
    z-index: 20;
    height: 0;
}

.job-bulk[b-q4qe2ogbfl] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 9rem);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem 0.5rem 1rem;
    border: 1px solid var(--app-border-2);
    border-radius: var(--app-r-lg);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-lift);
    animation: job-bulk-in-b-q4qe2ogbfl var(--app-mid) var(--app-ease);
}

@keyframes job-bulk-in-b-q4qe2ogbfl {
    from { opacity: 0; transform: translate(-50%, 0.75rem); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .job-bulk[b-q4qe2ogbfl] { animation: none; }
}

/* Room at the end of the list so the floating bar never hides the last job. */
.job-list--selecting[b-q4qe2ogbfl] { padding-bottom: 4.5rem; }

@media (max-width: 991.98px) {
    /* Narrower: left-aligned, stopping short of the assistant's button; one row that scrolls sideways. */
    .job-bulk[b-q4qe2ogbfl] {
        left: 0;
        transform: none;
        max-width: calc(100% - 5.5rem);
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
    }
    .job-bulk > *[b-q4qe2ogbfl] { flex-shrink: 0; }
    .job-bulk[b-q4qe2ogbfl] { animation-name: job-bulk-in-left-b-q4qe2ogbfl; }
}

@keyframes job-bulk-in-left-b-q4qe2ogbfl {
    from { opacity: 0; transform: translateY(0.75rem); }
    to { opacity: 1; transform: none; }
}

.job-bulk__folder[b-q4qe2ogbfl] { width: 8rem; }
.job-bulk__class[b-q4qe2ogbfl] { width: auto; }

.job-table__check[b-q4qe2ogbfl] { width: 2rem; }

.job-table__folder th[b-q4qe2ogbfl] {
    padding-top: 1rem;
    background: var(--app-bg);
    color: var(--app-text-2);
    font-size: 0.8rem;
    font-weight: 600;
    border-bottom-color: var(--app-border);
}

.job-table tr.is-selected > td[b-q4qe2ogbfl],
.job-card.is-selected[b-q4qe2ogbfl] {
    background: var(--app-info-bg);
}

.job-card[b-q4qe2ogbfl] {
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--app-border);
    border-radius: 0.5rem;
    background: var(--app-surface);
}

.job-card .form-check-input[b-q4qe2ogbfl] {
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    align-self: flex-start;
}

/* Table names wrap after a dot (<wbr>); a single very long part may still break as a last resort. */
.job-target[b-q4qe2ogbfl] {
  overflow-wrap: break-word;
  word-break: normal;
}
/* /Pages/Datasets/EtlLineage.razor.rz.scp.css */
/* The lineage graph: tokens only, so it follows the theme. The canvas zooms and pans (lineage-zoom.js);
   the details sit beside it on wide screens and slide up from the bottom on phones. */
.lineage-shell[b-m2881qgsc9] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.lineage-shell.has-panel[b-m2881qgsc9] {
    grid-template-columns: minmax(0, 1fr) 340px;
}

.lineage-main[b-m2881qgsc9] {
    overflow: hidden;
}

.lineage-toolbar[b-m2881qgsc9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--app-border);
}

.lineage-find[b-m2881qgsc9] {
    position: relative;
    flex: 0 1 280px;
    min-width: 180px;
}

.lineage-find > i[b-m2881qgsc9] {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--app-text-3);
    font-size: 0.8rem;
    pointer-events: none;
}

.lineage-find input[b-m2881qgsc9] {
    padding-left: 28px;
}

.lineage-zoom[b-m2881qgsc9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* The zoom level doubles as the "actual size" button. */
.lineage-zoom-level[b-m2881qgsc9] {
    min-width: 3.6em;
    text-align: center;
    font-size: 0.8rem;
    color: var(--app-text-2);
    text-decoration: none;
    padding-left: 4px;
    padding-right: 4px;
}

.lineage-zoom-level:hover[b-m2881qgsc9],
.lineage-zoom-level:focus-visible[b-m2881qgsc9] {
    color: var(--app-accent-text);
    text-decoration: underline;
}

.lineage-canvas[b-m2881qgsc9] {
    position: relative;
    min-height: 300px;
    background: var(--app-surface-sunken);
    background-image: radial-gradient(var(--app-border) 1px, transparent 1px);
    background-size: 18px 18px;
    outline: none;
    overflow: hidden;
    scroll-margin-top: calc(var(--app-chrome-top, 58px) + 8px);
}

.lineage-canvas:focus-visible[b-m2881qgsc9] {
    box-shadow: inset 0 0 0 2px var(--app-focus);
}

.lineage-svg[b-m2881qgsc9] {
    display: block;
    width: 100%;
    height: 100%;
    font-family: inherit;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.lineage-svg.is-panning[b-m2881qgsc9] {
    cursor: grabbing;
}

.lineage-legend[b-m2881qgsc9] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 8px 12px;
    border-top: 1px solid var(--app-border);
}

.lineage-edge[b-m2881qgsc9] {
    fill: none;
    stroke: var(--app-border-2);
    stroke-width: 1.5;
    transition: opacity var(--app-fast) ease;
}

.lineage-edge--after[b-m2881qgsc9] {
    stroke-dasharray: 5 4;
}

.lineage-edge--tableau[b-m2881qgsc9] {
    stroke: var(--app-info-border);
}

.lineage-edge.is-lit[b-m2881qgsc9] {
    stroke: var(--app-accent-text);
    stroke-width: 2.5;
}

.lineage-edge.is-dim[b-m2881qgsc9] {
    opacity: 0.35;
}

[b-m2881qgsc9] .lineage-arrow {
    fill: var(--app-text-4);
}

.lineage-node[b-m2881qgsc9] {
    cursor: pointer;
    outline: none;
    transition: opacity var(--app-fast) ease;
}

.lineage-node.is-dim[b-m2881qgsc9] {
    opacity: 0.45;
}

.lineage-node .lineage-box[b-m2881qgsc9] {
    fill: var(--app-surface);
    stroke: var(--app-border-2);
    stroke-width: 1.25;
}

.lineage-node--job .lineage-box[b-m2881qgsc9] {
    stroke: var(--app-primary-bg);
}

.lineage-node--source .lineage-box[b-m2881qgsc9] {
    fill: var(--app-success-bg);
    stroke: var(--app-success-border);
}

.lineage-node--table .lineage-box[b-m2881qgsc9] {
    fill: var(--app-surface-2);
}

.lineage-node--destination .lineage-box[b-m2881qgsc9] {
    fill: var(--app-warning-bg);
    stroke: var(--app-warning-border);
}

.lineage-node--workbook .lineage-box[b-m2881qgsc9] {
    fill: var(--app-info-bg);
    stroke: var(--app-info-border);
}

.lineage-node.is-off .lineage-box[b-m2881qgsc9] {
    stroke-dasharray: 4 3;
}

.lineage-node.is-focus .lineage-box[b-m2881qgsc9],
.lineage-node.is-selected .lineage-box[b-m2881qgsc9] {
    stroke: var(--app-accent-text);
    stroke-width: 2.5;
}

.lineage-node:focus-visible .lineage-box[b-m2881qgsc9] {
    stroke: var(--app-accent-text);
    stroke-width: 3;
}

.lineage-node:hover .lineage-box[b-m2881qgsc9] {
    stroke-width: 2.5;
}

.lineage-label[b-m2881qgsc9] {
    fill: var(--app-text);
    font-size: 13px;
    font-weight: 600;
}

.lineage-detail[b-m2881qgsc9] {
    fill: var(--app-text-3);
    font-size: 11px;
}

.lineage-flag[b-m2881qgsc9] {
    fill: var(--app-danger-bg);
    stroke: var(--app-danger-border);
}

.lineage-flag-text[b-m2881qgsc9] {
    fill: var(--app-danger-fg);
    font-size: 9px;
    font-weight: 700;
}

/* A closed group: a stack of cards. An open one: a frame round its grid, with a clickable header. */
.lineage-stack[b-m2881qgsc9] {
    fill: var(--app-surface);
    stroke: var(--app-border-2);
    stroke-width: 1;
}

.lineage-node--group .lineage-box[b-m2881qgsc9] {
    fill: var(--app-surface);
    stroke: var(--app-primary-bg);
}

.lineage-frame[b-m2881qgsc9] {
    transition: opacity var(--app-fast) ease;
}

.lineage-frame.is-dim[b-m2881qgsc9] {
    opacity: 0.45;
}

.lineage-frame-box[b-m2881qgsc9] {
    fill: var(--app-surface-2);
    stroke: var(--app-border-2);
    stroke-width: 1.25;
    stroke-dasharray: 6 4;
}

.lineage-frame-head[b-m2881qgsc9] {
    cursor: pointer;
    outline: none;
}

.lineage-frame-hit[b-m2881qgsc9] {
    fill: transparent;
}

.lineage-frame-head:hover .lineage-frame-hit[b-m2881qgsc9],
.lineage-frame-head:focus-visible .lineage-frame-hit[b-m2881qgsc9] {
    fill: var(--app-surface-sunken);
}

.lineage-frame-head:focus-visible .lineage-frame-hit[b-m2881qgsc9] {
    stroke: var(--app-accent-text);
    stroke-width: 2;
}

.lineage-frame-title[b-m2881qgsc9] {
    fill: var(--app-text-2);
    font-size: 12px;
    font-weight: 600;
}

.lineage-frame-action[b-m2881qgsc9] {
    fill: var(--app-accent-text);
    font-size: 12px;
    font-weight: 500;
}

.lineage-column[b-m2881qgsc9] {
    border-left: 2px solid var(--app-border);
    padding-left: 10px;
}

/* The last-run dot, and the ring round it when the data is late. */
.lineage-dot[b-m2881qgsc9] {
    fill: var(--app-neutral-border);
    stroke: var(--app-surface);
    stroke-width: 1;
}

.lineage-dot--success[b-m2881qgsc9] { fill: var(--app-success-solid); }
.lineage-dot--danger[b-m2881qgsc9] { fill: var(--app-danger-solid); }
.lineage-dot--warning[b-m2881qgsc9] { fill: var(--app-warning-solid); }
.lineage-dot--info[b-m2881qgsc9] {
    fill: var(--app-info-solid);
    animation: lineage-pulse-b-m2881qgsc9 1.4s ease-in-out infinite;
}

.lineage-late[b-m2881qgsc9] {
    fill: none;
    stroke: var(--app-warning-solid);
    stroke-width: 2;
}

@keyframes lineage-pulse-b-m2881qgsc9 {
    50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .lineage-dot--info[b-m2881qgsc9] { animation: none; }
}

.lineage-key[b-m2881qgsc9] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-right: 4px;
    vertical-align: -1px;
    border: 1.5px solid var(--app-border-2);
    background: var(--app-surface);
}

.lineage-key--job[b-m2881qgsc9] { border-color: var(--app-primary-bg); }
.lineage-key--source[b-m2881qgsc9] { background: var(--app-success-bg); border-color: var(--app-success-border); }
.lineage-key--table[b-m2881qgsc9] { background: var(--app-surface-2); }
.lineage-key--destination[b-m2881qgsc9] { background: var(--app-warning-bg); border-color: var(--app-warning-border); }
.lineage-key--workbook[b-m2881qgsc9] { background: var(--app-info-bg); border-color: var(--app-info-border); }

.lineage-key-dot[b-m2881qgsc9] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin: 0 3px 0 8px;
    vertical-align: 0;
    background: var(--app-neutral-border);
}

.lineage-key-dot.lineage-dot--success[b-m2881qgsc9] { background: var(--app-success-solid); }
.lineage-key-dot.lineage-dot--danger[b-m2881qgsc9] { background: var(--app-danger-solid); }
.lineage-key-dot.lineage-dot--warning[b-m2881qgsc9] { background: var(--app-warning-solid); }
.lineage-key-dot.lineage-dot--info[b-m2881qgsc9] { background: var(--app-info-solid); animation: none; }
.lineage-key-dot--late[b-m2881qgsc9] { background: transparent; border: 2px solid var(--app-warning-solid); }

.lineage-panel[b-m2881qgsc9] {
    position: sticky;
    top: calc(var(--app-chrome-top) + 12px);
    max-height: calc(100vh - var(--app-chrome-top) - 24px);
    overflow-y: auto;
}

.lineage-facts[b-m2881qgsc9] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 12px;
}

.lineage-facts dt[b-m2881qgsc9] {
    font-weight: 500;
    color: var(--app-text-3);
}

.lineage-facts dd[b-m2881qgsc9] {
    margin: 0;
}

.min-w-0[b-m2881qgsc9] {
    min-width: 0;
}

/* Below lg the details panel no longer fits beside the graph: it becomes a bottom sheet. */
@media (max-width: 991.98px) {
    .lineage-shell.has-panel[b-m2881qgsc9] {
        grid-template-columns: minmax(0, 1fr);
    }

    .lineage-panel[b-m2881qgsc9] {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        max-height: 55vh;
        border-radius: var(--app-r-lg) var(--app-r-lg) 0 0;
        box-shadow: var(--app-shadow-lift);
        animation: lineage-sheet-b-m2881qgsc9 var(--app-mid) var(--app-ease);
    }
}

@media (max-width: 640.98px) {
    .lineage-canvas[b-m2881qgsc9] {
        height: 60vh !important;
    }

    .lineage-find[b-m2881qgsc9] {
        flex: 1 1 100%;
    }

    .lineage-zoom[b-m2881qgsc9] {
        margin-left: 0 !important;
    }
}

@keyframes lineage-sheet-b-m2881qgsc9 {
    from { transform: translateY(24px); opacity: 0; }
}
/* /Pages/Datasets/EtlSetup.razor.rz.scp.css */
/* Section list beside the cards on wide screens; a scrolling row of chips above them otherwise. */
.setup-layout[b-2onhez84vc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.setup-nav ul[b-2onhez84vc] {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    position: relative;   /* holds the visually-hidden status text, which otherwise widened the page on phones */
}

.setup-nav__item[b-2onhez84vc] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.3rem 0.6rem;
    border: 1px solid transparent;
    border-radius: var(--app-radius, 0.5rem);
    background: none;
    color: var(--app-text-2);
    font-size: 0.85rem;
    text-align: left;
    white-space: nowrap;
    position: relative;
}

.setup-nav__item:hover[b-2onhez84vc] {
    background: var(--app-surface-2);
    color: var(--app-heading);
}

.setup-nav__item.is-current[b-2onhez84vc] {
    background: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-heading);
    font-weight: 600;
}

.setup-nav__dot[b-2onhez84vc] {
    flex: 0 0 auto;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    border: 2px solid var(--app-text-4);
}

.setup-nav__dot--done[b-2onhez84vc] {
    background: var(--app-success-solid);
    border-color: var(--app-success-solid);
}

.setup-nav__dot--problem[b-2onhez84vc] {
    background: var(--app-danger-solid);
    border-color: var(--app-danger-solid);
}

.setup-nav__dot--todo[b-2onhez84vc] {
    border-color: var(--app-warning-solid);
}

.setup-nav__dot--info[b-2onhez84vc] {
    border-color: var(--app-border-2);
}

@media (min-width: 1200px) {
    .setup-layout[b-2onhez84vc] {
        grid-template-columns: 12rem minmax(0, 1fr);
        gap: 1.5rem;
    }

    .setup-nav ul[b-2onhez84vc] {
        display: block;
        position: sticky;
        top: calc(var(--app-chrome-top, 4rem) + 1rem);
        overflow: visible;
    }

    .setup-nav ul li + li[b-2onhez84vc] {
        margin-top: 0.1rem;
    }
}
/* /Pages/Datasets/JobNew.razor.rz.scp.css */
/* One card for every choice, button or not: the same padding, icon, title and text. */
.job-choice[b-oyvsanepy3] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    width: 100%;
    height: 100%;
    padding: 1.25rem;
    text-align: left;
    font: inherit;
    color: var(--app-text);
    border: 1px solid var(--app-border);
    border-radius: var(--app-r-lg);
    background: var(--app-surface);
    transition: border-color var(--app-fast) var(--app-ease), box-shadow var(--app-fast) var(--app-ease), transform var(--app-fast) var(--app-ease);
}

.job-choice--action[b-oyvsanepy3] { cursor: pointer; }

.job-choice--action:hover[b-oyvsanepy3],
.job-choice--action:focus-visible[b-oyvsanepy3] {
    border-color: var(--app-teal);
    box-shadow: var(--app-shadow);
    transform: translateY(-1px);
}

.job-choice--action:focus-visible[b-oyvsanepy3] { outline: 2px solid var(--app-teal); outline-offset: 2px; }

.job-choice:not(.job-choice--action):focus-within[b-oyvsanepy3] { border-color: var(--app-border-2); }

.job-choice__icon[b-oyvsanepy3] {
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: 0.5rem;
    border-radius: var(--app-r-sm);
    display: grid;
    place-items: center;
    background: var(--app-teal-50);
    color: var(--app-accent-text);
    font-size: 1.15rem;
}

.job-choice__title[b-oyvsanepy3] {
    font-weight: 600;
    font-size: 1rem;
    color: var(--app-heading);
    margin: 0;
}

.job-choice__text[b-oyvsanepy3] {
    font-size: 0.875rem;
    color: var(--app-text-3);
}

.job-choice textarea[b-oyvsanepy3] { width: 100%; }

/* The less common starts, one line each under the cards. */
.job-choice-more[b-oyvsanepy3] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--app-text-3);
}

.job-choice-more li[b-oyvsanepy3] { display: flex; gap: 0.5rem; align-items: baseline; }
.job-choice-more i[b-oyvsanepy3] { color: var(--app-text-3); }

@media (prefers-reduced-motion: reduce) {
    .job-choice[b-oyvsanepy3] { transition: none; }
    .job-choice--action:hover[b-oyvsanepy3] { transform: none; }
}
/* /Pages/Datasets/RunDetail.razor.rz.scp.css */
/* A step's header row: a real button (keyboard, aria-expanded) that looks like the row. */
.run-step-toggle[b-sij1aiwtqn] {
  gap: 0.75rem;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.run-step-toggle:focus-visible[b-sij1aiwtqn] {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
  border-radius: 4px;
}
/* /Pages/Datasets/RunList.razor.rz.scp.css */
.run-filters[b-7fxzcox8nn] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.run-filters__search[b-7fxzcox8nn] { max-width: 16rem; }
.run-filters__select[b-7fxzcox8nn] { width: auto; max-width: 16rem; }
@media (max-width: 575.98px) { .run-filters__search[b-7fxzcox8nn], .run-filters__select[b-7fxzcox8nn] { max-width: none; width: 100%; } }

/* The one job this list is for, with a way back to every job. */
.run-filters__job[b-7fxzcox8nn] {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 22rem;
}

.run-filters__job a[b-7fxzcox8nn] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.run-filters__job-clear[b-7fxzcox8nn] {
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  line-height: 1;
  cursor: pointer;
}
/* /Pages/Profile.razor.rz.scp.css */
/* ── Profile avatar ─────────────────────────────────── */

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

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

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

/* Looks read-only through the global disabled style (app.css). */

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

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

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

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

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

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

.em-notif-group-header[b-0c07ucp2ad] {
    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;
    color: var(--app-text-3);
}

.em-notif-group-header i[b-0c07ucp2ad] {
    font-size: 0.85rem;
    color: var(--app-link);
}

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

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

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

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

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

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

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

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

/* ── Form button rows ──────────────────────────────── */

/* The admin pages style .settings-actions in their own scoped CSS, which never reached this page:
   the Profile buttons sat straight under the helper text. */
.settings-actions[b-0c07ucp2ad] {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 1.25rem;
    margin-top: 1.5rem;
    border-top: 1px solid var(--app-border);
}

/* ── My activity ───────────────────────────────────── */

.activity-notes[b-0c07ucp2ad] { overflow-wrap: anywhere; }

.activity-refs[b-0c07ucp2ad] { margin-top: 0.2rem; }

.activity-refs summary[b-0c07ucp2ad] {
    cursor: pointer;
    color: var(--app-text-3);
    font-size: 0.75rem;
}

.activity-refs-list[b-0c07ucp2ad] {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0;
    display: grid;
    gap: 0.15rem;
}

.activity-refs-list code[b-0c07ucp2ad] {
    font-size: 0.72rem;
    color: var(--app-text-2);
    overflow-wrap: anywhere;
}

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

.notif-actions[b-0c07ucp2ad] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 1.75rem;
    margin-top: 1.75rem;
    border-top: 1px solid var(--app-border);
}
/* /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-63x4d3u137] {
    position: fixed;
    right: var(--dock-x);
    bottom: var(--dock-y);
    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-63x4d3u137] {
    transition: none !important;
}

/* ── Collapsed state: round teal pill ────────────────────────────── */
.ai-dock--pill[b-63x4d3u137] {
    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-63x4d3u137] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    animation: ai-dock-fade-in-b-63x4d3u137 0.2s ease-out;
    border: none;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, var(--app-teal) 0%, var(--app-navy) 100%);
    box-shadow: 0 6px 18px rgba(var(--app-teal-rgb), 0.35), 0 2px 6px rgba(var(--app-shadow-rgb), 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-63x4d3u137] {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 10px 22px rgba(var(--app-teal-rgb), 0.45), 0 3px 8px rgba(var(--app-shadow-rgb), 0.25);
}

/* ── Expanded state: the panel ───────────────────────────────────── */
.ai-dock--open[b-63x4d3u137] {
    width: var(--dock-w);
    height: var(--dock-h);
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(var(--app-shadow-rgb), 0.18), 0 6px 20px rgba(var(--app-shadow-rgb), 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ai-dock-header[b-63x4d3u137] {
    padding: 0.65rem 0.9rem;
    background: linear-gradient(135deg, var(--app-navy), var(--app-navy-600));
    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-63x4d3u137 0.2s ease-out 0.05s backwards;
}

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

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

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

.ai-dock-context[b-63x4d3u137] {
    font-size: 0.72rem;
    padding: 0.1rem 0.45rem;
    background: rgba(var(--app-teal-rgb), 0.15);
    color: color-mix(in srgb, var(--app-teal) 55%, white);
    border-radius: 999px;
    border: 1px solid rgba(var(--app-teal-rgb), 0.25);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

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

.ai-dock-iconbtn[b-63x4d3u137] {
    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-63x4d3u137] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* ── Turn list ───────────────────────────────────────────────────── */
.ai-dock-turns[b-63x4d3u137] {
    flex: 1;
    overflow-y: auto;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    background: var(--app-surface-sunken);
}

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

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

.ai-bubble[b-63x4d3u137] {
    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-63x4d3u137] {
    background: var(--app-primary-bg);
    color: var(--app-primary-fg);
    border-bottom-right-radius: 4px;
}

.ai-bubble--assistant[b-63x4d3u137] {
    background: var(--app-surface);
    color: var(--app-text);
    border: 1px solid var(--app-border);
    border-bottom-left-radius: 4px;
}

.ai-bubble--error[b-63x4d3u137] {
    background: var(--app-danger-bg);
    color: var(--app-danger-fg);
    border: 1px solid var(--app-danger-border);
}

/* ── Tool invocation card (read tools) ───────────────────────────── */
.ai-tool-card[b-63x4d3u137] {
    width: 88%;
    background: color-mix(in srgb, var(--app-text) 3%, transparent);
    border: 1px solid var(--app-border);
    border-left: 3px solid var(--app-teal);
    border-radius: 8px;
    padding: 0.45rem 0.7rem;
    font-size: 0.8rem;
}

.ai-tool-card--write[b-63x4d3u137] {
    border-left-color: var(--app-warning-solid);
    background: var(--app-warning-bg);
}

.ai-tool-card-head[b-63x4d3u137] {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    color: var(--app-text);
}

.ai-tool-card-summary[b-63x4d3u137] {
    color: var(--app-text-2);
}

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

.ai-tool-card-details > summary[b-63x4d3u137] {
    cursor: pointer;
    color: var(--app-text-2);
    user-select: none;
    list-style: none;
    padding: 0.1rem 0.25rem;
    border-radius: 4px;
}

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

.ai-tool-card-details > summary[b-63x4d3u137]::before {
    content: "▸";
    display: inline-block;
    width: 0.9rem;
    color: var(--app-text-2);
}

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

.ai-tool-card-details > summary:hover[b-63x4d3u137] {
    background: color-mix(in srgb, var(--app-text) 4%, transparent);
}

.ai-tool-card-section-label[b-63x4d3u137] {
    margin-top: 0.35rem;
    font-size: 0.65rem;
    color: var(--app-text-2);
}

.ai-tool-card-json[b-63x4d3u137] {
    margin: 0.15rem 0 0.35rem 0;
    padding: 0.4rem 0.55rem;
    background: color-mix(in srgb, var(--app-text) 5%, transparent);
    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-63x4d3u137] {
    width: 92%;
    background: var(--app-warning-bg);
    border: 1px solid var(--app-warning-border);
    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-63x4d3u137] {
    background: var(--app-danger-bg);
    border-color: var(--app-danger-border);
    box-shadow: 0 0 0 2px var(--app-danger-bg);
}

.ai-confirm-warning[b-63x4d3u137] {
    background: var(--app-danger-bg);
    border: 1px solid var(--app-danger-border);
    border-radius: 6px;
    padding: 0.4rem 0.55rem;
    color: var(--app-danger-fg);
    font-size: 0.8rem;
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    line-height: 1.35;
}

.ai-confirm-head[b-63x4d3u137] {
    display: flex;
    align-items: center;
    color: var(--app-warning-fg);
}

.ai-confirm-list[b-63x4d3u137] {
    background: var(--app-surface);
    border: 1px solid var(--app-warning-border);
    border-radius: 6px;
    max-height: 180px;
    overflow-y: auto;
    padding: 0.2rem 0.4rem;
}

/* Wraps rather than scrolling sideways: a long "current → proposed" drops under the title. */
.ai-confirm-item[b-63x4d3u137] {
    padding: 0.3rem 0.2rem;
    border-bottom: 1px solid var(--app-warning-border);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.15rem 0.5rem;
    font-size: 0.8rem;
}

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

.ai-confirm-item-title[b-63x4d3u137] {
    color: var(--app-text);
    overflow-wrap: anywhere;
    flex: 1 1 8rem;
    min-width: 0;
}

.ai-confirm-item-state[b-63x4d3u137] {
    color: var(--app-text-2);
    overflow-wrap: anywhere;
    min-width: 0;
    font-size: 0.75rem;
}

/* A decided card, after it goes: approved reads as done, declined as neutral (not a success). */
.ai-decision[b-63x4d3u137] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0.25rem 0;
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
    font-size: 0.78rem;
    border: 1px solid var(--app-border);
}

.ai-decision--approved[b-63x4d3u137] {
    background: var(--app-success-bg);
    color: var(--app-success-fg);
    border-color: var(--app-success-border);
}

.ai-decision--declined[b-63x4d3u137] {
    background: var(--app-neutral-bg);
    color: var(--app-neutral-fg);
    border-color: var(--app-neutral-border);
}

/* A job named in a reply, linked to its page (AiMarkdownView renders it). */
[b-63x4d3u137] .ai-md-job-link {
    color: var(--app-link);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--app-link) 40%, transparent);
    text-underline-offset: 2px;
}

[b-63x4d3u137] .ai-md-job-link:hover {
    text-decoration-color: var(--app-link);
}

.ai-confirm-overflow[b-63x4d3u137] {
    text-align: center;
    padding: 0.3rem;
    font-size: 0.75rem;
    color: var(--app-text-2);
}

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

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

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

.ai-plan-step-num[b-63x4d3u137] {
    flex: 0 0 auto;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: var(--app-warning-border);
    color: var(--app-warning-fg);
    font-size: 0.72rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ai-plan-step-desc[b-63x4d3u137] {
    color: var(--app-text);
    min-width: 0;
    overflow-wrap: anywhere;
}

.ai-plan-step-note[b-63x4d3u137] {
    font-size: 0.72rem;
    color: var(--app-text-2);
    padding-left: 1.75rem;
}

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

.ai-plan-more[b-63x4d3u137] {
    display: block;
    width: 100%;
    background: none;
    border: none;
    padding: 0.3rem;
    font-size: 0.75rem;
    color: var(--app-link);
    text-decoration: underline;
    cursor: pointer;
}

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

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

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

.ai-dock-threadlist-head[b-63x4d3u137] {
    padding: 0.65rem 0.9rem;
    background: linear-gradient(135deg, var(--app-navy), var(--app-navy-600));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

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

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

.ai-dock-threadlist-item:hover[b-63x4d3u137] {
    background: var(--app-surface-sunken);
}

.ai-dock-threadlist-item--active[b-63x4d3u137] {
    background: rgba(var(--app-teal-rgb), 0.08);
    border-left: 3px solid var(--app-teal);
}

.ai-dock-threadlist-pick[b-63x4d3u137] {
    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-63x4d3u137] { cursor: wait; opacity: 0.6; }

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

.ai-dock-threadlist-meta[b-63x4d3u137] {
    font-size: 0.72rem;
    color: var(--app-text-2);
    margin-top: 0.12rem;
}

.ai-dock-threadlist-del[b-63x4d3u137] {
    background: none;
    border: none;
    color: var(--app-text-2);
    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-63x4d3u137] {
    background: var(--app-danger-bg);
    color: var(--app-danger-fg);
}

.ai-dock-threadlist-empty[b-63x4d3u137] {
    padding: 1.5rem;
    text-align: center;
    color: var(--app-text-2);
    font-size: 0.85rem;
}

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

.ai-confirm-edit-label[b-63x4d3u137] {
    font-size: 0.72rem;
    color: var(--app-text-2);
}

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

.ai-confirm-edit-error[b-63x4d3u137] {
    font-size: 0.72rem;
    color: var(--app-danger-fg);
    background: var(--app-danger-bg);
    border-radius: 4px;
    padding: 0.25rem 0.45rem;
}

.ai-confirm-edit-formwrap[b-63x4d3u137] {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 6px;
    padding: 0.55rem 0.7rem;
}

.ai-confirm-edit-toggle[b-63x4d3u137] {
    background: none;
    border: none;
    color: var(--app-link);
    font-size: 0.72rem;
    padding: 0.15rem 0;
    cursor: pointer;
    text-decoration: underline;
    align-self: flex-start;
}

.ai-confirm-edit-toggle:hover[b-63x4d3u137] {
    color: var(--app-teal);
}

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

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

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

.ai-sf-required[b-63x4d3u137] {
    color: var(--app-danger-fg);
    margin-left: 0.15rem;
}

.ai-sf-hint[b-63x4d3u137] {
    font-size: 0.7rem;
    color: var(--app-text-2);
    line-height: 1.3;
}

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

.ai-sf-empty[b-63x4d3u137] {
    font-size: 0.78rem;
    color: var(--app-text-2);
    font-style: italic;
}

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

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

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

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

/* ── Voice (mic + listening indicator + TTS toggle) ──────────────── */
.ai-dock-iconbtn--on[b-63x4d3u137] {
    background: rgba(var(--app-teal-rgb), 0.18);
    color: color-mix(in srgb, var(--app-teal) 55%, white);
}

.ai-voice-mic[b-63x4d3u137] {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--app-text-2);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ai-voice-mic:hover[b-63x4d3u137] {
    background: color-mix(in srgb, var(--app-text) 5%, transparent);
    color: var(--app-heading);
}

.ai-voice-mic--on[b-63x4d3u137] {
    background: var(--app-danger-solid);
    border-color: var(--app-danger-solid);
    color: #fff;
    animation: ai-voice-pulse-btn-b-63x4d3u137 1.2s ease-in-out infinite;
}

.ai-voice-mic--on:hover[b-63x4d3u137] {
    background: color-mix(in srgb, var(--app-danger-solid) 85%, black);
    color: #fff;
}

.ai-voice-speaker[b-63x4d3u137] {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--app-text-2);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ai-voice-speaker:hover[b-63x4d3u137] {
    background: color-mix(in srgb, var(--app-text) 5%, transparent);
    color: var(--app-heading);
}

.ai-voice-speaker--on[b-63x4d3u137] {
    background: rgba(var(--app-teal-rgb), 0.12);
    border-color: rgba(var(--app-teal-rgb), 0.45);
    color: var(--app-accent-text);
}

.ai-voice-speaker--on:hover[b-63x4d3u137] {
    background: rgba(var(--app-teal-rgb), 0.22);
    color: var(--app-accent-text);
}

@keyframes ai-voice-pulse-btn-b-63x4d3u137 {
    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-63x4d3u137] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    user-select: none;
    cursor: pointer;
    margin: 0;
}

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

.ai-voice-listening[b-63x4d3u137] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.4rem;
    background: var(--app-danger-bg);
    border: 1px solid var(--app-danger-border);
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--app-danger-fg);
    font-weight: 500;
}

.ai-voice-hint[b-63x4d3u137] {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--app-text-2);
    margin-left: auto;
}

.ai-voice-pulse[b-63x4d3u137] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--app-danger-solid);
    display: inline-block;
    animation: ai-voice-pulse-dot-b-63x4d3u137 1s ease-in-out infinite;
}

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

.ai-voice-error[b-63x4d3u137] {
    margin-bottom: 0.4rem;
    padding: 0.5rem 0.65rem;
    background: var(--app-warning-bg);
    border: 1px solid var(--app-warning-border);
    border-left: 3px solid var(--app-warning-solid);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--app-warning-fg);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

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

.ai-voice-error-head strong[b-63x4d3u137] {
    color: var(--app-warning-fg);
}

.ai-voice-error-body[b-63x4d3u137] {
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--app-warning-fg);
}

.ai-voice-error-details[b-63x4d3u137] {
    font-size: 0.7rem;
    color: var(--app-warning-fg);
}

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

.ai-voice-error-details code[b-63x4d3u137] {
    display: block;
    margin-top: 0.2rem;
    padding: 0.25rem 0.4rem;
    background: color-mix(in srgb, var(--app-text) 4%, transparent);
    border-radius: 3px;
    font-size: 0.68rem;
    color: var(--app-warning-fg);
    word-break: break-word;
}

.ai-voice-settings-btn[b-63x4d3u137] {
    padding: 0.15rem 0.35rem;
    color: var(--app-text-2);
}

.ai-voice-settings-btn:hover[b-63x4d3u137] {
    color: var(--app-heading);
}

.ai-voice-settings[b-63x4d3u137] {
    background: var(--app-surface-sunken);
    border: 1px solid var(--app-border);
    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-63x4d3u137] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    color: var(--app-text);
}

.ai-voice-settings-row[b-63x4d3u137] {
    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-63x4d3u137] {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

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

/* ── Resize handle (bottom-right / inside-top-left visually since we anchor BR) ── */
.ai-dock-resize[b-63x4d3u137] {
    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-63x4d3u137] {
    color: rgba(255, 255, 255, 0.9);
}

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

@keyframes ai-spin-kf-b-63x4d3u137 {
    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-63x4d3u137] {
    background: rgba(var(--app-teal-rgb), 0.08);
    border: 1px solid rgba(var(--app-teal-rgb), 0.25);
    border-radius: 8px;
    padding: 0.55rem 0.6rem;
    margin-bottom: 0.4rem;
}
.ai-voice-settings-row--carmode strong[b-63x4d3u137] {
    color: var(--app-accent-text);
}

/* 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-63x4d3u137] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(var(--app-teal-rgb), 0.12);
    border: 1px solid rgba(var(--app-teal-rgb), 0.4);
    color: var(--app-accent-text);
    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-63x4d3u137] {
    background: rgba(var(--app-teal-rgb), 0.22);
    border-color: rgba(var(--app-teal-rgb), 0.6);
}
.ai-dock-carmode-chip-x[b-63x4d3u137] {
    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-63x4d3u137] {
    width: 64px;
    height: 64px;
    font-size: 1.55rem;
}
.ai-dock--carmode .ai-voice-speaker[b-63x4d3u137] {
    width: 56px;
    height: 56px;
    font-size: 1.35rem;
}
.ai-dock--carmode .ai-dock-input-row .btn-primary[b-63x4d3u137],
.ai-dock--carmode .ai-dock-input-row .btn-outline-danger[b-63x4d3u137] {
    min-height: 56px;
    font-size: 1rem;
}
.ai-dock--carmode .ai-bubble[b-63x4d3u137] {
    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-63x4d3u137],
.ai-dock--carmode .ai-voice-settings-btn[b-63x4d3u137],
.ai-dock--carmode .ai-dock-resize[b-63x4d3u137] {
    display: none;
}
.ai-dock--carmode .ai-dock-header-actions .ai-dock-iconbtn[title="Conversation history"][b-63x4d3u137],
.ai-dock--carmode .ai-dock-header-actions .ai-dock-iconbtn[title="New chat"][b-63x4d3u137] {
    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-63x4d3u137] {
        width: 76px;
        height: 76px;
        font-size: 1.75rem;
    }
    .ai-dock--carmode .ai-voice-speaker[b-63x4d3u137] {
        width: 64px;
        height: 64px;
        font-size: 1.45rem;
    }
}

/* ── Mobile: dock becomes a true bottom sheet ────────────────────── */
@media (max-width: 640px) {
    .ai-dock--open[b-63x4d3u137] {
        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(var(--app-shadow-rgb), 0.18);
    }
    .ai-dock-header[b-63x4d3u137] {
        cursor: default;
        position: relative;
    }
    /* Drag-handle pill at the top of the sheet */
    .ai-dock-header[b-63x4d3u137]::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-63x4d3u137] { 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-63x4d3u137] {
        width: 52px;
        height: 52px;
        font-size: 1.35rem;
    }
    .ai-voice-speaker[b-63x4d3u137] {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
    }
    .ai-voice-settings-btn[b-63x4d3u137] {
        width: 44px;
        height: 44px;
        padding: 0;
        font-size: 1.1rem;
    }
    .ai-dock-input-row[b-63x4d3u137] {
        gap: 0.5rem;
        align-items: center;
    }
    .ai-dock-input-left[b-63x4d3u137] {
        gap: 0.5rem;
    }
    .ai-dock-input-row .btn-primary[b-63x4d3u137],
    .ai-dock-input-row .btn-outline-danger[b-63x4d3u137] {
        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-63x4d3u137] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    background: rgba(var(--app-teal-rgb), 0.08);
    border: 1px solid rgba(var(--app-teal-rgb), 0.25);
    border-radius: 999px;
    color: var(--app-text-2);
    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-63x4d3u137] {
    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);
}

.ai-ask-question[b-63x4d3u137] {
    font-size: 0.85rem;
    color: var(--app-text);
    margin-bottom: 0.1rem;
}

.ai-ask-option[b-63x4d3u137] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
    width: 100%;
    padding: 0.45rem 0.75rem;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 10px;
    color: var(--app-heading);
    text-align: left;
    cursor: pointer;
    transition: background-color 80ms ease-out, border-color 80ms ease-out;
}

.ai-ask-option:hover:not(:disabled)[b-63x4d3u137] {
    background: rgba(var(--app-teal-rgb), 0.08);
    border-color: var(--app-teal);
}

.ai-ask-option:focus-visible[b-63x4d3u137] {
    outline: 2px solid var(--app-teal);
    outline-offset: 2px;
}

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

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

.ai-ask-option-detail[b-63x4d3u137] {
    font-size: 0.75rem;
    color: var(--app-text-2);
    line-height: 1.3;
}

.ai-ask-hint[b-63x4d3u137] {
    font-size: 0.72rem;
    color: var(--app-text-2);
}

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

.ai-ask-card--answered .ai-ask-option--chosen[b-63x4d3u137] {
    opacity: 1;
    border-style: solid;
    background: var(--app-primary-bg);
    border-color: var(--app-heading);
    color: var(--app-primary-fg);
}

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

@media (prefers-reduced-motion: reduce) {
    .ai-ask-option[b-63x4d3u137] { 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-63x4d3u137] {
    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);
    background: var(--app-surface-sunken);
    color: var(--app-text-2);
    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-63x4d3u137] {
    margin: .3rem 0 .1rem;
    padding: .35rem .5rem;
    border-left: 2px solid var(--app-border);
    font-size: .74rem;
    line-height: 1.35;
}
.ai-citations-label[b-63x4d3u137] {
    font-weight: 600;
    opacity: .65;
    margin-bottom: .15rem;
}
.ai-citations-list[b-63x4d3u137] { margin: 0; padding-left: 1.1rem; }
.ai-citations-list a[b-63x4d3u137] { text-decoration: none; }
.ai-citations-list a:hover[b-63x4d3u137] { text-decoration: underline; }

/* Token count — quiet by default; it is diagnostic, not the content. */
.ai-usage[b-63x4d3u137] {
    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-63x4d3u137] { margin: 0 0 .45rem; }
.ai-bubble--assistant .ai-md-p:last-child[b-63x4d3u137] { margin-bottom: 0; }
.ai-bubble--assistant .ai-md-list[b-63x4d3u137] { margin: 0 0 .45rem; padding-left: 1.15rem; }
.ai-bubble--assistant .ai-md-list:last-child[b-63x4d3u137] { margin-bottom: 0; }
.ai-bubble--assistant .ai-md-list li[b-63x4d3u137] { margin-bottom: .12rem; }
.ai-bubble--assistant .ai-md-inline-code[b-63x4d3u137],
.ai-bubble--assistant .ai-md-code[b-63x4d3u137] {
    background: var(--app-surface-2);
    border-radius: .25rem;
    font-size: .82em;
}
.ai-bubble--assistant .ai-md-inline-code[b-63x4d3u137] { padding: .05rem .25rem; }
.ai-bubble--assistant .ai-md-code[b-63x4d3u137] {
    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-63x4d3u137],
    .ai-dock *[b-63x4d3u137],
    .ai-dock-pill[b-63x4d3u137],
    .ai-dock-pill:hover[b-63x4d3u137] {
        animation: none !important;
        transition: none !important;
    }
    .ai-dock-pill:hover[b-63x4d3u137] { 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-63x4d3u137] {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin: .15rem 0 .25rem;
    font-size: .72rem;
    font-style: italic;
    opacity: .7;
}
/* /Shared/AiDockStarters.razor.rz.scp.css */
.ai-starters[b-dvmfp8q1v6] {
    margin: 0.75rem 0.25rem;
    padding: 0.75rem;
    border: 1px dashed var(--app-border-2);
    border-radius: 0.75rem;
}

.ai-starters__title[b-dvmfp8q1v6] {
    margin-bottom: 0.5rem;
    color: var(--app-heading);
    font-size: 0.85rem;
    font-weight: 600;
}

.ai-starters__item[b-dvmfp8q1v6] {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--app-border);
    border-radius: 0.5rem;
    background: var(--app-surface);
    color: var(--app-text);
    font-size: 0.85rem;
    text-align: left;
}

.ai-starters__item:hover[b-dvmfp8q1v6],
.ai-starters__item:focus-visible[b-dvmfp8q1v6] {
    border-color: var(--app-primary-bg);
    color: var(--app-heading);
}
/* /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-7ijm4c0f0f] {
    margin: .05rem 0 .2rem;
}

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

.ai-fb-thumb[b-7ijm4c0f0f] {
    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(--app-text-2);
    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-7ijm4c0f0f],
.ai-fb-thumb:focus-visible[b-7ijm4c0f0f] {
    opacity: 1;
    background: rgba(var(--app-teal-rgb), .1);
    color: var(--app-heading);
}

.ai-fb-thumb:focus-visible[b-7ijm4c0f0f] {
    outline: 2px solid var(--app-teal);
    outline-offset: 1px;
}

.ai-fb-thumb--on[b-7ijm4c0f0f] {
    opacity: 1;
    color: var(--app-heading);
}

.ai-fb-thumb:disabled[b-7ijm4c0f0f] {
    cursor: default;
}

.ai-fb-status[b-7ijm4c0f0f] {
    margin-left: .35rem;
    font-size: .7rem;
    color: var(--app-text-2);
}

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

.ai-fb-title[b-7ijm4c0f0f] {
    font-size: .85rem;
    font-weight: 600;
    color: var(--app-text);
}

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

.ai-fb-reason[b-7ijm4c0f0f] {
    padding: .22rem .6rem;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    background: var(--app-surface);
    color: var(--app-heading);
    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-7ijm4c0f0f] {
    background: rgba(var(--app-teal-rgb), .08);
    border-color: var(--app-teal);
}

.ai-fb-reason:focus-visible[b-7ijm4c0f0f] {
    outline: 2px solid var(--app-teal);
    outline-offset: 2px;
}

.ai-fb-reason--on[b-7ijm4c0f0f],
.ai-fb-reason--on:hover[b-7ijm4c0f0f] {
    background: var(--app-primary-bg);
    border-color: var(--app-heading);
    color: var(--app-primary-fg);
}

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

.ai-fb-note-label span[b-7ijm4c0f0f] {
    font-weight: 400;
    color: var(--app-text-2);
}

.ai-fb-note[b-7ijm4c0f0f] {
    width: 100%;
    resize: vertical;
    min-height: 2.6rem;
    padding: .35rem .5rem;
    border: 1px solid var(--app-border);
    border-radius: .4rem;
    background: var(--app-surface);
    color: var(--app-text);
    font-size: .8rem;
    line-height: 1.35;
}

.ai-fb-note:focus[b-7ijm4c0f0f] {
    outline: none;
    border-color: var(--app-teal);
    box-shadow: 0 0 0 .15rem rgba(var(--app-teal-rgb), .2);
}

.ai-fb-count[b-7ijm4c0f0f] {
    align-self: flex-end;
    margin-top: -.25rem;
    font-size: .66rem;
    color: var(--app-text-2);
    font-variant-numeric: tabular-nums;
}

/* What sending shares. Not small print: the user is agreeing to it. */
.ai-fb-consent[b-7ijm4c0f0f] {
    margin: 0;
    padding: .35rem .5rem;
    border-radius: .375rem;
    background: var(--app-surface-sunken);
    color: var(--app-text);
    font-size: .72rem;
    line-height: 1.35;
}

.ai-fb-error[b-7ijm4c0f0f] {
    font-size: .75rem;
    color: var(--app-danger-fg);
}

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

@media (prefers-reduced-motion: reduce) {
    .ai-fb-thumb[b-7ijm4c0f0f],
    .ai-fb-reason[b-7ijm4c0f0f] { transition: none; }
}
/* /Shared/AuthCard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   The sign-in card (AuthCard) · glass on navy, with an entrance
   The forms inside belong to the pages (and to <LoginForm/>), so
   their rules are written as `.login-card-body ::deep …` to pierce
   the component boundary.
   ═══════════════════════════════════════════════════════════ */

.login-stage[b-6up9qkvhnj] {
  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-6up9qkvhnj] {
  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-6up9qkvhnj]::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-6up9qkvhnj] {
  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-6up9qkvhnj]  .form-label {
  color: rgba(255, 255, 255, 0.55);
}

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

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

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

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

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

/* ── MFA Section ── */

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

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

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

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

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

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

/* ── Validation Messages ── */

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

/* ── Plain text and secondary links on the card (forgot and reset password) ── */

.login-card-body[b-6up9qkvhnj]  .login-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.88rem;
  line-height: 1.55;
}

.login-card-body[b-6up9qkvhnj]  .login-text-muted {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.8rem;
}

.login-card-body[b-6up9qkvhnj]  .login-done-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(var(--app-teal-rgb), 0.15);
  color: var(--app-teal);
  margin-bottom: 1rem;
}

.login-card-body[b-6up9qkvhnj]  .login-back {
  text-align: center;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* ── Responsive ── */

@media (max-width: 640.98px) {
  .login-card[b-6up9qkvhnj] {
    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-6up9qkvhnj]::after {
    animation: none;
  }
}
/* /Shared/CodeDiff.razor.rz.scp.css */
.code-diff[b-0op1jjdvd2] {
    min-width: 0;
}

.code-diff__bar[b-0op1jjdvd2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: .375rem;
    font-size: .8125rem;
    color: var(--app-text-3);
}

.code-diff__legend[b-0op1jjdvd2] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}

.code-diff__swatch[b-0op1jjdvd2] {
    display: inline-block;
    width: .75rem;
    height: .75rem;
    border-radius: 3px;
    border: 1px solid var(--app-border-2);
}

.code-diff__swatch--old[b-0op1jjdvd2] {
    background: var(--app-danger-bg);
    border-color: var(--app-danger-border);
}

.code-diff__swatch--new[b-0op1jjdvd2] {
    background: var(--app-success-bg);
    border-color: var(--app-success-border);
}

.code-diff__frame[b-0op1jjdvd2] {
    position: relative;
    border: 1px solid var(--app-border);
    border-radius: var(--app-r-sm);
    overflow: hidden;
    background: var(--app-surface);
}

.code-diff__host[b-0op1jjdvd2] {
    width: 100%;
}

.code-diff__loading[b-0op1jjdvd2] {
    position: absolute;
    inset: 0;
    padding: .75rem;
    background: var(--app-surface);
}

.code-diff__same[b-0op1jjdvd2] {
    padding: .5rem .75rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-r-sm);
    font-size: .875rem;
    color: var(--app-text-3);
}
/* /Shared/CodeEditor.razor.rz.scp.css */
.code-editor[b-kay7g8nmf8] {
    min-width: 0;
}

.code-editor__frame[b-kay7g8nmf8] {
    position: relative;
    border: 1px solid var(--app-border-2);
    border-radius: var(--app-r-sm);
    background: var(--app-surface);
    overflow: hidden;
    transition: border-color var(--app-fast) ease, box-shadow var(--app-fast) ease;
}

.code-editor__frame:focus-within[b-kay7g8nmf8] {
    border-color: var(--app-teal);
    box-shadow: 0 0 0 3px var(--app-focus);
}

.code-editor--bar .code-editor__frame[b-kay7g8nmf8] {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.code-editor--readonly .code-editor__frame[b-kay7g8nmf8] {
    border-color: var(--app-border);
    background: var(--app-surface-sunken);
}

.code-editor--readonly .code-editor__frame:focus-within[b-kay7g8nmf8] {
    box-shadow: none;
    border-color: var(--app-border-2);
}

/* Inside a bordered card (setup scripts): the card's border is enough. */
.code-editor--flush .code-editor__frame[b-kay7g8nmf8],
.code-editor--flush .code-editor__frame:focus-within[b-kay7g8nmf8] {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Read-only code sits on the sunken surface, like .code-block. Monaco reads its colours from these variables. */
.code-editor--readonly[b-kay7g8nmf8]  .monaco-editor {
    --vscode-editor-background: var(--app-surface-sunken);
    --vscode-editorGutter-background: var(--app-surface-sunken);
}

.code-editor__host[b-kay7g8nmf8] {
    width: 100%;
    min-height: 2rem;
}

/* The text as it is, while Monaco loads (the same font and line height, so nothing jumps). */
.code-editor__preview[b-kay7g8nmf8] {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 6px 12px 6px 48px;
    overflow: hidden;
    font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
    font-size: 13px;
    line-height: 20px;
    white-space: pre;
    color: var(--app-text-2);
    background: inherit;
    pointer-events: none;
}

.code-editor__preview.is-placeholder[b-kay7g8nmf8] {
    color: var(--app-text-4);
}

.code-editor__bar[b-kay7g8nmf8] {
    display: flex;
    align-items: center;
    gap: .25rem;
    min-height: 2rem;
    padding: .125rem .25rem .125rem .625rem;
    border: 1px solid var(--app-border-2);
    border-bottom: 0;
    border-radius: var(--app-r-sm) var(--app-r-sm) 0 0;
    background: var(--app-surface-2);
}

.code-editor__lang[b-kay7g8nmf8] {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--app-text-3);
}

.code-editor__spacer[b-kay7g8nmf8] {
    flex: 1 1 auto;
}

.code-editor__action[b-kay7g8nmf8] {
    --bs-btn-padding-y: .125rem;
    --bs-btn-padding-x: .5rem;
    --bs-btn-font-size: .8125rem;
    color: var(--app-text-2);
    border: 1px solid transparent;
}

.code-editor__action:hover[b-kay7g8nmf8],
.code-editor__action:focus-visible[b-kay7g8nmf8] {
    color: var(--app-text);
    background: var(--app-surface);
    border-color: var(--app-border);
}

.code-editor__fallback[b-kay7g8nmf8] {
    font-size: .8125rem;
    tab-size: 2;
    white-space: pre;
    overflow-x: auto;
}

.code-editor--bar .code-editor__fallback[b-kay7g8nmf8] {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.code-editor__note[b-kay7g8nmf8] {
    margin-top: .375rem;
    font-size: .8125rem;
}

.code-editor__issues[b-kay7g8nmf8] {
    margin: .25rem 0 0;
    padding-left: 1.25rem;
    font-size: .8125rem;
    color: var(--app-danger-fg);
}

.code-editor__line[b-kay7g8nmf8] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
/* /Shared/CodeView.razor.rz.scp.css */
/* code-editor.js adds the coloured copy and data-colored; the plain block then steps aside. */
.code-view[data-colored] > .code-view__plain[b-eqfn2q26rg] {
    display: none;
}

.code-view[b-eqfn2q26rg]  .code-view__colored {
    font-size: .8rem;
    white-space: pre-wrap;
}

.code-view[b-eqfn2q26rg]  .code-view__colored > div,
.code-view[b-eqfn2q26rg]  .code-view__colored > span {
    white-space: pre-wrap;
}
/* /Shared/CommandPalette.razor.rz.scp.css */
/* The command palette: a panel near the top of the screen; a full-screen sheet on phones. Tokens only. */
.cmdk-wrap[b-x225kmgmzi] {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 12vh 16px 16px;
    background: var(--app-overlay);
    animation: cmdk-fade-b-x225kmgmzi var(--app-fast) ease-out;
}

.cmdk[b-x225kmgmzi] {
    width: 100%;
    max-width: 640px;
    max-height: min(560px, 76vh);
    display: flex;
    flex-direction: column;
    background: var(--app-surface);
    color: var(--app-text);
    border: 1px solid var(--app-border);
    border-radius: var(--app-r-lg);
    box-shadow: var(--app-shadow-lift);
    overflow: hidden;
    animation: cmdk-rise-b-x225kmgmzi var(--app-mid) var(--app-ease);
}

.cmdk-search[b-x225kmgmzi] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border-bottom: 1px solid var(--app-border);
}

.cmdk-search-icon[b-x225kmgmzi] {
    color: var(--app-text-3);
    font-size: 1.05rem;
}

.cmdk-input[b-x225kmgmzi] {
    flex: 1;
    min-width: 0;
    height: 54px;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--app-text);
    font-size: 1.05rem;
}

.cmdk-input[b-x225kmgmzi]::placeholder {
    color: var(--app-text-4);
}

.cmdk-spinner[b-x225kmgmzi] {
    color: var(--app-text-3);
}

.cmdk-esc[b-x225kmgmzi] {
    border: 1px solid var(--app-border);
    background: var(--app-surface-2);
    color: var(--app-text-3);
    border-radius: var(--app-r-sm);
    font-size: 0.72rem;
    padding: 2px 7px;
    line-height: 1.4;
}

.cmdk-esc:hover[b-x225kmgmzi] {
    color: var(--app-text);
}

.cmdk-list[b-x225kmgmzi] {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
}

.cmdk-group + .cmdk-group[b-x225kmgmzi] {
    margin-top: 4px;
}

.cmdk-group-label[b-x225kmgmzi] {
    padding: 8px 10px 4px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--app-text-3);
}

.cmdk-item[b-x225kmgmzi] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--app-r);
    cursor: pointer;
    min-height: 44px;
    scroll-margin: 6px;
}

.cmdk-item.is-active[b-x225kmgmzi] {
    background: var(--app-surface-2);
    box-shadow: inset 2px 0 0 var(--app-accent-text);
}

.cmdk-item-icon[b-x225kmgmzi] {
    flex: 0 0 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--app-r-sm);
    background: var(--app-surface-sunken);
    border: 1px solid var(--app-border);
    color: var(--app-text-2);
}

.cmdk-item.is-active .cmdk-item-icon[b-x225kmgmzi] {
    color: var(--app-accent-text);
}

.cmdk-item-text[b-x225kmgmzi] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.cmdk-item-title[b-x225kmgmzi] {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A tint and weight, not an underline: an underline ran into the underscores in names like HOSP_RPT. */
.cmdk-item-title mark[b-x225kmgmzi] {
    padding: 0 1px;
    margin: 0 -1px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--app-accent-text) 16%, transparent);
    color: inherit;
    font-weight: 650;
    text-decoration: none;
}

.cmdk-item-sub[b-x225kmgmzi] {
    font-size: 0.8rem;
    color: var(--app-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmdk-item-hint[b-x225kmgmzi] {
    font-size: 0.75rem;
    color: var(--app-text-4);
    visibility: hidden;
}

.cmdk-item.is-active .cmdk-item-hint[b-x225kmgmzi] {
    visibility: visible;
}

.cmdk-dot[b-x225kmgmzi] {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--app-neutral-border);
}

.cmdk-dot--success[b-x225kmgmzi] { background: var(--app-success-solid); }
.cmdk-dot--danger[b-x225kmgmzi] { background: var(--app-danger-solid); }
.cmdk-dot--warning[b-x225kmgmzi] { background: var(--app-warning-solid); }
.cmdk-dot--info[b-x225kmgmzi] { background: var(--app-info-solid); }

.cmdk-empty[b-x225kmgmzi] {
    padding: 28px 16px;
    text-align: center;
    color: var(--app-text-3);
}

.cmdk-empty--inline[b-x225kmgmzi] {
    padding: 14px 16px 6px;
    text-align: left;
    font-size: 0.875rem;
}

.cmdk-confirm[b-x225kmgmzi] {
    padding: 18px 18px 20px;
}

.cmdk-confirm-title[b-x225kmgmzi] {
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--app-heading);
}

.cmdk-confirm-text[b-x225kmgmzi] {
    margin-top: 4px;
    font-size: 0.875rem;
    color: var(--app-text-2);
}

.cmdk-foot[b-x225kmgmzi] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    padding: 8px 14px;
    border-top: 1px solid var(--app-border);
    background: var(--app-surface-sunken);
    color: var(--app-text-3);
    font-size: 0.75rem;
}

.cmdk-kbd[b-x225kmgmzi] {
    display: inline-block;
    min-width: 1.4em;
    padding: 0 5px;
    margin-right: 3px;
    border: 1px solid var(--app-border-2);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--app-surface);
    color: var(--app-text-2);
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}

.cmdk-kbd--on-primary[b-x225kmgmzi] {
    background: transparent;
    color: inherit;
    border-color: currentColor;
    opacity: 0.8;
    margin: 0 0 0 6px;
}

@keyframes cmdk-fade-b-x225kmgmzi {
    from { opacity: 0; }
}

@keyframes cmdk-rise-b-x225kmgmzi {
    from { opacity: 0; transform: translateY(-6px) scale(0.99); }
}

@media (prefers-reduced-motion: reduce) {
    .cmdk-wrap[b-x225kmgmzi], .cmdk[b-x225kmgmzi] { animation: none; }
}

/* Phones: a full-screen sheet, bigger touch rows, no keyboard footer. */
@media (max-width: 640.98px) {
    .cmdk-wrap[b-x225kmgmzi] {
        padding: 0;
    }

    .cmdk[b-x225kmgmzi] {
        max-width: none;
        max-height: none;
        height: 100%;
        height: 100dvh;
        border-radius: 0;
        border: 0;
    }

    .cmdk-item[b-x225kmgmzi] {
        min-height: 52px;
    }

    .cmdk-foot[b-x225kmgmzi],
    .cmdk-item-hint[b-x225kmgmzi] {
        display: none;
    }
}
/* /Shared/CommandPaletteButton.razor.rz.scp.css */
.cmdk-trigger[b-0xrk3qafp6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: min(340px, 40vw);
    height: 36px;
    padding: 0 8px 0 12px;
    margin-right: auto;
    border: 1px solid var(--app-border);
    border-radius: var(--app-r);
    background: var(--app-surface-sunken);
    color: var(--app-text-3);
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--app-fast) ease, color var(--app-fast) ease, background var(--app-fast) ease;
}

.cmdk-trigger:hover[b-0xrk3qafp6] {
    border-color: var(--app-border-2);
    color: var(--app-text-2);
    background: var(--app-surface);
}

.cmdk-trigger:focus-visible[b-0xrk3qafp6] {
    outline: 2px solid var(--app-focus);
    outline-offset: 2px;
}

.cmdk-trigger-text[b-0xrk3qafp6] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmdk-trigger-kbd[b-0xrk3qafp6] {
    padding: 1px 6px;
    border: 1px solid var(--app-border-2);
    border-radius: 4px;
    background: var(--app-surface);
    color: var(--app-text-3);
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.5;
}

/* Below md: the icon alone. */
@media (max-width: 767.98px) {
    .cmdk-trigger[b-0xrk3qafp6] {
        width: 36px;
        padding: 0;
        justify-content: center;
    }

    .cmdk-trigger-text[b-0xrk3qafp6],
    .cmdk-trigger-kbd[b-0xrk3qafp6] {
        display: none;
    }
}
/* /Shared/DataActionsMenu.razor.rz.scp.css */
.data-actions-menu[b-rerc47dq5h] {
    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-rerc47dq5h] {
    background: transparent;
    border: 1px solid transparent;
    color: var(--app-text-2);
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--app-r-sm);
    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-rerc47dq5h] {
    background: var(--app-bg);
    color: var(--app-heading);
}

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

.data-actions-menu.is-open .data-actions-toggle[b-rerc47dq5h] {
    background: var(--app-primary-bg);
    color: var(--app-primary-fg);
    border-color: var(--app-primary-bg);
}

.data-actions-toggle .bi[b-rerc47dq5h] {
    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-rerc47dq5h] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1050;
    min-width: 200px;
    background: var(--app-surface);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    border: 1px solid var(--app-border);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(var(--app-shadow-rgb), 0.06),
        0 12px 24px -8px rgba(var(--app-shadow-rgb), 0.18);
    padding: 6px;
    transform-origin: top right;
    animation: dam-reveal-b-rerc47dq5h 140ms cubic-bezier(0.16, 1, 0.3, 1);
}

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

.data-actions-backdrop[b-rerc47dq5h] {
    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-rerc47dq5h] {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--app-text-3);
    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-rerc47dq5h],
.data-actions-panel a.btn[b-rerc47dq5h],
.data-actions-panel a[b-rerc47dq5h] {
    border: none;
    background: transparent;
    color: var(--app-text-1);
    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-rerc47dq5h],
.data-actions-panel a i[b-rerc47dq5h] {
    color: var(--app-text-3);
    font-size: 0.92rem;
    line-height: 1;
    justify-self: center;
    transition: color 120ms ease;
}

.data-actions-panel .btn:hover:not(:disabled)[b-rerc47dq5h],
.data-actions-panel a:hover[b-rerc47dq5h] {
    background: var(--app-bg);
    color: var(--app-heading);
}

.data-actions-panel .btn:hover:not(:disabled) i[b-rerc47dq5h],
.data-actions-panel a:hover i[b-rerc47dq5h] {
    color: var(--app-accent-text);
}

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

/* Divider — ready for grouped/destructive items as menus grow. */
.data-actions-panel hr[b-rerc47dq5h] {
    margin: 4px 2px;
    border: 0;
    border-top: 1px solid var(--app-border);
}
/* /Shared/EmptyState.razor.rz.scp.css */
.app-empty[b-dzajnzrpyh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 2.75rem 1rem;
    border: 1px dashed var(--app-border-2);
    border-radius: var(--app-r-lg);
    background: var(--app-surface-sunken);
}

.app-empty__icon[b-dzajnzrpyh] {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 0.35rem;
    border-radius: 50%;
    background: var(--app-surface-2);
    color: var(--app-text-3);
    font-size: 1.25rem;
}

.app-empty__title[b-dzajnzrpyh] { font-weight: 600; color: var(--app-heading); }
.app-empty__text[b-dzajnzrpyh] { max-width: 34rem; font-size: 0.875rem; color: var(--app-text-2); }
.app-empty__actions[b-dzajnzrpyh] { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.6rem; }
/* /Shared/Etl/ActivityBars.razor.rz.scp.css */
.activity__chart[b-flg3k4hw4b] {
    display: flex;
    align-items: flex-end;
    gap: 0.35rem;
    height: 3.25rem;
    padding-bottom: 1px;
    border-bottom: 1px solid var(--app-border);
}

.activity__day[b-flg3k4hw4b] {
    flex: 1 1 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.activity__bar[b-flg3k4hw4b] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1.4rem;
    border-radius: 3px 3px 1px 1px;
    overflow: hidden;
}
.activity__bar > div[b-flg3k4hw4b] { min-height: 2px; }

.activity__empty[b-flg3k4hw4b] {
    width: 100%;
    max-width: 1.4rem;
    height: 3px;
    border-radius: 2px;
    background: var(--app-surface-2);
}

.activity__ok[b-flg3k4hw4b]     { background: var(--app-success-solid); }
.activity__nodata[b-flg3k4hw4b] { background: var(--app-warning-solid); }
.activity__failed[b-flg3k4hw4b] { background: var(--app-danger-solid); }

.activity__axis[b-flg3k4hw4b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 0.4rem;
    font-size: 0.75rem;
}

.activity__legend[b-flg3k4hw4b] { display: inline-flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.activity__legend > span[b-flg3k4hw4b] { display: inline-flex; align-items: center; gap: 0.3rem; }
.activity__key[b-flg3k4hw4b] { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 2px; }
/* /Shared/Etl/ChecksEditor.razor.rz.scp.css */
/* "Exists in another table": two words-and-box pairs that each wrap as a whole. */
.check-rel[b-mg6lfh80p4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.check-rel__part[b-mg6lfh80p4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 1 12rem;
    min-width: 0;
    margin: 0;
}

.check-rel__part--table[b-mg6lfh80p4] { flex: 1 1 20rem; }
.check-rel__part input[b-mg6lfh80p4] { flex: 1 1 auto; min-width: 0; width: auto; }
/* /Shared/Etl/CostBars.razor.rz.scp.css */
/* The plot leaves a gutter on the left for the axis labels; gridlines span the plot behind the bars. */
.costbars__plot[b-po7m3e8ome] {
    position: relative;
    height: 10rem;
    margin-left: 3rem;
    margin-top: 1.25rem;
}

.costbars__grid[b-po7m3e8ome] {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px dashed var(--app-border);
}

.costbars__grid--base[b-po7m3e8ome] { border-top: 1px solid var(--app-border-2); }

.costbars__ylabel[b-po7m3e8ome] {
    position: absolute;
    right: calc(100% + 0.4rem);
    top: -0.55rem;
    color: var(--app-text-3);
    font-size: 0.7rem;
    line-height: 1;
    white-space: nowrap;
}

.costbars__bars[b-po7m3e8ome] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    gap: 2px;
}

.costbars__day[b-po7m3e8ome] {
    position: relative;
    flex: 1 1 0;
    height: 100%;
    min-width: 0;
}

.costbars__day:hover[b-po7m3e8ome] { background: var(--app-surface-sunken); }

/* The warehouse's total behind, this app's share in front, both from the baseline. */
.costbars__wh[b-po7m3e8ome],
.costbars__app[b-po7m3e8ome] {
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 0;
    border-radius: 2px 2px 0 0;
}

.costbars__wh[b-po7m3e8ome] {
    background: color-mix(in srgb, var(--app-text-4) 30%, transparent);
    border: 1px solid var(--app-text-4);
    border-bottom: 0;
}

.costbars__app[b-po7m3e8ome] { background: var(--app-primary-bg); }

.costbars__card[b-po7m3e8ome] {
    display: none;
    position: absolute;
    bottom: calc(100% + 0.35rem);
    left: 0;
    z-index: 10;
    width: max-content;
    min-width: 12rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--app-border-2);
    border-radius: var(--app-r-sm);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-lg);
    color: var(--app-text);
    font-size: 0.78rem;
    line-height: 1.4;
    pointer-events: none;
}

.costbars__card--mid[b-po7m3e8ome] { left: 50%; transform: translateX(-50%); }
.costbars__card--end[b-po7m3e8ome] { left: auto; right: 0; }
.costbars__day:hover .costbars__card[b-po7m3e8ome] { display: block; }

.costbars__card-day[b-po7m3e8ome] { display: block; margin-bottom: 0.15rem; color: var(--app-heading); font-weight: 600; }
.costbars__card-row[b-po7m3e8ome] { display: flex; justify-content: space-between; gap: 1rem; font-variant-numeric: tabular-nums; }
.costbars__card-row > span[b-po7m3e8ome] { color: var(--app-text-3); }

.costbars__dates[b-po7m3e8ome] {
    display: flex;
    justify-content: space-between;
    margin: 0.3rem 0 0 3rem;
}

.costbars__legend[b-po7m3e8ome] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0.4rem 0 0 3rem;
}

.costbars__swatch[b-po7m3e8ome] {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin-right: 0.35rem;
    border-radius: 2px;
    vertical-align: -0.1rem;
}

.costbars__swatch--app[b-po7m3e8ome] { background: var(--app-primary-bg); }
.costbars__swatch--wh[b-po7m3e8ome] { background: color-mix(in srgb, var(--app-text-4) 30%, transparent); border: 1px solid var(--app-text-4); }

@media (max-width: 575.98px) {
    .costbars__legend[b-po7m3e8ome] { margin-left: 0; }
}
/* /Shared/Etl/EtlSetupChecklist.razor.rz.scp.css */
/* Text takes the room; the action sits beside it, or under it (indented to the text) when narrow. */
.setup-step-text[b-5irv0w655b] {
    flex: 1 1 14rem;
    min-width: 0;
}

.setup-step-action[b-5irv0w655b] {
    flex: 0 0 auto;
}

@media (max-width: 575.98px) {
    .setup-step-action[b-5irv0w655b] {
        margin-left: 1.6rem;
    }
}
/* /Shared/Etl/RunSparkline.razor.rz.scp.css */
.run-spark[b-mlq8b39p5s] { display: block; overflow: visible; }
.run-spark__bar--ok[b-mlq8b39p5s] { fill: var(--app-success-solid); }
.run-spark__bar--bad[b-mlq8b39p5s] { fill: var(--app-danger-solid); }
.run-spark__bar--quiet[b-mlq8b39p5s] { fill: var(--app-border-2); }
.run-spark__bar--other[b-mlq8b39p5s] { fill: var(--app-text-4); }
/* /Shared/Etl/RunTable.razor.rz.scp.css */
/* One run per <tbody>: its row and, when it failed, the error line under it. The date link is
   stretched over the whole run, so a click anywhere opens it; other links sit above the stretch. */
.run-table__run[b-o09z544p7p] { position: relative; }
.run-table__run:hover > tr > td[b-o09z544p7p] { background-color: var(--app-surface-2); }
.run-table__run:has(.run-table__link:focus-visible)[b-o09z544p7p] { outline: 2px solid var(--app-focus); outline-offset: -2px; }

.run-table__link[b-o09z544p7p] { color: inherit; text-decoration: none; }
.run-table__link[b-o09z544p7p]::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.run-table__link:focus-visible[b-o09z544p7p] { outline: none; }
.run-table__run:hover .run-table__link[b-o09z544p7p] { color: var(--app-link); text-decoration: underline; }
.run-table__above[b-o09z544p7p] { position: relative; z-index: 2; }

/* app.css drops the border of a table's last row; here every run but the last keeps its own. */
.run-table__run:not(:last-child) > tr:last-child > td[b-o09z544p7p] { border-bottom-color: var(--app-border); }
.run-table__run--error > tr:first-child > td[b-o09z544p7p] { border-bottom-color: transparent; }

.run-table__error > td[b-o09z544p7p] {
    padding-top: 0 !important;
    max-width: 0; /* lets the cell truncate instead of widening the table */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--app-text-3);
    font-size: 0.78rem;
}

.run-table__error--failed > td[b-o09z544p7p] { color: var(--app-danger-fg); }

.run-table__options[b-o09z544p7p] { max-width: 16rem; }

/* "+31 ±13 −1": each figure tinted by what happened; the words are in the tooltip and label. */
.run-table__changes[b-o09z544p7p] { display: inline-flex; gap: 0.4rem; white-space: nowrap; }
.run-table__chg--add[b-o09z544p7p] { color: var(--app-success-fg); }
.run-table__chg--change[b-o09z544p7p] { color: var(--app-info-fg); }
.run-table__chg--delete[b-o09z544p7p] { color: var(--app-danger-fg); }

@media (max-width: 767.98px) {
    /* Phones: each run a small card (.table-stack in app.css makes each cell a "label  value" line). */
    .run-table__run[b-o09z544p7p] { display: block; padding: 0.6rem 0.25rem; border-bottom: 1px solid var(--app-border); }
    .run-table__run > tr[b-o09z544p7p] { padding: 0; border-bottom: 0; }
    .run-table__run > tr > td[b-o09z544p7p] { padding: 0.12rem 0 !important; border: 0 !important; }
    .run-table__run > tr > td.table-stack__title[b-o09z544p7p] { padding-bottom: 0.3rem !important; }
    .run-table__run > tr > td.run-table__none[b-o09z544p7p] { display: none; }   /* no "Rows —" lines */
    .run-table__error > td[b-o09z544p7p] { max-width: none; padding-top: 0.25rem !important; text-align: left; white-space: normal; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .run-table__options[b-o09z544p7p] { max-width: 60vw; }
}
/* /Shared/Etl/RunTimeline.razor.rz.scp.css */
.timeline__grid[b-t9gic77dnl] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.timeline__lane[b-t9gic77dnl] {
    display: grid;
    grid-template-columns: minmax(6rem, 11rem) minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
}

.timeline__label[b-t9gic77dnl] {
    color: var(--app-text-2);
    font-family: var(--bs-font-monospace);
    font-size: 0.75rem;
}

.timeline__track[b-t9gic77dnl] {
    position: relative;
    height: 1.25rem;
    border-radius: 4px;
    background: var(--app-surface-2);
}

.timeline__track--axis[b-t9gic77dnl] {
    height: 1rem;
    background: none;
}

.timeline__gridline[b-t9gic77dnl] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--app-border);
}

.timeline__now[b-t9gic77dnl] {
    position: absolute;
    top: -0.2rem;
    bottom: -0.2rem;
    width: 2px;
    background: var(--app-heading);
    opacity: 0.55;
}

.timeline__bar[b-t9gic77dnl] {
    position: absolute;
    top: 0.2rem;
    bottom: 0.2rem;
    min-width: 3px;
    border-radius: 2px;
    z-index: 1;   /* above the next-start marks, so a run ending at "now" stays visible */
}

.timeline__bar:hover[b-t9gic77dnl],
.timeline__bar:focus-visible[b-t9gic77dnl] {
    outline: 2px solid var(--app-heading);
    outline-offset: 1px;
    z-index: 2;
}

.timeline__bar--ok[b-t9gic77dnl] { background: var(--app-success-solid); }
.timeline__bar--bad[b-t9gic77dnl] { background: var(--app-danger-solid); }
.timeline__bar--running[b-t9gic77dnl] { background: var(--app-info-solid); }
.timeline__bar--quiet[b-t9gic77dnl] { background: var(--app-text-4); }

.timeline__ghost[b-t9gic77dnl] {
    position: absolute;
    top: 0.2rem;
    bottom: 0.2rem;
    border: 1px dashed var(--app-text-3);
    border-radius: 2px;
    opacity: 0.6;
}

.timeline__next[b-t9gic77dnl] {
    position: absolute;
    top: 0.25rem;
    width: 0.7rem;
    height: 0.7rem;
    margin-left: -0.35rem;
    border: 2px solid var(--app-info-solid);
    border-radius: 50%;
    background: var(--app-surface);
}

.timeline__tick[b-t9gic77dnl] {
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap;
}

.timeline__tick--now[b-t9gic77dnl] {
    color: var(--app-heading);
    font-weight: 600;
}

.timeline__legend[b-t9gic77dnl] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.timeline__key[b-t9gic77dnl] {
    position: static;
    display: inline-block;
    width: 0.75rem;
    height: 0.5rem;
    margin-right: 0.3rem;
    border-radius: 2px;
    vertical-align: middle;
}

.timeline__key--ghost[b-t9gic77dnl] {
    border: 1px dashed var(--app-text-3);
}

.timeline__key--next[b-t9gic77dnl] {
    width: 0.6rem;
    height: 0.6rem;
    border: 2px solid var(--app-info-solid);
    border-radius: 50%;
}

/* A bar's card: job, outcome, start, duration and where a click goes. Shown on hover and on keyboard
   focus, under the bar, kept inside the track (start, middle or end anchored by where the bar is). */
.timeline__card[b-t9gic77dnl] {
    display: none;
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 0;
    z-index: 10;
    width: max-content;
    min-width: 11rem;
    max-width: 16rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--app-border-2);
    border-radius: var(--app-r-sm);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-lg);
    color: var(--app-text);
    font-size: 0.78rem;
    line-height: 1.35;
    text-align: left;
    pointer-events: none;
}

.timeline__card--mid[b-t9gic77dnl] { left: 50%; transform: translateX(-50%); }
.timeline__card--end[b-t9gic77dnl] { left: auto; right: 0; }

.timeline__bar:hover .timeline__card[b-t9gic77dnl],
.timeline__bar:focus-visible .timeline__card[b-t9gic77dnl] { display: block; }

.timeline__card-name[b-t9gic77dnl] {
    display: block;
    overflow: hidden;
    color: var(--app-heading);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timeline__card-outcome[b-t9gic77dnl] { display: flex; align-items: center; gap: 0.35rem; margin: 0.1rem 0 0.3rem; }

.timeline__dot[b-t9gic77dnl] {
    display: inline-block;
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

.timeline__card-row[b-t9gic77dnl] { display: flex; justify-content: space-between; gap: 1rem; font-variant-numeric: tabular-nums; }
.timeline__card-row > span[b-t9gic77dnl] { color: var(--app-text-3); }

.timeline__card-hint[b-t9gic77dnl] {
    display: block;
    margin-top: 0.35rem;
    padding-top: 0.3rem;
    border-top: 1px solid var(--app-border);
    color: var(--app-link);
    font-weight: 600;
}

@media (max-width: 575.98px) {
    /* Phones: the lane's name above its track, full width, instead of a clipped column. */
    .timeline__lane[b-t9gic77dnl] { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
    .timeline__lane--axis > div:first-child[b-t9gic77dnl] { display: none; }
    .timeline__tick--minor[b-t9gic77dnl],
    .timeline__tick--near[b-t9gic77dnl] { display: none; }
}
/* /Shared/Etl/SectionTitle.razor.rz.scp.css */
.job-section-title[b-8r4p1qm3so] { margin-bottom: 0.75rem; }

.job-section-title__number[b-8r4p1qm3so] {
    display: inline-grid;
    place-items: center;
    width: 1.375rem;
    height: 1.375rem;
    margin-right: 0.5rem;
    border-radius: 50%;
    background: var(--app-surface-2);
    color: var(--app-text-2);
    font-size: 0.75rem;
    vertical-align: 0.05em;
}

.job-section-title__problems[b-8r4p1qm3so] {
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.75rem 0.5rem 1.75rem;
    border-radius: var(--app-r-sm);
    background: var(--app-warning-bg);
    color: var(--app-warning-fg);
}
/* /Shared/Etl/StepRail.razor.rz.scp.css */
.step-rail__list[b-s4h09oj1fl] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.step-rail__item[b-s4h09oj1fl] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 0;
    border-radius: var(--app-r-sm);
    background: transparent;
    color: var(--app-text-2);
    text-align: left;
    font-size: 0.875rem;
    transition: background var(--app-fast) var(--app-ease), color var(--app-fast) var(--app-ease);
}

.step-rail__item:hover[b-s4h09oj1fl] { background: var(--app-surface-2); color: var(--app-text); }
.step-rail__item:focus-visible[b-s4h09oj1fl] { outline: 2px solid var(--app-teal); outline-offset: 1px; }

.step-rail__item--current[b-s4h09oj1fl] {
    background: var(--app-surface);
    color: var(--app-text);
    font-weight: 600;
    box-shadow: var(--app-shadow-xs);
}

.step-rail__mark[b-s4h09oj1fl] {
    flex: 0 0 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1.5px solid var(--app-border-2);
    color: var(--app-text-3);
    background: var(--app-surface);
}

.step-rail__item--done .step-rail__mark[b-s4h09oj1fl] {
    border-color: var(--app-success-solid);
    background: var(--app-success-solid);
    color: var(--app-white);
}

.step-rail__item--problem .step-rail__mark[b-s4h09oj1fl] {
    border-color: var(--app-warning-border);
    background: var(--app-warning-bg);
    color: var(--app-warning-fg);
}

.step-rail__label[b-s4h09oj1fl] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    padding-top: 0.1rem;
}

.step-rail__hint[b-s4h09oj1fl] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--app-text-3);
}

.step-rail__item--problem .step-rail__hint[b-s4h09oj1fl] { color: var(--app-warning-fg); }

/* Narrow screens: a scrollable row of chips above the form. */
@media (max-width: 1199.98px) {
    .step-rail__list[b-s4h09oj1fl] {
        flex-direction: row;
        overflow-x: auto;
        gap: 0.25rem;
        padding-bottom: 0.25rem;
    }

    .step-rail__item[b-s4h09oj1fl] {
        width: auto;
        white-space: nowrap;
        align-items: center;
        padding: 0.375rem 0.625rem;
    }

    .step-rail__hint[b-s4h09oj1fl] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .step-rail__item[b-s4h09oj1fl] { transition: none; }
}
/* /Shared/Etl/StepWaterfall.razor.rz.scp.css */
.waterfall[b-b3gi3hnh24] {
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--app-border);
    border-radius: 0.5rem;
    background: var(--app-surface);
}

.waterfall__legend[b-b3gi3hnh24] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.waterfall__key[b-b3gi3hnh24] {
    display: inline-block;
    width: 0.75rem;
    height: 0.5rem;
    margin-right: 0.3rem;
    border-radius: 2px;
    vertical-align: middle;
}

.waterfall__row[b-b3gi3hnh24] {
    display: grid;
    grid-template-columns: minmax(8rem, 16rem) minmax(0, 1fr) 4.5rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.15rem 0;
}

.waterfall__track[b-b3gi3hnh24] {
    position: relative;
    height: 0.9rem;
    border-radius: 3px;
    background: var(--app-surface-2);
}

.waterfall__bar[b-b3gi3hnh24] {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    min-width: 2px;
    overflow: hidden;
    border-radius: 3px;
}

.waterfall__bar--failed[b-b3gi3hnh24] {
    outline: 2px solid var(--app-danger-solid);
}

.waterfall__seg[b-b3gi3hnh24] { height: 100%; }
.waterfall__seg--exec[b-b3gi3hnh24] { background: var(--app-primary-bg); }
.waterfall__seg--queued[b-b3gi3hnh24] { background: var(--app-warning-solid); }
.waterfall__seg--compile[b-b3gi3hnh24] { background: var(--app-info-border); }
.waterfall__seg--app[b-b3gi3hnh24] { background: var(--app-text-4); }

.waterfall__tick[b-b3gi3hnh24] {
    position: absolute;
    top: -0.2rem;
    bottom: -0.2rem;
    width: 2px;
    background: var(--app-heading);
    opacity: 0.6;
}

.waterfall__tick--key[b-b3gi3hnh24] {
    position: static;
    display: inline-block;
    height: 0.75rem;
    margin-right: 0.3rem;
    vertical-align: middle;
}

.waterfall__axis[b-b3gi3hnh24] {
    display: flex;
    justify-content: space-between;
    margin-left: calc(min(16rem, 30%) + 0.75rem);
    margin-right: 5.25rem;
}

@media (max-width: 575.98px) {
    .waterfall__row[b-b3gi3hnh24] { grid-template-columns: 6rem minmax(0, 1fr) 3.5rem; gap: 0.5rem; }
    .waterfall__axis[b-b3gi3hnh24] { display: none; }
}
/* /Shared/Etl/TrendChart.razor.rz.scp.css */
.trend[b-8n5bdrii7d] { margin: 0; }
.trend__svg[b-8n5bdrii7d] { display: block; width: 100%; height: 4rem; overflow: visible; }
.trend__line[b-8n5bdrii7d] { fill: none; stroke: var(--app-primary-bg); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.trend__band[b-8n5bdrii7d] { fill: var(--app-info-bg); stroke: var(--app-info-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.trend__point[b-8n5bdrii7d] { fill: var(--app-surface); stroke: var(--app-primary-bg); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.trend__point--failed[b-8n5bdrii7d] { fill: var(--app-danger-solid); stroke: var(--app-danger-solid); }
.trend--empty[b-8n5bdrii7d] { padding: 1rem 0; }
/* /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-l9w8l1c23r] {
    position: relative;
    display: block;
}

.fs-trigger[b-l9w8l1c23r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--bs-border-radius);
    color: var(--app-text);
    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-l9w8l1c23r] {
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
}

.fs-trigger:hover[b-l9w8l1c23r] {
    border-color: var(--app-text-3);
}

.fs-trigger:focus-visible[b-l9w8l1c23r],
.fs-trigger--open[b-l9w8l1c23r] {
    outline: 0;
    border-color: var(--app-teal);
    box-shadow: 0 0 0 0.2rem rgba(var(--app-teal-rgb), 0.18);
}

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

.fs-placeholder[b-l9w8l1c23r] {
    color: var(--app-text-2);
}

.fs-chevron[b-l9w8l1c23r] {
    color: var(--app-text-2);
    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-l9w8l1c23r] {
    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-l9w8l1c23r] {
    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-l9w8l1c23r] {
    grid-template-rows: 1fr;
    pointer-events: auto;
}

.fs-collapse-inner[b-l9w8l1c23r] {
    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-l9w8l1c23r] {
    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-l9w8l1c23r] {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 6px 24px rgba(var(--app-shadow-rgb), 0.1), 0 2px 6px rgba(var(--app-shadow-rgb), 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-l9w8l1c23r] {
    position: fixed;
    inset: 0;
    z-index: 1049;
    background: transparent;
}

[b-l9w8l1c23r] .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(--app-text);
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.1s ease;
}

[b-l9w8l1c23r] .fs-option:hover {
    background: rgba(var(--app-teal-rgb), 0.08);
}

[b-l9w8l1c23r] .fs-option--selected {
    background: rgba(var(--app-teal-rgb), 0.12);
    color: var(--app-link);
    font-weight: 500;
}

[b-l9w8l1c23r] .fs-option-check {
    color: var(--app-link);
    font-size: 0.875rem;
    flex-shrink: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.icon-picker-item.is-selected i[b-xls1m7f4s5] {
    color: var(--app-accent-text);
}

/* ── Empty state ── */
.icon-picker-empty[b-xls1m7f4s5] {
    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-wj2n28nk06] {
    border: 1px solid var(--app-border);
    border-radius: 8px;
    background: var(--app-surface);
    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-wj2n28nk06] {
    background: var(--app-surface-sunken);
    /* 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-wj2n28nk06] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.55rem 0.85rem;
    background: transparent;
    border: 0;
    color: var(--app-text);
    font-size: 0.875rem;
    cursor: pointer;
    text-align: left;
    user-select: none;
}

.lf-header:hover[b-wj2n28nk06] {
    background: color-mix(in srgb, var(--app-text) 4%, transparent);
}

.lf-header:focus-visible[b-wj2n28nk06] {
    outline: 2px solid var(--app-teal);
    outline-offset: -2px;
}

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

.lf-header-left > i.bi-funnel[b-wj2n28nk06] {
    color: var(--app-text-2);
    font-size: 0.95rem;
}

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

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

.lf-clear[b-wj2n28nk06] {
    font-size: 0.78rem;
    color: var(--app-text-2);
    cursor: pointer;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}

.lf-clear:hover[b-wj2n28nk06] {
    color: var(--app-text);
    background: color-mix(in srgb, var(--app-text) 6%, transparent);
    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-wj2n28nk06] {
    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(--app-text);
    /* 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-wj2n28nk06] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.lf-summary-label[b-wj2n28nk06] {
    color: var(--app-text-2);
    font-weight: 500;
}

.lf-summary-sep[b-wj2n28nk06] {
    color: var(--app-text-2);
    opacity: 0.6;
}

.lf-summary-chip[b-wj2n28nk06] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.45rem 0.1rem 0.55rem;
    background: rgba(var(--app-teal-rgb), 0.10);
    color: var(--app-link);
    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-wj2n28nk06],
.lf-summary-chip:focus-visible[b-wj2n28nk06] {
    background: var(--app-danger-bg);
    color: var(--app-danger-fg);
    outline: 0;
}

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

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

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

.lf-chevron[b-wj2n28nk06] {
    color: var(--app-text-2);
    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-wj2n28nk06] {
    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-wj2n28nk06] {
    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-wj2n28nk06] {
    grid-template-rows: 1fr;
}

.lf-collapse-inner[b-wj2n28nk06] {
    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-wj2n28nk06] {
    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-wj2n28nk06] {
    padding: 0.75rem 0.85rem 0.85rem;
    border-top: 1px solid var(--app-border);
    background: var(--app-surface);
}

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

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

.cf-label[b-fiojetefq5] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--app-text-2);
    margin-right: 0.25rem;
}

.cf-chip[b-fiojetefq5] {
    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-fiojetefq5] {
    outline: 2px solid var(--app-teal);
    outline-offset: 2px;
}

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

.cf-chip-neutral[b-fiojetefq5] {
    background: transparent;
    border-color: var(--app-border-2);
    color: var(--app-text);
}

.cf-chip-neutral:hover[b-fiojetefq5] {
    background: var(--app-surface-2);
    border-color: var(--app-text-3);
}

.cf-chip-neutral i[b-fiojetefq5] {
    color: var(--app-text-3);
}

.cf-chip-include[b-fiojetefq5] {
    background: var(--app-primary-bg);
    border-color: var(--app-primary-bg);
    color: var(--app-primary-fg);
}

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

.cf-chip-exclude[b-fiojetefq5] {
    background: var(--app-danger-bg);
    border-color: var(--app-danger-border);
    color: var(--app-danger-fg);
    text-decoration: line-through;
}

.cf-chip-exclude:hover[b-fiojetefq5] {
    background: var(--app-danger-solid);
    border-color: var(--app-danger-solid);
    color: var(--app-white);
}

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

.cf-clear[b-fiojetefq5] {
    padding: 0 0.25rem;
    color: var(--app-text-2);
    text-decoration: none;
}

.cf-clear:hover[b-fiojetefq5] {
    color: var(--app-text);
    text-decoration: underline;
}

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

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

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

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

.ncd-error[b-wcz71rfzfv] {
  flex-basis: 100%;
  font-size: 0.8rem;
  color: var(--app-danger-fg);
  text-align: right;
}
/* /Shared/Navigation/NavLayoutEditorView.razor.rz.scp.css */
.nle[b-0r28hifro9] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
}

.nle-error[b-0r28hifro9] {
  padding: 0.45rem 0.75rem;
  border-radius: 6px;
  background: var(--app-warning-bg);
  color: var(--app-warning-fg);
  font-size: 0.8rem;
}

/* ── Section ── */

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

.nle-section-head[b-0r28hifro9] {
  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-0r28hifro9] {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--app-text-2);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* One section: no band around it, the same as the sidebar (no section label there either). */
.nle-section.is-bare[b-0r28hifro9] {
  border: 0;
  background: transparent;
}

.nle-section.is-bare .nle-nodes[b-0r28hifro9] {
  padding: 0;
}

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

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

/* ── Rows ── */

.nle-row[b-0r28hifro9] {
  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-0r28hifro9] {
  background: var(--app-surface-2);
}

/* A group is a heading in the sidebar (no icon, small muted label), so it looks like one here. */
.nle-row.is-group .nle-label[b-0r28hifro9] {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--app-text-2);
}

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

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

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

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

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

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

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

.nle-chevron[b-0r28hifro9] {
  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-0r28hifro9] {
  background: var(--app-border);
}

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

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

.nle-tag[b-0r28hifro9] {
  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-0r28hifro9] {
  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-0r28hifro9],
.nle-menu-btn[b-0r28hifro9] {
  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-0r28hifro9],
.nle-menu-btn:hover[b-0r28hifro9] {
  background: var(--app-border);
  color: var(--app-text);
}

.nle-eye.is-visible[b-0r28hifro9] {
  color: var(--app-accent-text);
}

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

.nle-rename[b-0r28hifro9] {
  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-0r28hifro9] {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 5;
}

.is-drop-before[b-0r28hifro9]::before,
.is-drop-after[b-0r28hifro9]::after,
.is-drop-after-section[b-0r28hifro9]::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-0r28hifro9]::before { top: -2px; }
.is-drop-after[b-0r28hifro9]::after { bottom: -2px; }

.nle-section-head.is-drop-before[b-0r28hifro9]::before { top: -0.45rem; }
.is-drop-after-section[b-0r28hifro9]::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-0r28hifro9]::after { left: -2.1rem; }

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

.nle-empty-group[b-0r28hifro9] {
  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-0r28hifro9] {
  position: fixed;
  inset: 0;
  z-index: 10;
}

.nle-menu[b-0r28hifro9] {
  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: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(var(--app-shadow-rgb), 0.16);
  cursor: default;
  font-weight: 400;
}

.nle-menu button[b-0r28hifro9] {
  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-0r28hifro9],
.nle-menu button:focus-visible[b-0r28hifro9] {
  background: var(--app-surface-2);
}

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

.nle-menu button.is-danger[b-0r28hifro9] {
  color: var(--app-danger-fg);
}

.nle-menu-heading[b-0r28hifro9] {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--app-text-3);
  padding: 0.5rem 0.55rem 0.2rem;
}

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

.nle-add[b-0r28hifro9] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.nle-add-section[b-0r28hifro9] {
  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-0r28hifro9] {
  border-color: var(--app-teal);
  color: var(--app-accent-text);
}

@media (max-width: 575.98px) {
  .nle-grip[b-0r28hifro9] { display: none; }
  .nle-row.is-child[b-0r28hifro9] { margin-left: 0.9rem; }
  .nle-empty-group[b-0r28hifro9] { margin-left: 0.9rem; }
  .nle-row.is-child.is-drop-outdent[b-0r28hifro9]::after { left: -0.9rem; }
  .nle-children[b-0r28hifro9] { margin-left: 0.4rem; }
  .nle-tag[b-0r28hifro9] { display: none; }
}
/* /Shared/Navigation/NavTreeView.razor.rz.scp.css */
/* The sidebar page tree. Colours come from the --app-sidebar-* tokens (app.css). Selectors keep
   the shape `.nav-tree ::deep .nav-link` for the same specificity as NavMenu's `.nav ::deep .nav-link`,
   so the collapsed-sidebar rules in MainLayout resolve the same way. */

/* ─────────────────────────────────────────────────────────
   Page links
   ───────────────────────────────────────────────────────── */

.nav-tree[b-y991lvgpd3]  .nav-link {
  color: var(--app-sidebar-fg);
  border-radius: 8px;
  height: 2.15rem;
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.84rem;
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 0.05rem;
  white-space: nowrap;
  overflow: hidden;
  /* Must not shrink: `overflow: hidden` cancels a flex item's automatic minimum size, so without
     this the links squash towards zero height instead of letting .nav-scroll scroll. */
  flex-shrink: 0;
  position: relative;
  transition: background-color var(--app-fast) ease, color var(--app-fast) ease;
}

/* The current page: a short accent bar at the left edge. */
.nav-tree[b-y991lvgpd3]  .nav-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 25%;
  height: 50%;
  width: 3px;
  border-radius: 2px;
  background: var(--app-sidebar-accent);
  transform: scaleY(0);
  transition: transform var(--app-mid) var(--app-ease);
}

.nav-tree[b-y991lvgpd3]  .nav-link:hover {
  color: var(--app-sidebar-fg-strong);
  background: var(--app-sidebar-hover-bg);
}

.nav-tree[b-y991lvgpd3]  .nav-link.active {
  color: var(--app-sidebar-fg-strong);
  background: var(--app-sidebar-active-bg);
  font-weight: 600;
}

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

.nav-tree[b-y991lvgpd3]  .nav-link:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: -2px;
}

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

.nav-icon[b-y991lvgpd3] {
  font-size: 1rem;
  line-height: 1;
  width: 1.05rem;
  min-width: 1.05rem;
  margin-right: 0.7rem;
  text-align: center;
  color: var(--app-sidebar-muted);
  flex-shrink: 0;
  transition: color var(--app-fast) ease, margin var(--app-fast) ease;
}

.nav-tree[b-y991lvgpd3]  .nav-link:hover .nav-icon,
.nav-tree[b-y991lvgpd3]  .nav-link.active .nav-icon,
.nav-group-header:hover .nav-icon[b-y991lvgpd3],
.nav-group-header.is-active-ancestor .nav-icon[b-y991lvgpd3] {
  color: var(--app-sidebar-fg-strong);
}

/* ─────────────────────────────────────────────────────────
   Top-level headings (Operate, Build, Setup)
   ───────────────────────────────────────────────────────── */

.nav-group + .nav-group[b-y991lvgpd3] { margin-top: 0.85rem; }

.nav-heading[b-y991lvgpd3] {
  display: flex;
  align-items: center;
  width: 100%;
  height: 1.75rem;
  padding: 0 0.75rem;
  margin-bottom: 0.1rem;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--app-sidebar-muted);
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  transition: color var(--app-fast) ease;
}

.nav-heading:hover[b-y991lvgpd3] { color: var(--app-sidebar-fg-strong); }

.nav-heading:focus-visible[b-y991lvgpd3] {
  outline: 2px solid var(--app-focus);
  outline-offset: -2px;
}

/* The chevron appears on hover or focus, and always when the group is folded away. */
.nav-heading-chevron[b-y991lvgpd3] {
  margin-left: auto;
  font-size: 0.65rem;
  opacity: 0;
  transition: transform var(--app-mid) var(--app-ease), opacity var(--app-fast) ease;
}

.nav-heading:hover .nav-heading-chevron[b-y991lvgpd3],
.nav-heading:focus-visible .nav-heading-chevron[b-y991lvgpd3],
.nav-heading:not(.is-expanded) .nav-heading-chevron[b-y991lvgpd3] { opacity: 1; }

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

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

/* ─────────────────────────────────────────────────────────
   Sub-groups (a hub with its own pages, inside a heading)
   ───────────────────────────────────────────────────────── */

.nav-group-header[b-y991lvgpd3] {
  display: flex;
  align-items: center;
  width: 100%;
  height: 2.15rem;
  padding: 0 0.75rem;
  margin-bottom: 0.05rem;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--app-sidebar-fg);
  font-family: 'Outfit', sans-serif;
  font-size: 0.84rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  flex-shrink: 0;
  transition: background-color var(--app-fast) ease, color var(--app-fast) ease;
}

.nav-group-header:hover[b-y991lvgpd3] {
  background: var(--app-sidebar-hover-bg);
  color: var(--app-sidebar-fg-strong);
}

.nav-group-header.is-active-ancestor[b-y991lvgpd3] { color: var(--app-sidebar-fg-strong); }

.nav-group-chevron[b-y991lvgpd3] {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--app-sidebar-muted);
  transition: transform var(--app-mid) var(--app-ease);
}

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

.nav-group-children.is-sub[b-y991lvgpd3] {
  margin-left: 1.3rem;
  padding-left: 0.25rem;
  border-left: 1px solid var(--app-sidebar-border);
}

.nav-tree[b-y991lvgpd3]  .nav-link.is-sub-child {
  height: 2rem;
  font-size: 0.8rem;
}

/* ─────────────────────────────────────────────────────────
   Section labels: shown only when there's more than one section
   ───────────────────────────────────────────────────────── */

.nav-section-label[b-y991lvgpd3] {
  padding: 0.75rem 0.75rem 0.3rem;
  margin-top: 0.5rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--app-sidebar-muted);
  border-top: 1px solid var(--app-sidebar-border);
  white-space: nowrap;
  overflow: hidden;
}

.nav-section-label:first-child[b-y991lvgpd3] {
  border-top: 0;
  margin-top: 0;
}

/* ─────────────────────────────────────────────────────────
   Collapsed sidebar (icon rail): headings become thin dividers, every group's pages show, the
   tree flattens to a centred column. .sidebar-collapsed lives on MainLayout's .sidebar.
   ───────────────────────────────────────────────────────── */

@media (min-width: 641px) {
  .sidebar-collapsed .nav-group + .nav-group[b-y991lvgpd3] { margin-top: 0.35rem; }

  .sidebar-collapsed .nav-heading[b-y991lvgpd3] {
    height: 0.75rem;
    padding: 0;
    margin: 0 0.5rem 0.35rem;
    width: calc(100% - 1rem);   /* a button sizes to its (hidden) label otherwise */
    border-radius: 0;
    border-bottom: 1px solid var(--app-sidebar-border);
    cursor: default;
  }

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

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

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

  .sidebar-collapsed .nav-icon[b-y991lvgpd3] { margin-right: 0; }

  .sidebar-collapsed .nav-section-label[b-y991lvgpd3] {
    font-size: 0;
    padding: 0.4rem 0;
    margin-top: 0.25rem;
    letter-spacing: 0;
  }
}
/* /Shared/NotificationBell.razor.rz.scp.css */
/* =====================================================
   Notification Bell + Drawer
   ===================================================== */

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

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

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

.notif-bell-badge[b-sww9hhx9kd] {
    /* Sits on the button's corner so the bell stays visible. */
    position: absolute;
    top: 1px;
    right: -3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    background: var(--app-danger-solid);
    color: #fff;
    border: 2px solid var(--app-surface);
    border-radius: 9px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 13px;
    letter-spacing: -0.01em;
    text-align: center;
    box-sizing: border-box;
    pointer-events: none;
}

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

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

.notif-drawer[b-sww9hhx9kd] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 101;
    width: 380px;
    max-width: calc(100vw - 16px);
    max-height: 560px;
    background: var(--app-surface);
    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-sww9hhx9kd 0.15s var(--app-ease) both;
}

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

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

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

.notif-drawer-action[b-sww9hhx9kd] {
    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-sww9hhx9kd] {
    background: var(--app-surface);
    border-color: var(--app-border-2);
    color: var(--app-heading);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.notif-row.notif-row-info .notif-row-icon[b-sww9hhx9kd]    { background: var(--app-info-bg); color: var(--app-info-fg); }
.notif-row.notif-row-success .notif-row-icon[b-sww9hhx9kd] { background: var(--app-success-bg); color: var(--app-success-fg); }
.notif-row.notif-row-warning .notif-row-icon[b-sww9hhx9kd] { background: var(--app-warning-bg); color: var(--app-warning-fg); }
.notif-row.notif-row-critical .notif-row-icon[b-sww9hhx9kd] { background: var(--app-danger-bg); color: var(--app-danger-fg); }

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

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

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

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

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

.notif-row-dismiss:hover[b-sww9hhx9kd] {
    background: var(--app-surface);
    color: var(--app-heading);
}

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

/* Phones: the bell sits in the sidebar header, so the drawer spans the screen under it. */
@media (max-width: 640.98px) {
    .notif-drawer[b-sww9hhx9kd] {
        position: fixed;
        top: 64px;
        left: 8px;
        right: 8px;
        width: auto;
        max-width: none;
        max-height: calc(100vh - 80px);
    }
}

/* ── Header text actions (Clear all…, confirm) ─────────── */

.notif-drawer-text-action[b-sww9hhx9kd] {
    height: 28px;
    padding: 0 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--app-r-sm);
    background: transparent;
    color: var(--app-text-2);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
}

.notif-drawer-text-action:hover[b-sww9hhx9kd] {
    background: var(--app-surface);
    border-color: var(--app-border-2);
    color: var(--app-heading);
}

.notif-drawer-text-action--danger[b-sww9hhx9kd] { color: var(--app-danger-fg); }
.notif-drawer-text-action--danger:hover[b-sww9hhx9kd] { background: var(--app-danger-bg); color: var(--app-danger-fg); }

/* ── A row's main area: a button, so a notification opens from the keyboard ── */

.notif-row-main[b-sww9hhx9kd] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    flex: 1;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.notif-row-main:focus-visible[b-sww9hhx9kd] {
    outline: 2px solid var(--app-focus);
    outline-offset: 2px;
    border-radius: 4px;
}

.notif-row-body > span[b-sww9hhx9kd] { display: block; }
/* /Shared/SegmentedControl.razor.rz.scp.css */
.seg[b-xsrpbqfwdb] {
    display: inline-flex;
    align-items: stretch;
    gap: 2px;
    padding: 3px;
    border-radius: var(--app-r);
    background: var(--app-surface-2);
    border: 1px solid var(--app-border);
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
.seg[b-xsrpbqfwdb]::-webkit-scrollbar { display: none; }

.seg--block[b-xsrpbqfwdb] { display: flex; width: 100%; }
/* Options that may not fit in a narrow column wrap onto a second row instead of scrolling out of sight. */
.seg--wrap[b-xsrpbqfwdb] { flex-wrap: wrap; overflow-x: visible; }
.seg--block .seg__item[b-xsrpbqfwdb] { flex: 1 1 0; }

.seg__item[b-xsrpbqfwdb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 28px;
    padding: 0.2rem 0.75rem;
    border: 0;
    border-radius: calc(var(--app-r) - 3px);
    background: transparent;
    color: var(--app-text-2);
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--app-fast) ease, color var(--app-fast) ease, box-shadow var(--app-fast) ease;
}

.seg__item:hover:not(:disabled):not(.seg__item--on)[b-xsrpbqfwdb] { color: var(--app-text); }

.seg__item--on[b-xsrpbqfwdb] {
    background: var(--app-surface);
    color: var(--app-heading);
    font-weight: 600;
    box-shadow: var(--app-shadow-sm);
}

.seg__item:disabled[b-xsrpbqfwdb] { opacity: 0.45; cursor: default; }

.seg--sm[b-xsrpbqfwdb] { padding: 2px; }
.seg--sm .seg__item[b-xsrpbqfwdb] { min-height: 24px; padding: 0.1rem 0.6rem; font-size: 0.78rem; }
/* /Shared/Skeleton.razor.rz.scp.css */
.skel[b-0yvyjp1f4w] { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.25rem 0; }

.skel__line[b-0yvyjp1f4w] { height: 0.8rem; }

.skel__head[b-0yvyjp1f4w] { height: 0.7rem; width: 100%; opacity: 0.6; margin-bottom: 0.25rem; }

.skel__row[b-0yvyjp1f4w] {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--app-border);
}
.skel__row > div[b-0yvyjp1f4w] { height: 0.75rem; }

.skel__cards[b-0yvyjp1f4w] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 1rem;
}
.skel__card[b-0yvyjp1f4w] { height: 6.5rem; border-radius: var(--app-r); }
/* /Shared/SortableHeader.razor.rz.scp.css */
.bd-sort-header[b-dgsj5jjqv0] {
    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-dgsj5jjqv0] {
    color: var(--app-link);
}

.bd-sort-header--active[b-dgsj5jjqv0] {
    color: var(--app-link);
}

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

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

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

.sl-item[b-jldmlybhyt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    background: var(--app-surface);
    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-jldmlybhyt] {
    border-color: var(--app-border-2);
    background: var(--app-bg);
}

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

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

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

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

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

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

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

/* ── Drag states ── */

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

.sl-item.sl-drop-above[b-jldmlybhyt]::before,
.sl-item.sl-drop-below[b-jldmlybhyt]::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(var(--app-teal-rgb), 0.45);
}

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

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

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

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

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

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

.sl-compact .sl-arrow[b-jldmlybhyt] {
    width: 1.35rem;
    height: 1.35rem;
    font-size: 0.68rem;
}
/* /Shared/StatTile.razor.rz.scp.css */
.stat-tile[b-i8zqek3edy] {
    --tile-accent: var(--app-text-2);
    --tile-chip: var(--app-surface-2);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    height: 100%;
    padding: 1rem 1.1rem;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-r);
    color: var(--app-text);
    text-decoration: none;
    transition: border-color var(--app-fast) ease, box-shadow var(--app-fast) ease, opacity var(--app-fast) ease;
}

.stat-tile--danger[b-i8zqek3edy]  { --tile-accent: var(--app-danger-fg);  --tile-chip: var(--app-danger-bg); }
.stat-tile--warning[b-i8zqek3edy] { --tile-accent: var(--app-warning-fg); --tile-chip: var(--app-warning-bg); }
.stat-tile--success[b-i8zqek3edy] { --tile-accent: var(--app-success-fg); --tile-chip: var(--app-success-bg); }
.stat-tile--info[b-i8zqek3edy]    { --tile-accent: var(--app-info-fg);    --tile-chip: var(--app-info-bg); }

.stat-tile__top[b-i8zqek3edy] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.stat-tile__label[b-i8zqek3edy] { font-size: 0.8125rem; font-weight: 500; color: var(--app-text-2); }

.stat-tile__icon[b-i8zqek3edy] {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: var(--app-r-sm);
    background: var(--tile-chip);
    color: var(--tile-accent);
    font-size: 0.95rem;
}

.stat-tile__value[b-i8zqek3edy] {
    font-size: 1.85rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--app-heading);
}
.stat-tile--danger .stat-tile__value[b-i8zqek3edy],
.stat-tile--warning .stat-tile__value[b-i8zqek3edy],
.stat-tile--info .stat-tile__value[b-i8zqek3edy],
.stat-tile--success .stat-tile__value[b-i8zqek3edy] { color: var(--tile-accent); }

.stat-tile__sub[b-i8zqek3edy] { font-size: 0.78rem; color: var(--app-text-3); }

.stat-tile--quiet .stat-tile__value[b-i8zqek3edy] { color: var(--app-text-3); }
.stat-tile--quiet .stat-tile__icon[b-i8zqek3edy] { color: var(--app-text-3); background: var(--app-surface-2); }

.stat-tile--link:hover[b-i8zqek3edy],
.stat-tile--link:focus-visible[b-i8zqek3edy] {
    border-color: var(--app-border-2);
    box-shadow: var(--app-shadow-sm);
    color: var(--app-text);
}
/* /Shared/StatusPill.razor.rz.scp.css */
.status-pill[b-84mpj4n06o] {
    --pill-bg: var(--app-neutral-bg);
    --pill-fg: var(--app-neutral-fg);
    --pill-dot: var(--app-text-3);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.12rem 0.55rem 0.12rem 0.45rem;
    border-radius: 999px;
    background: var(--pill-bg);
    color: var(--pill-fg);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.45;
    white-space: nowrap;
}

.status-pill__dot[b-84mpj4n06o] {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--pill-dot);
    flex: 0 0 auto;
}

.status-pill__icon[b-84mpj4n06o] { font-size: 0.75rem; color: var(--pill-dot); }

.status-pill--success[b-84mpj4n06o] { --pill-bg: var(--app-success-bg); --pill-fg: var(--app-success-fg); --pill-dot: var(--app-success-solid); }
.status-pill--danger[b-84mpj4n06o]  { --pill-bg: var(--app-danger-bg);  --pill-fg: var(--app-danger-fg);  --pill-dot: var(--app-danger-solid); }
.status-pill--warning[b-84mpj4n06o] { --pill-bg: var(--app-warning-bg); --pill-fg: var(--app-warning-fg); --pill-dot: var(--app-warning-solid); }
.status-pill--info[b-84mpj4n06o]    { --pill-bg: var(--app-info-bg);    --pill-fg: var(--app-info-fg);    --pill-dot: var(--app-info-solid); }
.status-pill--active[b-84mpj4n06o]  { --pill-bg: var(--app-info-bg);    --pill-fg: var(--app-info-fg);    --pill-dot: var(--app-info-solid); }

.status-pill--active .status-pill__dot[b-84mpj4n06o] {
    box-shadow: 0 0 0 0 var(--pill-dot);
    animation: status-pill-pulse-b-84mpj4n06o 1.6s ease-out infinite;
}

@keyframes status-pill-pulse-b-84mpj4n06o {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pill-dot) 55%, transparent); }
    70%  { box-shadow: 0 0 0 0.35rem transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .status-pill--active .status-pill__dot[b-84mpj4n06o] { animation: none; }
}
/* /Shared/TagInput.razor.rz.scp.css */
.tag-input-wrap[b-2qhulbcukg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
    min-height: 2.15rem;
    background: var(--app-surface);
    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-2qhulbcukg] {
    border-color: var(--app-teal);
    box-shadow: 0 0 0 3px var(--app-teal-glow);
}

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

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

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

.tag-chip-remove[b-2qhulbcukg] {
    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-2qhulbcukg] {
    color: var(--app-danger-fg);
    background: var(--app-danger-bg);
}

.tag-input-field[b-2qhulbcukg] {
    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-2qhulbcukg]::placeholder {
    color: var(--app-text-3);
}
/* /Shared/ToastHost.razor.rz.scp.css */
.toast-stack[b-syfnjfcs49] {
    position: fixed;
    right: 1.25rem;
    bottom: 5.75rem; /* above the assistant button */
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: min(24rem, calc(100vw - 2rem));
    pointer-events: none;
}

.app-toast[b-syfnjfcs49] {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.7rem 0.75rem 0.7rem 0.9rem;
    background: var(--app-surface);
    color: var(--app-text);
    border: 1px solid var(--app-border);
    border-left: 3px solid var(--toast-accent);
    border-radius: var(--app-r);
    box-shadow: var(--app-shadow-lg);
    animation: toast-in-b-syfnjfcs49 0.22s var(--app-ease) both;
}

.app-toast--success[b-syfnjfcs49] { --toast-accent: var(--app-success-solid); }
.app-toast--info[b-syfnjfcs49]    { --toast-accent: var(--app-info-solid); }
.app-toast--danger[b-syfnjfcs49]  { --toast-accent: var(--app-danger-solid); }

.app-toast__icon[b-syfnjfcs49] { color: var(--toast-accent); font-size: 1rem; line-height: 1.35; }
.app-toast__body[b-syfnjfcs49] { flex: 1 1 auto; min-width: 0; }
.app-toast__message[b-syfnjfcs49] { font-size: 0.875rem; font-weight: 500; }
.app-toast__detail[b-syfnjfcs49] { font-size: 0.8rem; color: var(--app-text-2); margin-top: 0.1rem; }

.app-toast__close[b-syfnjfcs49] {
    border: 0;
    background: transparent;
    color: var(--app-text-3);
    padding: 0.1rem 0.25rem;
    line-height: 1;
    border-radius: var(--app-r-sm);
}
.app-toast__close:hover[b-syfnjfcs49] { color: var(--app-text); background: var(--app-surface-2); }

@keyframes toast-in-b-syfnjfcs49 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640.98px) {
    .toast-stack[b-syfnjfcs49] { right: 1rem; left: 1rem; bottom: 5.25rem; width: auto; }
}
.app-toast__link[b-syfnjfcs49] { display: inline-block; margin-top: 0.25rem; font-size: 0.8rem; font-weight: 600; color: var(--app-link); }
/* /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. Token-based, so it
   follows the light and dark themes; the portal top bars override the toggle
   colors for their navy background. */

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

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

.user-avatar[b-gsj3osjto1] {
  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: var(--app-white);
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0;
}

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

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

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

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

.user-menu-dropdown[b-gsj3osjto1] {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 264px;
  background: var(--app-surface);
  color: var(--app-text);
  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-dropdown hr[b-gsj3osjto1] { border-color: var(--app-border); opacity: 1; }

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

.user-menu-appearance[b-gsj3osjto1] {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem 1rem 0.6rem;
}

.user-menu-appearance-label[b-gsj3osjto1] {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--app-text-3);
}

.user-menu-item[b-gsj3osjto1] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  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;
}

.user-menu-item:hover[b-gsj3osjto1] {
  background-color: var(--app-surface-2);
  color: var(--app-text);
}

.user-menu-item-danger[b-gsj3osjto1] { color: var(--app-danger-fg); }
.user-menu-item-danger:hover[b-gsj3osjto1] {
  background-color: var(--app-danger-bg);
  color: var(--app-danger-fg);
}